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.

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

Welcome Dialog Service #176580

Merged
merged 10 commits into from
Mar 10, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix up css
bhavyaus committed Mar 10, 2023
commit 5c6f698fe17b89749c428e78a5a5a730c44c3e8e
10 changes: 2 additions & 8 deletions src/vs/workbench/browser/web.api.ts
Original file line number Diff line number Diff line change
@@ -601,15 +601,9 @@ export interface IWelcomeModalDialog {
buttonText: string;

/**
* Main message text and icon for the modal dialog.
* Message text and icon for the modal dialog.
*/
mainMessage: { message: string; icon: string };


/**
* Secondary message text and icon for the modal dialog.
*/
secondaryMessage: { message: string; icon: string };
messages: { message: string; icon: string }[];

/**
* Optional action to appear as links at the bottom of the modal dialog.
Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@ import { Registry } from 'vs/platform/registry/common/platform';
import { Extensions as WorkbenchExtensions, IWorkbenchContributionsRegistry } from 'vs/workbench/common/contributions';
import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage';
import { IBrowserWorkbenchEnvironmentService } from 'vs/workbench/services/environment/browser/environmentService';
import { ThemeIcon } from 'vs/base/common/themables';
import { IModalDialogService } from 'vs/workbench/services/modalDialog/browser/modalDialogService';

class WelcomeModalContribution {
@@ -32,8 +31,7 @@ class WelcomeModalContribution {
modalDialogService.show({
title: modalDialog.title,
buttonText: modalDialog.buttonText,
mainMessage: { message: modalDialog.mainMessage.message, icon: ThemeIcon.fromId(modalDialog.mainMessage.icon) },
secondaryMessage: { message: modalDialog.secondaryMessage.message, icon: ThemeIcon.fromId(modalDialog.secondaryMessage.icon) },
messages: modalDialog.messages,
action: modalDialog.action,
onClose: () => {
storageService.store(WelcomeModalContribution.WELCOME_MODAL_DIALOG_DISMISSED_KEY + '#' + modalDialog.routeId, true, StorageScope.PROFILE, StorageTarget.MACHINE);
Original file line number Diff line number Diff line change
@@ -2,25 +2,44 @@
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-dialog-box{
border-radius: 6px;
}

.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message {
font-size: 20px ;
}

.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body hr {
color: var(--vscode-descriptionForeground);
margin-bottom: 12px;
background: var(--vscode-welcomePage-tileHoverBackground);
}

.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body .modal-dialog-item .icon-widget{
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body .modal-dialog-message .icon-widget{
padding-right: 8px;
max-width: 20px;
max-height: 20px;
max-width: 30px;
max-height: 30px;
position: relative;
top: auto;
color:var(--vscode-textLink-foreground);
padding-right: 20px;
font-size: 25px;
}

.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body .modal-dialog-item {
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body .modal-dialog-message {
display: flex;
padding: 10px 0 20px 12px;
margin: 0;
padding: 20px;
min-height: auto;
border: 1px solid var(--vscode-welcomePage-tileBorder);
color: var(--vscode-descriptionForeground);
border-radius: 6px;
overflow: hidden;
margin-bottom: 12px;
background: var(--vscode-welcomePage-tileHoverBackground);
align-items: center;
}

.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body>.modal-dialog-item {
.monaco-dialog-box .dialog-message-row .dialog-message-container .dialog-message-body>.modal-dialog-message {
grid-area: title;
align-self: flex-end;
}
38 changes: 17 additions & 21 deletions src/vs/workbench/services/modalDialog/browser/modalDialogService.ts
Original file line number Diff line number Diff line change
@@ -17,8 +17,7 @@ import { ILinkDescriptor, Link } from 'vs/platform/opener/browser/link';

export interface IModalDialogItem {
readonly title: string;
readonly mainMessage: { message: string; icon: ThemeIcon };
readonly secondaryMessage: { message: string; icon: ThemeIcon };
readonly messages: { message: string; icon: string }[];
readonly buttonText: string;
readonly action?: ILinkDescriptor;
readonly onClose?: () => void;
@@ -43,9 +42,10 @@ export class ModalDialogService implements IModalDialogService {
@IInstantiationService private readonly instantiationService: IInstantiationService,) {
}

private static iconWidgetFor(icon: ThemeIcon) {
if (icon) {
const widget = $(ThemeIcon.asCSSSelector(icon));
private static iconWidgetFor(icon: string) {
const themeIcon = ThemeIcon.fromId(icon);
if (themeIcon) {
const widget = $(ThemeIcon.asCSSSelector(themeIcon));
widget.classList.add('icon-widget');
return widget;
}
@@ -59,22 +59,17 @@ export class ModalDialogService implements IModalDialogService {
const renderBody = (parent: HTMLElement) => {

parent.classList.add(...('modal-dialog-items'));
const mainDescriptorComponent =
$('.modal-dialog-mainmessage',
{},
ModalDialogService.iconWidgetFor(modalDialogItem.mainMessage.icon),
$('.description-container', {},
$('.description.description.max-lines-3', { 'x-description-for': 'description' }, ...renderLabelWithIcons(modalDialogItem.mainMessage.message))));
parent.appendChild(mainDescriptorComponent);

const secondaryDescriptorComponent =
$('.modal-dialog-secondaryMessage',
{},
ModalDialogService.iconWidgetFor(modalDialogItem.secondaryMessage.icon),
$('.description-container', {},
$('.description.description.max-lines-3', { 'x-description-for': 'description' }, ...renderLabelWithIcons(modalDialogItem.secondaryMessage.message))));

parent.appendChild(secondaryDescriptorComponent);
parent.appendChild(document.createElement('hr'));

for (const message of modalDialogItem.messages) {
const descriptorComponent =
$('.modal-dialog-message',
{},
ModalDialogService.iconWidgetFor(message.icon),
$('.description-container', {},
$('.description.description.max-lines-3', { 'x-description-for': 'description' }, ...renderLabelWithIcons(message.message))));
parent.appendChild(descriptorComponent);
}

const actionsContainer = $('div.modal-dialog-action-container');
parent.appendChild(actionsContainer);
@@ -91,6 +86,7 @@ export class ModalDialogService implements IModalDialogService {
detail: '',
type: 'none',
renderBody: renderBody,
disableCloseAction: true,
buttonStyles: defaultButtonStyles,
checkboxStyles: defaultCheckboxStyles,
inputBoxStyles: defaultInputBoxStyles,