diff options
author | Jakob Borg <jakob@kastelo.net> | 2021-03-08 12:54:08 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-08 12:54:08 +0100 |
commit | 22e44642a0221f68f56c302384a1d21f0c20ac22 (patch) | |
tree | b303d333d119696a9d280d518ebdbeeb59e57b8d /next-gen-gui | |
parent | c00520281b68f744e856ae8b9d39b1947a9cedf9 (diff) | |
download | syncthing-22e44642a0221f68f56c302384a1d21f0c20ac22.tar.gz syncthing-22e44642a0221f68f56c302384a1d21f0c20ac22.zip |
next-gen-gui: Add button to restore default theme (#7433)
This adds a button in the top right that changes the config back to the
default theme.
Code wise, it takes the header that was previously a part of the
dashboard component and moves it to the app component, and then adds the
button there. Possibly the header should be a component of it's own, but
that's more of refactor that can happen separately I think.
The config change uses the new config API to just patch the relevant
setting.
I'm not doing an automatic reload because 1) I don't want to figure out
how to do it correctly and 2) this doesn't work reliably anyway, as
for example the current gen GUI does a reload and ends up with
connection refused as the API service is still reloading...
Diffstat (limited to 'next-gen-gui')
-rw-r--r-- | next-gen-gui/src/app/app.component.html | 10 | ||||
-rw-r--r-- | next-gen-gui/src/app/app.component.scss | 6 | ||||
-rw-r--r-- | next-gen-gui/src/app/app.component.ts | 15 | ||||
-rw-r--r-- | next-gen-gui/src/app/dashboard/dashboard.component.html | 7 | ||||
-rw-r--r-- | next-gen-gui/src/app/dashboard/dashboard.component.scss | 5 | ||||
-rw-r--r-- | next-gen-gui/src/app/services/system-config.service.ts | 5 |
6 files changed, 34 insertions, 14 deletions
diff --git a/next-gen-gui/src/app/app.component.html b/next-gen-gui/src/app/app.component.html index 2e52e9df0..d176fda39 100644 --- a/next-gen-gui/src/app/app.component.html +++ b/next-gen-gui/src/app/app.component.html @@ -1 +1,9 @@ -<app-dashboard></app-dashboard>
\ No newline at end of file +<div class="header" fxLayout="row" fxLayoutAlign="space-between center"> + <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center"> + <img src="assets/logo-horizontal.svg" width="150px" /> + <span>Tech UI</span> + </div> + <button mat-stroked-button (click)="restoreDefaultTheme()">Restore default theme</button> +</div> + +<app-dashboard></app-dashboard> diff --git a/next-gen-gui/src/app/app.component.scss b/next-gen-gui/src/app/app.component.scss index 6df0acfc4..f24418fbd 100644 --- a/next-gen-gui/src/app/app.component.scss +++ b/next-gen-gui/src/app/app.component.scss @@ -1,4 +1,8 @@ -/* Structure */ +.header { + margin: 15px 3vw 12px 3vw; + font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; +} + table { width: 100%; } diff --git a/next-gen-gui/src/app/app.component.ts b/next-gen-gui/src/app/app.component.ts index d198fcdfa..db826164b 100644 --- a/next-gen-gui/src/app/app.component.ts +++ b/next-gen-gui/src/app/app.component.ts @@ -1,4 +1,6 @@ import { Component } from '@angular/core'; +import { SystemConfigService } from './services/system-config.service'; +import { MessageService } from './services/message.service'; @Component({ selector: 'app-root', @@ -6,5 +8,16 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.scss'] }) export class AppComponent { - constructor() { } + constructor( + private systemConfigService: SystemConfigService, + private messageService: MessageService, + ) { } + + restoreDefaultTheme(): void { + this.systemConfigService + .setGUITheme('default') + .subscribe(() => { + this.messageService.add('The default GUI theme has been selected. Please hit "Reload" in your browser.') + }) + } } diff --git a/next-gen-gui/src/app/dashboard/dashboard.component.html b/next-gen-gui/src/app/dashboard/dashboard.component.html index 31bd7fd6f..4e525403d 100644 --- a/next-gen-gui/src/app/dashboard/dashboard.component.html +++ b/next-gen-gui/src/app/dashboard/dashboard.component.html @@ -1,12 +1,7 @@ <!--<div class="grid-container" gdAreas="header header | folders devices | status-list status-list | footer footer" gdGap="16px" gdRows="auto auto auto"> --> <!--<div class="grid-container" fxLayout="row" fxLayoutGap="16px grid" fxLayoutAlign="stretch">--> -<div class="header" fxLayout="row" fxLayoutAlign="space-between center"> - <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center"> - <img src="assets/logo-horizontal.svg" width="150px" /> - <span>Tech UI</span> - </div> -</div> + <div class="progress"> <mat-progress-bar mode="determinate" value="{{progressValue}}" [@progressBar]="isLoading ? 'start' : 'done'"> </mat-progress-bar> diff --git a/next-gen-gui/src/app/dashboard/dashboard.component.scss b/next-gen-gui/src/app/dashboard/dashboard.component.scss index ddeec0bd2..3fd8c2b3f 100644 --- a/next-gen-gui/src/app/dashboard/dashboard.component.scss +++ b/next-gen-gui/src/app/dashboard/dashboard.component.scss @@ -1,8 +1,3 @@ -.header { - margin: 15px 3vw 12px 3vw; - font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; -} - .progress { margin: 0 3vw 0 3vw; } diff --git a/next-gen-gui/src/app/services/system-config.service.ts b/next-gen-gui/src/app/services/system-config.service.ts index e359ca75a..f18ba79fd 100644 --- a/next-gen-gui/src/app/services/system-config.service.ts +++ b/next-gen-gui/src/app/services/system-config.service.ts @@ -20,6 +20,7 @@ export class SystemConfigService { private devicesSubject: ReplaySubject<Device[]> = new ReplaySubject(1); private systemConfigUrl = environment.production ? apiURL + 'rest/system/config' : 'api/config'; + private guiConfigUrl = environment.production ? apiURL + 'rest/config/gui' : 'api/config/gui'; constructor( private http: HttpClient, @@ -52,4 +53,8 @@ export class SystemConfigService { getDevices(): Observable<Device[]> { return this.devicesSubject.asObservable(); } + + setGUITheme(theme: String): Observable<any> { + return this.http.patch(this.guiConfigUrl, { theme: theme }) + } }
\ No newline at end of file |