diff --git a/src/sql/base/browser/ui/table/media/table.css b/src/sql/base/browser/ui/table/media/table.css index 2ec7a7b4ac..6bfc6b6210 100644 --- a/src/sql/base/browser/ui/table/media/table.css +++ b/src/sql/base/browser/ui/table/media/table.css @@ -46,7 +46,8 @@ background-image: url('down.svg'); } -.vs-dark .slick-header-menubutton { +.vs-dark .slick-header-menubutton, +.hc-black .slick-header-menubutton { background-image: url('down-inverse.svg'); } @@ -54,7 +55,8 @@ background-image: url('filter.svg'); } -.vs-dark .slick-header-menubutton.filtered { +.vs-dark .slick-header-menubutton.filtered, +.hc-black .slick-header-menubutton.filtered { background-image: url('filter_inverse.svg'); } @@ -74,6 +76,10 @@ background: none repeat scroll 0 0 #333333; } +.hc-black .slick-header-menu { + background: none repeat scroll 0 0 #000000; +} + .slick-header-menu a.monaco-button.monaco-text-button { width: 60px; margin: 6px 6px 6px 6px; @@ -144,4 +150,8 @@ label { .vs-dark .slick-header-menu > input.input { color: #4a4a4a; +} + +.hc-black .slick-header-menu > input.input { + color: #000000; } \ No newline at end of file diff --git a/src/sql/common/theme/colors.ts b/src/sql/common/theme/colors.ts index cfd563b305..eb42ca596d 100644 --- a/src/sql/common/theme/colors.ts +++ b/src/sql/common/theme/colors.ts @@ -13,4 +13,11 @@ export const disabledInputBackground = registerColor('input.disabled.background' export const disabledInputForeground = registerColor('input.disabled.foreground', { dark: '#888888', light: '#888888', hc: foreground }, nls.localize('disabledInputBoxForeground', "Disabled Input box foreground.")); export const buttonFocusOutline = registerColor('button.focusOutline', { dark: '#eaeaea', light: '#666666', hc: null }, nls.localize('buttonFocusOutline', "Button outline color when focused.")); -export const listFocusAndSelectionBackground = registerColor('list.focusAndSelectionBackground', { dark: '#2c3295', light: '#2c3295', hc: null }, nls.localize('listFocusAndSelectionBackground', "List/Table background color for the selected and focus item when the list/table is active")); \ No newline at end of file +export const listFocusAndSelectionBackground = registerColor('list.focusAndSelectionBackground', { dark: '#2c3295', light: '#2c3295', hc: null }, nls.localize('listFocusAndSelectionBackground', "List/Table background color for the selected and focus item when the list/table is active")); + +// SQL Agent Colors +export const tableBackground = registerColor('agent.tableBackground', { light: '#fffffe', dark: '#333333', hc: Color.black }, nls.localize('agentTableBackground', "SQL Agent Table background color.")); +export const cellBackground = registerColor('agent.cellBackground', { light: '#faf5f8', dark: Color.black, hc: Color.black }, nls.localize('agentCellBackground', "SQL Agent table cell background color.")); +export const tableHoverBackground = registerColor('agent.tableHoverColor', { light: '#dcdcdc', dark: '#444444', hc: null }, nls.localize('agentTableHoverBackground', "SQL Agent table hover background color.")); +export const jobsHeadingBackground = registerColor('agent.jobsHeadingColor', { light: '#f4f4f4', dark: '#444444', hc: '#2b56f2' }, nls.localize('agentJobsHeadingColor', "SQL Agent heading background color.")); +export const cellBorderColor = registerColor('agent.cellBorderColor', { light: null, dark: null, hc: '#2b56f2' }, nls.localize('agentCellBorderColor', "SQL Agent table cell border color.")); \ No newline at end of file diff --git a/src/sql/parts/jobManagement/common/media/jobs.css b/src/sql/parts/jobManagement/common/media/jobs.css index baba398488..4e0a2dd446 100644 --- a/src/sql/parts/jobManagement/common/media/jobs.css +++ b/src/sql/parts/jobManagement/common/media/jobs.css @@ -31,6 +31,10 @@ jobhistory-component { border-bottom: 3px solid #444444; } +.hc-black .job-heading-container { + border-bottom: 3px solid #2b56f2; +} + .jobview-grid { height: calc(100% - 75px); width : 100%; @@ -43,17 +47,15 @@ jobhistory-component { #agentViewDiv .slick-header-column { background-color: transparent !important; - background: white !important; border: 0px !important; font-weight: bold; } -.vs-dark #jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { - background:#333333; +.hc-black #jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { + border: 1px solid #2b56f2; } #jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { - background: white; border-right: transparent !important; border-left: transparent !important; line-height: 33px !important; @@ -161,19 +163,12 @@ jobhistory-component { margin-left: 20px; } -.vs-dark #jobsDiv .dynamic-cell-detail { - background: black !important; -} - -#jobsDiv .dynamic-cell-detail { - background: #faf5f8 !important; -} - .jobsview-icon { background-image: url('./job.svg'); } -.vs-dark .jobsview-icon { +.vs-dark .jobsview-icon, +.hc-black .jobsview-icon { background-image: url('./job_inverse.svg'); } @@ -181,7 +176,8 @@ jobhistory-component { background-image: url('./alert.svg'); } -.vs-dark .alertsview-icon { +.vs-dark .alertsview-icon, +.hc-black .alertsview-icon { background-image: url('./alert_inverse.svg'); } @@ -189,7 +185,8 @@ jobhistory-component { background-image: url('./proxy.svg'); } -.vs-dark .proxiesview-icon { +.vs-dark .proxiesview-icon, +.hc-black .proxiesview-icon { background-image: url('./proxy_inverse.svg'); } @@ -197,7 +194,8 @@ jobhistory-component { background-image: url('./operator.svg'); } -.vs-dark .operatorsview-icon { +.vs-dark .operatorsview-icon, +.hc-black .operatorsview-icon { background-image: url('./operator_inverse.svg'); } @@ -210,6 +208,10 @@ agentview-component .jobview-grid .grid-canvas > .ui-widget-content.slick-row.od border-left: 1px dotted white; } +.hc-black .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle { + border-left: 1px dotted #2b56f2; +} + .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle { border-left: 1px dotted #444444; } @@ -238,6 +240,12 @@ agentview-component .jobview-grid .grid-canvas > .ui-widget-content.slick-row.od background: #444444 !important; } +.hc-black #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell, +.hc-black #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered, +.hc-black #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell { + background: none !important; +} + table.jobprevruns div.bar0, table.jobprevruns div.bar1, table.jobprevruns div.bar2, table.jobprevruns div.bar3, table.jobprevruns div.bar4, table.jobprevruns div.bar5 { padding-top: 3px; @@ -258,33 +266,6 @@ table.jobprevruns > tbody { vertical-align: bottom; } -.jobs-view-toolbar{ - display: flex; - flex-wrap: wrap; - align-items: flex-start; - padding: 15px 10px 15px 30px; - font-size: 16px; - border-bottom: 3px solid #f4f4f4; -} - -.jobs-view-toolbar .vs-dark { - border-bottom: 3px solid #444444; -} - -.jobs-view-toolbar > div{ - display: flex; - flex-wrap: nowrap; - align-items: flex-start; - margin-right: 25px; - cursor: pointer; - padding: 2px; -} - -.jobs-view-toolbar span{ - padding-left: 5px; -} - - #alertsDiv .jobalertsview-grid { height: calc(100% - 75px); width : 100%; @@ -329,12 +310,7 @@ jobsview-component .jobview-grid .slick-cell.error-row { opacity: 0; } -.vs-dark #alertsDiv jobalertsview-component .jobalertsview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { - background:#333333; -} - #alertsDiv jobalertsview-component .jobalertsview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { - background: white; border-right: transparent !important; border-left: transparent !important; line-height: 33px !important; @@ -360,12 +336,7 @@ jobsview-component .jobview-grid .slick-cell.error-row { border-left: 1px dotted #444444; } -.vs-dark #operatorsDiv joboperatorsview-component .joboperatorsview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { - background:#333333; -} - #operatorsDiv joboperatorsview-component .joboperatorsview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { - background: white; border-right: transparent !important; border-left: transparent !important; line-height: 33px !important; @@ -391,12 +362,7 @@ jobsview-component .jobview-grid .slick-cell.error-row { border-left: 1px dotted #444444; } -.vs-dark #proxiesDiv jobproxiesview-component .jobproxiesview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { - background:#333333; -} - #proxiesDiv jobproxiesview-component .jobproxiesview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell { - background: white; border-right: transparent !important; border-left: transparent !important; line-height: 33px !important; diff --git a/src/sql/parts/jobManagement/views/jobHistory.css b/src/sql/parts/jobManagement/views/jobHistory.css index d4c5678dd4..0017f58caa 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.css +++ b/src/sql/parts/jobManagement/views/jobHistory.css @@ -28,6 +28,10 @@ color: #fff; } +.hc-black .overview-container .overview-tab { + color: #ffffff; +} + .overview-container > .overview-tab { position: relative; margin-bottom: 1px; @@ -46,6 +50,11 @@ input#accordion { background: #444444; } +.hc-black .overview-container .overview-tab label { + background: #000000; + border: 1px solid #2b56f2; +} + .overview-container .overview-tab label { position: relative; display: block; @@ -61,6 +70,11 @@ input#accordion { background: #333333; } +.hc-black .overview-tab .accordion-content { + background: #000000; + border: 1px solid #2b56f2; +} + .overview-tab .accordion-content { max-height: 0; overflow: hidden; @@ -105,7 +119,8 @@ input#accordion:checked ~ .accordion-content { padding-bottom: 10px; } -.vs-dark.monaco-shell .all-jobs >.back-button-icon { +.vs-dark.monaco-shell .all-jobs >.back-button-icon, +.hc-black.monaco-shell .all-jobs >.back-button-icon { content: url('../common/media/back_inverse.svg'); } @@ -166,15 +181,6 @@ table.step-list tr.step-row td { display: flex; } -.vs-dark .history-details > .job-steps { - display: block; - border-left: 3px solid #444444; - padding-left: 10px; - height: 100%; - width: 90%; - overflow-y: scroll; -} - .history-details > .job-steps { display: block; border-left: 3px solid #f4f4f4; @@ -184,6 +190,14 @@ table.step-list tr.step-row td { overflow-y: scroll; } +.vs-dark .history-details > .job-steps { + border-left: 3px solid #444444; +} + +.hc-black .history-details > .job-steps { + border-left: 3px solid #2b56f2; +} + .history-details > .job-steps > .step-list { padding-bottom: 10px; } @@ -251,3 +265,6 @@ jobhistory-component > .actionbar-container .monaco-action-bar > ul.actions-cont border-top: 3px solid #444444; } +.hc-black jobhistory-component > .actionbar-container .monaco-action-bar > ul.actions-container { + border-top: 3px solid #2b56f2; +} diff --git a/src/sql/parts/jobManagement/views/jobsView.component.ts b/src/sql/parts/jobManagement/views/jobsView.component.ts index 9b12b4fc5c..f84631eacd 100644 --- a/src/sql/parts/jobManagement/views/jobsView.component.ts +++ b/src/sql/parts/jobManagement/views/jobsView.component.ts @@ -27,7 +27,6 @@ import { HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plu import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces'; import { JobManagementView } from 'sql/parts/jobManagement/views/jobManagementView'; import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; import { ICommandService } from 'vs/platform/commands/common/commands'; import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; @@ -36,6 +35,8 @@ import { IAction } from 'vs/base/common/actions'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IDashboardService } from 'sql/services/dashboard/common/dashboardService'; import { escape } from 'sql/base/common/strings'; +import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService'; +import { tableBackground, cellBackground, tableHoverBackground, jobsHeadingBackground, cellBorderColor } from 'sql/common/theme/colors'; export const JOBSVIEW_SELECTOR: string = 'jobsview-component'; export const ROW_HEIGHT: number = 45; @@ -96,7 +97,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit { @Inject(forwardRef(() => ElementRef)) private _el: ElementRef, @Inject(forwardRef(() => AgentViewComponent)) private _agentViewComponent: AgentViewComponent, @Inject(IJobManagementService) private _jobManagementService: IJobManagementService, - @Inject(IThemeService) private _themeService: IThemeService, + @Inject(IWorkbenchThemeService) private _themeService: IWorkbenchThemeService, @Inject(ICommandService) private _commandService: ICommandService, @Inject(IInstantiationService) instantiationService: IInstantiationService, @Inject(IContextMenuService) contextMenuService: IContextMenuService, @@ -121,6 +122,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit { // set base class elements this._visibilityElement = this._gridEl; this._parentComponent = this._agentViewComponent; + this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme(e))); } public layout() { @@ -820,6 +822,25 @@ export class JobsViewComponent extends JobManagementView implements OnInit { } } + private updateTheme(theme: IColorTheme) { + let bgColor = theme.getColor(tableBackground); + let cellColor = theme.getColor(cellBackground); + let borderColor = theme.getColor(cellBorderColor); + let headerColumns = $('#agentViewDiv .slick-header-column'); + let cells = $('.grid-canvas .ui-widget-content.slick-row .slick-cell'); + let cellDetails = $('#jobsDiv .dynamic-cell-detail'); + headerColumns.toArray().forEach(col => { + col.style.background = bgColor.toString(); + }); + cells.toArray().forEach(cell => { + cell.style.background = bgColor.toString(); + cell.style.border = borderColor ? '1px solid ' + borderColor.toString() : null; + }); + cellDetails.toArray().forEach(cellDetail => { + cellDetail.style.background = cellColor.toString(); + }); + } + protected getTableActions(): TPromise { let actions: IAction[] = []; actions.push(this._instantiationService.createInstance(EditJobAction));