mirror of
https://github.com/microsoft/vscode.git
synced 2026-09-14 23:30:23 +01:00
Address feedback
This commit is contained in:
t-amqi
@@ -94,14 +94,14 @@
|
||||
|
||||
.monaco-workbench .task-action { background: url('update.svg') center center no-repeat; }
|
||||
|
||||
.no-telemetry {
|
||||
.task-panel-no-telemetry {
|
||||
background-image: url('thumbs-down.svg');
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.yes-telemetry {
|
||||
.task-panel-yes-telemetry {
|
||||
background-image: url('thumbs-up.svg');
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
@@ -121,7 +121,7 @@
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
.task-panel-example-item {
|
||||
outline: grey solid thin;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
@@ -129,34 +129,34 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mockup-button {
|
||||
.task-panel-mockup-button {
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.oneliner {
|
||||
.task-panel-oneliner {
|
||||
text-align: left;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.right-aligned {
|
||||
.task-panel-right-aligned {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.centered {
|
||||
.task-panel-centered {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
font-size: large;
|
||||
.task-panel-header-item {
|
||||
font-size: 19px;
|
||||
transition: display 2s linear 500ms;
|
||||
}
|
||||
|
||||
.feedback {
|
||||
.task-panel-feedback {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
.task-panel-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -92,7 +92,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
let $ = Builder.$;
|
||||
let tasksCategory = nls.localize('tasksCategory', "Tasks");
|
||||
|
||||
export abstract class OpenTaskConfigurationAction extends Action {
|
||||
abstract class OpenTaskConfigurationAction extends Action {
|
||||
|
||||
constructor(id: string, label: string,
|
||||
private taskService: ITaskService,
|
||||
@@ -195,7 +195,7 @@ export abstract class OpenTaskConfigurationAction extends Action {
|
||||
}
|
||||
}
|
||||
|
||||
export class ConfigureTaskRunnerAction extends OpenTaskConfigurationAction {
|
||||
class ConfigureTaskRunnerAction extends OpenTaskConfigurationAction {
|
||||
public static ID = 'workbench.action.tasks.configureTaskRunner';
|
||||
public static TEXT = nls.localize('ConfigureTaskRunnerAction.label', "Configure Task Runner");
|
||||
|
||||
@@ -210,11 +210,10 @@ export class ConfigureTaskRunnerAction extends OpenTaskConfigurationAction {
|
||||
super(id, label, taskService, configurationService, editorService, fileService, contextService,
|
||||
outputService, messageService, quickOpenService, environmentService, configurationResolverService,
|
||||
extensionService);
|
||||
this.class = 'task-action configure';
|
||||
}
|
||||
}
|
||||
|
||||
export class ConfigureBuildTaskAction extends OpenTaskConfigurationAction {
|
||||
class ConfigureBuildTaskAction extends OpenTaskConfigurationAction {
|
||||
public static ID = 'workbench.action.tasks.configureBuildTask';
|
||||
public static TEXT = nls.localize('ConfigureBuildTaskAction.label', "Configure Build Task");
|
||||
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
'use strict';
|
||||
|
||||
export function domElement() {
|
||||
return `
|
||||
<div class="composite panel task-panel" id="workbench.panel.task" aria-hidden="false">
|
||||
|
||||
<div class="task-panel-container">
|
||||
<p> Some things you might be able to do here: </br>
|
||||
<ul>
|
||||
<li> See a list of autodetected and manually configured tasks </li>
|
||||
<li> Run/Restart/Stop tasks with a click of a button</li>
|
||||
<li> Show a summary of each completed task (ie: execution time, exit code, foldable output)</li>
|
||||
<li> Configure a task without touching the json file </li>
|
||||
</ul></p>
|
||||
<p> Here's a rough idea of what a task item might look like. By no means is this the final layout so please do not judge the look.</p>
|
||||
<div class="task-item">
|
||||
<p class="oneliner"> Task1: tsc -watch <span class="right-aligned"> Running (0 Errors)
|
||||
<span class="mockup-button"> Show Output</span>
|
||||
<span class="mockup-button">Stop</span>
|
||||
<span class="mockup-button">Restart</span></span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="feedback"> If you are interested in further discussion or have feedback of your own, please go the github issue <a class="linkstyle" href="https://github.com/Microsoft/vscode/issues/28235"> here</a>. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-text">
|
||||
<div class="header-item centered">Do you think a task panel is useful? <span class="mockup-button yes-telemetry"></span> <span class="mockup-button no-telemetry"></span></div>
|
||||
<div class="header-item centered thanks hidden"> Thanks for the feedback! <3 </div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
@@ -8,16 +8,14 @@ import * as nls from 'vs/nls';
|
||||
import dom = require('vs/base/browser/dom');
|
||||
import URI from 'vs/base/common/uri';
|
||||
import { Builder, Dimension } from 'vs/base/browser/builder';
|
||||
import { IAction } from 'vs/base/common/actions';
|
||||
import { Panel, PanelRegistry, PanelDescriptor, Extensions } from 'vs/workbench/browser/panel';
|
||||
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
|
||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
|
||||
import { ITaskService } from 'vs/workbench/parts/tasks/common/taskService';
|
||||
import { Registry } from 'vs/platform/registry/common/platform';
|
||||
import { TPromise } from 'vs/base/common/winjs.base';
|
||||
import { ICommandService } from 'vs/platform/commands/common/commands';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { domElement } from 'vs/workbench/parts/tasks/electron-browser/taskButtons';
|
||||
import { buttonBackground, buttonForeground, textLinkForeground, selectBackground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
|
||||
import { IOpenerService } from 'vs/platform/opener/common/opener';
|
||||
@@ -26,11 +24,10 @@ const TASK_PANEL_ID = 'workbench.panel.task';
|
||||
|
||||
export class TaskPanel extends Panel {
|
||||
|
||||
private _actions: IAction[];
|
||||
private taskExperimentPart5 = 'workbench.tasks.feedbackAnswered';
|
||||
private _builder;
|
||||
|
||||
constructor(
|
||||
|
||||
@ITelemetryService telemetryService: ITelemetryService,
|
||||
@IThemeService protected themeService: IThemeService,
|
||||
@ITaskService private taskService: ITaskService,
|
||||
@@ -38,7 +35,6 @@ export class TaskPanel extends Panel {
|
||||
@ICommandService private commandService: ICommandService,
|
||||
@IStorageService private storageService: IStorageService,
|
||||
@IOpenerService private openerService: IOpenerService,
|
||||
|
||||
) {
|
||||
super(TASK_PANEL_ID, telemetryService, themeService);
|
||||
}
|
||||
@@ -47,35 +43,25 @@ export class TaskPanel extends Panel {
|
||||
super.create(parent);
|
||||
dom.addClass(parent.getHTMLElement(), 'task-panel');
|
||||
|
||||
let builder = parent.innerHtml(domElement());
|
||||
let buttons = builder.select('.mockup-button');
|
||||
let links = builder.select('.linkstyle');
|
||||
let taskItems = builder.select('.task-item');
|
||||
let yesButton = builder.select('.yes-telemetry');
|
||||
let noButton = builder.select('.no-telemetry');
|
||||
let githubLink = builder.select('.linkstyle');
|
||||
let clickFeedback = builder.select('.header-item');
|
||||
let thanks = builder.select('.thanks');
|
||||
this._builder = parent.innerHtml(getHtml());
|
||||
const yesButton = this._builder.select('.task-panel-yes-telemetry');
|
||||
const noButton = this._builder.select('.task-panel-no-telemetry');
|
||||
const githubLink = this._builder.select('.task-panel-linkstyle');
|
||||
const clickFeedback = this._builder.select('.task-panel-header-item');
|
||||
const thanks = this._builder.select('.task-panel-thanks');
|
||||
|
||||
buttons.style('background-color', this.themeService.getTheme().getColor(buttonBackground).toString());
|
||||
buttons.style('color', this.themeService.getTheme().getColor(buttonForeground).toString());
|
||||
links.style('color', this.themeService.getTheme().getColor(textLinkForeground).toString());
|
||||
taskItems.style('background-color', this.themeService.getTheme().getColor(selectBackground).toString());
|
||||
|
||||
this.themeService.onThemeChange(() => {
|
||||
buttons.style('background-color', this.themeService.getTheme().getColor(buttonBackground).toString());
|
||||
buttons.style('color', this.themeService.getTheme().getColor(buttonForeground).toString());
|
||||
links.style('color', this.themeService.getTheme().getColor(textLinkForeground).toString());
|
||||
taskItems.style('background-color', this.themeService.getTheme().getColor(selectBackground).toString());
|
||||
});
|
||||
if (this.storageService.get(this.taskExperimentPart5)) {
|
||||
clickFeedback.addClass('task-panel-hidden');
|
||||
thanks.removeClass('task-panel-hidden');
|
||||
}
|
||||
|
||||
yesButton.item(0).on('click', e => {
|
||||
if (!this.storageService.get(this.taskExperimentPart5)) {
|
||||
this.telemetryService.publicLog('taskPanel.yes');
|
||||
this.storageService.store(this.taskExperimentPart5, true, StorageScope.GLOBAL);
|
||||
}
|
||||
clickFeedback.addClass('hidden');
|
||||
thanks.removeClass('hidden');
|
||||
clickFeedback.addClass('task-panel-hidden');
|
||||
thanks.removeClass('task-panel-hidden');
|
||||
});
|
||||
|
||||
noButton.item(0).on('click', e => {
|
||||
@@ -83,44 +69,37 @@ export class TaskPanel extends Panel {
|
||||
this.telemetryService.publicLog('taskPanel.no');
|
||||
this.storageService.store(this.taskExperimentPart5, true, StorageScope.GLOBAL);
|
||||
}
|
||||
clickFeedback.addClass('hidden');
|
||||
thanks.removeClass('hidden');
|
||||
clickFeedback.addClass('task-panel-hidden');
|
||||
thanks.removeClass('task-panel-hidden');
|
||||
});
|
||||
|
||||
githubLink.item(0).on('click', e => {
|
||||
let node = event.target as HTMLAnchorElement;
|
||||
const node = event.target as HTMLAnchorElement;
|
||||
if (node.href) {
|
||||
this.openerService.open(URI.parse(node.href));
|
||||
}
|
||||
});
|
||||
this._register(this.themeService.onThemeChange(theme => this._updateTheme(theme)));
|
||||
this._updateTheme();
|
||||
|
||||
return TPromise.as(void 0);
|
||||
}
|
||||
|
||||
public layout(dimension?: Dimension): void {
|
||||
if (!dimension) {
|
||||
return;
|
||||
public layout(dimension?: Dimension): void { }
|
||||
|
||||
private _updateTheme(theme?: ITheme): void {
|
||||
const githubLink = this._builder.select('.task-panel-linkstyle');
|
||||
const buttons = this._builder.select('.task-panel-mockup-button');
|
||||
const taskItems = this._builder.select('.task-panel-example-item');
|
||||
|
||||
if (!theme) {
|
||||
theme = this.themeService.getTheme();
|
||||
}
|
||||
buttons.style('background-color', theme.getColor(buttonBackground).toString());
|
||||
buttons.style('color', theme.getColor(buttonForeground).toString());
|
||||
githubLink.style('color', theme.getColor(textLinkForeground).toString());
|
||||
taskItems.style('background-color', theme.getColor(selectBackground).toString());
|
||||
}
|
||||
|
||||
public getActions(): IAction[] {
|
||||
if (!this._actions) {
|
||||
this._actions = [
|
||||
//this._instantiationService.createInstance(ConfigureTaskRunnerAction, ConfigureTaskRunnerAction.ID, ConfigureTaskRunnerAction.TEXT),
|
||||
];
|
||||
this._actions.forEach(a => {
|
||||
this._register(a);
|
||||
});
|
||||
}
|
||||
return this._actions;
|
||||
}
|
||||
|
||||
public setVisible(visible: boolean): TPromise<void> {
|
||||
return super.setVisible(visible);
|
||||
};
|
||||
|
||||
public focus(): void {
|
||||
};
|
||||
}
|
||||
|
||||
(<PanelRegistry>Registry.as(Extensions.Panels)).registerPanel(new PanelDescriptor(
|
||||
@@ -131,3 +110,37 @@ export class TaskPanel extends Panel {
|
||||
'task',
|
||||
50
|
||||
));
|
||||
|
||||
function getHtml() {
|
||||
return `
|
||||
<div class="composite panel task-panel" id="workbench.panel.task" aria-hidden="false">
|
||||
<div class="task-panel-container">
|
||||
<p> Some things you might be able to do here: </br>
|
||||
<ul>
|
||||
<li> See a list of autodetected and manually configured tasks </li>
|
||||
<li> Run/Restart/Stop tasks with a click of a button</li>
|
||||
<li> Show a summary of each completed task (ie: execution time, exit code, foldable output)</li>
|
||||
<li> Configure a task without touching the json file </li>
|
||||
</ul></p>
|
||||
<p> Here's a rough idea of what a task item might look like. By no means is this the final layout so please do not judge the look.</p>
|
||||
<div class="task-panel-example-item">
|
||||
<p class="task-panel-oneliner"> Task1: tsc -watch <span class="task-panel-right-aligned"> Running (0 Errors)
|
||||
<span class="task-panel-mockup-button"> Show Output</span>
|
||||
<span class="task-panel-mockup-button">Stop</span>
|
||||
<span class="task-panel-mockup-button">Restart</span></span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="task-panel-feedback"> If you are interested in further discussion or have feedback of your own, please go the github issue
|
||||
<a class="task-panel-linkstyle" href="https://github.com/Microsoft/vscode/issues/28235"> here</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-panel-text">
|
||||
<div class="task-panel-header-item task-panel-centered">Do you think a task panel is useful?
|
||||
<span class="task-panel-mockup-button task-panel-yes-telemetry"></span>
|
||||
<span class="task-panel-mockup-button task-panel-no-telemetry"></span>
|
||||
</div>
|
||||
<div class="task-panel-header-item task-panel-centered task-panel-thanks task-panel-hidden"> Thanks for the feedback! <3 </div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
Reference in New Issue
Block a user