diff --git a/src/vs/workbench/parts/tasks/electron-browser/media/task.contribution.css b/src/vs/workbench/parts/tasks/electron-browser/media/task.contribution.css index 12d82a1a957..f18f5b15286 100644 --- a/src/vs/workbench/parts/tasks/electron-browser/media/task.contribution.css +++ b/src/vs/workbench/parts/tasks/electron-browser/media/task.contribution.css @@ -92,33 +92,40 @@ * Task Panel styles */ -.monaco-workbench .task-action { background: url('update.svg') center center no-repeat; } - -.task-panel-no-telemetry { - background-image: url('thumbs-down.svg'); +.task-panel-feedback-button { width: 50px; height: 50px; + display: inline-block; vertical-align: middle; } -.task-panel-yes-telemetry { +.task-panel-no-telemetry .light { + background-image: url('thumbs-down.svg'); +} + +.task-panel-no-telemetry .dark { + background-image: url('thumbs-down-inverse.svg'); +} + +.task-panel-yes-telemetry .light { background-image: url('thumbs-up.svg'); - width: 50px; - height: 50px; - vertical-align: middle; +} + +.task-panel-yes-telemetry .dark { + background-image: url('thumbs-up-inverse.svg'); } .task-panel { padding-left: 10px; padding-right: 10px; - margin-right: 10%; - margin-left: 10%; + overflow-y: scroll; } .task-panel-container { outline: grey dotted thin; padding: 1px 17px; - margin-top: 10px; + margin: 10px auto 0px; + max-width: 800px; } .task-panel-example-item { @@ -141,6 +148,8 @@ .task-panel-right-aligned { float: right; + /* cancel out 2px button padding */ + margin-top: -2px; } .task-panel-centered { @@ -150,7 +159,6 @@ .task-panel-header-item { font-size: 19px; - transition: display 2s linear 500ms; } .task-panel-feedback { diff --git a/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-down-inverse.svg b/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-down-inverse.svg new file mode 100755 index 00000000000..3773fc218b6 --- /dev/null +++ b/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-down-inverse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-down.svg b/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-down.svg old mode 100644 new mode 100755 index ce712adf30c..8dc97e70f34 --- a/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-down.svg +++ b/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-down.svg @@ -1,59 +1 @@ - - - - - - image/svg+xml - - - - - - - - - - + \ No newline at end of file diff --git a/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-up-inverse.svg b/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-up-inverse.svg new file mode 100755 index 00000000000..2aa69be08c4 --- /dev/null +++ b/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-up-inverse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-up.svg b/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-up.svg old mode 100644 new mode 100755 index 35920b0da15..6f0ca08e9bd --- a/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-up.svg +++ b/src/vs/workbench/parts/tasks/electron-browser/media/thumbs-up.svg @@ -1,59 +1 @@ - - - - - - image/svg+xml - - - - - - - - - - + \ No newline at end of file diff --git a/src/vs/workbench/parts/tasks/electron-browser/media/update.svg b/src/vs/workbench/parts/tasks/electron-browser/media/update.svg deleted file mode 100644 index 3dec2ba50fd..00000000000 --- a/src/vs/workbench/parts/tasks/electron-browser/media/update.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/parts/tasks/electron-browser/task.contribution.ts b/src/vs/workbench/parts/tasks/electron-browser/task.contribution.ts index bf8da6b58a5..9dfead78f04 100644 --- a/src/vs/workbench/parts/tasks/electron-browser/task.contribution.ts +++ b/src/vs/workbench/parts/tasks/electron-browser/task.contribution.ts @@ -68,7 +68,7 @@ import { IConfigurationEditingService, ConfigurationTarget, IConfigurationValue import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace'; import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles'; -import { IOutputService, IOutputChannelRegistry, Extensions as OutputExt, IOutputChannel } from 'vs/workbench/parts/output/common/output'; +import { IOutputService, IOutputChannelRegistry, Extensions as OutputExt, IOutputChannel } from 'vs/workbench/parts/output/common/output'; import { Scope, IActionBarRegistry, Extensions as ActionBarExtensions } from 'vs/workbench/browser/actions'; import { ITerminalService } from 'vs/workbench/parts/terminal/common/terminal'; diff --git a/src/vs/workbench/parts/tasks/electron-browser/taskPanel.ts b/src/vs/workbench/parts/tasks/electron-browser/taskPanel.ts index 26f609b9f72..0731dc8cd1a 100644 --- a/src/vs/workbench/parts/tasks/electron-browser/taskPanel.ts +++ b/src/vs/workbench/parts/tasks/electron-browser/taskPanel.ts @@ -10,7 +10,7 @@ import URI from 'vs/base/common/uri'; import { Builder, Dimension } from 'vs/base/browser/builder'; import { Panel, PanelRegistry, PanelDescriptor, Extensions } from 'vs/workbench/browser/panel'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; -import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService'; +import { IThemeService, ITheme, DARK, HIGH_CONTRAST } 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'; @@ -25,7 +25,7 @@ const TASK_PANEL_ID = 'workbench.panel.task'; export class TaskPanel extends Panel { private taskExperimentPart5 = 'workbench.tasks.feedbackAnswered'; - private _builder; + private _builder: Builder; constructor( @ITelemetryService telemetryService: ITelemetryService, @@ -91,14 +91,28 @@ export class TaskPanel extends Panel { 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'); + const thumbButtons = this._builder.select('.task-panel-feedback-button'); if (!theme) { theme = this.themeService.getTheme(); } - buttons.style('background-color', theme.getColor(buttonBackground).toString()); + + if (theme.getColor(buttonBackground)) { + buttons.style('background-color', theme.getColor(buttonBackground).toString()); + } else { + buttons.style('background-color', null); + } buttons.style('color', theme.getColor(buttonForeground).toString()); githubLink.style('color', theme.getColor(textLinkForeground).toString()); taskItems.style('background-color', theme.getColor(selectBackground).toString()); + + if ((theme.type === DARK || theme.type === HIGH_CONTRAST) && thumbButtons.hasClass('light')) { + thumbButtons.removeClass('light'); + thumbButtons.addClass('dark'); + } else if (thumbButtons.hasClass('dark')) { + thumbButtons.removeClass('dark'); + thumbButtons.addClass('light'); + } } } @@ -113,34 +127,31 @@ export class TaskPanel extends Panel { function getHtml() { return ` -
-
-

Some things you might be able to do here:
-

-

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.

-
-

Task1: tsc -watch Running (0 Errors) - Show Output - Stop - Restart -

-
-
+

Some things you might be able to do here:
+

    +
  • See a list of autodetected and manually configured tasks
    • +
  • Run/Restart/Stop tasks with a click of a button
    • +
  • Show a summary of each completed task (ie: execution time, exit code, foldable output)
    • +
  • Configure a task without touching the json file
    • +

+

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.

+
+

Task1: tsc -watch Running (0 Errors) Show Output + Stop + Restart

+
-
-
Do you think a task panel is useful? - - -
-
Thanks for the feedback! <3
+
+
Do you think a task panel is useful? + +
+
Thanks for the feedback! <3
+
`; }; \ No newline at end of file