8000 fix(ui): adjust font color for brightness (close #3330) (#3416) · ovh/cds@0b0374b · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 0b0374b

Browse files
bnjjjyesnault
bnjjj
authored and
yesnault
committed
fix(ui): adjust font color for brightness (close #3330) (#3416)
Signed-off-by: Benjamin Coenen <benjamin.coenen@corp.ovh.com>
1 parent 28fdc63 commit 0b0374b

File tree

10 files changed

+65
-10
lines changed

10 files changed

+65
-10
lines changed

‎ui/src/app/model/project.model.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,6 @@ export class Label {
6161
color: string;
6262
project_id: number;
6363
workflow_id: number;
64+
// ui params
65+
font_color: string;
6466
}

‎ui/src/app/service/helpers/helpers.service.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Injectable } from '@angular/core';
2+
3+
@Injectable()
4+
export class HelpersService {
5+
constructor() {
6+
7+
}
8+
9+
getBrightness(rgb) {
10+
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(rgb);
11+
return result ?
12+
0.2126 * parseInt(result[1], 16) +
13+
0.7152 * parseInt(result[2], 16) +
14+
0.0722 * parseInt(result[3], 16) : 0;
15+
}
16+
17+
getBrightnessColor(rgb) {
18+
if (this.getBrightness(rgb) > 130) {
19+
return '#000000';
20+
}
21+
return '#ffffff';
22+
}
23+
}

‎ui/src/app/service/services.module.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {DownloadService} from './download/download.service';
2020
import {EnvironmentAuditService} from './environment/environment.audit.service';
2121
import {EnvironmentService} from './environment/environment.service';
2222
import {GroupService} from './group/group.service';
23+
import {HelpersService} from './helpers/helpers.service';
2324
import {HookService} from './hook/hook.service';
2425
import {ImportAsCodeService} from './import-as-code/import.service';
2526
import {KeyService} from './keys/keys.service';
@@ -88,6 +89,7 @@ export class ServicesModule {
8889
EnvironmentService,
8990
GroupService,
9091
HookService,
92+
HelpersService,
9193
ImportAsCodeService,
9294
BroadcastService,
9395
BroadcastStore,
@@ -162,6 +164,7 @@ export {
162164
EnvironmentAuditService,
163165
GroupService,
164166
HookService,
167+
HelpersService,
165168
ImportAsCodeService,
166169
BroadcastStore,
167170
KeyService,

‎ui/src/app/views/project/show/project.component.ts

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {LoadOpts, Project} from '../../../model/project.model';
99
import {User} from '../../../model/user.model';
1010
import {Warning} from '../../../model/warning.model';
1111
import {AuthentificationStore} from '../../../service/auth/authentification.store';
12+
import {HelpersService} from '../../../service/helpers/helpers.service';
1213
import {ProjectStore} from '../../../service/project/project.store';
1314
import {WarningStore} from '../../../service/warning/warning.store';
1415
import {AutoUnsubscribe} from '../../../shared/decorator/autoUnsubscribe';
@@ -48,9 +49,14 @@ export class ProjectShowComponent implements OnInit {
4849
warnEnvironment: Array<Warning>;
4950
warningsSub: Subscription;
5051

51-
constructor(private _projectStore: ProjectStore, private _route: ActivatedRoute, private _router: Router,
52-
private _toast: ToastService, public _translate: TranslateService,
53-
private _authentificationStore: AuthentificationStore, private _warningStore: WarningStore) {
52+
constructor(private _projectStore: ProjectStore,
53+
private _route: ActivatedRoute,
54+
private _router: Router,
55+
private _toast: ToastService,
56+
public _translate: TranslateService,
57+
private _authentificationStore: AuthentificationStore,
58+
private _warningStore: WarningStore,
59+
private _helpersService: HelpersService) {
5460
this.currentUser = this._authentificationStore.getUser();
5561
}
5662

@@ -105,6 +111,12 @@ export class ProjectShowComponent implements OnInit {
105111
let proj = prjs.get(key);
106112
if (proj) {
107113
if (!proj.externalChange) {
114+
if (proj.labels) {
115+
proj.labels = proj.labels.map((lbl) => {
116+
lbl.font_color = this._helpersService.getBrightnessColor(lbl.color);
117+
return lbl;
118+
});
119+
}
108120
this.project = proj;
109121
if (goToDefaultTab) {
110122
if (this.project.workflow_migration !== 'NOT_BEGUN' && this.selectedTab === 'applications') {

‎ui/src/app/views/project/show/workflow/blocs/workflow.list.blocs.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
22
import {finalize} from 'rxjs/operators';
33
import {IdName, Label, Project} from '../../../../../model/project.model';
44
import {Warning} from '../../../../../model/warning.model';
5+
import {HelpersService} from '../../../../../service/helpers/helpers.service';
56
import {WorkflowStore} from '../../../../../service/workflow/workflow.store';
67
import {LabelsEditComponent} from '../../../../../shared/labels/edit/labels.edit.component';
78

@@ -22,6 +23,7 @@ export class ProjectWorkflowListBlocsComponent {
2223
this.workflowLabelsMap[wf.name] = {};
2324
if (wf.labels) {
2425
this.workflowLabelsMap[wf.name] = wf.labels.reduce((obj, lbl) => {
26+
lbl.font_color = this._helpersService.getBrightnessColor(lbl.color);
2527
obj[lbl.name] = true;
2628
return obj;
2729
}, {});
@@ -68,7 +70,7 @@ export class ProjectWorkflowListBlocsComponent {
6870
filteredLabels: Array<Label> = [];
6971
loadingLabel = false;
7072

71-
constructor(private _workflowStore: WorkflowStore) { }
73+
constructor(private _workflowStore: WorkflowStore, private _helpersService: HelpersService) { }
7274

7375
linkLabelToWorkflow(wfName: string, label: Label) {
7476
this.loadingLabel = true;

‎ui/src/app/views/project/show/workflow/blocs/workflow.list.blocs.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
</a>
1515
<div class="extra content">
1616
<span class="left floated">
17-
<div *ngFor="let label of wf?.labels?.slice(0, 3)" [style.background-color]="label.color" class="ui horizontal label">
17+
<div *ngFor="let label of wf?.labels?.slice(0, 3)"
18+
[style.background-color]="label.color"
19+
[style.color]="label.font_color" class="ui horizontal label">
1820
{{label.name}}
1921
</div>
2022
<div class="ui horizontal label" *ngIf="wf?.labels?.length > 3">

‎ui/src/app/views/project/show/workflow/labels/workflow.list.labels.component.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {cloneDeep} from 'lodash';
33
import {finalize} from 'rxjs/operators';
44
import {IdName, Label, Project} from '../../../../../model/project.model';
55
import {Warning} from '../../../../../model/warning.model';
6+
import {HelpersService} from '../../../../../service/helpers/helpers.service';
67
import {WorkflowStore} from '../../../../../service/workflow/workflow.store';
78
import {LabelsEditComponent} from '../../../../../shared/labels/edit/labels.edit.component';
89

@@ -40,6 +41,9 @@ export class ProjectWorkflowListLabelsComponent {
4041
this.workflowLabelsMap[wf.name] = {};
4142
if (wf.labels && wf.labels.length > 0) {
4243
wf.labels.forEach((lbl) => {
44+
if (!lbl.font_color) {
45+
lbl.font_color = this._helpersService.getBrightnessColor(lbl.color);
46+
}
4347
this.workflowLabelsMap[wf.name][lbl.name] = true;
4448
if (!this.workflowLabelsMapByLabels[lbl.name]) {
4549
this.workflowLabelsMapByLabels[lbl.name] = [];
@@ -96,7 +100,7 @@ export class ProjectWorkflowListLabelsComponent {
96100
filteredLabels: Array<Label> = [];
97101
loadingLabel = false;
98102

99-
constructor(private _workflowStore: WorkflowStore) { }
103+
constructor(private _workflowStore: WorkflowStore, private _helpersService: HelpersService) { }
100104

101105
linkLabelToWorkflow(wfName: string, label: Label) {
102106
this.loadingLabel = true;

‎ui/src/app/views/project/show/workflow/labels/workflow.list.labels.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<sui-accordion-panel>
66
<div title>
77
<i class="dropdown icon"></i>
8-
<div class="ui label" [style.background-color]="label.color">
8+
<div class="ui label" [style.background-color]="label.color" [style.color]="label.font_color">
99
{{label.name}}
1010
</div>
1111
</div>
@@ -29,7 +29,7 @@
2929
</a>
3030
<div class="extra content">
3131
<span class="left floated">
32-
<div *ngFor="let label of wf?.labels?.slice(0, 3)" [style.background-color]="label.color" class="ui horizontal label">
32+
<div *ngFor="let label of wf?.labels?.slice(0, 3)" [style.background-color]="label.color" [style.color]="label.font_color" class="ui horizontal label">
3333
{{label.name}}
3434
</div>
3535
<div class="ui horizontal label" *ngIf="wf?.labels?.length > 3">

‎ui/src/app/views/project/show/workflow/lines/workflow.list.lines.component.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
22
import {finalize} from 'rxjs/operators';
33
import {IdName, Label, Project} from '../../../../../model/project.model';
44
import {Warning} from '../../../../../model/warning.model';
5+
import {HelpersService} from '../../../../../service/helpers/helpers.service';
56
import {WorkflowStore} from '../../../../../service/workflow/workflow.store';
67
import {LabelsEditComponent} from '../../../../../shared/labels/edit/labels.edit.component';
78

@@ -22,6 +23,9 @@ export class ProjectWorkflowListLinesComponent {
2223
this.workflowLabelsMap[wf.name] = {};
2324
if (wf.labels) {
2425
this.workflowLabelsMap[wf.name] = wf.labels.reduce((obj, lbl) => {
26+
if (!lbl.font_color) {
27+
lbl.font_color = this._helpersService.getBrightnessColor(lbl.color);
28+
}
2529
obj[lbl.name] = true;
2630
return obj;
2731
}, {});
@@ -68,7 +72,7 @@ export class ProjectWorkflowListLinesComponent {
6872
filteredLabels: Array<Label> = [];
6973
loadingLabel = false;
7074

71-
constructor(private _workflowStore: WorkflowStore) { }
75+
constructor(private _workflowStore: WorkflowStore, private _helpersService: HelpersService) { }
7276

7377
linkLabelToWorkflow(wfName: string, label: Label) {
7478
this.loadingLabel = true;

‎ui/src/app/views/project/show/workflow/lines/workflow.list.lines.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@
33
<div class="ui celled relaxed selection list">
44
<div class="item pointing" [routerLink]="['./workflow', wf.name]" *ngFor="let wf of workflows">
55
<div class="right floated content">
6-
<div class="ui horizontal label" [style.background-color]="label.color" *ngFor="let label of wf?.labels?.slice(0, 3)">
6+
<div class="ui horizontal label"
7+
[style.background-color]="label.color"
8+
[style.color]="label.font_color"
9+
*ngFor="let label of wf?.labels?.slice(0, 3)">
710
{{label.name}}
811
</div>
912
<div class="ui horizontal label" *ngIf="wf?.labels?.length > 4">

0 commit comments

Comments
 (0)
0