ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-18 17:22:45 -05:00
Code Issues Packages Projects Releases Wiki Activity

Introduce vertical cards (#12125)

Browse Source 
* Introduce vertical cards

* Simplify and add a css type

* Feedback

* Update yarn.lock
This commit is contained in:
Amir Omidi
2020-09-04 15:15:58 -07:00
committed by GitHub
parent c2320831f7
commit 59bb827d2e
12 changed files with 255 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/sql/workbench/browser/modelComponents/radioCardGroup.component.ts
View File

@@ -9,13 +9,15 @@ import { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUt
import * as DOM from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import 'vs/css!./media/card';
import 'vs/css!./media/verticalCard';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { deepClone } from 'vs/base/common/objects';
@Component({
templateUrl: decodeURI(require.toUrl('./radioCardGroup.component.html'))
})
export default class RadioCardGroup extends ComponentBase implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor;
@@ -94,27 +96,36 @@ export default class RadioCardGroup extends ComponentBase implements IComponent,
}
public get cards(): azdata.RadioCard[] {
return this.getPropertyOrDefault<azdata.RadioCardGroupComponentProperties, azdata.RadioCard[]>((props) => props.cards, []);
return this.getSpecficProperties().cards ?? [];
}
public get cardWidth(): string | undefined {
return this.getPropertyOrDefault<azdata.RadioCardGroupComponentProperties, string | undefined>((props) => props.cardWidth, undefined);
return this.getSpecficProperties().cardWidth ?? undefined;
}
public get cardHeight(): string | undefined {
return this.getPropertyOrDefault<azdata.RadioCardGroupComponentProperties, string | undefined>((props) => props.cardHeight, undefined);
return this.getSpecficProperties().cardHeight ?? undefined;
}
public get iconWidth(): string | undefined {
return this.getPropertyOrDefault<azdata.RadioCardGroupComponentProperties, string | undefined>((props) => props.iconWidth, undefined);
return this.getSpecficProperties().iconWidth ?? undefined;
}
public get iconHeight(): string | undefined {
return this.getPropertyOrDefault<azdata.RadioCardGroupComponentProperties, string | undefined>((props) => props.iconHeight, undefined);
return this.getSpecficProperties().iconHeight ?? undefined;
}
public get selectedCardId(): string | undefined {
return this.getPropertyOrDefault<azdata.RadioCardGroupComponentProperties, string | undefined>((props) => props.selectedCardId, undefined);
return this.getSpecficProperties().selectedCardId ?? undefined;
}
public get orientation(): string {
const x = this.getSpecficProperties().orientation ?? 'horizontal';
return x;
}
private getSpecficProperties(): azdata.RadioCardGroupComponentProperties {
return this.getProperties<azdata.RadioCardGroupComponentProperties>();
}
public getIconClass(cardId: string): string {
@@ -149,6 +160,18 @@ export default class RadioCardGroup extends ComponentBase implements IComponent,
});
}
public onLinkClick(event: Event, cardId: string, textContents: azdata.RadioCardDescription): void {
event.stopPropagation();
this.fireEvent({
eventType: ComponentEventType.onDidClick,
args: {
cardId,
textContents: deepClone(textContents),
card: deepClone(this.getCardById(cardId))
}
});
}
public getCardElement(cardId: string): ElementRef {
const card = this.getCardById(cardId);
return this.cardElements.toArray()[this.cards.indexOf(card)];