- clipboard icon not displaying breaking several places
- cliboard icon on click gets filed primary green color losing the visibilty of icon. The icon now remain visible on click
- clipboard button for path and copy in tables on mouseover does not give `hand` but `cursor`. which was not ideal from a usability standpoint. This behavior has been updated to use the hand cursor making the interaction semantically correct and more intuitive for users.
Signed-off-by: Afreen Misbah <afreen@ibm.com>
(cherry picked from commit
1dd42e1a339ef4cf1f3253534646aa6c9342233d)
Conflicts:
src/pybind/mgr/dashboard/frontend/src/app/shared/components/copy2clipboard-button/copy2clipboard-button.component.html
</ng-template>
<ng-template #fullpathForSelectionTpl>
- <span
- data-toggle="tooltip"
- [title]="row.pathForSelection"
- class="font-monospace"
- >{{ row.pathForSelection?.split?.("@")?.[0] }}
- <cd-copy-2-clipboard-button
- *ngIf="row.pathForSelection"
- [source]="row.pathForSelection?.split?.('@')?.[0]"
- [byId]="false"
- [showIconOnly]="true"
- >
- </cd-copy-2-clipboard-button>
- </span>
+ <cd-copy-2-clipboard-button
+ *ngIf="row.pathForSelection"
+ [source]="row.pathForSelection?.split?.('@')?.[0]"
+ [byId]="false"
+ [size]="lg"
+ [text]="row.pathForSelection?.split?.('@')?.[0]"
+ >
+ </cd-copy-2-clipboard-button>
</ng-template>
</ng-template>
{{ data.info }}
</span>
<cd-icon
- type="info">
+ type="infoCircle">
</cd-icon >
</span>
<span *ngIf="data.warn || data.categoryPgAmount?.warning"
</span>
}
</ng-template>
-<cd-icon
- type="progress">
- </cd-icon >
+
<ng-template #osdSummary>
@if (data === null) {
<ng-container *ngTemplateOutlet="loadingTpl"></ng-container>
-<i [ngClass]="[icons.clipboard, icons.large]"
- (click)="onClick()"
- class="text-primary ms-2"
- title="Copy to Clipboard"
- *ngIf="showIconOnly; else withButtonTpl"></i>
-<ng-template #withButtonTpl>
-
- <cds-icon-button kind="tertiary"
- size="md"
- title="Copy to Clipboard"
- (click)="onClick()">
- <svg cdsIcon="copy"
- size="32"
- class="cds--btn__icon"></svg>
- </cds-icon-button>
-</ng-template>
+<button cdsButton="ghost"
+ class="clipboard-btn"
+ [ngClass]="{'clipboard-btn-with-text': text}"
+ [size]="size"
+ description="Copy to Clipboard"
+ i18n-description
+ (click)="onClick()">
+ @if(text) {
+ <span data-toggle="tooltip"
+ [title]="text"
+ class="cds--type-mono">{{text}}</span>
+ }
+ <cd-icon type="copy"></cd-icon>
+</button>
+.clipboard-btn {
+ border: none;
+ box-shadow: none;
+ outline: none;
+}
+
+.clipboard-btn-with-text {
+ color: inherit;
+}
styleUrls: ['./copy2clipboard-button.component.scss']
})
export class Copy2ClipboardButtonComponent {
+ // The text to be copied
@Input()
private source: string;
+ // Optional: Extracts text to be copied by "id" attribute
@Input()
byId = true;
+ // Size of the button
@Input()
- showIconOnly = false;
+ size = 'md';
+
+ // Optional: Adds text to the left of copy icon
+ @Input()
+ text?: string;
icons = Icons;
-@if (type === ICON_TYPE.danger) {
- <svg class = "danger-icon"
- [cdsIcon]="ICONS.danger"
- [size]="size"></svg>
-}
-
-@if (type === ICON_TYPE.info) {
- <svg class = "info-icon"
- [cdsIcon]="ICONS.infoCircle"
- [size]="size"></svg>
-}
-
-@if (type === ICON_TYPE.success) {
- <svg class = "success-icon"
- [cdsIcon]="ICONS.success"
- [size]="size"></svg>
-}
-
-@if (type === ICON_TYPE.warning) {
- <svg class = "warning-icon"
- [cdsIcon]="ICONS.warning"
- [size]="size"></svg>
-}
+<svg [cdsIcon]="icon"
+ [size]="size"
+ [class]="type+'-icon'"></svg>
color: theme.$support-error;
}
-.info-icon {
+//@TODO: this naming needs to be changed
+// Do this after converting Icons enum to const
+.infoCircle-icon {
color: theme.$support-info;
}
import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { configureTestBed } from '~/testing/unit-test-helper';
import { IconComponent } from './icon.component';
describe('IconComponent', () => {
let component: IconComponent;
let fixture: ComponentFixture<IconComponent>;
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [IconComponent]
- }).compileComponents();
+ configureTestBed({
+ declarations: [IconComponent],
+ imports: []
+ });
+ beforeEach(() => {
fixture = TestBed.createComponent(IconComponent);
component = fixture.componentInstance;
fixture.detectChanges();
-import { Component, Input } from '@angular/core';
-import { ICON_TYPE, Icons, IconsSize } from '../../enum/icons.enum';
+import { Component, Input, OnInit } from '@angular/core';
+import { ICON_TYPE, IconSize } from '../../enum/icons.enum';
@Component({
selector: 'cd-icon',
templateUrl: './icon.component.html',
styleUrl: './icon.component.scss'
})
-export class IconComponent {
+export class IconComponent implements OnInit {
@Input() type!: keyof typeof ICON_TYPE;
- @Input() size: IconsSize = IconsSize.size16;
+ @Input() size: IconSize = IconSize.size16;
- readonly ICONS = Icons;
- readonly ICON_TYPE = ICON_TYPE;
+ icon: string;
+
+ ngOnInit() {
+ this.icon = ICON_TYPE[this.type];
+ }
}
<ng-template #pathTpl
let-value="data.value">
- <span data-toggle="tooltip"
- [title]="value"
- class="font-monospace">{{ value | path }}
- <cd-copy-2-clipboard-button *ngIf="value"
- [source]="value"
- [byId]="false"
- [showIconOnly]="true">
- </cd-copy-2-clipboard-button>
- </span>
+ <cd-copy-2-clipboard-button *ngIf="value"
+ [source]="value"
+ [byId]="false"
+ size="lg"
+ text="{{ value | path }}">
+ </cd-copy-2-clipboard-button>
</ng-template>
<ng-template #copyTpl
let-value="data.value">
- <span class="font-monospace">{{value}}</span>
<cd-copy-2-clipboard-button *ngIf="value"
[source]="value"
[byId]="false"
- [showIconOnly]="true">
+ [size]="lg"
+ [text]="value">
</cd-copy-2-clipboard-button>
</ng-template>
inverse = 'fa fa-inverse' // To get an alternative icon color
}
-export enum IconsSize {
+export enum IconSize {
size16 = '16',
size20 = '20',
size24 = '24',
export const ICON_TYPE = {
danger: 'warning--filled',
- info: 'information--filled',
+ infoCircle: 'information--filled',
success: 'checkmark--filled',
warning: 'warning--alt--filled'
-} as const;
\ No newline at end of file
+} as const;
Datatable
******************************************/
+:root {
+ @include type.type-classes();
+}
+
tr.cds--expandable-row > td:first-of-type {
background-color: vv.$white !important;
padding-inline-start: 1rem !important;
projects / ceph.git / commitdiff