diff --git a/src/vs/base/browser/ui/dialog/close-dark.svg b/src/vs/base/browser/ui/dialog/close-dark.svg deleted file mode 100644 index 7305a8f099ab21cad38635606238ca71f8d8c6f6..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/close-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/vs/base/browser/ui/dialog/close-light.svg b/src/vs/base/browser/ui/dialog/close-light.svg deleted file mode 100644 index ecddcd665b58003013f7faa3df7ba31cbb09abca..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/close-light.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/vs/base/browser/ui/dialog/dialog.css b/src/vs/base/browser/ui/dialog/dialog.css index 4cb5c5ce13bc83527a64afe15ff4cc76a94feb57..0653f1dd4b185ccd39b7990af117ec0ec8fda01a 100644 --- a/src/vs/base/browser/ui/dialog/dialog.css +++ b/src/vs/base/browser/ui/dialog/dialog.css @@ -46,15 +46,6 @@ } -.monaco-workbench .dialog-box .dialog-close-action { - background: url('close-light.svg') center center no-repeat; -} - -.vs-dark .monaco-workbench .dialog-box .dialog-close-action, -.hc-black .monaco-workbench .dialog-box .dialog-close-action { - background: url('close-dark.svg') center center no-repeat; -} - /** Dialog: Message Row */ .monaco-workbench .dialog-box .dialog-message-row { display: flex; @@ -63,56 +54,11 @@ padding: 0 10px; } -.monaco-workbench .dialog-box .dialog-message-row .dialog-icon { +.monaco-workbench .dialog-box .dialog-message-row > .codicon { flex: 0 0 48px; height: 48px; align-self: baseline; - background-position: center; - background-repeat: no-repeat; - background-size: 48px; -} - -.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-light.svg'); -} - -.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-warning { - background-image: url('warning-light.svg'); -} - -.vs .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-error { - background-image: url('error-light.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-dark.svg'); -} - -.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-warning, -.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-warning { - background-image: url('warning-dark.svg'); -} - -.vs-dark .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-error, -.hc-black .monaco-workbench .dialog-box .dialog-message-row .dialog-icon.icon-error { - background-image: url('error-dark.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; + font-size: 48px; } /** Dialog: Message Container */ @@ -136,6 +82,10 @@ flex: 1; /* let the message always grow */ white-space: normal; word-wrap: break-word; /* never overflow long words, but break to next line */ + min-height: 48px; /* matches icon height */ + margin-bottom: 8px; + display: flex; + align-items: center; } /** Dialog: Details */ @@ -143,7 +93,6 @@ line-height: 22px; flex: 1; /* let the message always grow */ opacity: .9; - margin-top: 8px; } .monaco-workbench .dialog-box .dialog-message-row .dialog-message-container .dialog-message a:focus { diff --git a/src/vs/base/browser/ui/dialog/dialog.ts b/src/vs/base/browser/ui/dialog/dialog.ts index cc3e823d5c44f060a46e7170e55e8cb093244aa7..f303021e744d98bd009fa51c8a2ef069f945d903 100644 --- a/src/vs/base/browser/ui/dialog/dialog.ts +++ b/src/vs/base/browser/ui/dialog/dialog.ts @@ -6,7 +6,7 @@ import 'vs/css!./dialog'; import * as nls from 'vs/nls'; import { Disposable } from 'vs/base/common/lifecycle'; -import { $, hide, show, EventHelper, clearNode, removeClasses, addClass, removeNode, isAncestor, addDisposableListener, EventType } from 'vs/base/browser/dom'; +import { $, hide, show, EventHelper, clearNode, removeClasses, addClass, addClasses, removeNode, isAncestor, addDisposableListener, EventType } from 'vs/base/browser/dom'; import { domEvent } from 'vs/base/browser/event'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode, KeyMod } from 'vs/base/common/keyCodes'; @@ -75,7 +75,8 @@ export class Dialog extends Disposable { if (this.options.detail) { const messageElement = messageContainer.appendChild($('.dialog-message')); - messageElement.innerText = this.message; + const messageTextElement = messageElement.appendChild($('.dialog-message-text')); + messageTextElement.innerText = this.message; } this.messageDetailElement = messageContainer.appendChild($('.dialog-message-detail')); @@ -199,29 +200,30 @@ export class Dialog extends Disposable { } })); - removeClasses(this.iconElement, 'icon-error', 'icon-warning', 'icon-info'); + addClass(this.iconElement, 'codicon'); + removeClasses(this.iconElement, 'codicon-alert', 'codicon-warning', 'codicon-info'); switch (this.options.type) { case 'error': - addClass(this.iconElement, 'icon-error'); + addClass(this.iconElement, 'codicon-error'); break; case 'warning': - addClass(this.iconElement, 'icon-warning'); + addClass(this.iconElement, 'codicon-warning'); break; case 'pending': - addClass(this.iconElement, 'icon-pending'); + addClasses(this.iconElement, 'codicon-loading', 'codicon-animation-spin'); break; case 'none': case 'info': case 'question': default: - addClass(this.iconElement, 'icon-info'); + addClass(this.iconElement, 'codicon-info'); break; } const actionBar = new ActionBar(this.toolbarContainer, {}); - const action = new Action('dialog.close', nls.localize('dialogClose', "Close Dialog"), 'dialog-close-action', true, () => { + const action = new Action('dialog.close', nls.localize('dialogClose', "Close Dialog"), 'codicon codicon-close', true, () => { resolve({ button: this.options.cancelId || 0, checkboxChecked: this.checkbox ? this.checkbox.checked : undefined }); return Promise.resolve(); }); diff --git a/src/vs/base/browser/ui/dialog/error-dark.svg b/src/vs/base/browser/ui/dialog/error-dark.svg deleted file mode 100644 index efdc5f2ae2d2dc15173bef15c752aaf033c04125..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/error-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/vs/base/browser/ui/dialog/error-light.svg b/src/vs/base/browser/ui/dialog/error-light.svg deleted file mode 100644 index d646c72c740e5ce9ba874fa59bbaf6ee78978d4c..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/error-light.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/vs/base/browser/ui/dialog/info-dark.svg b/src/vs/base/browser/ui/dialog/info-dark.svg deleted file mode 100644 index bb851afdfe587a2419114c13c814ba0b1106ec3a..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/info-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/vs/base/browser/ui/dialog/info-light.svg b/src/vs/base/browser/ui/dialog/info-light.svg deleted file mode 100644 index 6faf670cccc40170813ffcf6ce9a05b5275c0503..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/info-light.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/vs/base/browser/ui/dialog/pending-dark.svg b/src/vs/base/browser/ui/dialog/pending-dark.svg deleted file mode 100644 index 5f388381162012d55c4604ee21eef6214d8b0b51..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/pending-dark.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/vs/base/browser/ui/dialog/pending-hc.svg b/src/vs/base/browser/ui/dialog/pending-hc.svg deleted file mode 100644 index c6d0ec7e29f17c420357fbeb92fb89ec9da3013b..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/pending-hc.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/vs/base/browser/ui/dialog/pending.svg b/src/vs/base/browser/ui/dialog/pending.svg deleted file mode 100644 index 47ce444bb2402abd0713b64277354481d6adf307..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/pending.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/vs/base/browser/ui/dialog/warning-dark.svg b/src/vs/base/browser/ui/dialog/warning-dark.svg deleted file mode 100644 index a267963e585545658e7038e7294cc268c1eafa5a..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/warning-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/vs/base/browser/ui/dialog/warning-light.svg b/src/vs/base/browser/ui/dialog/warning-light.svg deleted file mode 100644 index f2e2aa741e558752d2658fbc4754a23cb355bc00..0000000000000000000000000000000000000000 --- a/src/vs/base/browser/ui/dialog/warning-light.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/vs/platform/severityIcon/common/severityIcon.ts b/src/vs/platform/severityIcon/common/severityIcon.ts index 248d2fec7d9a3dbbc023c1257c623890a2597b5f..a28af5040b6ea795ee919777401b59fbca981653 100644 --- a/src/vs/platform/severityIcon/common/severityIcon.ts +++ b/src/vs/platform/severityIcon/common/severityIcon.ts @@ -31,7 +31,8 @@ registerThemingParticipant((theme, collector) => { collector.addRule(` .monaco-workbench .zone-widget .codicon-error, .monaco-workbench .markers-panel .marker-icon.codicon-error, - .monaco-workbench .extensions-viewlet > .extensions .codicon-error { + .monaco-workbench .extensions-viewlet > .extensions .codicon-error, + .monaco-workbench .dialog-box .dialog-message-row .codicon-error { color: ${errorIconForeground}; } `); @@ -43,7 +44,8 @@ registerThemingParticipant((theme, collector) => { .monaco-workbench .zone-widget .codicon-warning, .monaco-workbench .markers-panel .marker-icon.codicon-warning, .monaco-workbench .extensions-viewlet > .extensions .codicon-warning, - .monaco-workbench .extension-editor .codicon-warning { + .monaco-workbench .extension-editor .codicon-warning, + .monaco-workbench .dialog-box .dialog-message-row .codicon-warning { color: ${warningIconForeground}; } `); @@ -55,7 +57,8 @@ registerThemingParticipant((theme, collector) => { .monaco-workbench .zone-widget .codicon-info, .monaco-workbench .markers-panel .marker-icon.codicon-info, .monaco-workbench .extensions-viewlet > .extensions .codicon-info, - .monaco-workbench .extension-editor .codicon-info { + .monaco-workbench .extension-editor .codicon-info, + .monaco-workbench .dialog-box .dialog-message-row .codicon-info { color: ${infoIconForeground}; } `);