Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-07-01 17:25:06 +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>
<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">
<input type="text" id="name" name="name" required size="20" autocomplete="off" [(ngModel)]="labelModel.name" #name="ngModel" (keyup)="existValid(labelModel.name)">
<label aria-haspopup="true" role="tooltip" [class.invalid]="isLabelNameExist"
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">
{{'LABEL.NAME_ALREADY_EXISTS' | translate }}
</span>
@ -12,24 +14,29 @@
</label>
<label>
<label for="color">{{'LABEL.COLOR' | translate}}</label>
<div class="colorDrop">
<button type="button" class="btn btn-outline btnColor btn-sm" >
<clr-icon shape="caret down" size="20" style='right:2px; width:24px; height:18px;' (click)="openColorPanel()"></clr-icon>
</button>
<div class="colorPanel" [hidden]="panelHidden">
<a class="closePanel" (click)="closeColorPanel()">&times;</a>
<span type="button" (click)="labelModel.color=i.color" *ngFor="let i of labelColor" [ngStyle]="{'background-color': i.color, 'color': i.textColor }">Aa</span>
</div>
<input type="text" id="color" size="8" name="color" disabled [(ngModel)]="labelModel.color" #color="ngModel">
</div>
<clr-dropdown [clrCloseMenuOnItemClick]="false">
<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;'></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen>
<label class="dropdown-item" (click)="labelModel.color=i.color" *ngFor="let i of labelColor"
[class.borderSty]="i.color == '#FFFFFF'" [ngStyle]="{'background-color': i.color, 'color': i.textColor }">Aa</label>
</clr-dropdown-menu>
</clr-dropdown>
<input type="text" id="color" size="8" name="color" disabled [(ngModel)]="labelModel.color" #color="ngModel">
</label>
<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>
<button type="button" class="btn btn-sm btn-outline" (click)="onCancel()" [disabled]="inProgress">{{ 'BUTTON.CANCEL' | translate }}</button>
<button type="submit" class="btn btn-sm btn-primary" (click)="onSubmit()" [disabled]="!isValid">{{ 'BUTTON.OK' | translate }}</button>
<button type="button" class="btn btn-sm btn-outline" (click)="onCancel()" [disabled]="inProgress">{{
'BUTTON.CANCEL' | translate }}
</button>
<button type="submit" class="btn btn-sm btn-primary" (click)="onSubmit()" [disabled]="!isValid">{{
'BUTTON.OK' | translate }}
</button>
</label>
</section>
</form>

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

@ -29,20 +29,7 @@
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 {
margin: 0 !important;
@ -62,13 +49,29 @@
border: 1px solid #A1A1A1;
}
.closePanel {
display: block;
left: 138px;
position: relative;
font-size: 18px;
width: 10px;
line-height: 8px;
cursor: pointer;
text-decoration: none;
}
.dropdown-menu {
display: inline-block;
width: 166px;
padding: 6px;
}
.dropdown-menu .dropdown-item {
display: inline-block;
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;
isLabelNameExist = false;
panelHidden = true;
nameChecker = new Subject<string>();
@ -122,13 +121,6 @@ export class CreateEditLabelComponent implements OnInit, OnDestroy {
this.copeLabelModel = clone(label[0]);
}
openColorPanel(): void {
this.panelHidden = false;
}
closeColorPanel(): void {
this.panelHidden = true;
}
public get hasChanged(): boolean {
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 { Subject } from 'rxjs/Subject';
// tslint:disable-next-line:no-unused-variable
import { Observable } from "rxjs/Observable";
import {OperateInfo} from "./operate";
@Injectable()

2
src/ui_ng/package.json
View File

@ -49,7 +49,7 @@
"bootstrap": "4.0.0-alpha.5",
"codelyzer": "~2.0.0-beta.4",
"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-spec-reporter": "2.5.0",
"karma": "~1.7.0",