Merge pull request #11497 from AllForNothing/css

Fix css bugs of label 'target2.0'
This commit is contained in:
Will Sun 2020-04-09 14:20:30 +08:00 committed by GitHub
commit 71821a1c9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 111 additions and 89 deletions

View File

@ -20,7 +20,7 @@ import { CookieService } from 'ngx-cookie';
import { SessionService } from './shared/session.service';
import { AppConfigService } from './services/app-config.service';
import { ThemeService } from './services/theme.service';
import { themeArray, ThemeInterface } from './services/theme';
import { THEME_ARRAY, ThemeInterface } from './services/theme';
import { clone } from '../lib/utils/utils';
const HAS_STYLE_MODE: string = 'styleModeLocal';
@ -30,7 +30,7 @@ const HAS_STYLE_MODE: string = 'styleModeLocal';
templateUrl: 'app.component.html'
})
export class AppComponent {
themeArray: ThemeInterface[] = clone(themeArray);
themeArray: ThemeInterface[] = clone(THEME_ARRAY);
styleMode: string = this.themeArray[0].showStyle;
constructor(

View File

@ -81,7 +81,17 @@
</clr-vertical-nav-group>
</div>
<div class="vertical-nav-footer">
<a clrVerticalNavLink target="_blank" routerLink="/devcenter">
<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>
<a class="mt-1" clrVerticalNavLink target="_blank" routerLink="/devcenter">
<button type="button" class="btn api-button">
<span>{{'SIDE_NAV.API_EXPLORER' | translate }}</span>
</button>

View File

@ -79,3 +79,23 @@ clr-vertical-nav {
.right {
text-align: right;
}
.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;
}
}

View File

@ -27,9 +27,13 @@ import { AboutDialogComponent } from '../../shared/about-dialog/about-dialog.com
import { SearchTriggerService } from '../global-search/search-trigger.service';
import { CommonRoutes } from "../../../lib/entities/shared.const";
import { ConfigScannerService, SCANNERS_DOC } from "../../config/scanner/config-scanner.service";
import { THEME_ARRAY, ThemeInterface } from "../../services/theme";
import { clone } from "../../../lib/utils/utils";
import { ThemeService } from "../../services/theme.service";
const HAS_SHOWED_SCANNER_INFO: string = 'hasShowScannerInfo';
const YES: string = 'yes';
const HAS_STYLE_MODE: string = 'styleModeLocal';
@Component({
selector: 'harbor-shell',
@ -62,13 +66,17 @@ export class HarborShellComponent implements OnInit, OnDestroy {
isHttpAuthMode: boolean;
showScannerInfo: boolean = false;
scannerDocUrl: string = SCANNERS_DOC;
themeArray: ThemeInterface[] = clone(THEME_ARRAY);
styleMode = this.themeArray[0].showStyle;
constructor(
private route: ActivatedRoute,
private router: Router,
private session: SessionService,
private searchTrigger: SearchTriggerService,
private appConfigService: AppConfigService,
private scannerService: ConfigScannerService
private scannerService: ConfigScannerService,
public theme: ThemeService,
) { }
ngOnInit() {
@ -91,6 +99,10 @@ export class HarborShellComponent implements OnInit, OnDestroy {
if (!(localStorage && localStorage.getItem(HAS_SHOWED_SCANNER_INFO) === YES)) {
this.getDefaultScanner();
}
// set local in app
if (localStorage) {
this.styleMode = localStorage.getItem(HAS_STYLE_MODE);
}
}
closeInfo() {
if (localStorage) {
@ -157,4 +169,11 @@ export class HarborShellComponent implements OnInit, OnDestroy {
break;
}
}
themeChanged(theme) {
this.styleMode = theme.mode;
this.theme.loadStyle(theme.toggleFileName);
if (localStorage) {
localStorage.setItem(HAS_STYLE_MODE, this.styleMode);
}
}
}

View File

@ -44,16 +44,5 @@
</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>

View File

@ -68,27 +68,3 @@
.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;
}
}
}
}

View File

@ -26,10 +26,7 @@ import { SearchTriggerService } from '../global-search/search-trigger.service';
import { MessageHandlerService } from '../../shared/message-handler/message-handler.service';
import { SkinableConfig } from "../../services/skinable-config.service";
import { CommonRoutes } from "../../../lib/entities/shared.const";
import { ThemeInterface, themeArray } from '../../services/theme';
import { clone } from '../../../lib/utils/utils';
import { ThemeService } from '../../services/theme.service';
const HAS_STYLE_MODE: string = 'styleModeLocal';
@Component({
selector: 'navigator',
@ -46,9 +43,6 @@ 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,
@ -58,7 +52,6 @@ export class NavigatorComponent implements OnInit {
private appConfigService: AppConfigService,
private msgHandler: MessageHandlerService,
private searchTrigger: SearchTriggerService,
public theme: ThemeService,
private skinableConfig: SkinableConfig) {
}
@ -86,8 +79,6 @@ 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 {
@ -196,10 +187,4 @@ 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);
}
}

View File

@ -27,11 +27,11 @@
[disabled]="!(selectedRow && !selectedRow.is_default)">
<span *ngIf="selectedRow && selectedRow.disabled">
<clr-icon class="margin-top-2" size="16" shape="success-standard"></clr-icon>
<span class="margin-left-10">{{'SCANNER.ENABLE' | translate}}</span>
<span class="margin-left-10">{{'WEBHOOK.ENABLED_BUTTON' | translate}}</span>
</span>
<span *ngIf="!(selectedRow && selectedRow.disabled)">
<clr-icon class="margin-top-2" size="16" shape="ban"></clr-icon>
<span class="margin-left-10">{{'SCANNER.DISABLE' | translate}}</span>
<span class="margin-left-10">{{'WEBHOOK.DISABLED_BUTTON' | translate}}</span>
</span>
</button>
<button clrDropdownItem

View File

@ -916,7 +916,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
});
}
handleScanOverview(scanOverview: any): VulnerabilitySummary {
handleScanOverview(scanOverview: any): any {
if (scanOverview) {
return scanOverview[DEFAULT_SUPPORTED_MIME_TYPE];
}

View File

@ -5,7 +5,7 @@
<clr-tab *ngIf="getVulnerability()">
<button clrTabLink id="vulnerability">{{'REPOSITORY.VULNERABILITY' | translate}}</button>
<clr-tab-content id="vulnerability-content" *clrIfActive>
<hbr-artifact-vulnerabilities [projectName]="projectName"
<hbr-artifact-vulnerabilities [artifact]="artifact" [projectName]="projectName"
[projectId]="projectId"
[repoName]="repoName"
[digest]="digest" [vulnerabilitiesLink]="getVulnerability()"></hbr-artifact-vulnerabilities>

View File

@ -2,6 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
import { ADDITIONS } from "./models";
import { AdditionLinks } from "../../../../../../ng-swagger-gen/models/addition-links";
import { AdditionLink } from "../../../../../../ng-swagger-gen/models/addition-link";
import { Artifact } from "../../../../../../ng-swagger-gen/models/artifact";
@Component({
selector: 'artifact-additions',
@ -9,6 +10,7 @@ import { AdditionLink } from "../../../../../../ng-swagger-gen/models/addition-l
styleUrls: ['./artifact-additions.component.scss']
})
export class ArtifactAdditionsComponent implements OnInit {
@Input() artifact: Artifact;
@Input() additionLinks: AdditionLinks;
@Input() projectName: string;
@Input()

View File

@ -15,7 +15,7 @@
</div>
<div class="clr-col">
<div [hidden]="!shouldShowBar()">
<hbr-vulnerability-bar [scanner]="scanner"
<hbr-vulnerability-bar [summary]="handleScanOverview(artifact?.scan_overview)" [scanner]="scanner"
(submitFinish)="submitFinish($event)" [projectName]="projectName" [repoName]="repoName"
[artifactDigest]="digest">
</hbr-vulnerability-bar>

View File

@ -19,6 +19,7 @@ import {
import { ChannelService } from "../../../../../../lib/services/channel.service";
import { ResultBarChartComponent } from "../../../vulnerability-scanning/result-bar-chart.component";
import { Subscription } from "rxjs";
import { Artifact } from "../../../../../../../ng-swagger-gen/models/artifact";
@Component({
selector: 'hbr-artifact-vulnerabilities',
@ -36,6 +37,7 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
repoName: string;
@Input()
digest: string;
@Input() artifact: Artifact;
scan_overview: any;
scanner: ScannerVo;
@ -50,6 +52,7 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
@ViewChild(ResultBarChartComponent, {static: false})
resultBarChartComponent: ResultBarChartComponent;
sub: Subscription;
hasViewInitWithDelay: boolean = false;
constructor(
private errorHandler: ErrorHandler,
private additionsService: AdditionsService,
@ -74,6 +77,9 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
this.getVulnerabilities();
});
}
setTimeout(() => {
this.hasViewInitWithDelay = true;
}, 0);
}
ngOnDestroy() {
if (this.sub) {
@ -81,7 +87,6 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
this.sub = null;
}
}
getVulnerabilities() {
if (this.vulnerabilitiesLink
&& !this.vulnerabilitiesLink.absolute
@ -173,7 +178,13 @@ export class ArtifactVulnerabilitiesComponent implements OnInit, OnDestroy {
this.onSendingScanCommand = e;
}
shouldShowBar(): boolean {
return this.resultBarChartComponent
return this.hasViewInitWithDelay && this.resultBarChartComponent
&& (this.resultBarChartComponent.queued || this.resultBarChartComponent.scanning || this.resultBarChartComponent.error);
}
handleScanOverview(scanOverview: any): any {
if (scanOverview) {
return scanOverview[DEFAULT_SUPPORTED_MIME_TYPE];
}
return null;
}
}

View File

@ -37,7 +37,11 @@ export class ArtifactCommonPropertiesComponent implements OnInit, OnChanges {
for (let name in this.commonProperties) {
if (this.commonProperties.hasOwnProperty(name)) {
if (typeof (this.commonProperties[name]) === 'object') {
this.commonProperties[name] = JSON.stringify(this.commonProperties[name]);
if (this.commonProperties[name] === null) {
this.commonProperties[name] = '';
} else {
this.commonProperties[name] = JSON.stringify(this.commonProperties[name]);
}
}
if (name === Types.CREATED) {
this.commonProperties[name] = new DatePipe(this.translate.currentLang)

View File

@ -27,7 +27,7 @@
<artifact-common-properties [artifactDetails]="artifact"></artifact-common-properties>
<!-- Additions -->
<artifact-additions
<artifact-additions [artifact]="artifact"
[projectName]="projectName"
[projectId]="projectId"
[repoName]="repositoryName"

View File

@ -30,28 +30,29 @@
</div>
<clr-tooltip-content class="w-800" [clrPosition]="'right'" [clrSize]="'lg'" *clrIfOpen>
<div class="bar-tooltip-font-larger">
<div *ngIf="!isNone" class="level-border clr-display-inline-block margin-right-5">
<div [className]="getClass()">
<div class="inner">
{{vulnerabilitySummary?.severity | slice:0:1}}
</div>
</div>
</div>
<ng-container *ngIf="isCritical">
<clr-icon shape="exclamation-circle" class="is-error" size="32"></clr-icon>
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.CRITICAL' | translate | titlecase }}</span></span>
</ng-container>
<ng-container *ngIf="isHigh">
<clr-icon shape="exclamation-triangle" class="is-error" size="32"></clr-icon>
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.HIGH' | translate | titlecase }}</span></span>
</ng-container>
<ng-container *ngIf="isMedium">
<clr-icon shape="minus-circle" class="tip-icon-medium" size="30"></clr-icon>
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.MEDIUM' | translate | titlecase}}</span></span>
</ng-container>
<ng-container *ngIf="isLow">
<clr-icon shape="info-circle" class="tip-icon-low" size="32"></clr-icon>
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.LOW' | translate | titlecase }}</span></span>
</ng-container>
<ng-container *ngIf="isUnknown">
<clr-icon shape="help" size="24" class="help-icon"></clr-icon>
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.UNKNOWN' | translate | titlecase }}</span></span>
</ng-container>
<ng-container *ngIf="isNegligible">
<clr-icon shape="circle" class="is-success" size="32"></clr-icon>
<span>{{'VULNERABILITY.OVERALL_SEVERITY' | translate }} <span class="font-weight-600">{{'VULNERABILITY.SEVERITY.NEGLIGIBLE' | translate | titlecase }}</span></span>
</ng-container>
<ng-container *ngIf="isNone">

View File

@ -291,4 +291,7 @@ hr {
}
.font-size-12 {
font-size: 12px;
}
.margin-right-5 {
margin-right: 5px;
}

View File

@ -52,9 +52,6 @@
<div class="add-rule-btn">
<button [disabled]="rules?.length >= 15" id="add-rule" class="btn btn-primary " (click)="openAddRule()">{{'IMMUTABLE_TAG.ADD_RULE' | translate}}</button>
</div>
<div class="clr-col-6 color-97 font-size-54">
{{'IMMUTABLE_TAG.ADD_RULE_HELP_1' | translate}}
</div>
</div>
</div>
</div>

View File

@ -63,9 +63,6 @@
<div class="flex-8p">
<button id="add-rule" [disabled]="retention?.rules?.length >= 15" class="btn btn-primary " (click)="openAddRule()">{{'TAG_RETENTION.ADD_RULE' | translate}}</button>
</div>
<div class="clr-col-6 color-97 font-size-54">
{{'TAG_RETENTION.ADD_RULE_HELP_1' | translate}}
</div>
</div>
</div>
</div>

View File

@ -17,11 +17,11 @@
<span id="toggle-webhook">
<span *ngIf="selectedRow[0] && !selectedRow[0].enabled">
<clr-icon class="margin-top-2" size="16" shape="success-standard"></clr-icon>
<span class="margin-left-10">{{'WEBHOOK.ENABLE' | translate}}</span>
<span class="margin-left-10">{{'WEBHOOK.ENABLED_BUTTON' | translate}}</span>
</span>
<span *ngIf="!(selectedRow[0] && !selectedRow[0].enabled)">
<clr-icon class="margin-top-2" size="16" shape="ban"></clr-icon>
<span class="margin-left-10">{{'WEBHOOK.DISABLE' | translate}}</span>
<span class="margin-left-10">{{'WEBHOOK.DISABLED_BUTTON' | translate}}</span>
</span>
</span>
</button>

View File

@ -57,4 +57,7 @@
}
.min-width-340 {
min-width: 340px!important;
}
.margin-left-10 {
margin-left: 10px;
}

View File

@ -6,7 +6,7 @@ export interface ThemeInterface {
toggleFileName: string;
}
export const themeArray: ThemeInterface[] = [
export const THEME_ARRAY: ThemeInterface[] = [
{
showStyle: "DARK",
mode: "LIGHT",

View File

@ -185,3 +185,6 @@ hbr-tag {
}
clr-header {
background-color: $header-color;
}

View File

@ -24,5 +24,6 @@ $color-ddd: #21333b;
$color-f2: none;
$color-657b83: none;
$color-fdf6e3: none;
$header-color: hsl(198, 100%, 15%)!important;
@import "./common.scss";

View File

@ -26,5 +26,6 @@ $color-ddd: #ddd;
$color-f2: #f2f2f2;
$color-657b83: #657b83;
$color-fdf6e3: #fdf6e3;
$header-color: rgb(0, 74, 112);
@import "./common.scss";

View File

@ -222,7 +222,7 @@
"NAME_IS_ILLEGAL": "Project name is invalid.",
"UNKNOWN_ERROR": "An unknown error occurred while creating the project.",
"ITEMS": "items",
"DELETION_TITLE": "Confirm removal of project members",
"DELETION_TITLE": "Confirm remove project",
"DELETION_SUMMARY": "Do you want to delete project {{param}}?",
"FILTER_PLACEHOLDER": "Filter Projects",
"REPLICATION_RULE": "Replication Rule",
@ -468,7 +468,7 @@
"MONTH": "Month",
"DAY_MONTH": "Day of month",
"DAY_WEEK": "Day of week",
"CRON-TITLE": "Pattern description for cron '* * * * * *'",
"CRON_TITLE": "Pattern description for cron '* * * * * *'.The cron string is based on UTC time",
"FIELD_NAME": "Field name",
"MANDATORY": "Mandatory?",
"ALLOWED_VALUES": "Allowed values",

View File

@ -468,7 +468,7 @@
"MONTH": "Month",
"DAY_MONTH": "Day of month",
"DAY_WEEK": "Day of week",
"CRON-TITLE": "Pattern description for cron '* * * * * *'",
"CRON_TITLE": "Pattern description for cron '* * * * * *'.The cron string is based on UTC time",
"FIELD_NAME": "Field name",
"MANDATORY": "Mandatory?",
"ALLOWED_VALUES": "Allowed values",

View File

@ -460,7 +460,7 @@
"MONTH": "Month",
"DAY_MONTH": "Day of month",
"DAY_WEEK": "Day of week",
"CRON-TITLE": "Pattern description for cron '* * * * * *'",
"CRON_TITLE": "Pattern description for cron '* * * * * *'.The cron string is based on UTC time",
"FIELD_NAME": "Field name",
"MANDATORY": "Mandatory?",
"ALLOWED_VALUES": "Allowed values",

View File

@ -466,7 +466,7 @@
"MONTH": "Month",
"DAY_MONTH": "Day of month",
"DAY_WEEK": "Day of week",
"CRON-TITLE": "Pattern description for cron '* * * * * *'",
"CRON_TITLE": "Pattern description for cron '* * * * * *'.The cron string is based on UTC time",
"FIELD_NAME": "Field name",
"MANDATORY": "Mandatory?",
"ALLOWED_VALUES": "Allowed values",

View File

@ -468,7 +468,7 @@
"MONTH": "Ay",
"DAY_MONTH": "Ayın günü",
"DAY_WEEK": "Ayın haftası",
"CRON-TITLE": "Cron için kalıp açıklaması '* * * * * *'",
"CRON_TITLE": "Cron için kalıp açıklaması '* * * * * *'.The cron string is based on UTC time",
"FIELD_NAME": "Alan adı",
"MANDATORY": "Zorunlu?",
"ALLOWED_VALUES": "İzin verilen değerler",

View File

@ -467,7 +467,7 @@
"MONTH": "月",
"DAY_MONTH": "一个月的一天",
"DAY_WEEK": "一周的一天",
"CRON-TITLE": "cron格式描述 '* * * * * *'",
"CRON_TITLE": "cron格式描述 '* * * * * *'。cron 基于 UTC 时间",
"FIELD_NAME": "字段名称",
"MANDATORY": "是否强制?",
"ALLOWED_VALUES": "允许的值",

View File

@ -9,7 +9,7 @@
</clr-checkbox-container>
</form>
<div class="cron-selection">
<cron-selection [labelCurrent]="getLabelCurrent" #CronScheduleComponent [labelEdit]='getText'
<cron-selection [buttonMarginLeft]="'200px'" [labelCurrent]="getLabelCurrent" #CronScheduleComponent [labelEdit]='getText'
[originCron]='originCron' (inputvalue)="scheduleGc($event)"></cron-selection>
<button class="btn btn-outline gc-start-btn" (click)="gcNow()"
[disabled]="disableGC">{{'GC.GC_NOW' | translate}}</button>

View File

@ -23,7 +23,7 @@
.setting-wrapper {
position: relative;
.confirm-button {
margin: 20px 0 0;
margin: 11px 0 0;
}
*:not(:first-child) {

View File

@ -1,7 +1,7 @@
<table class="table table-noborder table-style table-tag">
<caption class="table-title tag-thead">
<span class="tag-header-color">
{{ 'REPLICATION.CRON-TITLE' | translate }}
{{ 'REPLICATION.CRON_TITLE' | translate }}
</span>
</caption>
<thead class="tag-thead">