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

- Adding mouse in and out styling to clickbale divs (#15956)

Browse Source 
* - Adding mouse in and out styling to clickbale divs
-Moving dashboard card styling to outer div container from inner form container

* removing detect changes

* Localizing aria label

* moving css from template to styles

* adding themeing participant to change hover styling

* removing unused event handlers

* separating styling
This commit is contained in:
Aasim Khan
2021-07-01 09:49:08 -07:00
committed by GitHub
parent 91d51a43cd
commit ca07671a68
4 changed files with 46 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/sql/workbench/browser/modelComponents/divContainer.component.ts
View File

@@ -18,6 +18,8 @@ import { KeyCode } from 'vs/base/common/keyCodes';
import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { convertSize } from 'sql/base/browser/dom';
import { ILogService } from 'vs/platform/log/common/log';
import { registerThemingParticipant, IColorTheme, IThemeService, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
import * as colorRegistry from 'vs/platform/theme/common/colorRegistry';
class DivItem {
constructor(public descriptor: IComponentDescriptor, public config: azdata.DivItemLayout) { }
@@ -25,7 +27,7 @@ class DivItem {
@Component({
template: `
<div #divContainer *ngIf="items" class="divContainer" [ngStyle]="CSSStyles" [style.height]="height" [style.width]="width" [style.display]="display" (keyup)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected">
<div #divContainer *ngIf="items" [ngClass] = "{'divContainer': true, 'clickable-divContainer': clickable}" [ngStyle]="CSSStyles" [style.height]="height" [style.width]="width" [style.display]="display" (keyup)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected">
<div *ngFor="let item of items" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper>
@@ -47,10 +49,22 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout, az
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(forwardRef(() => ElementRef)) el: ElementRef,
@Inject(forwardRef(() => Renderer2)) private renderer: Renderer2,
@Inject(ILogService) logService: ILogService
@Inject(ILogService) logService: ILogService,
@Inject(IThemeService) themeService: IThemeService,
) {
super(changeRef, el, logService);
this._overflowY = ''; // default
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
const editorHoverBackground = theme.getColor(colorRegistry.editorHoverBackground).toString();
if (editorHoverBackground) {
collector.addRule(`
.clickable-divContainer:hover {
background-color: ${editorHoverBackground};
}
`);
}
});
}
ngAfterViewInit(): void {
@@ -170,3 +184,5 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout, az
}
}
}

6
src/sql/workbench/browser/modelComponents/media/divContainer.css
View File

@@ -6,4 +6,8 @@
.divContainer {
display: block;
height: 100%;
}
}
.divContainer:focus {
outline-offset: 2px
}