Add loading spinner component (#1580)

This commit is contained in:
Matt Irvine
2018-06-07 17:54:48 -07:00
committed by GitHub
parent 44de602e52
commit a5b4eeb932
9 changed files with 266 additions and 7 deletions

View File

@@ -74,9 +74,9 @@ export default class MainController implements vscode.Disposable {
dialog.cancelButton.onClick(() => console.log('cancel clicked!'));
dialog.okButton.label = 'ok';
dialog.cancelButton.label = 'no';
let customButton1 = sqlops.window.modelviewdialog.createButton('Test button 1');
let customButton1 = sqlops.window.modelviewdialog.createButton('Load name');
customButton1.onClick(() => console.log('button 1 clicked!'));
let customButton2 = sqlops.window.modelviewdialog.createButton('Test button 2');
let customButton2 = sqlops.window.modelviewdialog.createButton('Load all');
customButton2.onClick(() => console.log('button 2 clicked!'));
dialog.customButtons = [customButton1, customButton2];
tab1.registerContent(async (view) => {
@@ -84,7 +84,14 @@ export default class MainController implements vscode.Disposable {
.withProperties({
//width: 300
}).component();
let inputBoxWrapper = view.modelBuilder.loadingComponent().withItem(inputBox).component();
inputBoxWrapper.loading = false;
customButton1.onClick(() => {
inputBoxWrapper.loading = true;
setTimeout(() => inputBoxWrapper.loading = false, 5000);
});
let inputBox2 = view.modelBuilder.inputBox().component();
let backupFilesInputBox = view.modelBuilder.inputBox().component();
let checkbox = view.modelBuilder.checkBox()
.withProperties({
@@ -107,7 +114,7 @@ export default class MainController implements vscode.Disposable {
let button2 = view.modelBuilder.button()
.component();
button.onDidClick(e => {
inputBox2.value = 'Button clicked';
backupFilesInputBox.value = 'Button clicked';
});
let dropdown = view.modelBuilder.dropDown()
.withProperties({
@@ -175,7 +182,7 @@ export default class MainController implements vscode.Disposable {
, { flex: '1 1 50%' }).component();
let formModel = view.modelBuilder.formContainer()
.withFormItems([{
component: inputBox,
component: inputBoxWrapper,
title: 'Backup name'
}, {
component: inputBox2,
@@ -187,7 +194,7 @@ export default class MainController implements vscode.Disposable {
component: checkbox,
title: ''
}, {
component: inputBox2,
component: backupFilesInputBox,
title: 'Backup files',
actions: [button, button3]
}, {
@@ -197,7 +204,13 @@ export default class MainController implements vscode.Disposable {
horizontal: false,
componentWidth: 400
}).component();
await view.initializeModel(formModel);
let formWrapper = view.modelBuilder.loadingComponent().withItem(formModel).component();
formWrapper.loading = false;
customButton2.onClick(() => {
formWrapper.loading = true;
setTimeout(() => formWrapper.loading = false, 5000);
});
await view.initializeModel(formWrapper);
});
sqlops.window.modelviewdialog.openDialog(dialog);