From 8a3be852a8864f445f15aaaba3c4e902f0d6e1aa Mon Sep 17 00:00:00 2001 From: Timon Back Date: Sat, 27 Jul 2024 17:37:34 +0200 Subject: [PATCH 1/4] feat(ui): improve colors in header and responsiveness --- .../src/app/components/header/header.component.css | 7 ++++--- .../src/app/components/header/header.component.html | 4 ++-- springwolf-ui/src/styles.scss | 3 ++- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/springwolf-ui/src/app/components/header/header.component.css b/springwolf-ui/src/app/components/header/header.component.css index 3d36a159a..0f10ed07c 100644 --- a/springwolf-ui/src/app/components/header/header.component.css +++ b/springwolf-ui/src/app/components/header/header.component.css @@ -5,13 +5,14 @@ display: block; } -h1, :host ::ng-deep label, a { - text-decoration: none; - color: white; + color: var(--mat-toolbar-container-text-color); } +a { + text-decoration: none; +} a:hover { color: lightgray; } diff --git a/springwolf-ui/src/app/components/header/header.component.html b/springwolf-ui/src/app/components/header/header.component.html index 12b0c0c61..b9c24c280 100644 --- a/springwolf-ui/src/app/components/header/header.component.html +++ b/springwolf-ui/src/app/components/header/header.component.html @@ -1,5 +1,5 @@ - + -

{{ title }}

+

{{ title }}

Date: Sat, 27 Jul 2024 17:38:27 +0200 Subject: [PATCH 2/4] feat(ui): improve sidebar tags --- .../src/app/components/new/sidenav/sidenav.component.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css index 79af526fd..4813a03c5 100644 --- a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css +++ b/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css @@ -11,6 +11,7 @@ a { .sidenav .entry.selected > span > a { font-weight: bold; + color: var(--mat-app-text-color); } .sidenav .entry.collapsed { display: none; @@ -24,10 +25,10 @@ a { .sidenav .badge { text-transform: uppercase; font-size: smaller; - word-break: break-all; border-radius: 0.3em; padding: 0 0.1em; + margin: 0 0 auto 0; } .sidenav .badge.send-badge { color: var(--springwolf-badge-color-send); From 7006151a19353a0abff5ed3aee0dddd5813916e1 Mon Sep 17 00:00:00 2001 From: Timon Back Date: Mon, 29 Jul 2024 02:46:45 +0200 Subject: [PATCH 3/4] feat(ui): add back github icon --- springwolf-ui/angular.json | 2 -- springwolf-ui/src/app/app.component.ts | 13 ++++++++++++- .../src/app/components/header/header.component.css | 7 +++++++ .../src/app/components/header/header.component.html | 4 ++-- springwolf-ui/src/assets/github.svg | 1 + 5 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 springwolf-ui/src/assets/github.svg diff --git a/springwolf-ui/angular.json b/springwolf-ui/angular.json index a95db15b0..566bad7e4 100644 --- a/springwolf-ui/angular.json +++ b/springwolf-ui/angular.json @@ -30,8 +30,6 @@ "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": [ - "src/_redirects", - "src/favicon.ico", "src/assets" ], "styles": [ diff --git a/springwolf-ui/src/app/app.component.ts b/springwolf-ui/src/app/app.component.ts index dc9f29ae4..3774e6ad2 100644 --- a/springwolf-ui/src/app/app.component.ts +++ b/springwolf-ui/src/app/app.component.ts @@ -1,6 +1,8 @@ /* SPDX-License-Identifier: Apache-2.0 */ import { Component, OnInit } from "@angular/core"; import { UiService } from "./service/ui.service"; +import { DomSanitizer } from "@angular/platform-browser"; +import { MatIconRegistry } from "@angular/material/icon"; @Component({ selector: "app-root", @@ -10,7 +12,16 @@ import { UiService } from "./service/ui.service"; export class AppComponent implements OnInit { isNewUi: boolean = true; - constructor(private uiService: UiService) {} + constructor( + private iconRegistry: MatIconRegistry, + private sanitizer: DomSanitizer, + private uiService: UiService + ) { + this.iconRegistry.addSvgIcon( + "github", + this.sanitizer.bypassSecurityTrustResourceUrl("assets/github.svg") + ); + } ngOnInit() { this.uiService.isNewUi$.subscribe((value) => (this.isNewUi = value)); diff --git a/springwolf-ui/src/app/components/header/header.component.css b/springwolf-ui/src/app/components/header/header.component.css index 0f10ed07c..f05e858a4 100644 --- a/springwolf-ui/src/app/components/header/header.component.css +++ b/springwolf-ui/src/app/components/header/header.component.css @@ -16,3 +16,10 @@ a { a:hover { color: lightgray; } + +:host ::ng-deep mat-icon { + height: 3em; + width: 3em; + transform: scale(0.75); + filter: invert(100%); +} diff --git a/springwolf-ui/src/app/components/header/header.component.html b/springwolf-ui/src/app/components/header/header.component.html index b9c24c280..719a634db 100644 --- a/springwolf-ui/src/app/components/header/header.component.html +++ b/springwolf-ui/src/app/components/header/header.component.html @@ -17,7 +17,7 @@

{{ title }}

-
+
{{ title }} >   - GitHub +
diff --git a/springwolf-ui/src/assets/github.svg b/springwolf-ui/src/assets/github.svg new file mode 100644 index 000000000..580e51cc7 --- /dev/null +++ b/springwolf-ui/src/assets/github.svg @@ -0,0 +1 @@ + From 28a076f7d3383c66cadb0e13ddb94415cbd90b7e Mon Sep 17 00:00:00 2001 From: Timon Back Date: Mon, 29 Jul 2024 18:20:48 +0200 Subject: [PATCH 4/4] chore(ui): load svg with mock-server --- springwolf-ui/src/app/service/mock/mock-server.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/springwolf-ui/src/app/service/mock/mock-server.ts b/springwolf-ui/src/app/service/mock/mock-server.ts index f9f5f8d8e..708233971 100644 --- a/springwolf-ui/src/app/service/mock/mock-server.ts +++ b/springwolf-ui/src/app/service/mock/mock-server.ts @@ -26,7 +26,7 @@ export class MockServer implements InMemoryDbService { }); } - return undefined; + return reqInfo.utils.getPassThruBackend().handle(reqInfo.req); } post(reqInfo: RequestInfo) { @@ -38,7 +38,7 @@ export class MockServer implements InMemoryDbService { }); } - return undefined; + return reqInfo.utils.getPassThruBackend().handle(reqInfo.req); } private selectMockData() {