From 29f510a522b2694903d095ac0ec45ee23c474121 Mon Sep 17 00:00:00 2001 From: Pedro Gonzalez Gomez Date: Tue, 5 Jul 2022 11:40:01 +0200 Subject: [PATCH] mgr/dashboard: auto-coloring-badges-component Signed-off-by: Pedro Gonzalez Gomez --- .../cd-label/cd-label.component.html | 11 +++++++ .../cd-label/cd-label.component.scss | 0 .../cd-label/cd-label.component.spec.ts | 25 ++++++++++++++++ .../components/cd-label/cd-label.component.ts | 11 +++++++ .../cd-label/color-class-from-text.pipe.ts | 28 +++++++++++++++++ .../shared/components/components.module.ts | 9 ++++-- .../mgr/dashboard/frontend/src/styles.scss | 30 +++++++++++++++++++ .../styles/defaults/_bootstrap-defaults.scss | 8 +++++ 8 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.scss create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.spec.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.ts create mode 100644 src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html new file mode 100644 index 00000000000..41cfae743f2 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.html @@ -0,0 +1,11 @@ + + {{ value }} + + + + + {{ key }}: {{ value }} + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.scss new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.spec.ts new file mode 100644 index 00000000000..61472cde4c8 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CdLabelComponent } from './cd-label.component'; +import { ColorClassFromTextPipe } from './color-class-from-text.pipe'; + +describe('CdLabelComponent', () => { + let component: CdLabelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [CdLabelComponent, ColorClassFromTextPipe] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CdLabelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.ts new file mode 100644 index 00000000000..ae0471bf6f7 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/cd-label.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'cd-label', + templateUrl: './cd-label.component.html', + styleUrls: ['./cd-label.component.scss'] +}) +export class CdLabelComponent { + @Input() key?: string; + @Input() value?: string; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts new file mode 100644 index 00000000000..628d7431966 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/cd-label/color-class-from-text.pipe.ts @@ -0,0 +1,28 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'colorClassFromText' +}) +export class ColorClassFromTextPipe implements PipeTransform { + readonly cssClasses: string[] = [ + 'badge-cd-label-green', + 'badge-cd-label-cyan', + 'badge-cd-label-purple', + 'badge-cd-label-light-blue', + 'badge-cd-label-gold', + 'badge-cd-label-light-green' + ]; + + transform(text: string): string { + let hash = 0; + let charCode = 0; + if (text) { + for (let i = 0; i < text.length; i++) { + charCode = text.charCodeAt(i); + // tslint:disable-next-line:no-bitwise + hash = Math.abs((hash << 5) - hash + charCode); + } + } + return this.cssClasses[hash % this.cssClasses.length]; + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts index a281bf8598e..5350e2bd50b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts @@ -21,6 +21,8 @@ import { DirectivesModule } from '../directives/directives.module'; import { PipesModule } from '../pipes/pipes.module'; import { AlertPanelComponent } from './alert-panel/alert-panel.component'; import { BackButtonComponent } from './back-button/back-button.component'; +import { CdLabelComponent } from './cd-label/cd-label.component'; +import { ColorClassFromTextPipe } from './cd-label/color-class-from-text.pipe'; import { ConfigOptionComponent } from './config-option/config-option.component'; import { ConfirmationModalComponent } from './confirmation-modal/confirmation-modal.component'; import { Copy2ClipboardButtonComponent } from './copy2clipboard-button/copy2clipboard-button.component'; @@ -97,7 +99,9 @@ import { WizardComponent } from './wizard/wizard.component'; FormButtonPanelComponent, MotdComponent, WizardComponent, - CustomLoginBannerComponent + CustomLoginBannerComponent, + CdLabelComponent, + ColorClassFromTextPipe ], providers: [], exports: [ @@ -126,7 +130,8 @@ import { WizardComponent } from './wizard/wizard.component'; FormButtonPanelComponent, MotdComponent, WizardComponent, - CustomLoginBannerComponent + CustomLoginBannerComponent, + CdLabelComponent ] }) export class ComponentsModule {} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index 099433d3148..e27b0126147 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -105,6 +105,36 @@ $grid-breakpoints: ( color: $gray-700; } +.badge-cd-label-green { + background-color: $green-300; + color: $white; +} + +.badge-cd-label-cyan { + background-color: $cyan-300; + color: $white; +} + +.badge-cd-label-purple { + background-color: $purple-300; + color: $white; +} + +.badge-cd-label-light-blue { + background-color: $light-blue-300; + color: $white; +} + +.badge-cd-label-gold { + background-color: $gold-300; + color: $white; +} + +.badge-cd-label-light-green { + background-color: $light-green-300; + color: $white; +} + // angular-tree-component tree-root { tree-viewport { diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss index d4a3d5f86be..27547c36b04 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss @@ -33,6 +33,14 @@ $danger: $red !default; $light: $gray-100 !default; $dark: #777 !default; +//badges colors +$green-300: #6ec664; +$cyan-300: #009596; +$purple-300: #a18fff; +$light-blue-300: #35caed; +$gold-300: #f4c145; +$light-green-300: #ace12e; + // Extra theme colors. $accent: $red !default; $warning-dark: $orange !default; -- 2.39.5