-<cds-actionable-notification
- class="mb-1"
- [notificationObj]="notificationContent"
- *ngIf="size === 'slim'; else normal">
-</cds-actionable-notification>
-
-<ng-template #normal>
- <ngb-alert type="{{ bootstrapClass }}"
- [dismissible]="dismissible"
- (closed)="onClose()"
- [ngClass]="spacingClass">
- <table>
- <ng-container *ngIf="size === 'normal'">
- <tr>
- <td *ngIf="showIcon"
- rowspan="2"
- class="alert-panel-icon">
- <i [ngClass]="[icons.large3x]"
- class="alert-{{ bootstrapClass }} {{ typeIcon }}"
- aria-hidden="true"></i>
- </td>
- <td *ngIf="showTitle"
- class="alert-panel-title">{{ title }}</td>
- </tr>
- <tr>
- <td class="alert-panel-text">
- <ng-container *ngTemplateOutlet="content"></ng-container>
- </td>
- </tr>
- </ng-container>
- </table>
- </ngb-alert>
-</ng-template>
+<cds-actionable-notification class="mb-1"
+ [ngClass]="spacingClass"
+ [notificationObj]="notificationContent"
+ (close)="onClose()"></cds-actionable-notification>
<ng-template #content>
<ng-content></ng-content>
</ng-template>
-<ng-template #closeTpl>
+<ng-template #actionTpl>
<button cdsActionableButton
cdsButton="ghost"
size="md"
title="Close"
- (click)="onClose()"
- *ngIf="dismissible">
- <svg class="cds--btn__icon"
- cdsIcon="close"
- size="16"></svg>
+ (click)="onAction()"
+ *ngIf="actionName"
+ i18n>{{ actionName }}
</button>
</ng-template>
export class AlertPanelComponent implements OnInit {
@ViewChild('content', { static: true })
alertContent: TemplateRef<any>;
- @ViewChild('closeTpl', { static: true })
-
closeTpl: TemplateRef<any>;
+ @ViewChild('actionTpl', { static: true })
+
actionTpl: TemplateRef<any>;
@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
@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();
+ }
}
UIShellModule,
ButtonModule,
NotificationModule,
- IconModule
+ IconModule,
+ IconService,
+ TooltipModule,
+ GridModule,
+ AccordionModule,
+ LoadingModule
} from 'carbon-components-angular';
import { MotdComponent } from '~/app/shared/components/motd/motd.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,
UIShellModule,
ButtonModule,
NotificationModule,
- IconModule
+ IconModule,
+ TooltipModule,
+ IconModule,
+ GridModule,
+ AccordionModule,
+ LoadingModule
],
declarations: [
SparklineComponent,
UpgradableComponent
]
})
-export class ComponentsModule {}
+export class ComponentsModule {
+ constructor(private iconService: IconService) {
+ this.iconService.registerAll([InfoIcon]);
+ }
+}
<fieldset>
- <legend class="cd-header">
- <div class="accordion accordion-flush">
- <button class="accordion-button cd-form-advanced-fieldset-buttton p-0"
- type="button"
- id="advanced-fieldset"
- aria-label="toggle advanced mode"
- [ngClass]="{collapsed: !showAdvanced}"
- (click)="showAdvanced = !showAdvanced"
- i18n>Advanced
- </button>
- </div>
- </legend>
- <div class="accordion-collapse collapse"
- [ngClass]="{show: showAdvanced}">
- <div class="accordion-body">
- <div class="card-body">
- <ng-content></ng-content>
- </div>
- </div>
- </div>
+ <cds-accordion size="lg"
+ class="form-item">
+ <cds-accordion-item [title]="title"
+ i18n
+ (selected)="showAdvanced = !showAdvanced">
+ <ng-content></ng-content>
+ </cds-accordion-item>
+ </cds-accordion>
+
+ <ng-template #title>
+ <h5 class="cds--accordion__title cd-header">Advanced</h5>
+ </ng-template>
</fieldset>
-/*
- 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;
-}
</div>
<ng-content></ng-content>
</ng-template>
-<i [ngClass]="iconClass ? iconClass : [icons.questionCircle]"
- aria-hidden="true"
- [ngbPopover]="popoverTpl"
- (click)="$event.preventDefault();">
-</i>
+
+<cds-tooltip [description]="popoverTpl">
+ <svg cdsIcon="information"
+ size="16"
+ title="info"></svg>
+</cds-tooltip>
-@use './src/styles/vendor/variables' as vv;
-
-i {
- color: vv.$primary;
- cursor: pointer;
- padding-left: 4px;
+cds-tooltip {
+ margin-left: 5px;
}
import { Component, Input } from '@angular/core';
-import { Icons } from '~/app/shared/enum/icons.enum';
-
@Component({
selector: 'cd-helper',
templateUrl: './helper.component.html',
@Input()
html: any;
-
- icons = Icons;
}
<button [type]="type"
- class="btn btn-accent tc_submitButton"
- [ngClass]="btnClass"
+ class="tc_submitButton"
[disabled]="loading || disabled"
(click)="submit($event)"
- [attr.aria-label]="ariaLabel">
+ [attr.aria-label]="ariaLabel"
+ size="xl"
+ cdsButton="primary">
<ng-content></ng-content>
- <span *ngIf="loading">
- <i [ngClass]="[icons.spinner, icons.spin]"></i>
- </span>
+ <cds-loading [isActive]="loading"
+ [overlay]="false"
+ size="sm"
+ *ngIf="loading"></cds-loading>
</button>
@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.
}
.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;
.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 {
.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;
+}
}
}
-.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
.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;
+ }
+}
@use '../vendor/variables' as vv;
+@use '@carbon/colors';
/* Forms */
.required::after {
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;
}
.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;
+}
'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;
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
);
projects / ceph.git / commitdiff