diff --git a/src/app/pages/editors/editors-routing.module.ts b/src/app/pages/editors/editors-routing.module.ts index e7cb2af9..25350f27 100644 --- a/src/app/pages/editors/editors-routing.module.ts +++ b/src/app/pages/editors/editors-routing.module.ts @@ -9,16 +9,13 @@ const routes: Routes = [ { path: '', component: NgxEditorsComponent, - children: [ - { - path: 'tinymce', - component: NgxTinyMCEComponent, - }, - { - path: 'ckeditor', - component: NgxCKEditorComponent, - }, - ], + children: [{ + path: 'tinymce', + component: NgxTinyMCEComponent, + }, { + path: 'ckeditor', + component: NgxCKEditorComponent, + }], }, ]; diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index 27c5546f..e96c7b29 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -2,50 +2,52 @@ import { NgaMenuItem } from '@nga/theme'; import { List } from 'immutable'; -export const menuItems: List = List([ - { - title: 'Dashboard', - icon: 'ion ion-ios-home-outline', - link: '/pages/dashboard', - home: true, - }, - { - title: 'FEATURES', - group: true, - }, - { - title: 'UI Features', - icon: 'ion ion-ios-keypad-outline', - link: '/pages/ui-features', - }, - { - title: 'Components', - icon: 'ion ion-ios-gear-outline', - link: '/pages/components', - }, - { - title: 'Maps', - icon: 'ion ion-ios-location-outline', - link: '/pages/maps', - }, - { - title: 'Charts', - icon: 'ion ion-arrow-graph-up-right', - link: '/pages/charts', - }, - { - title: 'Editors', - icon: 'ion ion-edit', - link: '/pages/editors', - children: List([ - { - title: 'TinyMCE', - link: '/pages/editors/tinymce', - }, - { - title: 'CKEditor', - link: '/pages/editors/ckeditor', - }, - ]), - }, -]); +export const menuItems: List = List([{ + title: 'Dashboard', + icon: 'ion ion-ios-home-outline', + link: '/pages/dashboard', + home: true, +}, { + title: 'FEATURES', + group: true, +}, { + title: 'UI Features', + icon: 'ion ion-ios-keypad-outline', + link: '/pages/ui-features', + children: List([{ + title: 'Buttons', + link: '/pages/ui-features/buttons', + }, { + title: 'Grid', + link: '/pages/ui-features/grid', + }, { + title: 'Icons', + link: '/pages/ui-features/icons', + }, { + title: 'Modals', + link: '/pages/ui-features/modals', + }]), +}, { + title: 'Components', + icon: 'ion ion-ios-gear-outline', + link: '/pages/components', +}, { + title: 'Maps', + icon: 'ion ion-ios-location-outline', + link: '/pages/maps', +}, { + title: 'Charts', + icon: 'ion ion-arrow-graph-up-right', + link: '/pages/charts', +}, { + title: 'Editors', + icon: 'ion ion-edit', + link: '/pages/editors', + children: List([{ + title: 'TinyMCE', + link: '/pages/editors/tinymce', + }, { + title: 'CKEditor', + link: '/pages/editors/ckeditor', + }]), +}]); diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index dd163ac6..d4688f72 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -3,7 +3,6 @@ import { NgModule } from '@angular/core'; import { PagesComponent } from './pages.component'; import { DashboardComponent } from './dashboard/dashboard.component'; -import { UiFeaturesComponent } from './ui-features/ui-features.component'; import { ComponentsComponent } from './components/components.component'; import { MapsComponent } from './maps/maps.component'; import { NgxChartsComponent } from './charts/charts.component'; @@ -15,7 +14,7 @@ const routes: Routes = [ component: PagesComponent, children: [ { path: 'dashboard', component: DashboardComponent }, - { path: 'ui-features', component: UiFeaturesComponent }, + { path: 'ui-features', loadChildren: './ui-features/ui-features.module#NgxUiFeaturesModule' }, { path: 'components', component: ComponentsComponent }, { path: 'maps', component: MapsComponent }, { path: 'charts', component: NgxChartsComponent }, diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index c29c7c3c..48f62e29 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -8,7 +8,6 @@ import { PagesComponent } from './pages.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { PagesRoutingModule } from './pages-routing.module'; import { ThemeModule } from '../@theme/theme.module'; -import { UiFeaturesComponent } from './ui-features/ui-features.component'; import { MapsComponent } from './maps/maps.component'; import { ComponentsComponent } from './components/components.component'; import { NgxChartsComponent } from './charts/charts.component'; @@ -16,7 +15,6 @@ import { NgxChartsComponent } from './charts/charts.component'; const PAGES_COMPONENTS = [ PagesComponent, DashboardComponent, - UiFeaturesComponent, MapsComponent, ComponentsComponent, NgxChartsComponent, diff --git a/src/app/pages/ui-features/buttons/buttons.component.html b/src/app/pages/ui-features/buttons/buttons.component.html new file mode 100644 index 00000000..8113113f --- /dev/null +++ b/src/app/pages/ui-features/buttons/buttons.component.html @@ -0,0 +1,86 @@ +
+
+ + + Flat buttons + + + + + +
+
+ + + Raised buttons + + + + + +
+
+ + + Different sizes + + + + + +
+
+ + + Disabled + + + + + +
+
+
+
+ + + Icon buttons + + + + + +
+
+ + + Button dropdowns + + + + + +
+
+
+
+ + + Large buttons + + + + + +
+
+ + + Button groups + + + + + +
+
diff --git a/src/app/pages/ui-features/buttons/buttons.component.scss b/src/app/pages/ui-features/buttons/buttons.component.scss new file mode 100644 index 00000000..af89eef1 --- /dev/null +++ b/src/app/pages/ui-features/buttons/buttons.component.scss @@ -0,0 +1,128 @@ +:host { + display: block; + /deep/ { + .basic-btns { + padding-top: 8px; + margin-bottom: -8px; + h5 { + line-height: 35px; + font-size: 12px; + &.row-sm { + line-height: 30px; + } + &.row-xs { + line-height: 22px; + } + } + & { + .row { + padding-bottom: 4px; + } + } + } + .btns-row { + & { + div { + margin-bottom: 12px; + } + } + } + .btns-same-width-sm { + .btn { + width: 48px; + } + } + .btns-same-width-md { + .btn { + width: 79px; + } + } + .btns-same-width-lg { + .btn { + width: 112px; + } + } + ul.btn-list { + margin: 0 0 0 -18px; + padding: 0; + padding-top: 6px; + clear: both; + li { + margin: 0 0 12px 18px; + padding: 0; + list-style: none; + float: left; + } + } + .btn-group-wrapper { + margin-bottom: 12px; + } + $btn-icon-size: 34px; + .btn-icon { + width: $btn-icon-size; + height: $btn-icon-size; + line-height: $btn-icon-size; + padding: 0; + text-align: center; + } + .btn-group-example { + float: left; + margin-right: 30px; + margin-bottom: 12px; + } + .btn-toolbar-example { + float: left; + } + .progress-buttons-container { + text-align: center; + font-size: 16px; + span.button-title { + display: inline-block; + width: 100%; + line-height: 1; + font-size: 14px; + margin-bottom: 10px; + margin-top: 10px; + } + .row + .row { + margin-top: 30px; + } + } + .button-panel { + height: 315px; + .btn { + width: 150px; + } + } + .large-buttons-panel { + height: 202px; + } + .button-panel.df-size-button-panel { + .btn-xs { + width: 60px; + } + .btn-sm { + width: 90px; + } + .btn-mm { + width: 120px; + } + .btn-md { + width: 150px; + } + .btn-xm { + width: 175px; + } + .btn-lg { + width: 200px; + } + } + .button-wrapper { + text-align: center; + margin: 5px 0; + } + .btn-group.flex-dropdown { + display: flex; + } + } +} diff --git a/src/app/pages/ui-features/buttons/buttons.component.ts b/src/app/pages/ui-features/buttons/buttons.component.ts new file mode 100644 index 00000000..b1b1e7e8 --- /dev/null +++ b/src/app/pages/ui-features/buttons/buttons.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-buttons', + styleUrls: ['./buttons.component.scss'], + templateUrl: './buttons.component.html', +}) +export class NgxButtonsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/buttons/disabled/disabled.component.html b/src/app/pages/ui-features/buttons/disabled/disabled.component.html new file mode 100644 index 00000000..b38e8ed7 --- /dev/null +++ b/src/app/pages/ui-features/buttons/disabled/disabled.component.html @@ -0,0 +1,18 @@ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
diff --git a/src/app/pages/ui-features/buttons/disabled/disabled.component.ts b/src/app/pages/ui-features/buttons/disabled/disabled.component.ts new file mode 100644 index 00000000..62dea802 --- /dev/null +++ b/src/app/pages/ui-features/buttons/disabled/disabled.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-disabled-buttons', + templateUrl: './disabled.component.html', +}) +export class NgxDisabledButtonsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/buttons/dropdown/dropdown.component.html b/src/app/pages/ui-features/buttons/dropdown/dropdown.component.html new file mode 100644 index 00000000..8178cc89 --- /dev/null +++ b/src/app/pages/ui-features/buttons/dropdown/dropdown.component.html @@ -0,0 +1,181 @@ +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
Split button dropdowns
+ +
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
diff --git a/src/app/pages/ui-features/buttons/dropdown/dropdown.component.ts b/src/app/pages/ui-features/buttons/dropdown/dropdown.component.ts new file mode 100644 index 00000000..0e89143b --- /dev/null +++ b/src/app/pages/ui-features/buttons/dropdown/dropdown.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-dropdown-buttons', + templateUrl: './dropdown.component.html', +}) +export class NgxDropdownButtonsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/buttons/flat/flat.component.html b/src/app/pages/ui-features/buttons/flat/flat.component.html new file mode 100644 index 00000000..4dcdff70 --- /dev/null +++ b/src/app/pages/ui-features/buttons/flat/flat.component.html @@ -0,0 +1,18 @@ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
diff --git a/src/app/pages/ui-features/buttons/flat/flat.component.ts b/src/app/pages/ui-features/buttons/flat/flat.component.ts new file mode 100644 index 00000000..5aa61f41 --- /dev/null +++ b/src/app/pages/ui-features/buttons/flat/flat.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-flat-buttons', + templateUrl: './flat.component.html', +}) +export class NgxFlatButtonsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/buttons/group/group.component.html b/src/app/pages/ui-features/buttons/group/group.component.html new file mode 100644 index 00000000..ceeb6f62 --- /dev/null +++ b/src/app/pages/ui-features/buttons/group/group.component.html @@ -0,0 +1,26 @@ +
+
+ + + +
+
+ +
+ +
diff --git a/src/app/pages/ui-features/buttons/group/group.component.ts b/src/app/pages/ui-features/buttons/group/group.component.ts new file mode 100644 index 00000000..a34443ef --- /dev/null +++ b/src/app/pages/ui-features/buttons/group/group.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-group-buttons', + templateUrl: './group.component.html', +}) +export class NgxGroupButtonsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/buttons/icon/icon.component.html b/src/app/pages/ui-features/buttons/icon/icon.component.html new file mode 100644 index 00000000..32fc38ce --- /dev/null +++ b/src/app/pages/ui-features/buttons/icon/icon.component.html @@ -0,0 +1,44 @@ + + +
Buttons with icons
+ + diff --git a/src/app/pages/ui-features/buttons/icon/icon.component.ts b/src/app/pages/ui-features/buttons/icon/icon.component.ts new file mode 100644 index 00000000..a3a1227b --- /dev/null +++ b/src/app/pages/ui-features/buttons/icon/icon.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-icon-buttons', + templateUrl: './icon.component.html', +}) +export class NgxIconButtonsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/buttons/large/large.component.html b/src/app/pages/ui-features/buttons/large/large.component.html new file mode 100644 index 00000000..c6314e5d --- /dev/null +++ b/src/app/pages/ui-features/buttons/large/large.component.html @@ -0,0 +1,20 @@ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
diff --git a/src/app/pages/ui-features/buttons/large/large.component.ts b/src/app/pages/ui-features/buttons/large/large.component.ts new file mode 100644 index 00000000..3f5d1aa5 --- /dev/null +++ b/src/app/pages/ui-features/buttons/large/large.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-large-buttons', + templateUrl: './large.component.html', +}) +export class NgxLargeButtonsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/buttons/raised/raised.component.html b/src/app/pages/ui-features/buttons/raised/raised.component.html new file mode 100644 index 00000000..65ce60af --- /dev/null +++ b/src/app/pages/ui-features/buttons/raised/raised.component.html @@ -0,0 +1,18 @@ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
diff --git a/src/app/pages/ui-features/buttons/raised/raised.component.ts b/src/app/pages/ui-features/buttons/raised/raised.component.ts new file mode 100644 index 00000000..4f73e13a --- /dev/null +++ b/src/app/pages/ui-features/buttons/raised/raised.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-raised-buttons', + templateUrl: './raised.component.html', +}) +export class NgxRaisedButtonsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/buttons/sized/sized.component.html b/src/app/pages/ui-features/buttons/sized/sized.component.html new file mode 100644 index 00000000..f26f2195 --- /dev/null +++ b/src/app/pages/ui-features/buttons/sized/sized.component.html @@ -0,0 +1,18 @@ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
diff --git a/src/app/pages/ui-features/buttons/sized/sized.component.ts b/src/app/pages/ui-features/buttons/sized/sized.component.ts new file mode 100644 index 00000000..ef2697cc --- /dev/null +++ b/src/app/pages/ui-features/buttons/sized/sized.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-sized-buttons', + templateUrl: './sized.component.html', +}) +export class NgxSizedButtonsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/grid/grid.component.ts b/src/app/pages/ui-features/grid/grid.component.ts new file mode 100644 index 00000000..a9aab951 --- /dev/null +++ b/src/app/pages/ui-features/grid/grid.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-grid', + template: ` +

grid works!

+ `, +}) +export class NgxGridComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/icons/icons.component.ts b/src/app/pages/ui-features/icons/icons.component.ts new file mode 100644 index 00000000..2b3f1c08 --- /dev/null +++ b/src/app/pages/ui-features/icons/icons.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-icons', + template: ` +

icons works!

+ `, +}) +export class NgxIconsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/modals/modals.component.ts b/src/app/pages/ui-features/modals/modals.component.ts new file mode 100644 index 00000000..a0d8ddeb --- /dev/null +++ b/src/app/pages/ui-features/modals/modals.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-modals', + template: ` +

modals works!

+ `, +}) +export class NgxModalsComponent implements OnInit { + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/app/pages/ui-features/ui-features-routing.module.ts b/src/app/pages/ui-features/ui-features-routing.module.ts new file mode 100644 index 00000000..535d24e0 --- /dev/null +++ b/src/app/pages/ui-features/ui-features-routing.module.ts @@ -0,0 +1,58 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { NgxUiFeaturesComponent } from './ui-features.component'; +import { NgxButtonsComponent } from './buttons/buttons.component'; +import { NgxGridComponent } from './grid/grid.component'; +import { NgxIconsComponent } from './icons/icons.component'; +import { NgxModalsComponent } from './modals/modals.component'; +import { NgxFlatButtonsComponent } from './buttons/flat/flat.component'; +import { NgxRaisedButtonsComponent } from './buttons/raised/raised.component'; +import { NgxSizedButtonsComponent } from './buttons/sized/sized.component'; +import { NgxDisabledButtonsComponent } from './buttons/disabled/disabled.component'; +import { NgxIconButtonsComponent } from './buttons/icon/icon.component'; +import { NgxDropdownButtonsComponent } from './buttons/dropdown/dropdown.component'; +import { NgxLargeButtonsComponent } from './buttons/large/large.component'; +import { NgxGroupButtonsComponent } from './buttons/group/group.component'; + +const routes: Routes = [ + { + path: '', + component: NgxUiFeaturesComponent, + children: [{ + path: 'buttons', + component: NgxButtonsComponent, + }, { + path: 'grid', + component: NgxGridComponent, + }, { + path: 'icons', + component: NgxIconsComponent, + }, { + path: 'modals', + component: NgxModalsComponent, + }], + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class NgxUiFeaturesRoutingModule { } + +export const routedComponents = [ + NgxUiFeaturesComponent, + NgxButtonsComponent, + NgxGridComponent, + NgxIconsComponent, + NgxModalsComponent, + NgxFlatButtonsComponent, + NgxRaisedButtonsComponent, + NgxSizedButtonsComponent, + NgxDisabledButtonsComponent, + NgxIconButtonsComponent, + NgxDropdownButtonsComponent, + NgxLargeButtonsComponent, + NgxGroupButtonsComponent, +]; diff --git a/src/app/pages/ui-features/ui-features.component.ts b/src/app/pages/ui-features/ui-features.component.ts index 60856a5f..79e58f0d 100644 --- a/src/app/pages/ui-features/ui-features.component.ts +++ b/src/app/pages/ui-features/ui-features.component.ts @@ -1,12 +1,10 @@ import { Component } from '@angular/core'; @Component({ - selector: 'ui-features', + selector: 'ngx-ui-features', template: ` -

- ui-features works! -

+ `, }) -export class UiFeaturesComponent { +export class NgxUiFeaturesComponent { } diff --git a/src/app/pages/ui-features/ui-features.module.ts b/src/app/pages/ui-features/ui-features.module.ts new file mode 100644 index 00000000..baa56262 --- /dev/null +++ b/src/app/pages/ui-features/ui-features.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; + +import { NgxSharedModule } from '../../@shared/shared.module'; + +import { NgxUiFeaturesRoutingModule, routedComponents } from './ui-features-routing.module'; + +@NgModule({ + imports: [ + NgxSharedModule, + NgxUiFeaturesRoutingModule, + ], + declarations: [ + ...routedComponents, + ], +}) +export class NgxUiFeaturesModule { }