Upstream
/
harbor
mirror of https://github.com/goharbor/harbor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add theme of dark 

Signed-off-by: Yogi_Wang <yawang@vmware.com>
This commit is contained in:
Yogi_Wang 2019-12-13 11:23:44 +08:00
parent 3f53aa9476
commit ecef852407
58 changed files with 391 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/portal/angular.json
View File

@ -15,6 +15,7 @@
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"extractCss": true,
"assets": [
"src/images",
"src/favicon.ico",
@ -27,7 +28,17 @@
"node_modules/swagger-ui/dist/swagger-ui.css",
"node_modules/prismjs/themes/prism-solarizedlight.css",
"src/global.scss",
"src/styles.css"
"src/styles.css",
{
"input": "src/css/dark-theme.scss",
"bundleName": "dark-theme",
"lazy": true
},
{
"input": "src/css/light-theme.scss",
"bundleName": "light-theme",
"lazy": true
}
],
"scripts": [
"node_modules/core-js/client/shim.min.js",

8
src/portal/package-lock.json generated
View File

@ -8333,7 +8333,7 @@
"dependencies": {
"form-data": {
"version": "1.0.1",
"resolved": "http://registry.npmjs.org/form-data/-/form-data-1.0.1.tgz",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-1.0.1.tgz",
"integrity": "sha1-rjFduaSQf6BlUCMEpm13M0de43w=",
"requires": {
"async": "^2.0.1",
@ -10251,7 +10251,7 @@
},
"next-tick": {
"version": "1.0.0",
"resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
},
"ng-packagr": {
@ -12874,7 +12874,7 @@
},
"reselect": {
"version": "2.5.4",
"resolved": "http://registry.npmjs.org/reselect/-/reselect-2.5.4.tgz",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-2.5.4.tgz",
"integrity": "sha1-t9I/3wC4P6etAnlUb427vXZccEc="
},
"resolve": {
@ -13496,7 +13496,7 @@
},
"serialize-error": {
"version": "2.1.0",
"resolved": "http://registry.npmjs.org/serialize-error/-/serialize-error-2.1.0.tgz",
"resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-2.1.0.tgz",
"integrity": "sha1-ULZ51WNc34Rme9yOWa9OW4HV9go="
},
"serialize-javascript": {

28
src/portal/src/app/app.component.ts
View File

@ -19,18 +19,29 @@ import { CookieService } from 'ngx-cookie';
import { SessionService } from './shared/session.service';
import { AppConfigService } from './app-config.service';
import { ThemeService } from './theme.service';
import { themeArray, ThemeInterface } from './theme';
import { clone } from '../lib/utils/utils';
const HAS_STYLE_MODE: string = 'styleModeLocal';
@Component({
selector: 'harbor-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
themeArray: ThemeInterface[] = clone(themeArray);
styleMode: string = this.themeArray[0].showStyle;
constructor(
private translate: TranslateService,
private cookie: CookieService,
private session: SessionService,
private appConfigService: AppConfigService,
private titleService: Title) {
private titleService: Title,
public theme: ThemeService
) {
// Override page title
let key: string = "APP_TITLE.HARBOR";
if (this.appConfigService.isIntegrationMode()) {
@ -40,5 +51,20 @@ export class AppComponent {
translate.get(key).subscribe((res: string) => {
this.titleService.setTitle(res);
});
this.setTheme();
}
setTheme () {
let styleMode = this.themeArray[0].showStyle;
const localHasStyle = localStorage && localStorage.getItem(HAS_STYLE_MODE);
if (localHasStyle) {
styleMode = localStorage.getItem(HAS_STYLE_MODE);
} else {
localStorage.setItem(HAS_STYLE_MODE, styleMode);
}
this.themeArray.forEach((themeItem) => {
if (themeItem.showStyle === styleMode) {
this.theme.loadStyle(themeItem.currentFileName);
}
});
}
}

23
src/portal/src/app/app.module.ts
View File

@ -46,7 +46,6 @@ import { ProjectQuotasComponent } from './project-quotas/project-quotas.componen
import { HarborLibraryModule } from "../lib/harbor-library.module";
import { HTTP_INTERCEPTORS } from '@angular/common/http';
registerLocaleData(zh, 'zh-cn');
registerLocaleData(es, 'es-es');
registerLocaleData(localeFr, 'fr-fr');
@ -90,16 +89,16 @@ export function getCurrentLanguage(translateService: TranslateService) {
exports: [
],
providers: [
AppConfigService,
SkinableConfig,
{
provide: APP_INITIALIZER,
useFactory: initConfig,
deps: [ AppConfigService, SkinableConfig],
multi: true
},
{provide: LOCALE_ID, useValue: "en-US"},
{ provide: HTTP_INTERCEPTORS, useClass: InterceptHttpService, multi: true }
AppConfigService,
SkinableConfig,
{
provide: APP_INITIALIZER,
useFactory: initConfig,
deps: [AppConfigService, SkinableConfig],
multi: true
},
{ provide: LOCALE_ID, useValue: "en-US" },
{ provide: HTTP_INTERCEPTORS, useClass: InterceptHttpService, multi: true }
],
schemas: [
@ -107,4 +106,4 @@ export function getCurrentLanguage(translateService: TranslateService) {
],
bootstrap: [AppComponent]
})
export class AppModule {}
export class AppModule { }

6
src/portal/src/app/base/global-search/search.component.scss
View File

@ -19,12 +19,6 @@
position: relative;
}
.search-title {
font-size: 28px;
letter-spacing: normal;
color: #000;
}
.search-close {
position: absolute;
right: 24px;

18
src/portal/src/app/base/harbor-shell/harbor-shell.component.html
View File

@ -8,16 +8,17 @@
</span>
</div>
<div class="clr-col-2 right">
<a class="all-scanners" href="#" routerLink="/harbor/interrogation-services/scanners">{{'SCANNER.ALL_SCANNERS' | translate }}</a>
<a class="all-scanners" href="#"
routerLink="/harbor/interrogation-services/scanners">{{'SCANNER.ALL_SCANNERS' | translate }}</a>
<clr-icon (click)="closeInfo()" class="close-icon" shape="times" size="24"></clr-icon>
</div>
</div>
<global-message [isAppLevel]="true"></global-message>
<global-message [isAppLevel]="true" ></global-message>
<navigator (showAccountSettingsModal)="openModal($event)" (showDialogModalAction)="openModal($event)"></navigator>
<div class="content-container">
<div class="content-area" [class.container-override]="showSearch"
[class.content-area-override]="!shouldOverrideContent"
[class.start-content-padding]="shouldOverrideContent">
[class.content-area-override]="!shouldOverrideContent"
[class.start-content-padding]="shouldOverrideContent">
<global-message [isAppLevel]="false"></global-message>
<!-- Only appear when searching -->
<search-result></search-result>
@ -42,7 +43,8 @@
<clr-icon shape="users" clrVerticalNavIcon></clr-icon>
{{'SIDE_NAV.SYSTEM_MGMT.USER' | translate}}
</a>
<a *ngIf='isLdapMode || isHttpAuthMode || isOidcMode' clrVerticalNavLink routerLink="/harbor/groups" routerLinkActive="active">
<a *ngIf='isLdapMode || isHttpAuthMode || isOidcMode' clrVerticalNavLink
routerLink="/harbor/groups" routerLinkActive="active">
<clr-icon shape="users" clrVerticalNavIcon></clr-icon>
{{'SIDE_NAV.SYSTEM_MGMT.GROUP' | translate}}
</a>
@ -54,7 +56,8 @@
<clr-icon shape="cloud-traffic" clrVerticalNavIcon></clr-icon>
{{'SIDE_NAV.SYSTEM_MGMT.REPLICATION' | translate}}
</a>
<a *ngIf="!withAdmiral" clrVerticalNavLink routerLink="/harbor/labels" routerLinkActive="active">
<a *ngIf="!withAdmiral" clrVerticalNavLink routerLink="/harbor/labels"
routerLinkActive="active">
<clr-icon shape="tag" clrVerticalNavIcon></clr-icon>
{{'CONFIG.LABEL' | translate }}
</a>
@ -84,6 +87,7 @@
</button>
</a>
</div>
</clr-vertical-nav>
<hbr-operation-model *ngIf="isUserExisting"></hbr-operation-model>
</div>
@ -91,4 +95,4 @@
<account-settings-modal></account-settings-modal>
<password-setting></password-setting>
<confiramtion-dialog></confiramtion-dialog>
<about-dialog></about-dialog>
<about-dialog></about-dialog>

14
src/portal/src/app/base/harbor-shell/harbor-shell.component.ts
View File

@ -39,16 +39,16 @@ const YES: string = 'yes';
export class HarborShellComponent implements OnInit, OnDestroy {
@ViewChild(AccountSettingsModalComponent, {static: false})
@ViewChild(AccountSettingsModalComponent, { static: false })
accountSettingsModal: AccountSettingsModalComponent;
@ViewChild(PasswordSettingComponent, {static: false})
@ViewChild(PasswordSettingComponent, { static: false })
pwdSetting: PasswordSettingComponent;
@ViewChild(NavigatorComponent, {static: false})
@ViewChild(NavigatorComponent, { static: false })
navigator: NavigatorComponent;
@ViewChild(AboutDialogComponent, {static: false})
@ViewChild(AboutDialogComponent, { static: false })
aboutDialog: AboutDialogComponent;
// To indicator whwther or not the search results page is displayed
@ -62,14 +62,14 @@ export class HarborShellComponent implements OnInit, OnDestroy {
isHttpAuthMode: boolean;
showScannerInfo: boolean = false;
scannerDocUrl: string = SCANNERS_DOC;
constructor(
private route: ActivatedRoute,
private router: Router,
private session: SessionService,
private searchTrigger: SearchTriggerService,
private appConfigService: AppConfigService,
private scannerService: ConfigScannerService) { }
private scannerService: ConfigScannerService
) { }
ngOnInit() {
if (this.appConfigService.isLdapMode()) {
@ -89,7 +89,7 @@ export class HarborShellComponent implements OnInit, OnDestroy {
this.isSearchResultsOpened = false;
});
if (!(localStorage && localStorage.getItem(HAS_SHOWED_SCANNER_INFO) === YES)) {
this.getDefaultScanner();
this.getDefaultScanner();
}
}
closeInfo() {

11
src/portal/src/app/base/navigator/navigator.component.html
View File

@ -44,5 +44,16 @@
</clr-dropdown-menu>
</clr-dropdown>
<a href="javascript:void(0)" id="aboutMenu" class="nav-link nav-text nav-about-link" (click)="openAboutDialog()" *ngIf="!isSessionValid">{{'ACCOUNT_SETTINGS.ABOUT' | translate}}</a>
<div class="nav-divider"></div>
<ng-container *ngFor="let theme of themeArray;let i=index">
<ng-container *ngIf="theme.showStyle === styleMode">
<a class="nav-link nav-icon theme-select"
(click)="themeChanged(theme)">
<clr-icon size="20" *ngIf="styleMode ==='DARK'" shape="sun" class="is-solid"></clr-icon>
<clr-icon size="20" *ngIf="styleMode ==='LIGHT'" shape="moon" class="is-solid"></clr-icon>
{{ theme.text | translate }}
</a>
</ng-container>
</ng-container>
</div>
</clr-header>

26
src/portal/src/app/base/navigator/navigator.component.scss
View File

@ -67,4 +67,28 @@
}
.dropdown-lang {
padding-right: 1.3rem;
}
}
.header {
.header-actions {
.theme-select {
width: 5.4rem;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
&:hover {
opacity: 1;
}
clr-icon {
position: static;
transform: none;
margin-right: .2rem;
min-width: 20px;
}
}
}
}

15
src/portal/src/app/base/navigator/navigator.component.ts
View File

@ -26,6 +26,10 @@ import { SearchTriggerService } from '../global-search/search-trigger.service';
import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
import { SkinableConfig } from "../../skinable-config.service";
import { CommonRoutes } from "../../../lib/entities/shared.const";
import { ThemeInterface, themeArray } from '../../theme';
import { clone } from '../../../lib/utils/utils';
import { ThemeService } from '../../theme.service';
const HAS_STYLE_MODE: string = 'styleModeLocal';
@Component({
selector: 'navigator',
@ -42,7 +46,9 @@ export class NavigatorComponent implements OnInit {
appTitle: string = 'APP_TITLE.HARBOR';
customStyle: { [key: string]: any };
customProjectName: { [key: string]: any };
themeArray: ThemeInterface[] = clone(themeArray);
styleMode = this.themeArray[0].showStyle;
constructor(
private session: SessionService,
private router: Router,
@ -52,6 +58,7 @@ export class NavigatorComponent implements OnInit {
private appConfigService: AppConfigService,
private msgHandler: MessageHandlerService,
private searchTrigger: SearchTriggerService,
public theme: ThemeService,
private skinableConfig: SkinableConfig) {
}
@ -79,6 +86,8 @@ export class NavigatorComponent implements OnInit {
if (this.appConfigService.getConfig().read_only) {
this.msgHandler.handleReadOnly();
}
// set local in app
this.styleMode = localStorage.getItem(HAS_STYLE_MODE);
}
public get isSessionValid(): boolean {
@ -187,4 +196,10 @@ export class NavigatorComponent implements OnInit {
registryAction(): void {
this.searchTrigger.closeSearch(true);
}
themeChanged(theme) {
this.styleMode = theme.mode;
this.theme.loadStyle(theme.toggleFileName);
localStorage.setItem(HAS_STYLE_MODE, this.styleMode);
}
}

4
src/portal/src/app/global-message/message.component.html
View File

@ -1,5 +1,5 @@
<div [class.alert-app-level]="!isAppLevel">
<clr-alert [clrAlertType]="globalMessage.type" [clrAlertAppLevel]="isAppLevel" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
<div [class.alert-app-level]="!isAppLevel" [hidden]="!globalMessageOpened">
<clr-alert [clrAlertType]="globalMessage.type" [clrAlertAppLevel]="isAppLevel" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
<div class="alert-item">
<span class="alert-text">{{message}}</span>
<div class="alert-actions alert-style" *ngIf="needAuth">

2
src/portal/src/app/interrogation-services/interrogation-services.component.html
View File

@ -1,5 +1,5 @@
<h2 class="custom-h2" sub-header-title>{{'SIDE_NAV.SYSTEM_MGMT.INTERROGATION_SERVICES' | translate}}</h2>
<nav class="subnav sub-nav-bg-color mt-1">
<nav class="mt-1">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" routerLink="scanners" routerLinkActive="active">{{'SCANNER.SCANNERS' | translate }}</a>

4
src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.html
View File

@ -1,4 +1,4 @@
<div>
<div class="version-position">
<div class="row flex-items-xs-between">
<div class="col-xs-4">
<div class="title-container">
@ -150,7 +150,7 @@
</div>
</a>
</div>
<div *ngIf="loading">
<div *ngIf="loading" class="center-x">
<span class="vertical-helper"></span>
<span class="spinner"></span>
</div>

13
src/portal/src/app/project/helm-chart/list-chart-versions/helm-chart-versions-detail/helm-chart-version.component.scss
View File

@ -102,4 +102,17 @@ hbr-resource-label-signpost {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.center-x {
display: flex;
justify-content: center;
position: absolute;
top: 6.5rem;
left: 50%;
transform: translateX(-50%);
}
.version-position {
position: relative;
}

4
src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.html
View File

@ -63,7 +63,7 @@
</clr-datagrid>
</div>
</div>
<div *ngIf="isCardView" class="row card-container">
<div *ngIf="isCardView" class="row card-container version-position">
<div *ngFor="let item of charts;" class="chart-card">
<a let i=index; class="card clickable" (click)="onChartClick(item)">
<div class="card-header">
@ -88,7 +88,7 @@
</div>
</a>
</div>
<div *ngIf="loading">
<div *ngIf="loading" class="center-x">
<span class="vertical-helper"></span>
<span class="spinner"></span>
</div>

15
src/portal/src/app/project/helm-chart/list-charts-detail/helm-chart.component.scss
View File

@ -103,7 +103,7 @@ clr-modal {
.file-browser-btn {
margin-left: 15px;
max-width: 32%;
max-width: 34%;
}
}
@ -120,4 +120,17 @@ button {
display: flex;
justify-content: center;
align-items: center;
}
.center-x {
display: flex;
justify-content: center;
position: absolute;
top: 2.5rem;
left: 50%;
transform: translateX(-50%);
}
.version-position {
position: relative;
}

1
src/portal/src/app/project/project-detail/project-detail.component.scss
View File

@ -21,7 +21,6 @@
color: #007cbb;
font-size: 16px;
cursor: pointer;
background: #fafafa;
padding: 5px;
border-radius: 2px;
}

6
src/portal/src/app/project/robot-account/add-robot/add-robot.component.html
View File

@ -6,7 +6,7 @@
<form #robotForm="ngForm">
<section class="form-block">
<div class="clr-row">
<div class="clr-col-3 permission">
<div class="clr-col-3 permission permission-dark">
<label class="col-md-3 required">
{{'ROBOT_ACCOUNT.NAME' | translate}}
</label>
@ -34,7 +34,7 @@
</div>
</div>
<div class="clr-row mt-1">
<div class="clr-col-3 permission">
<div class="clr-col-3 permission permission-dark">
<label class="col-md-3">{{'REPLICATION.DESCRIPTION' |translate}}</label>
</div>
<div class="clr-col padding-left-0">
@ -48,7 +48,7 @@
</div>
</div>
<div class="clr-row mt-1">
<div class="clr-col-3 permission">
<div class="clr-col-3 permission permission-dark">
<label class="col-md-3">
{{'ROBOT_ACCOUNT.PERMISSIONS' | translate}}
</label>

2
src/portal/src/app/project/summary/summary.component.html
View File

@ -1,4 +1,4 @@
<div class="summary display-flex" *ngIf="summaryInformation">
<div class="summary summary-dark display-flex" *ngIf="summaryInformation">
<div class="summary-left">
<div class="display-flex project-detail pt-1">
<h5 class="mt-0 width-7-5">{{'SUMMARY.PROJECT_REPOSITORY' | translate}}</h5>

2
src/portal/src/app/project/summary/summary.component.scss
View File

@ -56,4 +56,4 @@
}
}
}
}
}

2
src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.html
View File

@ -25,7 +25,7 @@
</div>
<div class="clr-col">
<span>
<clr-icon *ngIf="!rule?.disabled" class="color-green" shape="success-standard"></clr-icon>
<clr-icon *ngIf="!rule?.disabled" class="color-green color-white-dark" shape="success-standard"></clr-icon>
<clr-icon id="{{'disable-icon'+i}}" *ngIf="rule?.disabled" class="color-red" shape="error-standard"></clr-icon>
</span>
<span class="rule-name ml-5">

3
src/portal/src/app/project/tag-feature-integration/immutable-tag/immutable-tag.component.scss
View File

@ -15,9 +15,6 @@
opacity: 0;
z-index: 999;
}
.label-left {
color: #000;
}
.v-center {
height: 48px;
line-height: 48px;

2
src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.html
View File

@ -30,7 +30,7 @@
</div>
<div class="clr-col">
<span>
<clr-icon *ngIf="!rule?.disabled" class="color-green" shape="success-standard"></clr-icon>
<clr-icon *ngIf="!rule?.disabled" class="color-green color-white-dark" shape="success-standard"></clr-icon>
<clr-icon *ngIf="rule?.disabled" class="color-red" shape="error-standard"></clr-icon>
</span>
<span class="rule-name ml-5">

4
src/portal/src/app/project/tag-feature-integration/tag-retention/tag-retention.component.scss
View File

@ -48,9 +48,7 @@
display: flex;
align-items: center;
}
.label-left {
color: #000;
}
.v-center {
height: 48px;
line-height: 48px;

1
src/portal/src/app/repository/tag-detail/tag-detail-page.component.scss
View File

@ -2,7 +2,6 @@
cursor: pointer;
color: #007cbb;
font-size: 16px;
background: #fafafa;
padding: 5px;
border-radius: 2px;
margin-right: 5px;

2
src/portal/src/app/repository/tag-repository/tag-repository.component.scss
View File

@ -3,12 +3,10 @@
cursor: pointer;
color: #007cbb;
font-size: 16px;
background: #fafafa;
padding: 5px;
border-radius: 2px;
margin-right: 5px;
}
.back-icon {
color: gray;
}

6
src/portal/src/app/shared/about-dialog/about-dialog.component.scss
View File

@ -4,13 +4,9 @@
font-weight: 500;
}
.about-build {
font-size: 14px;
color: #565656;
}
.dialog-body {
display:flex;
padding-left: 0;
}
.content {

2
src/portal/src/app/shared/confirmation-dialog/confirmation-dialog.component.scss
View File

@ -4,14 +4,12 @@
.confirmation-title {
line-height: 24px;
color: #000000;
font-size: 22px;
margin-top: 0;
}
.confirmation-content {
font-size: 14px;
color: #565656;
line-height: 24px;
display: inline-block;
vertical-align: middle;

2
src/portal/src/app/shared/gauge/gauge.component.html
View File

@ -3,7 +3,7 @@
<div class="esxc-gauge-circle-bg"></div>
<div #barOne [style.transform]="'rotate(' + posOne + 'deg)'" [style.background-color]="_colorOne" [style.transition]="transition" class="esxc-gauge-circle-fill esxc-gauge-bar-one"></div>
<div #barTwo [style.transform]="'rotate(' + posTwo + 'deg)'" [style.background-color]="_colorTwo" [style.transition]="transition" class="esxc-gauge-circle-fill esxc-gauge-bar-two"></div>
<div class="esxc-gauge-circle-inner" [ngStyle]="{'background-color': backgroundColor}">
<div class="esxc-gauge-circle-inner esxc-gauge-circle-bgc-dark" [ngStyle]="{'background-color': backgroundColor}">
<div class="esxc-gauge-circle-caption">
<span class="esxc-value">{{used}}</span>
</div>

12
src/portal/src/app/theme.service.spec.ts Normal file
View File

@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { ThemeService } from './theme.service';
describe('ThemeService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: ThemeService = TestBed.get(ThemeService);
expect(service).toBeTruthy();
});
});

31
src/portal/src/app/theme.service.ts Normal file
View File

@ -0,0 +1,31 @@
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class ThemeService {
constructor(
@Inject(DOCUMENT) private document: Document
) { }
loadStyle(styleName: string) {
const head = this.document.getElementsByTagName('head')[0];
let themeLink = this.document.getElementById(
'client-theme'
) as HTMLLinkElement;
if (themeLink) {
themeLink.href = styleName;
} else {
const style = this.document.createElement('link');
style.id = 'client-theme';
style.rel = 'stylesheet';
style.href = `${styleName}`;
head.appendChild(style);
}
}
}

24
src/portal/src/app/theme.ts Normal file
View File

@ -0,0 +1,24 @@
export interface ThemeInterface {
showStyle: string;
mode: string;
text: string;
currentFileName: string;
toggleFileName: string;
}
export const themeArray: ThemeInterface[] = [
{
showStyle: "DARK",
mode: "LIGHT",
text: "APP_TITLE.THEME_LIGHT_TEXT",
currentFileName: "dark-theme.css",
toggleFileName: "light-theme.css",
},
{
showStyle: "LIGHT",
mode: "DARK", // show button icon
text: "APP_TITLE.THEME_DARK_TEXT", // show button text
currentFileName: "light-theme.css", // loaded current theme file name
toggleFileName: "dark-theme.css", // to toggle theme file name
}
];

113
src/portal/src/css/dark-theme.scss Normal file
View File

@ -0,0 +1,113 @@
@import "../../node_modules/@clr/ui/clr-ui-dark.min.css";
$dark-background-color: rgb(27, 42, 50) !important;
$dark-font-color1: #acbac3 !important;
$dark-font-color-title1: #eaedf0 !important;
.label-form {
background-color: #212129 !important;
}
.esxc-gauge-circle-bgc-dark {
background-color: $dark-background-color;
}
.harbor-icon {
filter: drop-shadow(#ccc 58px 2px) !important;
}
.color-white-dark {
color: white;
}
.label-filter-panel {
background-color: $dark-background-color;
}
.filter-dark {
color: $dark-font-color1;
}
.side-form {
background-color: $dark-background-color;
}
.toolBar {
background-color: $dark-background-color;
}
.search-overlay {
background-color: $dark-background-color;
}
.add-modal-dark {
background: $dark-background-color;
}
.license {
background-color: $dark-background-color;
}
.pagination-list {
.pagination-current {
color: $dark-font-color1;
}
}
.no-info-div,
.info-div {
background-color: $dark-background-color;
}
.bottom-line-project-config {
color: $dark-font-color1;
}
.config-subtext {
color: $dark-font-color1;
}
.permission-dark {
color: $dark-font-color1;
}
.scanner-name {
color: $dark-font-color1;
}
.permission-dark {
color: $dark-font-color1;
}
.summary-dark {
color: $dark-font-color1;
h5 {
color: $dark-font-color1;
}
}
.about-version {
color: $dark-font-color-title1;
}
.update-time {
color: $dark-font-color1;
}
.font-style {
color: $dark-font-color1;
}
.go-link {
color: #4aaed9 !important;
border-bottom-color: #4aaed9 !important;
}
.circle-block {
color: $dark-font-color1;
}
.executions-detail {
color: $dark-font-color1;
}
.black-point {
background-color: $dark-font-color1;
}
clr-dg-action-overflow {
clr-icon {
fill: $dark-font-color1;
}
}
.oidc-tip {
color: $dark-font-color1;
}
.clr-select-wrapper{
select {
option {
background: $dark-font-color1;
color: #1b2a32;
}
}
}

1
src/portal/src/css/light-theme.scss Normal file
View File

@ -0,0 +1 @@
@import "../../node_modules/@clr/ui/clr-ui.min.css";

3
src/portal/src/global.scss
View File

@ -325,3 +325,6 @@ clr-datagrid {
}
}
}
button:focus {
outline: none !important;
}

4
src/portal/src/i18n/lang/en-us-lang.json
View File

@ -5,7 +5,9 @@
"VIC": "vSphere Integrated Containers",
"MGMT": "Management",
"REG": "Registry",
"HARBOR_SWAGGER": "Harbor Swagger"
"HARBOR_SWAGGER": "Harbor Swagger",
"THEME_DARK_TEXT": "DARK",
"THEME_LIGHT_TEXT": "LIGHT"
},
"SIGN_IN": {
"REMEMBER": "Remember me",

4
src/portal/src/i18n/lang/es-es-lang.json
View File

@ -5,7 +5,9 @@
"VIC": "Contenedores Integrados vSphere",
"MGMT": "Administración",
"REG": "Registro",
"HARBOR_SWAGGER": "Harbor Swagger"
"HARBOR_SWAGGER": "Harbor Swagger",
"THEME_DARK_TEXT": "DARK",
"THEME_LIGHT_TEXT": "LIGHT"
},
"SIGN_IN": {
"REMEMBER": "Recordarme",

4
src/portal/src/i18n/lang/fr-fr-lang.json
View File

@ -5,7 +5,9 @@
"VIC": "vSphere Integrated Containers",
"MGMT": "Management",
"REG": "Registre",
"HARBOR_SWAGGER": "Harbor Swagger"
"HARBOR_SWAGGER": "Harbor Swagger",
"THEME_DARK_TEXT": "DARK",
"THEME_LIGHT_TEXT": "LIGHT"
},
"SIGN_IN": {
"REMEMBER": "Se souvenir de moi",

4
src/portal/src/i18n/lang/pt-br-lang.json
View File

@ -5,7 +5,9 @@
"VIC": "vSphere Integrated Containers",
"MGMT": "Gerência",
"REG": "Registro",
"HARBOR_SWAGGER": "Harbor Swagger"
"HARBOR_SWAGGER": "Harbor Swagger",
"THEME_DARK_TEXT": "DARK",
"THEME_LIGHT_TEXT": "LIGHT"
},
"SIGN_IN": {
"REMEMBER": "Lembrar-se de mim",

4
src/portal/src/i18n/lang/tr-tr-lang.json
View File

@ -5,7 +5,9 @@
"VIC": "vSphere Entegre Konteynerler",
"MGMT": "Yönetim",
"REG": "Kayıt",
"HARBOR_SWAGGER": "Harbor Swagger"
"HARBOR_SWAGGER": "Harbor Swagger",
"THEME_DARK_TEXT": "DARK",
"THEME_LIGHT_TEXT": "LIGHT"
},
"SIGN_IN": {
"REMEMBER": "Beni Hatırla",

4
src/portal/src/i18n/lang/zh-cn-lang.json
View File

@ -5,7 +5,9 @@
"VIC": "vSphere Integrated Containers",
"MGMT": "Management",
"REG": "Registry",
"HARBOR_SWAGGER": "Harbor Swagger"
"HARBOR_SWAGGER": "Harbor Swagger",
"THEME_DARK_TEXT": "深色主题",
"THEME_LIGHT_TEXT": "浅色主题"
},
"SIGN_IN": {
"REMEMBER": "记住我",

5
src/portal/src/index.html
View File

@ -7,11 +7,12 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2">
<link rel="preload" as="style" href="./light-theme.css">
<link rel="preload" as="style" href="./dark-theme.css">
</head>
<body>
<harbor-app>
<div class="spinner spinner-lg app-loading">
<div class="spinner spinner-lg app-loading app-loading-fixed">
Loading...
</div>
</harbor-app>

1
src/portal/src/lib/components/config/gc/gc-history/gc-history.component.scss
View File

@ -1,5 +1,4 @@
.history-header {
color: #000;
margin:20px 0 6px 0;
display: inline-block;
width: 97%;

2
src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.html
View File

@ -8,7 +8,7 @@
[class.clr-form-compact-common]="!defaultTextsObj.isSystemDefaultQuota">
<clr-input-container>
<label class="left-label required" for="storage">{{ defaultTextsObj?.countQuota | translate}}
<label class="left-label left-label-light required" for="storage">{{ defaultTextsObj?.countQuota | translate}}
<clr-tooltip>
<clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
<clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>

2
src/portal/src/lib/components/config/project-quotas/edit-project-quotas/edit-project-quotas.component.scss
View File

@ -8,7 +8,6 @@
overflow-y: visible;
overflow-x: visible;
.body-label {
color: #565656;
font-size: 14px
}
.clr-form {
@ -16,7 +15,6 @@
.left-label {
width: 9.5rem;
font-weight: 100;
color: #000;
position: relative;
}

3
src/portal/src/lib/components/config/project-quotas/project-quotas.component.scss
View File

@ -19,9 +19,6 @@
}
}
.color-0 {
color: #333;
}
.pt-19px {
padding-top: 19px;
}

3
src/portal/src/lib/components/config/vulnerability/vulnerability-config.component.scss
View File

@ -49,6 +49,9 @@
width: 200px;
padding-right: 1rem;
}
.font-style {
color: #000;
}
.margin-left-5 {
margin-left: 5px;
}

2
src/portal/src/lib/components/confirmation-dialog/confirmation-dialog.component.scss
View File

@ -4,14 +4,12 @@
.confirmation-title {
line-height: 24px;
color: #000000;
font-size: 22px;
margin-top: 0;
}
.confirmation-content {
font-size: 14px;
color: #565656;
line-height: 24px;
display: inline-block;
vertical-align: middle;

2
src/portal/src/lib/components/create-edit-label/create-edit-label.component.html
View File

@ -1,5 +1,5 @@
<div>
<form #labelForm="ngForm" [hidden]="!formShow">
<form #labelForm="ngForm" [hidden]="!formShow" class="label-form">
<section>
<label>
<label for="name">{{'LABEL.LABEL_NAME' | translate}}</label>

2
src/portal/src/lib/components/create-edit-label/create-edit-label.component.scss
View File

@ -1,4 +1,4 @@
form {
.label-form {
margin-bottom: -10px;
padding-top: 0;
margin-top: 20px;

4
src/portal/src/lib/components/project-policy-config/project-policy-config.component.html
View File

@ -100,7 +100,7 @@
(click)="addSystem()"
class="btn btn-link ml-1">{{'CVE_WHITELIST.ADD_SYSTEM'|translate}}</button>
</div>
<div class="add-modal" *ngIf="showAddModal && !isUseSystemWhitelist()">
<div class="add-modal add-modal-dark" *ngIf="showAddModal && !isUseSystemWhitelist()">
<clr-icon (click)="showAddModal=false" class="float-lg-right margin-top-4"
shape="window-close"></clr-icon>
<div>
@ -137,7 +137,7 @@
<div class="clr-col padding-top-16 pl-2">
<div class="clr-row expire-data">
<label for="expires"
class="bottom-line clr-col-3">{{'CVE_WHITELIST.EXPIRES_AT'|translate}}</label>
class="bottom-line bottom-line-project-config clr-col-3">{{'CVE_WHITELIST.EXPIRES_AT'|translate}}</label>
<div class="underline">
<input #dateSystemInput readonly type="date" [(clrDate)]="systemExpiresDate">
<input [disabled]="!hasChangeConfigRole" *ngIf="!isUseSystemWhitelist()" #dateInput

1
src/portal/src/lib/components/project-policy-config/project-policy-config.component.scss
View File

@ -73,7 +73,6 @@
.config-subtext {
font-size: 0.55rem;
line-height: 1.2rem;
color: rgb(86, 86, 86);
font-weight: 300;
}

2
src/portal/src/lib/components/tag/tag-detail.component.html
View File

@ -43,7 +43,7 @@
<div class="vulnerability" [hidden]="hasCve || showStatBar">
<hbr-vulnerability-bar [repoName]="repositoryId" [tagId]="tagDetails.name" [summary]="vulnerabilitySummary"></hbr-vulnerability-bar>
</div>
<histogram-chart *ngIf="hasCve" [metadata]="passMetadataToChart()" [isWhiteBackground]="true"></histogram-chart>
<histogram-chart *ngIf="hasCve" [metadata]="passMetadataToChart()" [isWhiteBackground]="isThemeLight()"></histogram-chart>
</div>
<div *ngIf="!withAdmiral && tagDetails?.labels?.length">
<div class="third-column detail-title">{{'TAG.LABELS' | translate }}</div>

3
src/portal/src/lib/components/tag/tag-detail.component.ts
View File

@ -256,4 +256,7 @@ export class TagDetailComponent implements OnInit {
},
];
}
isThemeLight() {
return localStorage.getItem('styleModeLocal') === 'LIGHT';
}
}

4
src/portal/src/lib/components/tag/tag.component.html
View File

@ -31,9 +31,9 @@
</div>
<div class="flex-xs-middle">
<hbr-filter [readonly]="'readonly'" [withDivider]="true" filterPlaceholder="{{'TAG.FILTER_FOR_TAGS' | translate}}" (filterEvt)="doSearchTagNames($event)" (openFlag)="openFlagEvent($event)" [currentValue]="lastFilteredTagName"></hbr-filter>
<div class="labelFilterPanel" *ngIf="!withAdmiral" [hidden]="!openLabelFilterPanel">
<div class="label-filter-panel" *ngIf="!withAdmiral" [hidden]="!openLabelFilterPanel">
<a class="filterClose" (click)="closeFilter()">&times;</a>
<label class="filterLabelHeader">{{'REPOSITORY.FILTER_BY_LABEL' | translate}}</label>
<label class="filterLabelHeader filter-dark">{{'REPOSITORY.FILTER_BY_LABEL' | translate}}</label>
<div class="form-group"><input clrInput type="text" placeholder="Filter labels" [(ngModel)]="filterName" (keyup)="handleInputFilter()"></div>
<div [hidden]='imageFilterLabels.length' class="no-labels">{{'LABEL.NO_LABELS' | translate }}</div>
<div [hidden]='!imageFilterLabels.length' class="has-label">

3
src/portal/src/lib/components/tag/tag.component.scss
View File

@ -134,7 +134,7 @@
@include dropdown-as-action-button;
}
.labelFilterPanel {
.label-filter-panel {
display: flex;
position: relative;
-ms-flex-direction: column;
@ -198,7 +198,6 @@
padding: 0 .5rem;
line-height: .75rem;
margin: 0;
color: #313131;
}
.filterClose {

2
src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.html
View File

@ -61,7 +61,7 @@
</div>
<hr>
<div class="bar-summary bar-tooltip-fon" *ngIf="!isNone">
<histogram-chart [isWhiteBackground]="false" [metadata]="passMetadataToChart()"></histogram-chart>
<histogram-chart [isWhiteBackground]="!isThemeLight()" [metadata]="passMetadataToChart()"></histogram-chart>
</div>
<div *ngIf="scanner">
<span class="bar-scanning-time">{{'SCANNER.SCANNED_BY' | translate }}</span>

3
src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.ts
View File

@ -232,4 +232,7 @@ export class ResultTipHistogramComponent implements OnInit {
},
];
}
isThemeLight() {
return localStorage.getItem('styleModeLocal') === 'LIGHT';
}
}