-
+
- home Home
-
- forum Map
-
- forum Sensors
-
- forum Probes
- forum Overview
-
- forum Dashboards
- warning Alert
-
- announcement Report
-
- history Log
-
- settings Setting
-
-
+
+
+
+
+
+
+
\ 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
+
+
+
+
+
+
+
\ 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 0000000..0878bc9
Binary files /dev/null and b/src/assets/images/logo.codetok.png differ
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 0000000..8d8ad61
Binary files /dev/null and b/src/assets/images/user-image.jpg differ
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
- User profile area -
-- INFRA -
- -- MONITOR -
- -
+
+
-
\ 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
+
+
+
+
+
+
+ {{ notification.title }}
+ {{ notification.lastTime }}
+ ????
+
-
- 
+
+
+
+
+
+
+
-
+
+