From 3f7b4a7322fae8732f14aa8aa0b56909fb3d57c3 Mon Sep 17 00:00:00 2001 From: insanity Date: Tue, 30 Jan 2018 15:06:23 +0900 Subject: [PATCH] layout --- .angular-cli.json | 5 +- package.json | 2 + .../layouts/footer/footer.component.html | 5 - .../layouts/header/header.component.html | 23 +- .../layouts/header/header.component.scss | 17 + .../layouts/header/header.component.ts | 11 +- .../commons/layouts/header/toolbar.helpers.ts | 22 ++ src/app/commons/layouts/layouts.module.ts | 4 +- .../menu-item/menu-item.component.html | 19 ++ .../menu-item/menu-item.component.scss | 38 +++ .../menu-item/menu-item.component.spec.ts | 25 ++ .../layouts/menu-item/menu-item.component.ts | 37 ++ .../commons/layouts/sidebar/menu-element.ts | 321 +++--------------- .../layouts/sidebar/sidebar.component.html | 66 +--- .../layouts/sidebar/sidebar.component.scss | 4 + .../layouts/sidebar/sidebar.component.ts | 3 + .../commons/ui/material/material.module.ts | 4 +- .../notification/notification.component.html | 52 +++ .../notification/notification.component.scss | 165 +++++++++ .../notification.component.spec.ts | 25 ++ .../notification/notification.component.ts | 27 ++ src/app/pages/pages.component.html | 49 ++- src/app/pages/pages.component.scss | 21 ++ src/app/pages/pages.component.ts | 14 +- src/app/pages/pages.module.ts | 23 +- src/assets/images/logo.codetok.png | Bin 0 -> 5455 bytes src/assets/images/typography.scss | 18 + src/assets/images/user-image.jpg | Bin 0 -> 7772 bytes src/environments/environment.ts | 14 + src/index.html | 21 +- src/styles.scss | 36 +- src/theme/theme.scss | 158 +++++++++ src/theme/typography.scss | 18 + yarn.lock | 21 ++ 34 files changed, 864 insertions(+), 404 deletions(-) create mode 100644 src/app/commons/layouts/header/toolbar.helpers.ts create mode 100644 src/app/commons/layouts/menu-item/menu-item.component.html create mode 100644 src/app/commons/layouts/menu-item/menu-item.component.scss create mode 100644 src/app/commons/layouts/menu-item/menu-item.component.spec.ts create mode 100644 src/app/commons/layouts/menu-item/menu-item.component.ts create mode 100644 src/app/packages/notification/notification.component.html create mode 100644 src/app/packages/notification/notification.component.scss create mode 100644 src/app/packages/notification/notification.component.spec.ts create mode 100644 src/app/packages/notification/notification.component.ts create mode 100644 src/assets/images/logo.codetok.png create mode 100644 src/assets/images/typography.scss create mode 100644 src/assets/images/user-image.jpg create mode 100644 src/theme/theme.scss create mode 100644 src/theme/typography.scss diff --git a/.angular-cli.json b/.angular-cli.json index 43fa50c..1857e91 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -19,9 +19,8 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "of", "styles": [ - "theme.scss", - "styles.scss", - "../node_modules/@covalent/core/common/platform.scss" + "theme/theme.scss", + "theme/typography.scss" ], "scripts": [], "environmentSource": "environments/environment.ts", diff --git a/package.json b/package.json index 8641694..8e1b72d 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@angular/common": "^5.2.1", "@angular/compiler": "^5.2.1", "@angular/core": "^5.2.1", + "@angular/flex-layout": "^2.0.0-beta.12", "@angular/forms": "^5.2.1", "@angular/material": "^5.1.0", "@angular/platform-browser": "^5.2.1", @@ -34,6 +35,7 @@ "@ngrx/store-devtools": "^5.0.1", "core-js": "^2.5.3", "hammerjs": "^2.0.8", + "ngx-perfect-scrollbar": "^5.3.1", "rxjs": "^5.5.6", "zone.js": "^0.8.20" }, diff --git a/src/app/commons/layouts/footer/footer.component.html b/src/app/commons/layouts/footer/footer.component.html index 2aea852..e69de29 100644 --- a/src/app/commons/layouts/footer/footer.component.html +++ b/src/app/commons/layouts/footer/footer.component.html @@ -1,5 +0,0 @@ - -
- Copyright © 2017 Loafle. All rights reserved -
- \ No newline at end of file diff --git a/src/app/commons/layouts/header/header.component.html b/src/app/commons/layouts/header/header.component.html index c189eee..61ff353 100644 --- a/src/app/commons/layouts/header/header.component.html +++ b/src/app/commons/layouts/header/header.component.html @@ -1,11 +1,12 @@ -
- - - overFlow - - -
\ No newline at end of file + + + + + + + + \ 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 index e69de29..e321b91 100644 --- a/src/app/commons/layouts/header/header.component.scss +++ b/src/app/commons/layouts/header/header.component.scss @@ -0,0 +1,17 @@ +:host { + z-index: 4; + } + + .main-toolbar { + height: 64px; + padding-left: 16px; + } + + .more-btn { + height: 100%; + min-width: 70px; + } + + .mat-icon-button { + margin-right: 10px; + } \ No newline at end of file diff --git a/src/app/commons/layouts/header/header.component.ts b/src/app/commons/layouts/header/header.component.ts index 8642bcd..9c8ed57 100644 --- a/src/app/commons/layouts/header/header.component.ts +++ b/src/app/commons/layouts/header/header.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import { ToolbarHelpers } from './toolbar.helpers'; @Component({ selector: 'of-header', @@ -7,6 +8,14 @@ import { Component, OnInit } from '@angular/core'; }) export class HeaderComponent implements OnInit { + @Input() sidenav; + @Input() sidebar; + @Input() drawer; + @Input() matDrawerShow; + + searchOpen = false; + toolbarHelpers = ToolbarHelpers; + constructor() { } ngOnInit() { diff --git a/src/app/commons/layouts/header/toolbar.helpers.ts b/src/app/commons/layouts/header/toolbar.helpers.ts new file mode 100644 index 0000000..97c5602 --- /dev/null +++ b/src/app/commons/layouts/header/toolbar.helpers.ts @@ -0,0 +1,22 @@ +export const ToolbarHelpers = { + notifications: [ + { + id: 'id', + title: 'Mail 5', + lastTime: '23 Minutes ago', + state: 'state' + }, + { + id: 'id', + title: 'Mail 5', + lastTime: '23 Minutes ago', + state: 'state' + }, + { + id: 'id', + title: 'Mail 5', + lastTime: '23 Minutes ago', + state: 'state' + }, + ], +}; diff --git a/src/app/commons/layouts/layouts.module.ts b/src/app/commons/layouts/layouts.module.ts index 9725fd9..722098b 100644 --- a/src/app/commons/layouts/layouts.module.ts +++ b/src/app/commons/layouts/layouts.module.ts @@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common'; import { SidebarComponent } from './sidebar/sidebar.component'; import { HeaderComponent } from './header/header.component'; import { FooterComponent } from './footer/footer.component'; +import { MenuItemComponent } from './menu-item/menu-item.component'; + @NgModule({ imports: [ CommonModule ], - declarations: [SidebarComponent, HeaderComponent, FooterComponent] + declarations: [SidebarComponent, HeaderComponent, FooterComponent, MenuItemComponent] }) export class LayoutsModule { } diff --git a/src/app/commons/layouts/menu-item/menu-item.component.html b/src/app/commons/layouts/menu-item/menu-item.component.html new file mode 100644 index 0000000..cb6f9ed --- /dev/null +++ b/src/app/commons/layouts/menu-item/menu-item.component.html @@ -0,0 +1,19 @@ + + + + + {{menu.icon}} + +

{{ menu.name }}

+ + {{menu?.chip?.value}} + + expand_more + + + + {{menu.icon}} +

{{ menu.name }}

+ + + diff --git a/src/app/commons/layouts/menu-item/menu-item.component.scss b/src/app/commons/layouts/menu-item/menu-item.component.scss new file mode 100644 index 0000000..ae43b86 --- /dev/null +++ b/src/app/commons/layouts/menu-item/menu-item.component.scss @@ -0,0 +1,38 @@ +@mixin mat-list-icon($size: 24px) { + font-size: $size; + height: $size; + width: $size; +} +@mixin mat-chip() { + padding: 1px 7px; +} + +@mixin menu-item($theme,$icon-size) { + .sidenav-dropdown-indicator { + transition: transform .25s; + &.indicateOpen { + transform: rotate(180deg); + } + } + mat-nav-list { + overflow: hidden; + height: 48px; + transition: height .4s cubic-bezier(.35, 0, .25, 1); + } + + .secondaryMenu { + background: mat-color($primary, 500); ; + } + + .mat-nav-list .mat-list-item .mat-list-icon{ + @include mat-list-icon($icon-size); + } + .mat-chip:not(.mat-basic-chip){ + @include mat-chip() + } + .mat-nav-list .mat-list-item { + font-size: 14px; + } + + +} diff --git a/src/app/commons/layouts/menu-item/menu-item.component.spec.ts b/src/app/commons/layouts/menu-item/menu-item.component.spec.ts new file mode 100644 index 0000000..8434313 --- /dev/null +++ b/src/app/commons/layouts/menu-item/menu-item.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MenuItemComponent } from './menu-item.component'; + +describe('MenuItemComponent', () => { + let component: MenuItemComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MenuItemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MenuItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/commons/layouts/menu-item/menu-item.component.ts b/src/app/commons/layouts/menu-item/menu-item.component.ts new file mode 100644 index 0000000..bde574a --- /dev/null +++ b/src/app/commons/layouts/menu-item/menu-item.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'of-menu-item', + templateUrl: './menu-item.component.html', + styleUrls: ['./menu-item.component.scss'] +}) +export class MenuItemComponent implements OnInit { + + @Input() menu; + @Input() iconOnly: boolean; + @Input() secondaryMenu = false; + + constructor() { } + + ngOnInit() { + } + + openLink() { + this.menu.open = this.menu.open; + } + getHeight() { + + if (this.menu.open === false) { + return '48px'; + } else { + if (this.menu && this.menu.sub) { + const height = (this.menu.sub.length * 56) + 56 + 'px'; + return height; + } + } + } + + chechForChildMenu() { + return (this.menu && this.menu.sub) ? true : false; + } +} diff --git a/src/app/commons/layouts/sidebar/menu-element.ts b/src/app/commons/layouts/sidebar/menu-element.ts index ae49fc7..4659cb7 100644 --- a/src/app/commons/layouts/sidebar/menu-element.ts +++ b/src/app/commons/layouts/sidebar/menu-element.ts @@ -1,312 +1,83 @@ 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': 'Home', + 'icon': 'home', + 'link': '/home', + 'open': true, }, { - 'name': 'Material Widget', + 'name': 'Infra', 'icon': 'widgets', 'link': false, 'open': false, 'sub': [ { - 'name': 'Buttons', - 'link': 'material-widgets/buttons', + 'name': 'Map', + 'link': '/auth/signin', 'icon': 'indeterminate_check_box', 'chip': false, 'open': false, }, { - 'name': 'List', - 'link': 'material-widgets/list', - 'icon': 'list', + 'name': 'Sensors', + 'link': '', + 'icon': 'indeterminate_check_box', 'chip': false, 'open': false, }, { - - 'name': 'Stepper', - 'link': 'material-widgets/stepper', - 'icon': 'view_week', + 'name': 'Probes', + 'link': '', + 'icon': 'indeterminate_check_box', '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', + 'name': 'Monitor', + 'icon': 'widgets', 'link': false, 'open': false, - 'chip': { 'value': 2, 'color': 'accent' }, 'sub': [ { - 'name': 'Fixed', - 'icon': 'filter_list', - 'link': 'tables/fixed', + 'name': 'Overview', + 'link': '', + 'icon': 'indeterminate_check_box', + 'chip': false, 'open': false, }, { - 'name': 'Feature', - 'icon': 'done_all', - 'link': 'tables/featured', + 'name': 'Dashboards', + 'link': '', + 'icon': 'indeterminate_check_box', + 'chip': false, '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, - } - ] - } - - + 'name': 'Alert', + 'icon': 'warning', + 'link': '', + 'open': true, + }, + { + 'name': 'Report', + 'icon': '', + 'link': '', + 'open': true, + }, + { + 'name': 'Log', + 'icon': '', + 'link': '', + 'open': true, + }, + { + 'name': 'Setting', + 'icon': '', + 'link': '', + 'open': true, + }, ]; diff --git a/src/app/commons/layouts/sidebar/sidebar.component.html b/src/app/commons/layouts/sidebar/sidebar.component.html index 4ef6fa3..d425702 100644 --- a/src/app/commons/layouts/sidebar/sidebar.component.html +++ b/src/app/commons/layouts/sidebar/sidebar.component.html @@ -1,57 +1,13 @@ - -
- + -

- 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 + + \ 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 index e69de29..6f3acaf 100644 --- a/src/app/commons/layouts/sidebar/sidebar.component.scss +++ b/src/app/commons/layouts/sidebar/sidebar.component.scss @@ -0,0 +1,4 @@ +@mixin sidemenu($theme) { + + +} \ 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 3d562a3..48c616d 100644 --- a/src/app/commons/layouts/sidebar/sidebar.component.ts +++ b/src/app/commons/layouts/sidebar/sidebar.component.ts @@ -8,6 +8,9 @@ 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/material/material.module.ts b/src/app/commons/ui/material/material.module.ts index bf16297..3b45d72 100644 --- a/src/app/commons/ui/material/material.module.ts +++ b/src/app/commons/ui/material/material.module.ts @@ -6,7 +6,7 @@ import { MatSlideToggleModule, MatInputModule, MatCheckboxModule, MatToolbarModule, MatSnackBarModule, MatSidenavModule, MatTabsModule, MatSelectModule, MatRadioModule, - MatAutocompleteModule, MatFormFieldModule + MatAutocompleteModule, MatFormFieldModule, MatChipsModule } from '@angular/material'; const MATERIAL_MODULES: any[] = [ @@ -15,7 +15,7 @@ const MATERIAL_MODULES: any[] = [ MatSlideToggleModule, MatInputModule, MatCheckboxModule, MatToolbarModule, MatSnackBarModule, MatSidenavModule, MatTabsModule, MatSelectModule, MatRadioModule, - MatAutocompleteModule, MatFormFieldModule + MatAutocompleteModule, MatFormFieldModule, MatChipsModule ]; @NgModule({ diff --git a/src/app/packages/notification/notification.component.html b/src/app/packages/notification/notification.component.html new file mode 100644 index 0000000..0129d46 --- /dev/null +++ b/src/app/packages/notification/notification.component.html @@ -0,0 +1,52 @@ + +
+ + +
+ +
+
+
+
Notifications
+
+ You have {{ notifications?.length }} new notifications
+
+ +
+
+
+
Mark all as read
+
+
+ +
+ +
+ + + +
+
+ notifications +
+
{{ notification.title }}
+
{{ notification.lastTime }}
+
+ + +
+
+
+ + + + +
????
+ \ No newline at end of file diff --git a/src/app/packages/notification/notification.component.scss b/src/app/packages/notification/notification.component.scss new file mode 100644 index 0000000..2594319 --- /dev/null +++ b/src/app/packages/notification/notification.component.scss @@ -0,0 +1,165 @@ +$prefix: 'notification'; + + +.badge { + position: absolute; + top: 0; + left: 50%; + font-weight: 700; + line-height: 13px; + height: 13px; + padding: 5px; + border-radius: 26%; + width: 30%; + background-color: #f44336; + color: #fff; + border-color:#f44336 +} + +.#{$prefix} { + &-container { + position: relative; + display: flex; + align-items: center; + } + + &-btn { + display: flex; + justify-content: center; + margin-right: 10px; + } +} +.dropdown { + background: white; + position: absolute; + top: 42px; + right: 28px; + min-width: 350px; + z-index: 2; + transform: translateY(0) scale(0); + transform-origin: top right; + visibility: hidden; + transition: transform .4s cubic-bezier(.25, .8, .25, 1), visibility .4s cubic-bezier(.25, .8, .25, 1); + + @media screen and (max-width: 599px) { + min-width: 50vw; + right: 5px; + transform: translateY(0); + visibility: hidden; + transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1); + } + + &.open { + transform: translateY(0) scale(1); + visibility: visible; + } + .card { + + .header { + background: #EEEEEE; + min-height: 54px; + padding-left: 16px; + padding-right: 8px; + color: #555; + display: flex; + justify-content: flex-start; + align-items: center; + align-content: center; + border-bottom: 1px solid #e0e0e0; + + .extra { + font-size: 12px; + color: #888; + } + } + } + .content { + overflow: hidden; + max-height: 256px; + + .notification { + min-height: 64px; + padding: 0 16px 0 14px; + position: relative; + color: #666; + cursor: pointer; + + .icon { + height: 28px; + width: 28px; + line-height: 28px; + font-size: 18px; + margin-right: 13px; + text-align: center; + border-radius: 50%; + background: #FFF; + color: #888; + border: 1px solid #EEE; + } + + .title { + font-weight: 500; + font-size: 14px; + } + + .time { + font-size: 12px; + } + + .close { + font-size: 18px; + width: 18px; + height: 18px; + line-height: 18px; + } + + &.primary { + .icon { + background: #ccc; + color: #ddd; + } + } + + &.accent { + .icon { + background: #aaa; + color: #bbb; + } + } + + &.warn { + .icon { + background: #eee; + color: #ddd; + } + } + + &.read { + color: #999; + + .name { + font-weight: normal; + } + } + } + } + + .footer { + min-height: 42px; + border-top: 1px solid #EEE; + + .action { + cursor: pointer; + color: #AAA; + text-align: center; + font-size: 13px; + } + } + + .divider { + width: calc(100% - 30px); + height: 1px; + background: #EEE; + margin: 0 16px 0 14px; + } +} \ No newline at end of file diff --git a/src/app/packages/notification/notification.component.spec.ts b/src/app/packages/notification/notification.component.spec.ts new file mode 100644 index 0000000..69192c5 --- /dev/null +++ b/src/app/packages/notification/notification.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotificationComponent } from './notification.component'; + +describe('NotificationComponent', () => { + let component: NotificationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NotificationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NotificationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/packages/notification/notification.component.ts b/src/app/packages/notification/notification.component.ts new file mode 100644 index 0000000..6acbd56 --- /dev/null +++ b/src/app/packages/notification/notification.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'of-notification', + templateUrl: './notification.component.html', + styleUrls: ['./notification.component.scss'] +}) +export class NotificationComponent implements OnInit { + + cssPrefix = 'toolbar-notification'; + isOpen = false; + @Input() notifications = []; + + constructor() { } + + ngOnInit() { + } + + select() { + + } + + delete(notification) { + + } + +} diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index cba5356..783ac93 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1,12 +1,37 @@ - - - - - -
- -
- - - - \ No newline at end of file + + + + + +

+ overFlow + .com +

+ + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + \ No newline at end of file diff --git a/src/app/pages/pages.component.scss b/src/app/pages/pages.component.scss index e69de29..30cb9c4 100644 --- a/src/app/pages/pages.component.scss +++ b/src/app/pages/pages.component.scss @@ -0,0 +1,21 @@ +@mixin auth($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + + + .sidenav,.drawer{ + background: mat-color($primary,400); + overflow: hidden; + position: relative; + } + [no-over-flow] { + overflow: hidden; + } + .router-outlet{ + position: relative;padding: 0px 5px; + } + .spacer { + width: 100%; + } +} \ No newline at end of file diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index b5c9a3f..fcaeb8c 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input, OnChanges } from '@angular/core'; @Component({ selector: 'of-pages', @@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core'; }) export class PagesComponent implements OnInit { + @Input() isVisible = true; + visibility = 'shown'; + + sideNavOpened = true; + matDrawerOpened = false; + matDrawerShow = true; + sideNavMode = 'side'; + constructor() { } ngOnInit() { + } + getRouteAnimation(outlet) { + return outlet.activatedRouteData.animation; + } } diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 8ad6c13..04a6543 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -7,19 +7,40 @@ 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'; +import { MenuItemComponent } from 'app/commons/layouts/menu-item/menu-item.component'; +import { + PerfectScrollbarModule, + PERFECT_SCROLLBAR_CONFIG, + PerfectScrollbarConfigInterface +} from 'ngx-perfect-scrollbar'; +import { NotificationComponent } from 'app/packages/notification/notification.component'; + +const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { + suppressScrollX: true +}; + @NgModule({ imports: [ CommonModule, PagesRoutingModule, CovalentModule, - MaterialModule + MaterialModule, + PerfectScrollbarModule, ], declarations: [ PagesComponent, SidebarComponent, HeaderComponent, FooterComponent, + MenuItemComponent, + NotificationComponent + ], + providers: [ + { + provide: PERFECT_SCROLLBAR_CONFIG, + useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG + } ] }) export class PagesModule { } diff --git a/src/assets/images/logo.codetok.png b/src/assets/images/logo.codetok.png new file mode 100644 index 0000000000000000000000000000000000000000..0878bc90a8bdee20af6fd693a86be57c651af5d9 GIT binary patch literal 5455 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/typography.scss b/src/assets/images/typography.scss new file mode 100644 index 0000000..1022933 --- /dev/null +++ b/src/assets/images/typography.scss @@ -0,0 +1,18 @@ +@import '~@angular/material/theming'; + +$custom-typography: mat-typography-config( + $font-family: 'Roboto, "Helvetica Neue", sans-serif', + $display-4: mat-typography-level(112px, 112px, 300), + $display-3: mat-typography-level(56px, 56px, 300), + $display-2: mat-typography-level(45px, 48px, 300), + $display-1: mat-typography-level(34px, 40px, 300), + $headline: mat-typography-level(14px, 32px, 300), + $title: mat-typography-level(20px, 32px, 300), + $subheading-2: mat-typography-level(22px, 28px, 300), + $subheading-1: mat-typography-level(15px, 24px, 300), + $body-2: mat-typography-level(14px, 24px, 300), + $body-1: mat-typography-level(14px, 20px, 300), + $caption: mat-typography-level(12px, 20px, 300), + $button: mat-typography-level(14px, 14px, 300), + $input: mat-typography-level(16px, 1.125, 300) +); \ No newline at end of file diff --git a/src/assets/images/user-image.jpg b/src/assets/images/user-image.jpg new file mode 100644 index 0000000000000000000000000000000000000000..8d8ad61f7c95f2540aa708eb946abf47ca662728 GIT binary patch literal 7772 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 literal 0 HcmV?d00001 diff --git a/src/environments/environment.ts b/src/environments/environment.ts index b7f639a..048a3c4 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -6,3 +6,17 @@ export const environment = { production: false }; +export const palete = { + primary: '#D32F2F', + accent: '#E65100', + warm: '#C2185B', + name: '#D50000', + secondary: '#D81B60', + tertiary: '#8E24AA', + quaternary: '#5E35B1', + quinary: '#3949AB', + secondaryLight: '#E91E63', + tertiaryLight: '#9C27B0', + quaternaryLight: '#673AB7', + quinaryLight: '#3F51B5' +}; diff --git a/src/index.html b/src/index.html index ec32371..ce9b4a0 100644 --- a/src/index.html +++ b/src/index.html @@ -1,15 +1,32 @@ + - OverflowWebapp + overFlow + + + + + + +
+ + - + + \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 3725214..bc676e4 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,35 +1 @@ -// 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 +@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; \ No newline at end of file diff --git a/src/theme/theme.scss b/src/theme/theme.scss new file mode 100644 index 0000000..8c9b261 --- /dev/null +++ b/src/theme/theme.scss @@ -0,0 +1,158 @@ +@import '~@angular/material/theming'; +@import '~app/pages/pages.component.scss'; +@import '~app/commons/layouts/sidebar/sidebar.component.scss'; +@import '~app/commons/layouts/menu-item/menu-item.component.scss'; + +$mat-light-theme-background: ( + status-bar: map_get($mat-grey, 300), + app-bar: map_get($mat-grey, 100), + background: map_get($mat-indigo, 50), + hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX + card: white, + dialog: white, + disabled-button: $black-12-opacity, + raised-button: white, + focused-button: $black-6-opacity, + selected-button: map_get($mat-grey, 300), + selected-disabled-button: map_get($mat-grey, 400), + disabled-button-toggle: map_get($mat-grey, 200), + unselected-chip: map_get($mat-grey, 300), + disabled-list-option: map_get($mat-grey, 200), +); + +@include mat-core(); + +$primary : $mat-indigo; +$accent : $mat-orange; +$warn : $mat-red; + + + +$primary-app-primary: mat-palette($primary , 400); +$primary-app-accent: mat-palette($accent , 900); +$primary-app-warn: mat-palette($warn ); +$cdk-theme: mat-light-theme($primary-app-primary, $primary-app-accent,$primary-app-warn); + +of-sidebar{ + $sidebar-app-primary: mat-palette($primary , 400); + $sidebar-app-accent: mat-palette($accent , 900); + $sidebar-app-warn: mat-palette($warn ); + $cdk-sidebar-theme: mat-dark-theme($sidebar-app-primary, $sidebar-app-accent,$sidebar-app-warn); + @include mat-list-theme($cdk-sidebar-theme); +} + + +of-menu-item{ + @include menu-item($cdk-theme,20px) +} + +@include angular-material-theme($cdk-theme); +@include auth($cdk-theme); + +html { + height:100%; +} +body{ + padding: 0px !important; + margin: 0px !important; + height:100%; +} +.components-container-gt-xs { + padding: 20px; + // background-color: #fdfdfd; +} +.components-container-xs { + padding: 5px !important; + // background-color: #fdfdfd; +} +.component-preview { + padding: 20px; +} +.ps-content { + height: 100%; +} + +.loader-container { + background-color: white; + width: 100vw; + height: 100vh; + z-index: 2000; + position: absolute; + + -moz-animation: cssAnimation 1s ease-in 3s forwards; + /* Firefox */ + animation: cssAnimation 1s ease-in 3s forwards; + /* Safari and Chrome */ + -o-animation: cssAnimation 1s ease-in 3s forwards; + /* Opera */ + animation: cssAnimation 1s ease-in 3s forwards; + animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +@keyframes cssAnimation { + to { + opacity:0; + display: none; + visibility:hidden; + } +} +@keyframes cssAnimation { + to { + visibility:hidden; + opacity:0; + display: none; + } +} + + + +.spinner { + margin: 50vh auto 0; + width: 70px; + text-align: center; +} + +.spinner > div { + width: 18px; + height: 18px; + + + border-radius: 100%; + display: inline-block; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; +} + +.bounce3 { + background-color: orange; +} + +.spinner .bounce1 { + background-color: blue; + animation-delay: -0.32s; + animation-delay: -0.32s; +} + +.spinner .bounce2 { + background-color: red; + animation-delay: -0.16s; + animation-delay: -0.16s; +} + + + +@keyframes sk-bouncedelay { + 0%, 80%, 100% { transform: scale(0) } + 40% { transform: scale(1.0) } +} + +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + transform: scale(0); + transform: scale(0); + } 40% { + transform: scale(1.0); + transform: scale(1.0); + } +} \ No newline at end of file diff --git a/src/theme/typography.scss b/src/theme/typography.scss new file mode 100644 index 0000000..1022933 --- /dev/null +++ b/src/theme/typography.scss @@ -0,0 +1,18 @@ +@import '~@angular/material/theming'; + +$custom-typography: mat-typography-config( + $font-family: 'Roboto, "Helvetica Neue", sans-serif', + $display-4: mat-typography-level(112px, 112px, 300), + $display-3: mat-typography-level(56px, 56px, 300), + $display-2: mat-typography-level(45px, 48px, 300), + $display-1: mat-typography-level(34px, 40px, 300), + $headline: mat-typography-level(14px, 32px, 300), + $title: mat-typography-level(20px, 32px, 300), + $subheading-2: mat-typography-level(22px, 28px, 300), + $subheading-1: mat-typography-level(15px, 24px, 300), + $body-2: mat-typography-level(14px, 24px, 300), + $body-1: mat-typography-level(14px, 20px, 300), + $caption: mat-typography-level(12px, 20px, 300), + $button: mat-typography-level(14px, 14px, 300), + $input: mat-typography-level(16px, 1.125, 300) +); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 503ebd8..27cd440 100644 --- a/yarn.lock +++ b/yarn.lock @@ -130,6 +130,12 @@ dependencies: tslib "^1.7.1" +"@angular/flex-layout@^2.0.0-beta.12": + version "2.0.0-beta.12" + resolved "https://registry.yarnpkg.com/@angular/flex-layout/-/flex-layout-2.0.0-beta.12.tgz#80970dc1d60f27fa41537659926f3238f759f343" + dependencies: + tslib "^1.7.1" + "@angular/forms@^5.2.1": version "5.2.1" resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-5.2.1.tgz#530f1249bc71d9560297be642d55a5a6c439d920" @@ -4434,6 +4440,13 @@ netmask@~1.0.4: version "1.0.6" resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35" +ngx-perfect-scrollbar@^5.3.1: + version "5.3.1" + resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-5.3.1.tgz#7fcfb26a93554ac60d0444bfaa4b9487f23c5cbc" + dependencies: + perfect-scrollbar "^1.3.0" + resize-observer-polyfill "^1.4.0" + no-case@^2.2.0: version "2.3.2" resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac" @@ -4990,6 +5003,10 @@ pbkdf2@^3.0.3: safe-buffer "^5.0.1" sha.js "^2.4.8" +perfect-scrollbar@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2" + performance-now@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5" @@ -5855,6 +5872,10 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" +resize-observer-polyfill@^1.4.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69" + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"