From 7d55db51b44accc46fe9a716c7af2406b31d4281 Mon Sep 17 00:00:00 2001 From: Nizamudeen A Date: Sat, 22 Jun 2024 20:59:23 +0530 Subject: [PATCH] mgr/dashboard: carbonize general components and styles alert-panel and some other general components Fixes: https://tracker.ceph.com/issues/67231 Signed-off-by: Nizamudeen A --- .../alert-panel/alert-panel.component.html | 47 ++---------- .../alert-panel/alert-panel.component.ts | 54 ++++++------- .../shared/components/components.module.ts | 23 +++++- .../form-advanced-fieldset.component.html | 32 +++----- .../form-advanced-fieldset.component.scss | 22 ------ .../components/helper/helper.component.html | 11 +-- .../components/helper/helper.component.scss | 8 +- .../components/helper/helper.component.ts | 4 - .../submit-button.component.html | 14 ++-- .../frontend/src/styles/_carbon-defaults.scss | 76 ++++++++++++++++++- .../src/styles/ceph-custom/_buttons.scss | 30 +++++++- .../src/styles/ceph-custom/_forms.scss | 44 +++++++---- .../styles/defaults/_bootstrap-defaults.scss | 4 + .../frontend/src/styles/themes/_default.scss | 23 ++++-- 14 files changed, 233 insertions(+), 159 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html index 58761eead54bb..bf57bb82d78d4 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html @@ -1,50 +1,19 @@ - - - - - - - - - - - - - - - -
- - {{ title }}
- -
- - + - + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.ts index 3402eea574277..fa16c1dd6c585 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.ts @@ -19,27 +19,25 @@ import { Icons } from '~/app/shared/enum/icons.enum'; export class AlertPanelComponent implements OnInit { @ViewChild('content', { static: true }) alertContent: TemplateRef; - @ViewChild('closeTpl', { static: true }) - closeTpl: TemplateRef; + @ViewChild('actionTpl', { static: true }) + actionTpl: TemplateRef; @Input() title = ''; @Input() - bootstrapClass = ''; - @Input() type: 'warning' | 'error' | 'info' | 'success' | 'danger'; @Input() - typeIcon: Icons | string; + showTitle = true; @Input() size: 'slim' | 'normal' = 'normal'; @Input() - showIcon = true; - @Input() - showTitle = true; - @Input() dismissible = false; @Input() spacingClass = ''; + @Input() + actionName = ''; + @Input() + lowContrast = true; /** * The event that is triggered when the close button (x) has been @@ -48,50 +46,52 @@ export class AlertPanelComponent implements OnInit { @Output() dismissed = new EventEmitter(); + /** + * The event that is triggered when the action button has been + * pressed. + */ + @Output() + action = new EventEmitter(); + icons = Icons; notificationContent: NotificationContent; ngOnInit() { const type: NotificationType = this.type === 'danger' ? 'error' : this.type; - this.notificationContent = { - type: type, - template: this.alertContent, - actionsTemplate: this.closeTpl, - showClose: false, - title: this.title - }; - switch (this.type) { case 'warning': this.title = this.title || $localize`Warning`; - this.typeIcon = this.typeIcon || Icons.warning; - this.bootstrapClass = this.bootstrapClass || 'warning'; break; case 'error': this.title = this.title || $localize`Error`; - this.typeIcon = this.typeIcon || Icons.destroyCircle; - this.bootstrapClass = this.bootstrapClass || 'danger'; break; case 'info': this.title = this.title || $localize`Information`; - this.typeIcon = this.typeIcon || Icons.infoCircle; - this.bootstrapClass = this.bootstrapClass || 'info'; break; case 'success': this.title = this.title || $localize`Success`; - this.typeIcon = this.typeIcon || Icons.check; - this.bootstrapClass = this.bootstrapClass || 'success'; break; case 'danger': this.title = this.title || $localize`Danger`; - this.typeIcon = this.typeIcon || Icons.warning; - this.bootstrapClass = this.bootstrapClass || 'danger'; break; } + + this.notificationContent = { + type: type, + template: this.alertContent, + actionsTemplate: this.actionTpl, + showClose: this.dismissible, + title: this.showTitle ? this.title : '', + lowContrast: this.lowContrast + }; } onClose(): void { this.dismissed.emit(); } + + onAction(): void { + this.action.emit(); + } } 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 e6ccde0a36293..2afa45eb931ea 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 @@ -19,7 +19,12 @@ import { UIShellModule, ButtonModule, NotificationModule, - IconModule + IconModule, + IconService, + TooltipModule, + GridModule, + AccordionModule, + LoadingModule } from 'carbon-components-angular'; import { MotdComponent } from '~/app/shared/components/motd/motd.component'; @@ -64,6 +69,9 @@ import { HelpTextComponent } from './help-text/help-text.component'; import { FormAdvancedFieldsetComponent } from './form-advanced-fieldset/form-advanced-fieldset.component'; import { UpgradableComponent } from './upgradable/upgradable.component'; +// Icons +import InfoIcon from '@carbon/icons/es/information/16'; + @NgModule({ imports: [ CommonModule, @@ -86,7 +94,12 @@ import { UpgradableComponent } from './upgradable/upgradable.component'; UIShellModule, ButtonModule, NotificationModule, - IconModule + IconModule, + TooltipModule, + IconModule, + GridModule, + AccordionModule, + LoadingModule ], declarations: [ SparklineComponent, @@ -168,4 +181,8 @@ import { UpgradableComponent } from './upgradable/upgradable.component'; UpgradableComponent ] }) -export class ComponentsModule {} +export class ComponentsModule { + constructor(private iconService: IconService) { + this.iconService.registerAll([InfoIcon]); + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html index 133bc8440e675..56e254e6ba0e1 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.html @@ -1,22 +1,14 @@
- -
- -
- -
-
-
- -
-
-
+ + + + + + + +
Advanced
+
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.scss index e3bc7aaed0ca0..e69de29bb2d1d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-advanced-fieldset/form-advanced-fieldset.component.scss @@ -1,22 +0,0 @@ -/* - Overrides the active and focus states of bootstrap accordion, - in order to align the accordion css with rest of the form. - - Summary of overrides: - - font-size was 1 rem - - color was blue when higlighted - - border,outlines and box-shadow were set - - accordion down button in active form was a blue svg icon - - */ -.cd-form-advanced-fieldset-buttton { - --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon); - background-color: inherit; - border: hidden; - border-color: inherit; - box-shadow: none; - color: inherit; - font-size: inherit; - outline: 0; - text-decoration: none; -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html index 20ab7c80a67ed..da1a4800f7f45 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.html @@ -4,8 +4,9 @@ - + + + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss index 861b607cb7742..bf5c67b4cc7fe 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss @@ -1,7 +1,3 @@ -@use './src/styles/vendor/variables' as vv; - -i { - color: vv.$primary; - cursor: pointer; - padding-left: 4px; +cds-tooltip { + margin-left: 5px; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.ts index 84d1639b16f0d..073fb37a07185 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.ts @@ -1,7 +1,5 @@ import { Component, Input } from '@angular/core'; -import { Icons } from '~/app/shared/enum/icons.enum'; - @Component({ selector: 'cd-helper', templateUrl: './helper.component.html', @@ -16,6 +14,4 @@ export class HelperComponent { @Input() html: any; - - icons = Icons; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/submit-button/submit-button.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/submit-button/submit-button.component.html index af557a293cb30..6d5c6470484c7 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/submit-button/submit-button.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/submit-button/submit-button.component.html @@ -1,11 +1,13 @@ diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss index 89f002572a7dc..ee34cd08b5847 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/_carbon-defaults.scss @@ -8,10 +8,11 @@ @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/theme' with ( $theme: default.$theme, - $fallback: compat.$g90, + $fallback: compat.$white, ); @use '@carbon/styles'; @use '@carbon/type'; +@use './src/styles/vendor/variables' as vv; /********************************************************************************** These are meant to be temporary style overrides. @@ -40,10 +41,41 @@ a.cds--side-nav__link { } .cds--side-nav__submenu-title, -a.cds--side-nav__link > .cds--side-nav__link-text { +a.cds--side-nav__link > .cds--side-nav__link-text, +a.cds--side-nav__link--active > .cds--side-nav__link-text, +.cds--side-nav__item--active .cds--side-nav__icon > svg { + color: vv.$body-bg-alt; + fill: vv.$body-bg-alt; font-size: calc(type.type-scale(4) + 0.5px); } +a.cds--header__menu-item, +.cds--overflow-menu-options__btn, +.cds--side-nav__menu + a.cds--side-nav__link:not(.cds--side-nav__link--current):not([aria-current='page']):hover + > span, +.cds--side-nav__item:not(.cds--side-nav__item--active) > .cds--side-nav__link:hover > span, +a.cds--header__menu-item:hover > svg { + color: vv.$body-bg-alt; + fill: vv.$body-bg-alt; + + &:hover, + &:focus { + color: vv.$body-bg-alt; + fill: vv.$body-bg-alt; + } +} + +.cds--overflow-menu-options__option:hover, +.cds--overflow-menu:hover, +.cds--header__menu-title[aria-expanded='true'] + .cds--header__menu .cds--header__menu-item:hover { + background-color: vv.$gray-600; +} + +a.cds--side-nav__link[aria-current='page'] .cds--side-nav__link-text > span { + color: vv.$body-bg-alt; +} + .cds--side-nav__icon > svg { block-size: 20px; inline-size: 20px; @@ -75,7 +107,16 @@ a.cds--header__menu-item, .cds--header__action, .cds--header { block-size: $header-block-size; + border: 0; font-size: calc(type.type-scale(4) + 0.5px); + + .cds--header__menu-trigger { + border: 1px solid vv.$body-bg-alt; + } + + .cds--header__menu-trigger > svg { + fill: vv.$body-bg-alt; + } } button.cds--header__menu-trigger.cds--header__action.cds--header__menu-toggle { @@ -101,3 +142,34 @@ Overflow menu .cds--overflow-menu.cds--overflow-menu--open { box-shadow: none; } + +/****************************************** +Forms +******************************************/ +.form-header { + @include type.type-style('heading-04'); + margin-bottom: 40px; +} + +.cd-header { + @extend .pb-1; + @extend .mt-4; + @extend .mb-4; + @include type.type-style('heading-03'); +} + +.spacing-03 { + margin: 0.5rem; +} + +.cds--col { + padding-inline: 0; +} + +/****************************************** +Breadcrumbs +******************************************/ +.cds--breadcrumb { + margin-top: 8px; + padding: 8px 0; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss index dd529777a579d..d17471a2aad6b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss @@ -53,10 +53,6 @@ } } -.btn-primary { - @extend .btn-accent; -} - // We have some inputs that don't have a corresponding formControlName, // to be able to get the same styling and no JS errors we need use a different // class name @@ -98,3 +94,29 @@ .card-footer button.btn:not(:first-child) { margin-left: 5px; } + +/****************************************** +Button +******************************************/ +.cds--btn { + .cds--loading { + margin-left: 0.5rem; + } + + .cds--loading__stroke { + stroke: vv.$white; + } +} + +.cds--btn--primary { + background-color: vv.$primary; + + &:hover { + background-color: vv.$btn-primary-hover; + } + + &:focus, + &:active { + background-color: vv.$btn-primary-active; + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss index 26edbd11264f0..57b604b4e3950 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss @@ -1,4 +1,5 @@ @use '../vendor/variables' as vv; +@use '@carbon/colors'; /* Forms */ .required::after { @@ -13,25 +14,10 @@ width: 100%; } -.form-control, -.form-select { - display: table-cell; - - &:focus { - border-color: rgba(vv.$primary, 0.8); - box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5); - outline: 0; - } -} - .custom-checkbox { @extend .form-check; padding-top: 7px; - .custom-control-input { - @extend .form-check-input; - } - .custom-control-label { @extend .form-check-label; } @@ -103,3 +89,31 @@ cd-modal { .custom-control-label { @extend .form-label; } + +/****************************************** +Carbon Overrides +******************************************/ + +/****************************************** +Form Controls +******************************************/ +.form-item { + @extend .cds--form-item; + display: block; + margin-bottom: 32px; +} + +.cds-input-group { + display: flex; + flex-direction: row; + width: 100%; +} + +.icon-btn-group { + background-color: colors.$gray-10; + border-bottom: 1px solid colors.$gray-50; +} + +fieldset { + @extend .cds--fieldset; +} 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 16cbcac3e321d..ed319534085fd 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 @@ -67,6 +67,10 @@ $theme-colors: ( 'dark': $dark ) !default; +// Button colors +$btn-primary-hover: #1f6f79 !default; +$btn-primary-active: #1e6872 !default; + // Body $body-color-bright: $light !default; $body-bg: $white !default; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/themes/_default.scss b/src/pybind/mgr/dashboard/frontend/src/styles/themes/_default.scss index cdb1e986f8e5f..7d7cacd9d4774 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/themes/_default.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/themes/_default.scss @@ -4,17 +4,28 @@ $theme: ( text-disabled: vv.$gray-500, text-error: vv.$danger, text-helper: vv.$body-color, - text-inverse: vv.$black, + text-inverse: vv.$white, text-on-color: vv.$white, text-on-color-disabled: vv.$gray-700, text-placeholder: vv.$gray-700, - text-primary: vv.$body-bg-alt, - text-secondary: vv.$body-bg-alt, - btn-primary: vv.$primary, border-interactive: vv.$primary, background: vv.$secondary, layer-01: vv.$secondary, - icon-primary: vv.$gray-100, + icon-primary: vv.$gray-900, icon-secondary: vv.$gray-300, - link-primary: vv.$primary + link-primary: vv.$primary, + focus: vv.$primary, + field-hover-01: vv.$gray-200, + icon-disabled: vv.$gray-500, + icon-inverse: vv.$gray-100, + button-primary: vv.$primary, + button-primary-hover: vv.$primary-500, + interactive: vv.$primary, + support-info: vv.$info, + support-success: vv.$success, + support-warning: vv.$warning, + support-error: vv.$danger, + // Sizes + heading-03: 1.75rem, + spacing-03: 0.5rem ); -- 2.39.5