fix(ui): adjust font color for brightness (close #3330) (#3416)

Signed-off-by: Benjamin Coenen <benjamin.coenen@corp.ovh.com>
ovh · Oct 9, 2018 · 0b0374b · 0b0374b
1 parent 28fdc63
commit 0b0374b
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 10 deletions.
diff --git a/ui/src/app/model/project.model.ts b/ui/src/app/model/project.model.ts
@@ -61,4 +61,6 @@ export class Label {
   color: string;
   project_id: number;
   workflow_id: number;
+  // ui params
+  font_color: string;
 }
diff --git a/ui/src/app/service/helpers/helpers.service.ts b/ui/src/app/service/helpers/helpers.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class HelpersService {
+  constructor() {
+
+  }
+
+  getBrightness(rgb) {
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(rgb);
+    return result ?
+      0.2126 * parseInt(result[1], 16) +
+      0.7152 * parseInt(result[2], 16) +
+      0.0722 * parseInt(result[3], 16) : 0;
+  }
+
+  getBrightnessColor(rgb) {
+    if (this.getBrightness(rgb) > 130) {
+      return '#000000';
+    }
+    return '#ffffff';
+  }
+}
diff --git a/ui/src/app/service/services.module.ts b/ui/src/app/service/services.module.ts
@@ -20,6 +20,7 @@ import {DownloadService} from './download/download.service';
 import {EnvironmentAuditService} from './environment/environment.audit.service';
 import {EnvironmentService} from './environment/environment.service';
 import {GroupService} from './group/group.service';
+import {HelpersService} from './helpers/helpers.service';
 import {HookService} from './hook/hook.service';
 import {ImportAsCodeService} from './import-as-code/import.service';
 import {KeyService} from './keys/keys.service';
@@ -88,6 +89,7 @@ export class ServicesModule {
                 EnvironmentService,
                 GroupService,
                 HookService,
+                HelpersService,
                 ImportAsCodeService,
                 BroadcastService,
                 BroadcastStore,
@@ -162,6 +164,7 @@ export {
     EnvironmentAuditService,
     GroupService,
     HookService,
+    HelpersService,
     ImportAsCodeService,
     BroadcastStore,
     KeyService,

diff --git a/ui/src/app/views/project/show/project.component.ts b/ui/src/app/views/project/show/project.component.ts
@@ -9,6 +9,7 @@ import {LoadOpts, Project} from '../../../model/project.model';
 import {User} from '../../../model/user.model';
 import {Warning} from '../../../model/warning.model';
 import {AuthentificationStore} from '../../../service/auth/authentification.store';
+import {HelpersService} from '../../../service/helpers/helpers.service';
 import {ProjectStore} from '../../../service/project/project.store';
 import {WarningStore} from '../../../service/warning/warning.store';
 import {AutoUnsubscribe} from '../../../shared/decorator/autoUnsubscribe';
@@ -48,9 +49,14 @@ export class ProjectShowComponent implements OnInit {
     warnEnvironment: Array<Warning>;
     warningsSub: Subscription;
 
-    constructor(private _projectStore: ProjectStore, private _route: ActivatedRoute, private _router: Router,
-                private _toast: ToastService, public _translate: TranslateService,
-                private _authentificationStore: AuthentificationStore, private _warningStore: WarningStore) {
+    constructor(private _projectStore: ProjectStore,
+                private _route: ActivatedRoute,
+                private _router: Router,
+                private _toast: ToastService,
+                public _translate: TranslateService,
+                private _authentificationStore: AuthentificationStore,
+                private _warningStore: WarningStore,
+                private _helpersService: HelpersService) {
         this.currentUser = this._authentificationStore.getUser();
     }
 
@@ -105,6 +111,12 @@ export class ProjectShowComponent implements OnInit {
             let proj = prjs.get(key);
             if (proj) {
                 if (!proj.externalChange) {
+                    if (proj.labels) {
+                      proj.labels = proj.labels.map((lbl) => {
+                        lbl.font_color = this._helpersService.getBrightnessColor(lbl.color);
+                        return lbl;
+                      });
+                    }
                     this.project = proj;
                     if (goToDefaultTab) {
                         if (this.project.workflow_migration !== 'NOT_BEGUN' && this.selectedTab === 'applications') {

diff --git a/ui/src/app/views/project/show/workflow/blocs/workflow.list.blocs.component.ts b/ui/src/app/views/project/show/workflow/blocs/workflow.list.blocs.component.ts
@@ -2,6 +2,7 @@ import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
 import {finalize} from 'rxjs/operators';
 import {IdName, Label, Project} from '../../../../../model/project.model';
 import {Warning} from '../../../../../model/warning.model';
+import {HelpersService} from '../../../../../service/helpers/helpers.service';
 import {WorkflowStore} from '../../../../../service/workflow/workflow.store';
 import {LabelsEditComponent} from '../../../../../shared/labels/edit/labels.edit.component';
 
@@ -22,6 +23,7 @@ export class ProjectWorkflowListBlocsComponent {
         this.workflowLabelsMap[wf.name] = {};
         if (wf.labels) {
           this.workflowLabelsMap[wf.name] = wf.labels.reduce((obj, lbl) => {
+            lbl.font_color = this._helpersService.getBrightnessColor(lbl.color);
             obj[lbl.name] = true;
             return obj;
           }, {});
@@ -68,7 +70,7 @@ export class ProjectWorkflowListBlocsComponent {
   filteredLabels: Array<Label> = [];
   loadingLabel = false;
 
-  constructor(private _workflowStore: WorkflowStore) { }
+  constructor(private _workflowStore: WorkflowStore, private _helpersService: HelpersService) { }
 
   linkLabelToWorkflow(wfName: string, label: Label) {
     this.loadingLabel = true;

diff --git a/ui/src/app/views/project/show/workflow/blocs/workflow.list.blocs.html b/ui/src/app/views/project/show/workflow/blocs/workflow.list.blocs.html
@@ -14,7 +14,9 @@
             </a>
             <div class="extra content">
               <span class="left floated">
-                <div *ngFor="let label of wf?.labels?.slice(0, 3)" [style.background-color]="label.color" class="ui horizontal label">
+                <div *ngFor="let label of wf?.labels?.slice(0, 3)"
+                    [style.background-color]="label.color"
+                    [style.color]="label.font_color" class="ui horizontal label">
                     {{label.name}}
                 </div>
                 <div class="ui horizontal label" *ngIf="wf?.labels?.length > 3">

diff --git a/ui/src/app/views/project/show/workflow/labels/workflow.list.labels.component.ts b/ui/src/app/views/project/show/workflow/labels/workflow.list.labels.component.ts
@@ -3,6 +3,7 @@ import {cloneDeep} from 'lodash';
 import {finalize} from 'rxjs/operators';
 import {IdName, Label, Project} from '../../../../../model/project.model';
 import {Warning} from '../../../../../model/warning.model';
+import {HelpersService} from '../../../../../service/helpers/helpers.service';
 import {WorkflowStore} from '../../../../../service/workflow/workflow.store';
 import {LabelsEditComponent} from '../../../../../shared/labels/edit/labels.edit.component';
 
@@ -40,6 +41,9 @@ export class ProjectWorkflowListLabelsComponent {
         this.workflowLabelsMap[wf.name] = {};
         if (wf.labels && wf.labels.length > 0) {
           wf.labels.forEach((lbl) => {
+            if (!lbl.font_color) {
+              lbl.font_color = this._helpersService.getBrightnessColor(lbl.color);
+            }
             this.workflowLabelsMap[wf.name][lbl.name] = true;
             if (!this.workflowLabelsMapByLabels[lbl.name]) {
               this.workflowLabelsMapByLabels[lbl.name] = [];
@@ -96,7 +100,7 @@ export class ProjectWorkflowListLabelsComponent {
   filteredLabels: Array<Label> = [];
   loadingLabel = false;
 
-  constructor(private _workflowStore: WorkflowStore) { }
+  constructor(private _workflowStore: WorkflowStore, private _helpersService: HelpersService) { }
 
   linkLabelToWorkflow(wfName: string, label: Label) {
     this.loadingLabel = true;

diff --git a/ui/src/app/views/project/show/workflow/labels/workflow.list.labels.html b/ui/src/app/views/project/show/workflow/labels/workflow.list.labels.html
@@ -5,7 +5,7 @@
             <sui-accordion-panel>
                 <div title>
                     <i class="dropdown icon"></i>
-                    <div class="ui label" [style.background-color]="label.color">
+                    <div class="ui label" [style.background-color]="label.color" [style.color]="label.font_color">
                         {{label.name}}
                     </div>
                 </div>
@@ -29,7 +29,7 @@
                             </a>
                             <div class="extra content">
                               <span class="left floated">
-                                <div *ngFor="let label of wf?.labels?.slice(0, 3)" [style.background-color]="label.color" class="ui horizontal label">
+                                <div *ngFor="let label of wf?.labels?.slice(0, 3)" [style.background-color]="label.color" [style.color]="label.font_color" class="ui horizontal label">
                                     {{label.name}}
                                 </div>
                                 <div class="ui horizontal label" *ngIf="wf?.labels?.length > 3">

diff --git a/ui/src/app/views/project/show/workflow/lines/workflow.list.lines.component.ts b/ui/src/app/views/project/show/workflow/lines/workflow.list.lines.component.ts
@@ -2,6 +2,7 @@ import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
 import {finalize} from 'rxjs/operators';
 import {IdName, Label, Project} from '../../../../../model/project.model';
 import {Warning} from '../../../../../model/warning.model';
+import {HelpersService} from '../../../../../service/helpers/helpers.service';
 import {WorkflowStore} from '../../../../../service/workflow/workflow.store';
 import {LabelsEditComponent} from '../../../../../shared/labels/edit/labels.edit.component';
 
@@ -22,6 +23,9 @@ export class ProjectWorkflowListLinesComponent {
         this.workflowLabelsMap[wf.name] = {};
         if (wf.labels) {
           this.workflowLabelsMap[wf.name] = wf.labels.reduce((obj, lbl) => {
+            if (!lbl.font_color) {
+              lbl.font_color = this._helpersService.getBrightnessColor(lbl.color);
+            }
             obj[lbl.name] = true;
             return obj;
           }, {});
@@ -68,7 +72,7 @@ export class ProjectWorkflowListLinesComponent {
   filteredLabels: Array<Label> = [];
   loadingLabel = false;
 
-  constructor(private _workflowStore: WorkflowStore) { }
+  constructor(private _workflowStore: WorkflowStore, private _helpersService: HelpersService) { }
 
   linkLabelToWorkflow(wfName: string, label: Label) {
     this.loadingLabel = true;

diff --git a/ui/src/app/views/project/show/workflow/lines/workflow.list.lines.html b/ui/src/app/views/project/show/workflow/lines/workflow.list.lines.html
@@ -3,7 +3,10 @@
     <div class="ui celled relaxed selection list">
         <div class="item pointing" [routerLink]="['./workflow', wf.name]" *ngFor="let wf of workflows">
             <div class="right floated content">
-              <div class="ui horizontal label" [style.background-color]="label.color" *ngFor="let label of wf?.labels?.slice(0, 3)">
+              <div class="ui horizontal label"
+                  [style.background-color]="label.color"
+                  [style.color]="label.font_color"
+                  *ngFor="let label of wf?.labels?.slice(0, 3)">
                   {{label.name}}
               </div>
               <div class="ui horizontal label" *ngIf="wf?.labels?.length > 4">