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

Add Loading Spinner plugin for SlickGrid table (#13152)

Browse Source 
* Add Loading Spinner plugin for SlickGrid table

* better comment

* add aria

* remove
This commit is contained in:
Charles Gagnon
2020-10-30 11:42:22 -07:00
committed by GitHub
parent dfb40e0159
commit 76625012dd
5 changed files with 94 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/sql/base/browser/ui/table/plugins/loadingSpinner.plugin.ts Normal file
View File

@@ -0,0 +1,48 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/loadingSpinner.plugin';
import * as DOM from 'vs/base/browser/dom';
import { localize } from 'vs/nls';
/**
* Plugin that will hide the viewport and display a loading spinner when set to loading
*/
const loadingText = localize('loadingSpinner.loading', "Loading");
export class LoadingSpinnerPlugin<T extends Slick.SlickData> implements Slick.Plugin<T> {
private _container!: HTMLElement;
private _viewport!: HTMLElement;
private _loadingContainer!: HTMLElement;
private _loading = false;
public init(grid: Slick.Grid<T>): void {
this._loadingContainer = DOM.$('div.loading-spinner-plugin-container');
this._container = grid.getContainerNode();
this._viewport = this._container.getElementsByClassName('slick-viewport')[0] as HTMLElement;
this._viewport.parentElement.insertBefore(this._loadingContainer, this._viewport);
}
public destroy(): void { }
public set loading(isLoading: boolean) {
if (isLoading) {
if (!this._loading) {
DOM.hide(this._viewport);
const spinner = DOM.$('div.loading-spinner.codicon.in-progress', { title: loadingText });
this._loadingContainer.appendChild(spinner);
this._container.setAttribute('aria-busy', 'true');
}
} else {
DOM.show(this._viewport);
DOM.clearNode(this._loadingContainer);
this._container.removeAttribute('aria-busy');
}
this._loading = isLoading;
}
}

18
src/sql/base/browser/ui/table/plugins/media/loadingSpinner.plugin.css Normal file
View File

@@ -0,0 +1,18 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.loading-spinner-plugin-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.loading-spinner-plugin-container .loading-spinner {
height: 30px;
margin-top: 5px;
margin-bottom: 5px;
}