chore: wip

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.md

@@ -4,7 +4,7 @@
   <a href="./" target="blank"><img src="src/assets/logo.png" alt="stbui Logo" width="128" /></a>
 </p>
 
-基于最新`Angular 8`框架与`Material 2`技术的企业级中后台前端应用框架，涵盖了大量的常用组件和基础功能，您可以快速开发各种后台系统，最大程度上帮助企业节省时间成本和费用开支。
+基于最新`Angular 8`框架与`Material 2`技术的企业级中后台前端应用框架。
 
 [![Travis](https://travis-ci.org/stbui/angular-material-app.svg?branch=master)](https://travis-ci.org/stbui/angular-material-app)
 [![Docker Build Status](https://img.shields.io/docker/build/stbui/angular-material-app.svg?style=flat-square)](https://hub.docker.com/r/stbui/angular-material-app/)
@@ -19,7 +19,7 @@
 [![Angular-cli](https://img.shields.io/badge/Angular.cli-8.0.0-brightgreen.svg?style=square)](https://github.com/angular/angular-cli)
 [![Angular Material 2](https://img.shields.io/badge/Material%202-8.0.0-brightgreen.svg?style=square)](https://github.com/angular/material2)
 [![Flex-Layout](https://img.shields.io/badge/Flex.Layout-latest-brightgreen.svg?style=square)](https://github.com/angular/flex-layout)
-[![Angular FireBase](https://img.shields.io/badge/Firebase-latest-brightgreen.svg?style=square)](https://github.com/angular/angularfire2)
+[![Angular FireBase](https://img.shields.io/badge/Firebase-latest-brightgreen.svg?style=square)](https://github.com/angular/angularfire)
 [![Angular PWA](https://img.shields.io/badge/PWA-latest-brightgreen.svg?style=square)](https://github.com/angular/angular-cli)
 [![Electron](https://img.shields.io/badge/electron-latest-brightgreen.svg?style=square)](https://github.com/electron/electron)
 [![Graphql](https://img.shields.io/badge/graphql-latest-brightgreen.svg?style=square)](https://github.com/electron/electron)

docs/readme.md

@@ -1,6 +1,6 @@
 # 中后台前端应用框架
 
-基于最新`Angular 8`框架与`Material 2`技术的企业级中后台前端应用框架，涵盖了大量的常用组件和基础功能，您可以快速开发各种后台系统，最大程度上帮助企业节省时间成本和费用开支。
+基于最新`Angular 8`框架与`Material 2`技术的企业级中后台前端应用框架。
 
 - [快速入门](start.md)
 - [样式](css.md)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-material-app",
-  "description": "基于最新`8`框架与`Material 2`技术的企业级中后台前端应用框架，涵盖了大量的常用组件和基础功能，您可以快速开发各种后台系统，最大程度上帮助企业节省时间成本和费用开支。",
+  "description": "基于最新`8`框架与`Material 2`技术的企业级中后台前端应用框架。",
   "homepage": "https://github.com/stbui/angular-material-app",
   "bugs": "https://github.com/stbui/angular-material-app/issues",
   "version": "0.8.0",
@@ -27,69 +27,68 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.0.0",
-    "@angular/cdk": "~8.0.0",
-    "@angular/common": "~8.0.0",
-    "@angular/compiler": "~8.0.0",
-    "@angular/core": "~8.0.0",
-    "@angular/fire": "^5.1.0",
-    "@angular/flex-layout": "^8.0.0-beta.26",
-    "@angular/forms": "~8.0.0",
-    "@angular/material": "~8.0.0",
-    "@angular/platform-browser": "~8.0.0",
-    "@angular/platform-browser-dynamic": "~8.0.0",
-    "@angular/pwa": "^0.800.0",
-    "@angular/router": "~8.0.0",
-    "@angular/service-worker": "~8.0.0",
-    "@ngx-translate/core": "^11.0.1",
+    "@angular/animations": "~9.1.3",
+    "@angular/cdk": "~9.1.3",
+    "@angular/common": "~9.1.3",
+    "@angular/compiler": "~9.1.3",
+    "@angular/core": "~9.1.3",
+    "@angular/fire": "^6.0.0-rc.2",
+    "@angular/flex-layout": "^9.0.0-beta.29",
+    "@angular/forms": "~9.1.3",
+    "@angular/material": "~9.1.3",
+    "@angular/platform-browser": "~9.1.3",
+    "@angular/platform-browser-dynamic": "~9.1.3",
+    "@angular/pwa": "^0.901.3",
+    "@angular/router": "~9.1.3",
+    "@angular/service-worker": "~9.1.3",
+    "@ngx-translate/core": "^12.1.2",
     "@swimlane/dragula": "^3.8.0",
-    "@swimlane/ngx-charts": "^11.1.0",
-    "angular-calendar": "^0.27.8",
-    "apollo-angular": "^1.6.0",
-    "apollo-angular-link-http": "^1.6.0",
-    "apollo-cache-inmemory": "^1.6.0",
-    "apollo-client": "^2.6.0",
-    "apollo-link": "^1.2.11",
-    "apollo-link-context": "^1.0.17",
-    "core-js": "^2.5.4",
-    "date-fns": "^1.30.1",
-    "firebase": "^5.5.6",
-    "graphql": "^14.0.2",
-    "graphql-tag": "^2.10.0",
+    "@swimlane/ngx-charts": "^14.0.0",
+    "angular-calendar": "^0.28.11",
+    "core-js": "^3.6.5",
+    "date-fns": "^2.12.0",
+    "firebase": "^7.14.2",
     "hammerjs": "^2.0.8",
     "material-design-icons": "^3.0.1",
-    "ngx-perfect-scrollbar": "^7.2.1",
-    "ngx-quill": "^5.2.0",
+    "ngx-perfect-scrollbar": "^9.0.0",
+    "ngx-quill": "^8.1.7",
     "normalize.css": "^8.0.1",
-    "quill": "^1.3.6",
-    "rxjs": "~6.4.0",
-    "screenfull": "^4.0.0",
-    "zone.js": "~0.9.1"
+    "quill": "^1.3.7",
+    "rxjs": "~6.5.5",
+    "screenfull": "^5.0.2",
+    "lodash-es": "~4.17.15",
+    "simplebar": "~4.1.0",
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.0",
-    "@angular/cli": "~8.0.0",
-    "@angular/compiler-cli": "~8.0.0",
-    "@angular/language-service": "~8.0.0",
-    "@compodoc/compodoc": "^1.1.9",
-    "@types/jasmine": "~3.3.8",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "^5.0.0",
-    "conventional-changelog-cli": "^2.0.5",
-    "gh-pages": "^2.0.1",
+    "@angular-devkit/build-angular": "~0.901.3",
+    "@angular/cli": "~9.1.3",
+    "@angular/compiler-cli": "~9.1.3",
+    "@angular/language-service": "~9.1.3",
+    "@compodoc/compodoc": "^1.1.11",
+    "@types/jasmine": "~3.5.10",
+    "@types/jasminewd2": "~2.0.8",
+    "@types/node": "~13.13.4",
+    "codelyzer": "^5.2.2",
+    "conventional-changelog-cli": "^2.0.31",
+    "gh-pages": "^2.2.0",
     "gitbook-cli": "^2.3.2",
-    "jasmine-core": "~3.4.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.15.0",
-    "typescript": "~3.4.3",
-    "webpack-bundle-analyzer": "^3.3.2"
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~5.0.2",
+    "karma": "~5.0.2",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.1",
+    "karma-jasmine": "~3.1.1",
+    "karma-jasmine-html-reporter": "^1.5.3",
+    "protractor": "~5.4.4",
+    "ts-node": "~8.9.1",
+    "tslint": "~6.1.2",
+    "typescript": "~3.8.3",
+    "webpack-bundle-analyzer": "^3.7.0",
+    "@angular-devkit/architect": "~0.900",
+    "firebase-tools": "^7.12.1",
+    "fuzzy": "^0.1.3",
+    "inquirer": "^6.2.2",
+    "inquirer-autocomplete-prompt": "^1.0.1"
   }
 }

src/app/admin/admin.component.ts → src/@stbui/admin/admin.component.ts

@@ -2,15 +2,15 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { MediaObserver } from '@angular/flex-layout';
 import { Subscription } from 'rxjs';
 import { ConfigService } from '../core/config.service';
-import { NavigationService } from '../component/navigation';
+import { NavigationService } from '../navigation';
 
 import { TranslateService } from '@ngx-translate/core';
 import { TranslationService } from '../core/translation.service';
 import { locale as english } from './i18n/en';
 import { locale as chinese } from './i18n/zh';
 
 @Component({
-  selector: 'app-admin',
+  selector: 'stbui-admin',
   templateUrl: './admin.component.html',
   styleUrls: ['./admin.component.scss']
 })

src/app/admin/admin.module.ts → src/@stbui/admin/admin.module.ts

@@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { SharedModule } from '../shared/shared.module';
 
-import { NavigationModule } from '../component/navigation';
+import { NavigationModule } from '../navigation';
 import { BrandModule } from './brand/brand.module';
 import { HeaderModule } from './header/header.module';
 import { AdminComponent } from './admin.component';
@@ -17,8 +17,8 @@ import { FooterComponent } from './footer/footer.component';
     SharedModule,
     NavigationModule,
     HeaderModule,
-    BrandModule
+    BrandModule,
   ],
   declarations: [AdminComponent, CustomizerComponent, FooterComponent]
 })
-export class AdminModule {}
+export class AdminModule { }

src/app/admin/header/header.component.ts → src/@stbui/admin/header/header.component.ts

@@ -25,7 +25,7 @@ export class HeaderComponent {
   }
 
   toggleFullscreen() {
-    if (screenfull.enabled) {
+    if (screenfull.isEnabled) {
       screenfull.toggle();
       this.isFullscreen = !this.isFullscreen;
     }

src/app/admin/header/header.module.ts → src/@stbui/admin/header/header.module.ts

@@ -9,7 +9,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { ToolbarUserModule } from '../toolbar-user/toolbar-user.module';
 import { ToolbarNotificationModule } from '../toolbar-notification/toolbar-notification.module';
 import { HeaderComponent } from './header.component';
-import { LoadingModule } from '../../component/loading';
 
 @NgModule({
   imports: [
@@ -19,7 +18,6 @@ import { LoadingModule } from '../../component/loading';
     MatIconModule,
     MatToolbarModule,
     MatButtonModule,
-    LoadingModule,
     ToolbarUserModule,
     ToolbarNotificationModule
   ],

src/app/admin/toolbar-notification/toolbar-notification.component.html → src/@stbui/admin/toolbar-notification/toolbar-notification.component.html

@@ -1,7 +1,8 @@
-<div class="toolbar-notification-container">
+<div class="toolbar-notification" fxFlex="grow" fxLayout="row" fxLayoutAlign="start center">
   <button mat-icon-button (click)="toggleDropdown()">
-    <mat-icon *ngIf="!notifications.length">notifications_none</mat-icon>
-    <mat-icon [matBadge]="notifications?.length" matBadgeColor="primay" *ngIf="notifications.length">notifications_none</mat-icon>
+    <mat-icon [matBadge]="notifications?.length" matBadgeColor="primay" [matBadgeHidden]="notifications.length === 0">
+      notifications_none
+    </mat-icon>
   </button>
 
   <div class="dropdown mat-elevation-z2" [class.open]="isOpen">
@@ -24,21 +25,19 @@
 </div>
 
 <ng-template #thenBlock>
-  <perfect-scrollbar class="card-content">
-    <mat-nav-list>
-      <ng-container *ngFor="let notification of notifications; last as isLast">
-        <mat-list-item>
-          <mat-icon class="notice-icon-notifications" matListIcon>notifications</mat-icon>
-          <h3 matLine> {{ notification.title }}</h3>
-          <p matLine> {{ notification.lastTime }} </p>
-          <button mat-icon-button (click)="onDelete($event, notification)">
-            <mat-icon class="notice-icon-close">close</mat-icon>
-          </button>
-        </mat-list-item>
-        <mat-divider *ngIf="!isLast"></mat-divider>
-      </ng-container>
-    </mat-nav-list>
-  </perfect-scrollbar>
+  <mat-nav-list>
+    <ng-container *ngFor="let notification of notifications; last as isLast">
+      <mat-list-item>
+        <mat-icon class="notice-icon-notifications" matListIcon>notifications</mat-icon>
+        <h3 matLine> {{ notification.title }}</h3>
+        <p matLine> {{ notification.lastTime }} </p>
+        <button mat-icon-button type="button" (click)="onDelete($event, notification)">
+          <mat-icon class="notice-icon-close">close</mat-icon>
+        </button>
+      </mat-list-item>
+      <mat-divider *ngIf="!isLast"></mat-divider>
+    </ng-container>
+  </mat-nav-list>
 </ng-template>
 
 <ng-template #elseBlock>

src/app/admin/toolbar-notification/toolbar-notification.component.scss → src/@stbui/admin/toolbar-notification/toolbar-notification.component.scss

@@ -1,18 +1,14 @@
 .toolbar-notification {
-  &-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
+  position: relative;
 }
 
 .dropdown {
-  background: #fff;
   position: absolute;
   top: 55px;
   right: 0;
   min-width: 350px;
-  z-index: 20;
+  max-width: 350px;
+  z-index: -1;
   transform: translateY(-110%) scale(0);
   transform-origin: top right;
   visibility: hidden;
@@ -21,7 +17,10 @@
 
   @media screen and (max-width: 599px) {
     min-width: 100vw;
-    right: -147px;
+    max-width: 100vw;
+    position: fixed;
+    left: 0;
+    right: 0;
   }
 
   &.open {
@@ -31,6 +30,17 @@
 }
 
 .card {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  max-width: 100%;
+  background: white;
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: 0px 3px 1px -2px rgba(82, 63, 104, 0.06),
+    0px 2px 2px 0px rgba(82, 63, 104, 0.042),
+    0px 1px 5px 0px rgba(82, 63, 104, 0.036);
+
   &-header {
     background: #eee;
     min-height: 54px;
@@ -45,12 +55,13 @@
 
   &-extra {
     font-size: 12px;
-    color: #888;
+    color: rgba(0, 0, 0, 0.54);
   }
 
   &-content {
     overflow: hidden;
     max-height: 256px;
+    padding: 0;
   }
 
   &-footer {
@@ -93,6 +104,13 @@
   }
 }
 
+.notice-icon-close {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+}
+
 .no {
   padding: 20px;
   color: #ccc;

src/app/admin/toolbar-notification/toolbar-notification.component.ts → src/@stbui/admin/toolbar-notification/toolbar-notification.component.ts

@@ -32,7 +32,7 @@ export class ToolbarNotificationComponent {
     }
   }
 
-  constructor(private _elementRef: ElementRef) {}
+  constructor(private _elementRef: ElementRef) { }
 
   toggleDropdown() {
     this.isOpen = !this.isOpen;

src/@stbui/admin/toolbar-notification/toolbar-notification.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MaterialModule } from '../../shared/material.module'
+import { ScrollbarModule } from '../../shared/scrollbar/scrollbar.module'
+
+import { ToolbarNotificationComponent } from './toolbar-notification.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+    ScrollbarModule
+  ],
+  declarations: [ToolbarNotificationComponent],
+  exports: [ToolbarNotificationComponent]
+})
+export class ToolbarNotificationModule { }