From fcec39e1261c020969f54c00d7c94813a1901457 Mon Sep 17 00:00:00 2001 From: insanity Date: Mon, 29 Jan 2018 18:53:30 +0900 Subject: [PATCH] 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