Repository: helix Updated Branches: refs/heads/master 24c52394d -> b46cf019f
[helix-front] Add show/hide handle for cluster list Project: http://git-wip-us.apache.org/repos/asf/helix/repo Commit: http://git-wip-us.apache.org/repos/asf/helix/commit/b46cf019 Tree: http://git-wip-us.apache.org/repos/asf/helix/tree/b46cf019 Diff: http://git-wip-us.apache.org/repos/asf/helix/diff/b46cf019 Branch: refs/heads/master Commit: b46cf019fbeb5115c1ca9aa99f3a1b34982387c1 Parents: ca246f4 Author: Vivo Xu <[email protected]> Authored: Tue Jan 30 17:23:00 2018 -0800 Committer: Vivo Xu <[email protected]> Committed: Mon Jul 23 15:12:03 2018 -0700 ---------------------------------------------------------------------- helix-front/client/app/app.component.html | 10 ++++------ helix-front/client/app/app.component.scss | 11 ++++++++++ .../cluster-list/cluster-list.component.scss | 4 ++++ .../client/app/cluster/cluster.component.html | 3 +++ .../client/app/cluster/cluster.component.scss | 20 ++++++++++++++++++- .../app/cluster/cluster.component.spec.ts | 6 +++++- .../client/app/cluster/cluster.component.ts | 15 ++++++++++---- helix-front/client/assets/logo.png | Bin 0 -> 17174 bytes helix-front/package.json | 11 ++++++++-- 9 files changed, 66 insertions(+), 14 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/helix/blob/b46cf019/helix-front/client/app/app.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/app.component.html b/helix-front/client/app/app.component.html index 87be9e4..d30b162 100644 --- a/helix-front/client/app/app.component.html +++ b/helix-front/client/app/app.component.html @@ -1,11 +1,9 @@ <section class="app" fxLayout="column" fxFill> <mat-toolbar *ngIf="headerEnabled" class="header mat-elevation-z7" color="primary"> - <button mat-icon-button - *ngIf="isNarrowView" - (click)="sidenav.open()"> - <mat-icon>menu</mat-icon> - </button> - <h2 routerLink="/">Helix</h2> + <a mat-button routerLink="/"> + <img class="helix-logo" src="assets/logo.png" /> + <span class="helix-title">Helix</span> + </a> <span fxFlex="1 1 auto"></span> <a mat-button> <mat-icon>person</mat-icon> http://git-wip-us.apache.org/repos/asf/helix/blob/b46cf019/helix-front/client/app/app.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/app.component.scss b/helix-front/client/app/app.component.scss index 816aac0..953e3fa 100644 --- a/helix-front/client/app/app.component.scss +++ b/helix-front/client/app/app.component.scss @@ -2,6 +2,17 @@ z-index: 7; } +.helix-logo { + width: 30px; + height: 30px; + padding-right: 10px; +} + +.helix-title { + font-size: 30px; + text-transform: uppercase; +} + .mat-progress-bar { position: fixed; top: 64px; http://git-wip-us.apache.org/repos/asf/helix/blob/b46cf019/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss b/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss index cacb0d3..391ff96 100644 --- a/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss +++ b/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss @@ -1,5 +1,9 @@ @import 'client/theme.scss'; +.mat-spinner { + margin: 20px; +} + .cluster-list-item-selected h4 { font-weight: 500; color: mat-color($hi-primary); http://git-wip-us.apache.org/repos/asf/helix/blob/b46cf019/helix-front/client/app/cluster/cluster.component.html ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster.component.html b/helix-front/client/app/cluster/cluster.component.html index d1a31e8..5e41249 100644 --- a/helix-front/client/app/cluster/cluster.component.html +++ b/helix-front/client/app/cluster/cluster.component.html @@ -11,3 +11,6 @@ <router-outlet></router-outlet> </section> </mat-sidenav-container> +<button mat-mini-fab [ngClass]="['toggle-button', sidenav.opened ? 'open' : 'close']" color="" (click)="toggleSidenav(this)"> + <mat-icon>chevron_{{ sidenav.opened ? 'left' : 'right' }}</mat-icon> +</button> http://git-wip-us.apache.org/repos/asf/helix/blob/b46cf019/helix-front/client/app/cluster/cluster.component.scss ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster.component.scss b/helix-front/client/app/cluster/cluster.component.scss index 3f4d819..e913047 100644 --- a/helix-front/client/app/cluster/cluster.component.scss +++ b/helix-front/client/app/cluster/cluster.component.scss @@ -1,4 +1,22 @@ -mat-sidenav { +@import '~@angular/material/theming'; + +.mat-sidenav { width: 25vw; min-width: 200px; } + +.toggle-button { + position: fixed; + top: 50%; + z-index: 3; + transition: $swift-ease-out; + cursor: pointer; + + &.open { + left: calc(25vw - 20px); + } + + &.close { + left: -15px; + } +} http://git-wip-us.apache.org/repos/asf/helix/blob/b46cf019/helix-front/client/app/cluster/cluster.component.spec.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster.component.spec.ts b/helix-front/client/app/cluster/cluster.component.spec.ts index 730f1ff..c2d85ed 100644 --- a/helix-front/client/app/cluster/cluster.component.spec.ts +++ b/helix-front/client/app/cluster/cluster.component.spec.ts @@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core'; import { FlexLayoutModule } from '@angular/flex-layout'; +import { TestingModule } from '../../testing/testing.module'; import { ClusterComponent } from './cluster.component'; describe('ClusterComponent', () => { @@ -10,7 +11,10 @@ describe('ClusterComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [ FlexLayoutModule ], + imports: [ + FlexLayoutModule, + TestingModule + ], declarations: [ ClusterComponent ], schemas: [ /* avoid importing modules */ http://git-wip-us.apache.org/repos/asf/helix/blob/b46cf019/helix-front/client/app/cluster/cluster.component.ts ---------------------------------------------------------------------- diff --git a/helix-front/client/app/cluster/cluster.component.ts b/helix-front/client/app/cluster/cluster.component.ts index 1858eb8..08f1358 100644 --- a/helix-front/client/app/cluster/cluster.component.ts +++ b/helix-front/client/app/cluster/cluster.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { MediaChange, ObservableMedia } from '@angular/flex-layout'; @Component({ @@ -8,7 +8,9 @@ import { MediaChange, ObservableMedia } from '@angular/flex-layout'; }) export class ClusterComponent implements OnInit { - isNarrowView:boolean; + @ViewChild('sidenav') sidenav; + + isNarrowView: boolean; constructor( protected media: ObservableMedia @@ -16,10 +18,15 @@ export class ClusterComponent implements OnInit { ngOnInit() { // auto adjust side nav only if not embed - this.isNarrowView = /*this.headerEnabled &&*/ (this.media.isActive('xs') || this.media.isActive('sm')); + this.isNarrowView = (this.media.isActive('xs') || this.media.isActive('sm')); + this.media.subscribe((change: MediaChange) => { - this.isNarrowView = /*this.headerEnabled &&*/ (change.mqAlias === 'xs' || change.mqAlias === 'sm'); + this.isNarrowView = (change.mqAlias === 'xs' || change.mqAlias === 'sm'); }); } + toggleSidenav() { + this.sidenav.opened ? this.sidenav.close() : this.sidenav.open(); + } + } http://git-wip-us.apache.org/repos/asf/helix/blob/b46cf019/helix-front/client/assets/logo.png ---------------------------------------------------------------------- diff --git a/helix-front/client/assets/logo.png b/helix-front/client/assets/logo.png new file mode 100644 index 0000000..01558cc Binary files /dev/null and b/helix-front/client/assets/logo.png differ http://git-wip-us.apache.org/repos/asf/helix/blob/b46cf019/helix-front/package.json ---------------------------------------------------------------------- diff --git a/helix-front/package.json b/helix-front/package.json index b6a3f2e..bd5fdc9 100644 --- a/helix-front/package.json +++ b/helix-front/package.json @@ -1,9 +1,16 @@ { "name": "helix-front", - "version": "1.1.0", + "version": "1.2.0", "author": "Vivo Xu <[email protected]>", "license": "Apache-2.0", - "private": true, + "repository": { + "type": "git", + "url": "https://github.com/apache/helix.git"; + }, + "keywords": [ + "helix", + "ui" + ], "scripts": { "ng": "ng", "build": "rm -rf dist && mkdir dist && ng build -aot -prod && tsc -p server",
