octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-12-22 10:58:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

next-gen-gui: Add button to restore default theme (#7433)

Browse Source 
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...
This commit is contained in:
Jakob Borg 2021-03-08 12:54:08 +01:00 committed by GitHub
parent c00520281b
commit 22e44642a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
next-gen-gui/src/app/app.component.html
View File

@ -1 +1,9 @@
<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>

6
next-gen-gui/src/app/app.component.scss
View File

@ -1,4 +1,8 @@
/* Structure */
.header {
margin: 15px 3vw 12px 3vw;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
table {
width: 100%;
}

15
next-gen-gui/src/app/app.component.ts
View File

@ -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.')
})
}
}

7
next-gen-gui/src/app/dashboard/dashboard.component.html
View File

@ -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>

5
next-gen-gui/src/app/dashboard/dashboard.component.scss
View File

@ -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;
}

5
next-gen-gui/src/app/services/system-config.service.ts
View File

@ -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 })
}
}