From 23d3553d996a7840203eb150a189f79db29bb047 Mon Sep 17 00:00:00 2001 From: death-claw <53543762+death-claw@users.noreply.github.com> Date: Fri, 6 Dec 2019 23:09:57 +0100 Subject: [PATCH] Include startup icon Fix UI layout --- vripper-ui/src/app/app.component.html | 36 ++++-- vripper-ui/src/app/app.component.scss | 81 ++++++++++-- vripper-ui/src/app/app.component.ts | 51 +++----- vripper-ui/src/app/material.module.ts | 2 - .../post-progress.renderer.component.html | 121 +----------------- .../post-progress.renderer.component.scss | 11 ++ .../app/status-bar/status-bar.component.ts | 12 +- .../src/app/toolbar/toolbar.component.ts | 8 +- vripper-ui/src/styles.scss | 20 --- 9 files changed, 145 insertions(+), 197 deletions(-) diff --git a/vripper-ui/src/app/app.component.html b/vripper-ui/src/app/app.component.html index 47e41c6..a97e2dd 100644 --- a/vripper-ui/src/app/app.component.html +++ b/vripper-ui/src/app/app.component.html @@ -1,17 +1,25 @@ -
- -

Loading...

-
-
- error -

The app seems to be shutdown

-
-
-
- + +
+
+
+
+
+
+
+
+
-
- +
+ error +

Error connecting to daemon, try restarting the application

+
+
+
+ +
+
+ +
-
+ diff --git a/vripper-ui/src/app/app.component.scss b/vripper-ui/src/app/app.component.scss index f8b2104..7a305b6 100644 --- a/vripper-ui/src/app/app.component.scss +++ b/vripper-ui/src/app/app.component.scss @@ -1,13 +1,76 @@ -#title { - user-select: none -} - .overlay-icon { - font-size: 128px; - width: 128px; - height: 128px; + font-size: 64px; + width: 64px; + height: 64px; } -.no-connection { - color: #eb6060; +.no-connection, .loading { + background-color: #2c3e50; } + +.overlay { + position: absolute; + display: block; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 2000; +} + +.sk-chase { + width: 60px; + height: 60px; + position: relative; + animation: sk-chase 2.5s infinite linear both; +} + +.sk-chase-dot { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + animation: sk-chase-dot 2.0s infinite ease-in-out both; +} + +.sk-chase-dot:before { + content: ''; + display: block; + width: 25%; + height: 25%; + background-color: #fff; + border-radius: 100%; + animation: sk-chase-dot-before 2.0s infinite ease-in-out both; +} + +.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; } +.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; } +.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; } +.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; } +.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; } +.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; } +.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; } +.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; } +.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; } +.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; } +.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; } +.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; } + +@keyframes sk-chase { + 100% { transform: rotate(360deg); } +} + +@keyframes sk-chase-dot { + 80%, 100% { transform: rotate(360deg); } +} + +@keyframes sk-chase-dot-before { + 50% { + transform: scale(0.4); + } 100%, 0% { + transform: scale(1.0); + } +} \ No newline at end of file diff --git a/vripper-ui/src/app/app.component.ts b/vripper-ui/src/app/app.component.ts index e97bf88..adb102c 100644 --- a/vripper-ui/src/app/app.component.ts +++ b/vripper-ui/src/app/app.component.ts @@ -1,56 +1,47 @@ import { AppService } from './app.service'; import { ClipboardService } from './clipboard.service'; import { ElectronService } from 'ngx-electron'; -import { Component, OnInit, OnDestroy, NgZone, AfterViewInit, Renderer2 } from '@angular/core'; +import { Component, OnDestroy, AfterViewInit, Renderer2, ChangeDetectionStrategy, NgZone } from '@angular/core'; import { MatDialog } from '@angular/material'; -import { Subscription } from 'rxjs'; +import { Subscription, BehaviorSubject, Subject } from 'rxjs'; import { WsConnectionService, WSState } from './ws-connection.service'; -import { WsHandler } from './ws-handler'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + styleUrls: ['./app.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) -export class AppComponent implements OnInit, OnDestroy, AfterViewInit { +export class AppComponent implements OnDestroy, AfterViewInit { constructor( - public dialog: MatDialog, + private dialog: MatDialog, private ws: WsConnectionService, public electronService: ElectronService, private clipboardService: ClipboardService, - private ngZone: NgZone, private appService: AppService, - private renderer: Renderer2 - ) {} - - subscriptions: Subscription[] = []; - websocketHandlerPromise: Promise; - currentState: WSState; - themeLoaded = false; - - noConnectionState(): boolean { - return this.currentState === WSState.CLOSE || this.currentState === WSState.ERROR; + private renderer: Renderer2, + private ngZone: NgZone + ) { + this.electron = new BehaviorSubject(electronService.isElectronApp); } - connecting(): boolean { - return (this.currentState === WSState.INIT || this.currentState === WSState.CONNECTING) && !this.themeLoaded ; - } + private subscriptions: Subscription[] = []; + appState: Subject = new BehaviorSubject('CONNECTING'); + electron: Subject; ngAfterViewInit() { this.appService.renderer = this.renderer; - } - - ngOnInit() { - this.currentState = WSState.INIT; - this.subscriptions.push(this.ws.state.subscribe(e => { - this.currentState = e; - if (this.currentState === WSState.CLOSE || this.currentState === WSState.ERROR) { - this.dialog.closeAll(); - } else if (this.currentState === WSState.OPEN) { + this.subscriptions.push(this.ws.state.subscribe(wsState => { + if (wsState === WSState.CLOSE || wsState === WSState.ERROR) { + setTimeout(() => this.ngZone.run(() => { + this.dialog.closeAll(); + this.appState.next('DISCONNECTED'); + }), 500); + } else if (wsState === WSState.OPEN) { this.clipboardService.init(); this.appService .loadTheme() - .subscribe(() => this.ngZone.run(() => this.themeLoaded = true)); + .subscribe(() => this.ngZone.run(() => this.appState.next('CONNECTED'))); } })); } diff --git a/vripper-ui/src/app/material.module.ts b/vripper-ui/src/app/material.module.ts index f2b7cd9..4e2b96e 100644 --- a/vripper-ui/src/app/material.module.ts +++ b/vripper-ui/src/app/material.module.ts @@ -7,7 +7,6 @@ import { MatIconModule, MatFormFieldModule, MatInputModule, - MatProgressSpinnerModule, MatMenuModule, MatDialogModule, MatCardModule, @@ -28,7 +27,6 @@ import { MatIconModule, MatInputModule, MatFormFieldModule, - MatProgressSpinnerModule, MatMenuModule, MatDialogModule, MatCardModule, diff --git a/vripper-ui/src/app/posts/post-progress.renderer.component.html b/vripper-ui/src/app/posts/post-progress.renderer.component.html index 0cbfdf4..fc92bc4 100644 --- a/vripper-ui/src/app/posts/post-progress.renderer.component.html +++ b/vripper-ui/src/app/posts/post-progress.renderer.component.html @@ -1,110 +1,3 @@ - -
+ + {{ postState.title }} + {{ postState.done + '/' + postState.total }} from {{ postState.hosts }} - {{postState.done + '/' + postState.total}} done from {{postState.hosts}} - diff --git a/vripper-ui/src/app/posts/post-progress.renderer.component.scss b/vripper-ui/src/app/posts/post-progress.renderer.component.scss index a547e30..87e9164 100644 --- a/vripper-ui/src/app/posts/post-progress.renderer.component.scss +++ b/vripper-ui/src/app/posts/post-progress.renderer.component.scss @@ -1,3 +1,14 @@ .checkbox { background-color: transparent; } + +.row-text { + white-space: nowrap; + overflow: hidden; +} + +.row-text > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} \ No newline at end of file diff --git a/vripper-ui/src/app/status-bar/status-bar.component.ts b/vripper-ui/src/app/status-bar/status-bar.component.ts index b534b90..0fb5669 100644 --- a/vripper-ui/src/app/status-bar/status-bar.component.ts +++ b/vripper-ui/src/app/status-bar/status-bar.component.ts @@ -38,9 +38,11 @@ export class StatusBarComponent implements OnInit, OnDestroy, AfterViewInit { selected: EventEmitter = new EventEmitter(); ngAfterViewInit(): void { - this.selected.emit(0); - this.globalState.emit(new GlobalState(0, 0, 0, 0)); - this.downloadSpeed.emit(new DownloadSpeed('0 B')); + this.ngZone.run(() => { + this.selected.emit(0); + this.globalState.emit(new GlobalState(0, 0, 0, 0)); + this.downloadSpeed.emit(new DownloadSpeed('0 B')); + }); } ngOnInit() { @@ -63,7 +65,9 @@ export class StatusBarComponent implements OnInit, OnDestroy, AfterViewInit { handler.send(new WSMessage(CMD.GLOBAL_STATE_SUB.toString())); handler.send(new WSMessage(CMD.SPEED_SUB.toString())); }); - this.subscriptions.push(this.selectionService.selected$.subscribe(selected => this.selected.emit(selected.length))); + this.subscriptions.push( + this.selectionService.selected$.subscribe(selected => this.ngZone.run(() => this.selected.emit(selected.length))) + ); } ngOnDestroy(): void { diff --git a/vripper-ui/src/app/toolbar/toolbar.component.ts b/vripper-ui/src/app/toolbar/toolbar.component.ts index 2cc4b87..3e1fa0c 100644 --- a/vripper-ui/src/app/toolbar/toolbar.component.ts +++ b/vripper-ui/src/app/toolbar/toolbar.component.ts @@ -210,8 +210,10 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { } ngAfterViewInit(): void { - this.disableSelection.next(true); - this.loggedUser.emit(new LoggedUser(null)); + this.ngZone.run(() => { + this.disableSelection.next(true); + this.loggedUser.emit(new LoggedUser(null)); + }); } ngOnInit() { @@ -229,7 +231,7 @@ export class ToolbarComponent implements OnInit, OnDestroy, AfterViewInit { this.selectionService.selected$.subscribe(selected => { this.selected = selected; - this.disableSelection.next(this.selected.length === 0); + this.ngZone.run(() => this.disableSelection.next(this.selected.length === 0)); }); } diff --git a/vripper-ui/src/styles.scss b/vripper-ui/src/styles.scss index 1a1e03a..c71c9e3 100644 --- a/vripper-ui/src/styles.scss +++ b/vripper-ui/src/styles.scss @@ -75,26 +75,6 @@ app-root { margin: 8px; } -.overlay { - position: absolute; - display: block; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 2000; -} - -.loading { - background-color: whitesmoke; -} - -.no-connection { - background-color: whitesmoke !important; -} - #app-container { position: fixed; display: block;