Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-07-03 18:25:01 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5051 from pengpengshui/colorpanel

Browse Source 
Add dropdown for label color panel and modify color disappear on Mac
This commit is contained in:
Qian Deng 2018-05-30 23:23:14 -04:00 committed by GitHub
commit aec9fabefb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 51 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/ui_ng/lib/src/create-edit-label/create-edit-label.component.html
View File

@ -3,8 +3,10 @@
<section> <section>
<label> <label>
<label for="name">{{'LABEL.LABEL_NAME' | translate}}</label> <label for="name">{{'LABEL.LABEL_NAME' | translate}}</label>
<label aria-haspopup="true" role="tooltip" [class.invalid]="isLabelNameExist" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left"> <label aria-haspopup="true" role="tooltip" [class.invalid]="isLabelNameExist"
<input type="text" id="name" name="name" required size="20" autocomplete="off" [(ngModel)]="labelModel.name" #name="ngModel" (keyup)="existValid(labelModel.name)"> class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
<input type="text" id="name" name="name" required size="20" autocomplete="off"
[(ngModel)]="labelModel.name" #name="ngModel" (keyup)="existValid(labelModel.name)">
<span class="tooltip-content"> <span class="tooltip-content">
{{'LABEL.NAME_ALREADY_EXISTS' | translate }} {{'LABEL.NAME_ALREADY_EXISTS' | translate }}
</span> </span>
@ -12,24 +14,29 @@
</label> </label>
<label> <label>
<label for="color">{{'LABEL.COLOR' | translate}}</label> <label for="color">{{'LABEL.COLOR' | translate}}</label>
<div class="colorDrop"> <clr-dropdown [clrCloseMenuOnItemClick]="false">
<button type="button" class="btn btn-outline btnColor btn-sm" > <button type="button" class="btn btn-outline btnColor btn-sm" clrDropdownTrigger>
<clr-icon shape="caret down" size="20" style='right:2px; width:24px; height:18px;' (click)="openColorPanel()"></clr-icon> <clr-icon shape="caret down" size="20" style='right:2px; width:24px; height:18px;'></clr-icon>
</button> </button>
<div class="colorPanel" [hidden]="panelHidden"> <clr-dropdown-menu *clrIfOpen>
<a class="closePanel" (click)="closeColorPanel()">&times;</a> <label class="dropdown-item" (click)="labelModel.color=i.color" *ngFor="let i of labelColor"
<span type="button" (click)="labelModel.color=i.color" *ngFor="let i of labelColor" [ngStyle]="{'background-color': i.color, 'color': i.textColor }">Aa</span> [class.borderSty]="i.color == '#FFFFFF'" [ngStyle]="{'background-color': i.color, 'color': i.textColor }">Aa</label>
</div> </clr-dropdown-menu>
<input type="text" id="color" size="8" name="color" disabled [(ngModel)]="labelModel.color" #color="ngModel"> </clr-dropdown>
</div> <input type="text" id="color" size="8" name="color" disabled [(ngModel)]="labelModel.color" #color="ngModel">
</label> </label>
<label> <label>
<label for="description">{{'LABEL.DESCRIPTION' | translate}}</label> <label for="description">{{'LABEL.DESCRIPTION' | translate}}</label>
<input type="text" id="description" name="description" size="30" [(ngModel)]="labelModel.description" #description="ngModel"> <input type="text" id="description" name="description" size="30" [(ngModel)]="labelModel.description"
#description="ngModel">
</label> </label>
<label> <label>
<button type="button" class="btn btn-sm btn-outline" (click)="onCancel()" [disabled]="inProgress">{{ 'BUTTON.CANCEL' | translate }}</button> <button type="button" class="btn btn-sm btn-outline" (click)="onCancel()" [disabled]="inProgress">{{
<button type="submit" class="btn btn-sm btn-primary" (click)="onSubmit()" [disabled]="!isValid">{{ 'BUTTON.OK' | translate }}</button> 'BUTTON.CANCEL' | translate }}
</button>
<button type="submit" class="btn btn-sm btn-primary" (click)="onSubmit()" [disabled]="!isValid">{{
'BUTTON.OK' | translate }}
</button>
</label> </label>
</section> </section>
</form> </form>

49
src/ui_ng/lib/src/create-edit-label/create-edit-label.component.scss
View File

@ -29,20 +29,7 @@
margin-left: 20px; margin-left: 20px;
} }
.colorDrop {
display: inline-block;
position: relative;
width: 132px;
}
.colorDrop .colorPanel {
position: absolute;
width: 166px;
padding: 6px;
background-color: white;
border: 1px solid #ccc;
z-index: 10;
}
.btnColor { .btnColor {
margin: 0 !important; margin: 0 !important;
@ -62,13 +49,29 @@
border: 1px solid #A1A1A1; border: 1px solid #A1A1A1;
} }
.closePanel { .dropdown-menu {
display: block; display: inline-block;
left: 138px; width: 166px;
position: relative; padding: 6px;
font-size: 18px; }
width: 10px;
line-height: 8px; .dropdown-menu .dropdown-item {
cursor: pointer; display: inline-block;
text-decoration: none; margin: 2px 4px;
} padding: 0px;
width: 30px;
height: 24px;
text-align: center;
line-height: 24px;
}
.dropdown-item {
border: 0px;
color: white;
font-size: 12px;
}
.dropdown .dropdown-toggle.btn {
padding: 0 !important;
}
.borderSty{border: 1px solid #A1A1A1; line-height: 22px;}

8
src/ui_ng/lib/src/create-edit-label/create-edit-label.component.ts
View File

@ -48,7 +48,6 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
checkOnGoing: boolean; checkOnGoing: boolean;
isLabelNameExist = false; isLabelNameExist = false;
panelHidden = true;
nameChecker = new Subject<string>(); nameChecker = new Subject<string>();
@ -122,13 +121,6 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
this.copeLabelModel = clone(label[0]); this.copeLabelModel = clone(label[0]);
} }
openColorPanel(): void {
this.panelHidden = false;
}
closeColorPanel(): void {
this.panelHidden = true;
}
public get hasChanged(): boolean { public get hasChanged(): boolean {
return !compareValue(this.copeLabelModel, this.labelModel); return !compareValue(this.copeLabelModel, this.labelModel);
} }

2
src/ui_ng/lib/src/operation/operation.service.ts
View File

@ -1,5 +1,7 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject'; import { Subject } from 'rxjs/Subject';
// tslint:disable-next-line:no-unused-variable
import { Observable } from "rxjs/Observable";
import {OperateInfo} from "./operate"; import {OperateInfo} from "./operate";
@Injectable() @Injectable()

2
src/ui_ng/package.json
View File

@ -49,7 +49,7 @@
"bootstrap": "4.0.0-alpha.5", "bootstrap": "4.0.0-alpha.5",
"codelyzer": "~2.0.0-beta.4", "codelyzer": "~2.0.0-beta.4",
"enhanced-resolve": "^3.0.0", "enhanced-resolve": "^3.0.0",
"harbor-ui": "0.7.19-test-3", "harbor-ui": "0.7.19-test-5",
"jasmine-core": "2.4.1", "jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0", "jasmine-spec-reporter": "2.5.0",
"karma": "~1.7.0", "karma": "~1.7.0",