From a69fa0eb060a8729310259d72fa7fedacb923afa Mon Sep 17 00:00:00 2001 From: insanity Date: Mon, 29 Jan 2018 18:16:30 +0900 Subject: [PATCH 1/3] covalent module has added --- .angular-cli.json | 3 +- package.json | 5 + src/app/app.module.ts | 2 + src/app/commons/layouts/layouts.module.ts | 3 +- .../commons/layouts/sidebar/menu-element.ts | 312 ++++++++++++++++++ .../layouts/sidebar/sidebar.component.html | 1 + .../layouts/sidebar/sidebar.component.scss | 0 .../layouts/sidebar/sidebar.component.spec.ts | 25 ++ .../layouts/sidebar/sidebar.component.ts | 19 ++ .../commons/ui/covalent/covalent.module.ts | 19 ++ src/app/pages/pages.component.html | 2 +- src/app/pages/pages.module.ts | 8 +- yarn.lock | 44 ++- 13 files changed, 438 insertions(+), 5 deletions(-) create mode 100644 src/app/commons/layouts/sidebar/menu-element.ts create mode 100644 src/app/commons/layouts/sidebar/sidebar.component.html create mode 100644 src/app/commons/layouts/sidebar/sidebar.component.scss create mode 100644 src/app/commons/layouts/sidebar/sidebar.component.spec.ts create mode 100644 src/app/commons/layouts/sidebar/sidebar.component.ts create mode 100644 src/app/commons/ui/covalent/covalent.module.ts diff --git a/.angular-cli.json b/.angular-cli.json index 8283fc2..d7d652a 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -19,7 +19,8 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "of", "styles": [ - "styles.scss" + "styles.scss", + "../node_modules/@covalent/core/common/platform.scss" ], "scripts": [], "environmentSource": "environments/environment.ts", diff --git a/package.json b/package.json index c5c1c10..8641694 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,11 @@ "@angular/platform-browser": "^5.2.1", "@angular/platform-browser-dynamic": "^5.2.1", "@angular/router": "^5.2.1", + "@covalent/core": "^1.0.0-rc.4", + "@covalent/dynamic-forms": "^1.0.0-rc.4", + "@covalent/highlight": "^1.0.0-rc.4", + "@covalent/http": "^1.0.0-rc.4", + "@covalent/markdown": "^1.0.0-rc.4", "@ngrx/core": "^1.2.0", "@ngrx/effects": "^5.0.1", "@ngrx/router-store": "^5.0.1", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 36fa40e..cbd6b0c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,6 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppRoutingModule } from './app-routing.module'; import { AppReducerModule } from './app-reducer.module'; import { MaterialModule } from './commons/ui/material/material.module'; +import { CovalentModule } from './commons/ui/covalent/covalent.module'; import { AppComponent } from './app.component'; @@ -19,6 +20,7 @@ import { AppComponent } from './app.component'; AppRoutingModule, AppReducerModule, MaterialModule, + CovalentModule, ], bootstrap: [AppComponent] }) diff --git a/src/app/commons/layouts/layouts.module.ts b/src/app/commons/layouts/layouts.module.ts index a7d69f8..2227898 100644 --- a/src/app/commons/layouts/layouts.module.ts +++ b/src/app/commons/layouts/layouts.module.ts @@ -1,10 +1,11 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { SidebarComponent } from './sidebar/sidebar.component'; @NgModule({ imports: [ CommonModule ], - declarations: [] + declarations: [SidebarComponent] }) export class LayoutsModule { } diff --git a/src/app/commons/layouts/sidebar/menu-element.ts b/src/app/commons/layouts/sidebar/menu-element.ts new file mode 100644 index 0000000..ae49fc7 --- /dev/null +++ b/src/app/commons/layouts/sidebar/menu-element.ts @@ -0,0 +1,312 @@ +export const menus = [ + { + 'name': 'Dashboard', + 'icon': 'dashboard', + 'link': false, + 'open': false, + 'chip': { 'value': 1, 'color': 'accent' }, + 'sub': [ + { + 'name': 'Dashboard', + 'link': '/auth/dashboard', + 'icon': 'dashboard', + 'chip': false, + 'open': true, + } + + ] + }, + { + 'name': 'Material Widget', + 'icon': 'widgets', + 'link': false, + 'open': false, + 'sub': [ + { + 'name': 'Buttons', + 'link': 'material-widgets/buttons', + 'icon': 'indeterminate_check_box', + 'chip': false, + 'open': false, + }, + { + 'name': 'List', + 'link': 'material-widgets/list', + 'icon': 'list', + 'chip': false, + 'open': false, + }, + { + + 'name': 'Stepper', + 'link': 'material-widgets/stepper', + 'icon': 'view_week', + 'chip': false, + 'open': false, + + }, + { + 'name': 'Expansion', + 'link': 'material-widgets/expansion', + 'icon': 'web_aaset', + 'chip': false, + 'open': false, + }, + { + 'name': 'Progress Spinner', + 'link': 'material-widgets/spinner', + 'icon': 'cached', + 'chip': false, + 'open': false, + }, + { + 'name': 'Cards', + 'link': 'material-widgets/cards', + 'icon': 'crop_16_9', + 'chip': false, + 'open': false, + }, + { + 'name': 'Icons', + 'link': 'material-widgets/icons', + 'icon': 'gif', + 'chip': false, + 'open': false, + }, + { + + 'name': 'AutoComplete', + 'link': 'material-widgets/autocomplete', + 'icon': 'get_app', + 'chip': false, + 'open': false, + }, + { + 'name': 'CheckBox', + 'link': 'material-widgets/checkbox', + 'icon': 'check_box', + 'chip': false, + 'open': false, + }, + { + 'name': 'DatePicker', + 'link': 'material-widgets/datepicker', + 'icon': 'date_range', + 'chip': false, + 'open': false, + }, + + { + 'name': 'Slider', + 'link': 'material-widgets/slider', + 'icon': 'keyboard_tab', + 'chip': false, + 'open': false, + + }, + { + 'name': 'Slide Toggle', + 'link': 'material-widgets/slide-toggle', + 'icon': 'album', + 'chip': false, + 'open': false, + + + }, + { + 'name': 'Menu', + 'icon': 'menu', + 'link': 'material-widgets/menu', + 'chip': false, + 'open': false, + }, + { + 'name': 'Progress Bar', + 'link': 'material-widgets/progress-bar', + 'icon': 'trending_flat', + 'chip': false, + 'open': false, + + }, + { + 'name': 'Input', + 'icon': 'input', + 'link': 'material-widgets/input', + 'open': false, + }, + { + 'name': 'Radio', + 'icon': 'radio_button_checked', + 'link': 'material-widgets/radio', + 'chip': false, + 'open': false, + }, + { + 'name': 'Select', + 'icon': 'select_all', + 'link': 'material-widgets/select', + 'open': false, + }, + ] + }, + // { + // 'name' : 'Forms', + // 'icon' : 'mode_edit', + // 'open' : false, + // 'link' : false, + // 'sub' : [ + // { + // 'name': 'Template Driven', + // 'icon': 'mode_edit', + // 'open' : false, + // 'link':'forms/template_forms' + // }, + // { + // 'name': 'Reactive Forms', + // 'icon': 'text_fields', + // 'open' : false, + // 'link':'forms/reactive_forms' + // } + // ] + // }, + { + 'name': 'Tables', + 'icon': 'list', + 'link': false, + 'open': false, + 'chip': { 'value': 2, 'color': 'accent' }, + 'sub': [ + { + 'name': 'Fixed', + 'icon': 'filter_list', + 'link': 'tables/fixed', + 'open': false, + }, + { + 'name': 'Feature', + 'icon': 'done_all', + 'link': 'tables/featured', + 'open': false, + }, + { + 'name': 'Responsive Tables', + 'icon': 'filter_center_focus', + 'link': 'tables/responsive', + 'open': false, + } + ] + + }, + { + 'name': 'Guarded Routes', + 'icon': 'mode_edit', + 'link': '/auth/guarded-routes', + 'open': false, + + + }, { + 'name': 'Scrumboard', + 'open': false, + 'link': '/auth/scrumboard', + 'icon': 'grade', + }, { + 'name': 'Applications', + 'icon': 'view_module', + 'open': false, + 'link': false, + 'sub': [ + { + 'name': 'chat', + 'icon': 'chat', + 'link': 'chats/chat', + 'open': false, + }, + { + 'name': 'mail', + 'icon': 'mail', + 'link': 'mail/mail', + 'open': false, + }, + { + 'name': 'Editor', + 'icon': 'editor', + 'link': 'editor/editor', + 'open': false, + } + ] + } + , { + 'name': 'Pages', + 'icon': 'content_copy', + 'open': false, + 'link': false, + 'sub': [ + { + 'name': 'Login', + 'icon': 'work', + 'open': false, + 'link': '../login', + }, { + 'name': 'Services', + 'icon': 'local_laundry_service', + 'open': false, + 'link': 'pages/services', + }, { + 'name': 'Contact', + 'icon': 'directions', + 'open': false, + 'link': 'pages/contact' + } + ] + } + , { + + 'name': 'Charts', + 'icon': 'pie_chart_outlined', + 'open': false, + 'link': false, + 'sub': [ + { + 'name': 'chartjs', + 'icon': 'view_list', + 'link': 'charts/chartjs', + 'open': false, + + }, + { + 'name': 'ngx-chart', + 'icon': 'show_chart', + 'open': false, + 'link': 'charts/ngx-charts', + }, + { + 'name': 'nvd3', + 'icon': 'pie_chart', + 'open': false, + 'link': 'charts/nvd3-charts', + } + + ] + }, { + 'name': 'maps', + 'icon': 'map', + 'open': false, + 'link': false, + 'sub': [ + { + 'name': 'google-map', + 'icon': 'directions', + 'link': 'maps/googlemap', + 'open': false, + }, + { + 'name': 'leaflet-map', + 'icon': 'directions', + 'link': 'maps/leafletmap', + 'open': false, + } + ] + } + + +]; diff --git a/src/app/commons/layouts/sidebar/sidebar.component.html b/src/app/commons/layouts/sidebar/sidebar.component.html new file mode 100644 index 0000000..b9f3931 --- /dev/null +++ b/src/app/commons/layouts/sidebar/sidebar.component.html @@ -0,0 +1 @@ +
sidebar
\ No newline at end of file diff --git a/src/app/commons/layouts/sidebar/sidebar.component.scss b/src/app/commons/layouts/sidebar/sidebar.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/commons/layouts/sidebar/sidebar.component.spec.ts b/src/app/commons/layouts/sidebar/sidebar.component.spec.ts new file mode 100644 index 0000000..f29709f --- /dev/null +++ b/src/app/commons/layouts/sidebar/sidebar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidebarComponent } from './sidebar.component'; + +describe('SidebarComponent', () => { + let component: SidebarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SidebarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/commons/layouts/sidebar/sidebar.component.ts b/src/app/commons/layouts/sidebar/sidebar.component.ts new file mode 100644 index 0000000..48c616d --- /dev/null +++ b/src/app/commons/layouts/sidebar/sidebar.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { menus } from './menu-element'; + +@Component({ + selector: 'of-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.scss'] +}) +export class SidebarComponent implements OnInit { + + @Input() iconOnly = false; + public menus = menus; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/commons/ui/covalent/covalent.module.ts b/src/app/commons/ui/covalent/covalent.module.ts new file mode 100644 index 0000000..c1628c2 --- /dev/null +++ b/src/app/commons/ui/covalent/covalent.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; + +import { CovalentLayoutModule } from '@covalent/core/layout'; +import { CovalentStepsModule } from '@covalent/core/steps'; +import { CovalentHighlightModule } from '@covalent/highlight'; +import { CovalentMarkdownModule } from '@covalent/markdown'; +import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms'; + +@NgModule({ + imports: [ + CovalentLayoutModule, + CovalentStepsModule, + CovalentHighlightModule, + CovalentMarkdownModule, + CovalentDynamicFormsModule, + ], +}) + +export class CovalentModule { } diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 0971530..a9e91d7 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1,4 +1,4 @@
header
-
sidebar
+
footer
\ No newline at end of file diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 90f0454..b63d680 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -2,14 +2,20 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { PagesComponent } from './pages.component'; import { PagesRoutingModule } from './pages-routing.module'; +import { SidebarComponent } from 'app/commons/layouts/sidebar/sidebar.component'; +import { CovalentModule } from 'app/commons/ui/covalent/covalent.module'; +import { MaterialModule } from 'app/commons/ui/material/material.module'; @NgModule({ imports: [ CommonModule, PagesRoutingModule, + CovalentModule, + MaterialModule ], declarations: [ - PagesComponent + PagesComponent, + SidebarComponent ] }) export class PagesModule { } diff --git a/yarn.lock b/yarn.lock index d200327..503ebd8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -164,6 +164,38 @@ dependencies: tslib "^1.7.1" +"@covalent/core@^1.0.0-rc.4": + version "1.0.0-rc.4" + resolved "https://registry.yarnpkg.com/@covalent/core/-/core-1.0.0-rc.4.tgz#11990106c38233dc4ba8bc6d295847732cd94351" + dependencies: + tslib "^1.7.1" + +"@covalent/dynamic-forms@^1.0.0-rc.4": + version "1.0.0-rc.4" + resolved "https://registry.yarnpkg.com/@covalent/dynamic-forms/-/dynamic-forms-1.0.0-rc.4.tgz#efc2b8ae059d99fabe23f27cf4f2531df2558b29" + dependencies: + "@covalent/core" "^1.0.0-rc.4" + +"@covalent/highlight@^1.0.0-rc.4": + version "1.0.0-rc.4" + resolved "https://registry.yarnpkg.com/@covalent/highlight/-/highlight-1.0.0-rc.4.tgz#1d3c4c17a0aa69cbaf6ad36ae10fafc517997b45" + dependencies: + highlight.js "9.11.0" + tslib "^1.7.1" + +"@covalent/http@^1.0.0-rc.4": + version "1.0.0-rc.4" + resolved "https://registry.yarnpkg.com/@covalent/http/-/http-1.0.0-rc.4.tgz#e600b2f5066cf4a5d36ebf018a3473673f2615cd" + dependencies: + tslib "^1.7.1" + +"@covalent/markdown@^1.0.0-rc.4": + version "1.0.0-rc.4" + resolved "https://registry.yarnpkg.com/@covalent/markdown/-/markdown-1.0.0-rc.4.tgz#94e8efbf8ffb04907ea4e8d84f30d33592ebafea" + dependencies: + showdown "1.6.4" + tslib "^1.7.1" + "@ngrx/core@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@ngrx/core/-/core-1.2.0.tgz#882b46abafa2e0e6d887cb71a1b2c2fa3e6d0dc6" @@ -2985,6 +3017,10 @@ he@1.1.x: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +highlight.js@9.11.0: + version "9.11.0" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.11.0.tgz#47f98c7399918700db2caf230ded12cec41a84ae" + hipchat-notifier@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/hipchat-notifier/-/hipchat-notifier-1.1.0.tgz#b6d249755437c191082367799d3ba9a0f23b231e" @@ -6111,6 +6147,12 @@ shell-quote@^1.6.1: array-reduce "~0.0.0" jsonify "~0.0.0" +showdown@1.6.4: + version "1.6.4" + resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.6.4.tgz#056bbb654ecdb8d8643ae12d6d597893ccaf46c6" + dependencies: + yargs "^6.6.0" + signal-exit@^3.0.0: version "3.0.2" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" @@ -7377,7 +7419,7 @@ yargs-parser@^7.0.0: dependencies: camelcase "^4.1.0" -yargs@6.6.0: +yargs@6.6.0, yargs@^6.6.0: version "6.6.0" resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208" dependencies: From fcec39e1261c020969f54c00d7c94813a1901457 Mon Sep 17 00:00:00 2001 From: insanity Date: Mon, 29 Jan 2018 18:53:30 +0900 Subject: [PATCH 2/3] layout --- .angular-cli.json | 1 + .../layouts/header/header.component.html | 11 +++ .../layouts/header/header.component.scss | 0 .../layouts/header/header.component.spec.ts | 25 ++++++ .../layouts/header/header.component.ts | 15 ++++ src/app/commons/layouts/layouts.module.ts | 3 +- .../layouts/sidebar/sidebar.component.html | 58 +++++++++++++- .../layouts/sidebar/sidebar.component.ts | 3 - .../commons/ui/covalent/covalent.module.ts | 40 +++++++--- src/app/pages/home/home-page.component.html | 2 +- src/app/pages/pages.component.html | 27 ++++++- src/app/pages/pages.module.ts | 4 +- src/styles.scss | 38 ++++++++- src/theme.scss | 78 +++++++++++++++++++ 14 files changed, 282 insertions(+), 23 deletions(-) create mode 100644 src/app/commons/layouts/header/header.component.html create mode 100644 src/app/commons/layouts/header/header.component.scss create mode 100644 src/app/commons/layouts/header/header.component.spec.ts create mode 100644 src/app/commons/layouts/header/header.component.ts create mode 100644 src/theme.scss diff --git a/.angular-cli.json b/.angular-cli.json index d7d652a..43fa50c 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -19,6 +19,7 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "of", "styles": [ + "theme.scss", "styles.scss", "../node_modules/@covalent/core/common/platform.scss" ], diff --git a/src/app/commons/layouts/header/header.component.html b/src/app/commons/layouts/header/header.component.html new file mode 100644 index 0000000..c189eee --- /dev/null +++ b/src/app/commons/layouts/header/header.component.html @@ -0,0 +1,11 @@ +
+ + + overFlow + + +
\ No newline at end of file diff --git a/src/app/commons/layouts/header/header.component.scss b/src/app/commons/layouts/header/header.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/commons/layouts/header/header.component.spec.ts b/src/app/commons/layouts/header/header.component.spec.ts new file mode 100644 index 0000000..2d0479d --- /dev/null +++ b/src/app/commons/layouts/header/header.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/commons/layouts/header/header.component.ts b/src/app/commons/layouts/header/header.component.ts new file mode 100644 index 0000000..8642bcd --- /dev/null +++ b/src/app/commons/layouts/header/header.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'of-header', + templateUrl: './header.component.html', + styleUrls: ['./header.component.scss'] +}) +export class HeaderComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/commons/layouts/layouts.module.ts b/src/app/commons/layouts/layouts.module.ts index 2227898..e72f5a4 100644 --- a/src/app/commons/layouts/layouts.module.ts +++ b/src/app/commons/layouts/layouts.module.ts @@ -1,11 +1,12 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SidebarComponent } from './sidebar/sidebar.component'; +import { HeaderComponent } from './header/header.component'; @NgModule({ imports: [ CommonModule ], - declarations: [SidebarComponent] + declarations: [SidebarComponent, HeaderComponent] }) export class LayoutsModule { } diff --git a/src/app/commons/layouts/sidebar/sidebar.component.html b/src/app/commons/layouts/sidebar/sidebar.component.html index b9f3931..4ef6fa3 100644 --- a/src/app/commons/layouts/sidebar/sidebar.component.html +++ b/src/app/commons/layouts/sidebar/sidebar.component.html @@ -1 +1,57 @@ -
sidebar
\ No newline at end of file + +
+ + +

+ User profile area +

+ + + + home Home + + + +

+ INFRA +

+ + forumMap + + forumSensors + + forumProbes + + +

+ MONITOR +

+ + forumOverview + + forumDashboards + + + + warning Alert + + + + + announcement Report + + + + + history Log + + + + + settings Setting + + + + +
+ \ No newline at end of file diff --git a/src/app/commons/layouts/sidebar/sidebar.component.ts b/src/app/commons/layouts/sidebar/sidebar.component.ts index 48c616d..3d562a3 100644 --- a/src/app/commons/layouts/sidebar/sidebar.component.ts +++ b/src/app/commons/layouts/sidebar/sidebar.component.ts @@ -8,9 +8,6 @@ import { menus } from './menu-element'; }) export class SidebarComponent implements OnInit { - @Input() iconOnly = false; - public menus = menus; - constructor() { } ngOnInit() { diff --git a/src/app/commons/ui/covalent/covalent.module.ts b/src/app/commons/ui/covalent/covalent.module.ts index c1628c2..5476306 100644 --- a/src/app/commons/ui/covalent/covalent.module.ts +++ b/src/app/commons/ui/covalent/covalent.module.ts @@ -1,19 +1,41 @@ import { NgModule } from '@angular/core'; - -import { CovalentLayoutModule } from '@covalent/core/layout'; -import { CovalentStepsModule } from '@covalent/core/steps'; -import { CovalentHighlightModule } from '@covalent/highlight'; -import { CovalentMarkdownModule } from '@covalent/markdown'; -import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms'; +import { + CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, CovalentExpansionPanelModule, + CovalentStepsModule, CovalentLoadingModule, CovalentDialogsModule, CovalentSearchModule, CovalentPagingModule, + CovalentNotificationsModule, CovalentMenuModule, CovalentDataTableModule, CovalentMessageModule + } from '@covalent/core'; @NgModule({ imports: [ + CovalentCommonModule, CovalentLayoutModule, + CovalentMediaModule, + CovalentExpansionPanelModule, CovalentStepsModule, - CovalentHighlightModule, - CovalentMarkdownModule, - CovalentDynamicFormsModule, + CovalentDialogsModule, + CovalentLoadingModule, + CovalentSearchModule, + CovalentPagingModule, + CovalentNotificationsModule, + CovalentMenuModule, + CovalentDataTableModule, + CovalentMessageModule, ], + exports : [ + CovalentCommonModule, + CovalentLayoutModule, + CovalentMediaModule, + CovalentExpansionPanelModule, + CovalentStepsModule, + CovalentDialogsModule, + CovalentLoadingModule, + CovalentSearchModule, + CovalentPagingModule, + CovalentNotificationsModule, + CovalentMenuModule, + CovalentDataTableModule, + CovalentMessageModule, + ] }) export class CovalentModule { } diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html index afc16a3..37c7a3d 100644 --- a/src/app/pages/home/home-page.component.html +++ b/src/app/pages/home/home-page.component.html @@ -1,3 +1,3 @@

- home works! + home works! home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!

diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index a9e91d7..5b0d647 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1,4 +1,23 @@ -
header
- - -
footer
\ No newline at end of file + + + + + + + + +
+ +
+ + + + + + +
+ Copyright © 2017 Loafle. All rights reserved +
+ + + \ No newline at end of file diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index b63d680..47f2ace 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -5,6 +5,7 @@ import { PagesRoutingModule } from './pages-routing.module'; import { SidebarComponent } from 'app/commons/layouts/sidebar/sidebar.component'; import { CovalentModule } from 'app/commons/ui/covalent/covalent.module'; import { MaterialModule } from 'app/commons/ui/material/material.module'; +import { HeaderComponent } from 'app/commons/layouts/header/header.component'; @NgModule({ imports: [ @@ -15,7 +16,8 @@ import { MaterialModule } from 'app/commons/ui/material/material.module'; ], declarations: [ PagesComponent, - SidebarComponent + SidebarComponent, + HeaderComponent ] }) export class PagesModule { } diff --git a/src/styles.scss b/src/styles.scss index bb13cbf..3725214 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,35 @@ -/* You can add global styles to this file, and also import other style files */ - -@import "~@angular/material/prebuilt-themes/indigo-pink.css"; +// Adjust your logo position +.mat-icon { + &.mat-icon-logo { + position: relative; + top: -4px; + } + } + + // Hack for small search box + .td-search-box { + .td-search-icon.mat-icon-button { + margin: 0; + height: 30px; + .mat-icon { + margin-top: -10px; + } + } + td-search-input { + margin-left: 0 !important; + margin-bottom: 5px; + .mat-form-field { + width: auto; + } + .mat-form-field-wrapper { + padding-bottom: 0; + } + .mat-input-infix { + padding: 0; + } + .mat-form-field-infix { + border-top: 0; + } + } + } + \ No newline at end of file diff --git a/src/theme.scss b/src/theme.scss new file mode 100644 index 0000000..b26b888 --- /dev/null +++ b/src/theme.scss @@ -0,0 +1,78 @@ +/* + * Copyright (C) 2016-2017 by Teradata Corporation. All rights reserved. + * TERADATA CORPORATION CONFIDENTIAL AND TRADE SECRET + */ + + @import '~@angular/material/theming'; + @import '~@covalent/core/theming/all-theme'; + // Plus imports for other components in your app. + + // Include the base styles for Angular Material core. We include this here so that you only + // have to load a single css file for Angular Material in your app. + @include mat-core(); + + // Define the palettes for your theme using the Material Design palettes available in palette.scss + // (imported above). For each palette, you can optionally specify a default, lighter, and darker + // hue. + $primary: mat-palette($mat-purple, 900, 100, 900); + $accent: mat-palette($mat-teal, 600, 100, 900); + + // The warn palette is optional (defaults to red). + $warn: mat-palette($mat-red, 600, 100, 900); + + // Create the theme object (a Sass map containing all of the palettes). + $theme: mat-light-theme($primary, $accent, $warn); + + // Include theme styles for core and each component used in your app. + // Alternatively, you can import and @include the theme mixins for each component + // that you are using. + @include angular-material-theme($theme); + @include covalent-theme($theme); + + // Active icon color in list nav + mat-nav-list, mat-list { + [mat-list-item].active { + mat-icon[matListAvatar] { + background-color: mat-color($accent); + color: mat-color($accent, default-contrast); + } + mat-icon[matListIcon] { + color: mat-color($accent); + } + } + } + + /* ------------------------------------------------------------------------------- */ + $foreground: map-get($theme, foreground); + $background: map-get($theme, background); + + // Apply theme for this app + + // NGX Charts + [ngx-charts-axis-label] text { + fill: mat-color($foreground, secondary-text); + } + .tick text { + fill: mat-color($foreground, disabled); + } + .gridline-path { + &.gridline-path-horizontal, + &.gridline-path-vertical { + stroke: rgba(black, 0.06); + } + } + .legend-title-text { + color: mat-color($foreground, secondary-text); + } + mat-card-title{ + &:hover { + cursor: grab; + cursor: -moz-grab; + cursor: -webkit-grab; + } + &:active { + cursor: grabbing; + cursor: -moz-grabbing; + cursor: -webkit-grabbing; + } + } \ No newline at end of file From a09706bcd36e4d0f89cf0e11defc5dd4f5b66609 Mon Sep 17 00:00:00 2001 From: insanity Date: Mon, 29 Jan 2018 18:54:59 +0900 Subject: [PATCH 3/3] layout --- .../layouts/footer/footer.component.html | 5 ++++ .../layouts/footer/footer.component.scss | 0 .../layouts/footer/footer.component.spec.ts | 25 +++++++++++++++++++ .../layouts/footer/footer.component.ts | 15 +++++++++++ src/app/commons/layouts/layouts.module.ts | 3 ++- src/app/pages/pages.component.html | 13 +--------- src/app/pages/pages.module.ts | 4 ++- 7 files changed, 51 insertions(+), 14 deletions(-) create mode 100644 src/app/commons/layouts/footer/footer.component.html create mode 100644 src/app/commons/layouts/footer/footer.component.scss create mode 100644 src/app/commons/layouts/footer/footer.component.spec.ts create mode 100644 src/app/commons/layouts/footer/footer.component.ts diff --git a/src/app/commons/layouts/footer/footer.component.html b/src/app/commons/layouts/footer/footer.component.html new file mode 100644 index 0000000..2aea852 --- /dev/null +++ b/src/app/commons/layouts/footer/footer.component.html @@ -0,0 +1,5 @@ + +
+ Copyright © 2017 Loafle. All rights reserved +
+ \ No newline at end of file diff --git a/src/app/commons/layouts/footer/footer.component.scss b/src/app/commons/layouts/footer/footer.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/commons/layouts/footer/footer.component.spec.ts b/src/app/commons/layouts/footer/footer.component.spec.ts new file mode 100644 index 0000000..2ca6c45 --- /dev/null +++ b/src/app/commons/layouts/footer/footer.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FooterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/commons/layouts/footer/footer.component.ts b/src/app/commons/layouts/footer/footer.component.ts new file mode 100644 index 0000000..12cfc41 --- /dev/null +++ b/src/app/commons/layouts/footer/footer.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'of-footer', + templateUrl: './footer.component.html', + styleUrls: ['./footer.component.scss'] +}) +export class FooterComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/commons/layouts/layouts.module.ts b/src/app/commons/layouts/layouts.module.ts index e72f5a4..9725fd9 100644 --- a/src/app/commons/layouts/layouts.module.ts +++ b/src/app/commons/layouts/layouts.module.ts @@ -2,11 +2,12 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SidebarComponent } from './sidebar/sidebar.component'; import { HeaderComponent } from './header/header.component'; +import { FooterComponent } from './footer/footer.component'; @NgModule({ imports: [ CommonModule ], - declarations: [SidebarComponent, HeaderComponent] + declarations: [SidebarComponent, HeaderComponent, FooterComponent] }) export class LayoutsModule { } diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 5b0d647..cba5356 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1,23 +1,12 @@ - - -
- - - - -
- Copyright © 2017 Loafle. All rights reserved -
- - + \ No newline at end of file diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 47f2ace..8ad6c13 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -6,6 +6,7 @@ import { SidebarComponent } from 'app/commons/layouts/sidebar/sidebar.component' import { CovalentModule } from 'app/commons/ui/covalent/covalent.module'; import { MaterialModule } from 'app/commons/ui/material/material.module'; import { HeaderComponent } from 'app/commons/layouts/header/header.component'; +import { FooterComponent } from 'app/commons/layouts/footer/footer.component'; @NgModule({ imports: [ @@ -17,7 +18,8 @@ import { HeaderComponent } from 'app/commons/layouts/header/header.component'; declarations: [ PagesComponent, SidebarComponent, - HeaderComponent + HeaderComponent, + FooterComponent, ] }) export class PagesModule { }