From 27c30c8a998fba012439ed838456eef3c43785d5 Mon Sep 17 00:00:00 2001 From: SteVen Batten <6561887+sbatten@users.noreply.github.com> Date: Thu, 11 Apr 2019 15:49:55 -0700 Subject: [PATCH] adding overlayService (#72014) * adding overlayService * addressing feedback from UX meeting * relocating to progressService2 * remove overlayService and update progressService --- src/vs/base/browser/ui/dialog/dialog.css | 20 +++++++ src/vs/base/browser/ui/dialog/dialog.ts | 7 ++- .../base/browser/ui/dialog/pending-dark.svg | 31 +++++++++++ src/vs/base/browser/ui/dialog/pending-hc.svg | 31 +++++++++++ src/vs/base/browser/ui/dialog/pending.svg | 31 +++++++++++ src/vs/platform/progress/common/progress.ts | 3 +- .../progress/browser/progressService2.ts | 54 +++++++++++++++++++ 7 files changed, 174 insertions(+), 3 deletions(-) create mode 100644 src/vs/base/browser/ui/dialog/pending-dark.svg create mode 100644 src/vs/base/browser/ui/dialog/pending-hc.svg create mode 100644 src/vs/base/browser/ui/dialog/pending.svg diff --git a/src/vs/base/browser/ui/dialog/dialog.css b/src/vs/base/browser/ui/dialog/dialog.css index 8f5d835974d..f772e57fcc5 100644 --- a/src/vs/base/browser/ui/dialog/dialog.css +++ b/src/vs/base/browser/ui/dialog/dialog.css @@ -15,6 +15,10 @@ align-items: center; } +.monaco-workbench .dialog-modal-block.dimmed { + background: rgba(0, 0, 0, 0.3); +} + /** Dialog: Container */ .monaco-workbench .dialog-box { display: flex; @@ -66,6 +70,10 @@ background-repeat: no-repeat; } +.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending { + background-image: url('pending.svg'); +} + .vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info { background-image: url('info.svg'); } @@ -78,6 +86,10 @@ background-image: url('error.svg'); } +.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending { + background-image: url('pending-dark.svg'); +} + .vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info, .hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-info { background-image: url('info-inverse.svg'); @@ -93,6 +105,14 @@ background-image: url('error-inverse.svg'); } +.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending { + background-image: url('pending-hc.svg'); +} + +.monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-pending { + background-size: 30px; +} + /** Dialog: Message Container */ .monaco-workbench .dialog-box .dialog-message-row .dialog-message-container { display: flex; diff --git a/src/vs/base/browser/ui/dialog/dialog.ts b/src/vs/base/browser/ui/dialog/dialog.ts index 0ee6b1f6555..2116fb99164 100644 --- a/src/vs/base/browser/ui/dialog/dialog.ts +++ b/src/vs/base/browser/ui/dialog/dialog.ts @@ -19,7 +19,7 @@ import { mnemonicButtonLabel } from 'vs/base/common/labels'; export interface IDialogOptions { cancelId?: number; detail?: string; - type?: 'none' | 'info' | 'error' | 'question' | 'warning'; + type?: 'none' | 'info' | 'error' | 'question' | 'warning' | 'pending'; } export interface IDialogStyles extends IButtonStyles { @@ -40,7 +40,7 @@ export class Dialog extends Disposable { constructor(private container: HTMLElement, private message: string, private buttons: string[], private options: IDialogOptions) { super(); - this.modal = this.container.appendChild($('.dialog-modal-block')); + this.modal = this.container.appendChild($(`.dialog-modal-block${options.type === 'pending' ? '.dimmed' : ''}`)); this.element = this.modal.appendChild($('.dialog-box')); hide(this.element); @@ -129,6 +129,9 @@ export class Dialog extends Disposable { case 'warning': addClass(this.iconElement, 'icon-warning'); break; + case 'pending': + addClass(this.iconElement, 'icon-pending'); + break; case 'none': case 'info': case 'question': diff --git a/src/vs/base/browser/ui/dialog/pending-dark.svg b/src/vs/base/browser/ui/dialog/pending-dark.svg new file mode 100644 index 00000000000..bbf6e8d84cf --- /dev/null +++ b/src/vs/base/browser/ui/dialog/pending-dark.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + diff --git a/src/vs/base/browser/ui/dialog/pending-hc.svg b/src/vs/base/browser/ui/dialog/pending-hc.svg new file mode 100644 index 00000000000..4d0b2a10c79 --- /dev/null +++ b/src/vs/base/browser/ui/dialog/pending-hc.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + diff --git a/src/vs/base/browser/ui/dialog/pending.svg b/src/vs/base/browser/ui/dialog/pending.svg new file mode 100644 index 00000000000..596cfdd60cd --- /dev/null +++ b/src/vs/base/browser/ui/dialog/pending.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + diff --git a/src/vs/platform/progress/common/progress.ts b/src/vs/platform/progress/common/progress.ts index a82359bdaee..c3830290c6f 100644 --- a/src/vs/platform/progress/common/progress.ts +++ b/src/vs/platform/progress/common/progress.ts @@ -30,7 +30,8 @@ export const enum ProgressLocation { Scm = 3, Extensions = 5, Window = 10, - Notification = 15 + Notification = 15, + Dialog = 20 } export interface IProgressOptions { diff --git a/src/vs/workbench/services/progress/browser/progressService2.ts b/src/vs/workbench/services/progress/browser/progressService2.ts index 80b1631c225..8f3203c675e 100644 --- a/src/vs/workbench/services/progress/browser/progressService2.ts +++ b/src/vs/workbench/services/progress/browser/progressService2.ts @@ -16,6 +16,10 @@ import { INotificationService, Severity, INotificationHandle, INotificationActio import { Action } from 'vs/base/common/actions'; import { Event } from 'vs/base/common/event'; import { registerSingleton } from 'vs/platform/instantiation/common/extensions'; +import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; +import { Dialog } from 'vs/base/browser/ui/dialog/dialog'; +import { attachDialogStyler } from 'vs/platform/theme/common/styler'; +import { IThemeService } from 'vs/platform/theme/common/themeService'; export class ProgressService2 implements IProgressService2 { @@ -29,6 +33,8 @@ export class ProgressService2 implements IProgressService2 { @IViewletService private readonly _viewletService: IViewletService, @INotificationService private readonly _notificationService: INotificationService, @IStatusbarService private readonly _statusbarService: IStatusbarService, + @ILayoutService private readonly _layoutService: ILayoutService, + @IThemeService private readonly _themeService: IThemeService ) { } withProgress(options: IProgressOptions, task: (progress: IProgress) => Promise, onDidCancel?: () => void): Promise { @@ -53,6 +59,8 @@ export class ProgressService2 implements IProgressService2 { return this._withViewletProgress('workbench.view.scm', task); case ProgressLocation.Extensions: return this._withViewletProgress('workbench.view.extensions', task); + case ProgressLocation.Dialog: + return this._withDialogProgress(options, task, onDidCancel); default: return Promise.reject(new Error(`Bad progress location: ${location}`)); } @@ -265,6 +273,52 @@ export class ProgressService2 implements IProgressService2 { promise.then(onDone, onDone); return promise; } + + private _withDialogProgress

, R = unknown>(options: IProgressOptions, task: (progress: IProgress<{ message?: string, increment?: number }>) => P, onDidCancel?: () => void): P { + const disposables: IDisposable[] = []; + + let dialog: Dialog; + + const createDialog = (message: string) => { + dialog = new Dialog( + this._layoutService.container, + message, + [options.cancellable ? localize('cancel', "Cancel") : localize('dismiss', "Dismiss")], + { type: 'pending' } + ); + + disposables.push(dialog); + disposables.push(attachDialogStyler(dialog, this._themeService)); + + dialog.show().then(() => { + if (options.cancellable && typeof onDidCancel === 'function') { + onDidCancel(); + } + + dispose(dialog); + }); + + return dialog; + }; + + const updateDialog = (message?: string) => { + if (message && !dialog) { + dialog = createDialog(message); + } + }; + + const p = task({ + report: progress => { + updateDialog(progress.message); + } + }); + + p.finally(() => { + dispose(disposables); + }); + + return p; + } } registerSingleton(IProgressService2, ProgressService2, true); -- GitLab