You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@hertzbeat.apache.org by go...@apache.org on 2025/02/09 13:38:31 UTC
(hertzbeat) 01/02: [webapp] update ui theme
This is an automated email from the ASF dual-hosted git repository.
gongchao pushed a commit to branch ui-update
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
commit bf9d1f2b1d78c1fc19779a156f8f2ca8ff467563
Author: tomsun28 <to...@outlook.com>
AuthorDate: Sun Feb 9 16:26:51 2025 +0800
[webapp] update ui theme
Signed-off-by: tomsun28 <to...@outlook.com>
---
.../alert/alert-center/alert-center.component.less | 23 +++++-----
.../alert-integration.component.less | 45 ++++++++++----------
.../routes/setting/define/define.component.html | 4 +-
.../app/routes/setting/define/define.component.ts | 6 ++-
.../app/routes/setting/tags/tags.component.less | 49 +++++++---------------
web-app/src/app/service/theme.service.ts | 1 +
web-app/src/styles/theme.less | 5 +++
7 files changed, 61 insertions(+), 72 deletions(-)
diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.less b/web-app/src/app/routes/alert/alert-center/alert-center.component.less
index e94c31dc7a..1a383b436d 100644
--- a/web-app/src/app/routes/alert/alert-center/alert-center.component.less
+++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.less
@@ -1,3 +1,5 @@
+@import "~src/styles/theme";
+
:host ::ng-deep app-toolbar {
.center-content {
display: flex;
@@ -71,19 +73,9 @@
perspective: 1200px;
}
-:root {
- --background-color: #fff;
- --text-color: #333;
-}
-
-[data-theme='dark'] {
- --background-color: #1e1e1e;
- --text-color: #fff;
-}
-
.alert-card {
position: relative;
- background: var(--background-color);
+ background: @common-background-color;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
@@ -219,7 +211,6 @@
.alert-content {
font-size: 13px;
- color: var(--text-color);
line-height: 1.5;
}
}
@@ -394,3 +385,11 @@
.alert-card:nth-child(2) { animation-delay: 0.15s; }
.alert-card:nth-child(3) { animation-delay: 0.2s; }
.alert-card:nth-child(n+4) { animation-delay: 0.25s; }
+
+[data-theme='dark'] {
+ :host {
+ .alert-card {
+ background-color: @common-background-color-dark;
+ }
+ }
+}
diff --git a/web-app/src/app/routes/alert/alert-integration/alert-integration.component.less b/web-app/src/app/routes/alert/alert-integration/alert-integration.component.less
index 2545285277..1d5b2c77f7 100644
--- a/web-app/src/app/routes/alert/alert-integration/alert-integration.component.less
+++ b/web-app/src/app/routes/alert/alert-integration/alert-integration.component.less
@@ -1,30 +1,21 @@
-:root {
- --background-color: #fff;
- --text-color: #333;
-}
-
-[data-theme='dark'] {
- --background-color: #1e1e1e;
- --text-color: #fff;
-}
+@import "~src/styles/theme";
.alert-integration-container {
display: flex;
height: 100%;
- background: var(--background-color);
+ background: @common-background-color;
border-radius: 4px;
.data-sources {
width: 240px;
border-right: 1px solid #f0f0f0;
padding: 16px;
- background: var(--background-color);
+ background: @common-background-color;
h2 {
margin-bottom: 16px;
font-size: 16px;
font-weight: 500;
- color: var(--text-color);
}
.source-list {
@@ -49,10 +40,6 @@
height: 24px;
margin-right: 8px;
}
-
- span {
- color: var(--text-color);
- }
}
}
}
@@ -61,26 +48,36 @@
flex: 1;
padding: 24px;
overflow-y: auto;
- background: var(--background-color);
+ background: @common-background-color;
h2 {
margin-bottom: 24px;
font-size: 20px;
font-weight: 500;
- color: var(--text-color);
}
}
}
[data-theme='dark'] {
- .source-list {
- .source-item {
- &:hover {
- background: rgba(255, 255, 255, 0.1);
+ :host {
+ .alert-integration-container {
+ background: @common-background-color-dark;
+ .data-sources {
+ background: @common-background-color-dark;
}
+ .doc-content {
+ background: @common-background-color-dark;
+ }
+ .source-list {
+ .source-item {
+ &:hover {
+ background: rgba(255, 255, 255, 0.4);
+ }
- &.active {
- background: rgba(255, 255, 255, 0.2);
+ &.active {
+ background: rgba(255, 255, 255, 0.6);
+ }
+ }
}
}
}
diff --git a/web-app/src/app/routes/setting/define/define.component.html b/web-app/src/app/routes/setting/define/define.component.html
index c3f50cc968..8cf4cf1dff 100755
--- a/web-app/src/app/routes/setting/define/define.component.html
+++ b/web-app/src/app/routes/setting/define/define.component.html
@@ -27,7 +27,7 @@
<nz-divider></nz-divider>
<nz-layout style="height: 100vh; overflow: hidden">
- <nz-sider nzTheme="light" style="height: 100%; overflow: hidden" [nzTrigger]="null">
+ <nz-sider [nzTheme]="theme == 'dark' ? 'dark' : 'light'" style="height: 100%; overflow: hidden" [nzTrigger]="null">
<app-monitor-select-menu
[loading]="menuLoading"
[data]="appMenusArr"
@@ -107,7 +107,7 @@
[nzOriginalText]="originalCode"
[(ngModel)]="code"
[nzEditorMode]="'diff'"
- [nzEditorOption]="{ language: 'yaml', theme: 'vs-dark', folding: true, automaticLayout: true }"
+ [nzEditorOption]="{ language: 'yaml', theme: 'vs', folding: true, automaticLayout: true }"
></nz-code-editor>
</div>
</nz-content>
diff --git a/web-app/src/app/routes/setting/define/define.component.ts b/web-app/src/app/routes/setting/define/define.component.ts
index 7d80f05686..7246826f8c 100644
--- a/web-app/src/app/routes/setting/define/define.component.ts
+++ b/web-app/src/app/routes/setting/define/define.component.ts
@@ -28,6 +28,7 @@ import { finalize } from 'rxjs/operators';
import { AppDefineService } from '../../../service/app-define.service';
import { GeneralConfigService } from '../../../service/general-config.service';
+import { ThemeService } from '../../../service/theme.service';
@Component({
selector: 'app-define',
@@ -44,6 +45,7 @@ export class DefineComponent implements OnInit {
private startUpSvc: StartupService,
private route: ActivatedRoute,
private router: Router,
+ private themeSvc: ThemeService,
@Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
) {}
@@ -54,7 +56,8 @@ export class DefineComponent implements OnInit {
loading = false;
code: string = '';
originalCode: string = '';
- dark: boolean = true;
+ dark: boolean = false;
+ theme: string = 'default';
currentApp: any = null;
saveLoading = false;
deleteLoading = false;
@@ -66,6 +69,7 @@ export class DefineComponent implements OnInit {
this.loadAppDefineContent(this.currentApp);
}
});
+ this.theme = this.themeSvc.getTheme() || 'default';
this.loadMenus();
this.code = `${this.i18nSvc.fanyi('define.new.code')}\n\n\n\n\n`;
this.originalCode = this.i18nSvc.fanyi('define.new.code');
diff --git a/web-app/src/app/routes/setting/tags/tags.component.less b/web-app/src/app/routes/setting/tags/tags.component.less
index b16d1fdf34..f0baf69026 100644
--- a/web-app/src/app/routes/setting/tags/tags.component.less
+++ b/web-app/src/app/routes/setting/tags/tags.component.less
@@ -1,4 +1,4 @@
-@import '@delon/theme/index';
+@import "~src/styles/theme";
.tag-cards-container {
padding: 24px 0;
@@ -51,21 +51,8 @@
align-items: center;
justify-content: center;
margin-bottom: 8px;
-
- .tag-name {
- font-size: 18px;
- padding: 4px 8px;
- border-radius: 4px;
- margin: 0;
- font-weight: 500;
- line-height: 1.4;
- text-align: center;
- background: rgba(255, 255, 255, 0.8);
- }
}
-
.tag-description {
- color: rgba(35, 34, 34, 0.65);
font-size: 12px;
margin: 0;
display: -webkit-box;
@@ -78,31 +65,27 @@
}
}
-.tag-card {
- :global {
- .ant-card-body {
- padding: 12px;
- }
- }
-}
-
.tag-content {
min-height: 80px;
display: flex;
flex-direction: column;
}
-.tag-header {
- margin-bottom: 8px;
+.tag-name {
+ font-size: 18px;
+ padding: 4px 8px;
+ border-radius: 4px;
+ margin: 0;
+ font-weight: 500;
+ line-height: 1.4;
+ text-align: center;
+ background: @common-background-color;
}
-.tag-description {
- font-size: 12px;
- color: rgba(0, 0, 0, 0.65);
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- line-height: 1.5;
+[data-theme='dark'] {
+ :host {
+ .tag-name {
+ background: @common-background-color-dark;
+ }
+ }
}
diff --git a/web-app/src/app/service/theme.service.ts b/web-app/src/app/service/theme.service.ts
index cc9bc35369..f490232003 100644
--- a/web-app/src/app/service/theme.service.ts
+++ b/web-app/src/app/service/theme.service.ts
@@ -69,5 +69,6 @@ export class ThemeService {
// add new theme
this.doc.body.appendChild(style);
+ this.doc.body.setAttribute('data-theme', theme);
}
}
diff --git a/web-app/src/styles/theme.less b/web-app/src/styles/theme.less
index fc5bce2719..560c9e553d 100644
--- a/web-app/src/styles/theme.less
+++ b/web-app/src/styles/theme.less
@@ -24,6 +24,11 @@
@alain-default-aside-nav-selected-text-color: #3f51b5;
//@scrollbar-table-enabled: true;
@router-animation-enabled: true;
+@common-background-color: #fff;
+@common-background-color-dark: #141414;
+@common-tint-gray: #f2f2f2;
+@common-tint-gray-dark: #333;
+@common-tint-border: #eee;
.br-4,
.ant-btn,
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@hertzbeat.apache.org
For additional commands, e-mail: notifications-help@hertzbeat.apache.org