Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adopt icon font in custom dialogs #85065

Merged
merged 3 commits into from Nov 22, 2019
Merged

Adopt icon font in custom dialogs #85065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
54f0078
Adopt icon font in dialog
Nov 18, 2019
bc3bdf9
Adjust padding for when there is no title message
Nov 18, 2019
92ebddb
Merge branch 'master' into misolori/icon-font-dialog
Nov 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/vs/base/browser/ui/dialog/close-dark.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/vs/base/browser/ui/dialog/close-light.svg
View file
Open in desktop

This file was deleted.

63 changes: 6 additions & 57 deletions src/vs/base/browser/ui/dialog/dialog.css
View file
Open in desktop
Expand Up @@ -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;
Expand All @@ -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 */
Expand All @@ -136,14 +82,17 @@
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 */
.monaco-workbench .dialog-box .dialog-message-row .dialog-message-container .dialog-message-detail {
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 {
Expand Down
18 changes: 10 additions & 8 deletions src/vs/base/browser/ui/dialog/dialog.ts
View file
Open in desktop
Expand Up @@ -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';
Expand Down Expand Up @@ -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'));
Expand Down Expand Up @@ -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();
});
Expand Down
3 changes: 0 additions & 3 deletions src/vs/base/browser/ui/dialog/error-dark.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/vs/base/browser/ui/dialog/error-light.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/vs/base/browser/ui/dialog/info-dark.svg
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions src/vs/base/browser/ui/dialog/info-light.svg
View file
Open in desktop

This file was deleted.

31 changes: 0 additions & 31 deletions src/vs/base/browser/ui/dialog/pending-dark.svg
View file
Open in desktop

This file was deleted.

31 changes: 0 additions & 31 deletions src/vs/base/browser/ui/dialog/pending-hc.svg
View file
Open in desktop

This file was deleted.

31 changes: 0 additions & 31 deletions src/vs/base/browser/ui/dialog/pending.svg
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/vs/base/browser/ui/dialog/warning-dark.svg
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions src/vs/base/browser/ui/dialog/warning-light.svg
View file
Open in desktop

This file was deleted.

9 changes: 6 additions & 3 deletions src/vs/platform/severityIcon/common/severityIcon.ts
View file
Open in desktop
Expand Up @@ -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};
}
`);
Expand All @@ -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};
}
`);
Expand All @@ -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};
}
`);
Expand Down