ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix errors due to icon to codicon rename in VSCode (#7837)

Browse Source 
Found numerous errors where icons weren't rendering correctly.
- Anything that's an action must have CSS using "codicon" not "icon"
since VSCode sets the "codicon" class automatically.
This affected Agent view in particular, but also:
  - acounts view
  - new tab view in dashboard
 - many more
- Anything referencing the common-icons.css icons needed updating.
This hid help tooltip text in FormContainer UI for example.
- Finally I tried to convert all references from icon -> codicon,
even when the CSS was technically correct. This was done
for maintainability reasons - from now on always add codicon.

Fixes #7827
This commit is contained in:
Kevin Cunnane
2019-10-21 12:02:30 -07:00
committed by GitHub
parent 53a081262d
commit c1e95a2246
41 changed files with 114 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/workbench/parts/backup/browser/backup.component.html
View File

@@ -163,7 +163,7 @@
</div>
<div class="modal-footer" #modalFooterContainer>
<div class="icon in-progress" #inProgressContainer></div>
<div class="codicon in-progress" #inProgressContainer></div>
<div class="right-footer">
<div class="footer-button" #scriptButtonContainer>
</div>
@@ -173,4 +173,4 @@
</div>
</div>
</div>
</form>
</form>

6
src/sql/workbench/parts/connection/browser/media/connectionViewlet.css
View File

@@ -114,8 +114,8 @@ margin-bottom: 2px;
}
/* loading for OE node */
.server-explorer-viewlet .monaco-tree .monaco-tree-rows > .monaco-tree-row > .icon.in-progress .connection-tile:before,
.server-explorer-viewlet .monaco-tree .monaco-tree-rows > .monaco-tree-row > .icon.in-progress .object-element-group:before {
.server-explorer-viewlet .monaco-tree .monaco-tree-rows > .monaco-tree-row > .codicon.in-progress .connection-tile:before,
.server-explorer-viewlet .monaco-tree .monaco-tree-rows > .monaco-tree-row > .codicon.in-progress .object-element-group:before {
position: absolute;
display: block;
width: 36px;
@@ -135,4 +135,4 @@ margin-bottom: 2px;
/* Add connection button */
.server-explorer-viewlet .button-section {
padding: 20px;
}
}

2
src/sql/workbench/parts/dashboard/browser/containers/dashboardErrorContainer.component.ts
View File

@@ -19,7 +19,7 @@ import * as nls from 'vs/nls';
providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardErrorContainer) }],
template: `
<div class="error-container">
<div class="icon globalError">
<div class="codicon globalError">
</div>
<div class="error-message" #errorMessage>
</div>

6
src/sql/workbench/parts/dataExplorer/browser/media/connectionViewletPanel.css
View File

@@ -108,8 +108,8 @@ margin-bottom: 2px;
}
/* loading for OE node */
.server-explorer-viewlet .monaco-tree .monaco-tree-rows > .monaco-tree-row > .icon.in-progress .connection-tile:before,
.server-explorer-viewlet .monaco-tree .monaco-tree-rows > .monaco-tree-row > .icon.in-progress .object-element-group:before {
.server-explorer-viewlet .monaco-tree .monaco-tree-rows > .monaco-tree-row > .codicon.in-progress .connection-tile:before,
.server-explorer-viewlet .monaco-tree .monaco-tree-rows > .monaco-tree-row > .codicon.in-progress .object-element-group:before {
position: absolute;
display: block;
width: 36px;
@@ -129,4 +129,4 @@ margin-bottom: 2px;
/* Add connection button */
.server-explorer-viewlet .button-section {
padding: 20px;
}
}

2
src/sql/workbench/parts/jobManagement/browser/alertsView.component.html
View File

@@ -7,7 +7,7 @@
<div class="job-heading-container">
<h1 class="job-heading" *ngIf="_isCloud === false">Alerts</h1>
<h1 class="job-heading" *ngIf="_isCloud === true">No Alerts Available</h1>
<div class="icon in-progress" *ngIf="_showProgressWheel === true"></div>
<div class="codicon in-progress" *ngIf="_showProgressWheel === true"></div>
</div>
<div #actionbarContainer class="agent-actionbar-container"></div>

4
src/sql/workbench/parts/jobManagement/browser/jobHistory.component.html
View File

@@ -6,7 +6,7 @@
-->
<div class="jobhistory-heading-container">
<h1 class="job-heading">Jobs | {{this._agentJobInfo?.name}} </h1>
<div class="icon in-progress" *ngIf="showProgressWheel()"></div>
<div class="codicon in-progress" *ngIf="showProgressWheel()"></div>
</div>
<!-- Back -->
@@ -161,4 +161,4 @@
</div>
<h3 *ngIf="showSteps === false">No Steps Available</h3>
</div>
</div>
</div>

4
src/sql/workbench/parts/jobManagement/browser/jobsView.component.html
View File

@@ -7,9 +7,9 @@
<div class="job-heading-container">
<h1 class="job-heading" *ngIf="_isCloud === false">Jobs</h1>
<h1 class="job-heading" *ngIf="_isCloud === true">No Jobs Available</h1>
<div class="icon in-progress" *ngIf="_showProgressWheel === true"></div>
<div class="codicon in-progress" *ngIf="_showProgressWheel === true"></div>
</div>
<div #actionbarContainer class="agent-actionbar-container"></div>
<div #jobsgrid class="jobview-grid"></div>
<div #jobsgrid class="jobview-grid"></div>

30
src/sql/workbench/parts/jobManagement/browser/media/jobHistory.css
View File

@@ -151,40 +151,40 @@ input#accordion:checked ~ .accordion-content,
content: url("back_inverse.svg");
}
.vs .action-label.icon.newStepIcon {
.vs .action-label.codicon.newStepIcon {
background-image: url("new.svg");
}
.vs-dark .action-label.icon.newStepIcon,
.hc-black .action-label.icon.newStepIcon {
.vs-dark .action-label.codicon.newStepIcon,
.hc-black .action-label.codicon.newStepIcon {
background-image: url("new_inverse.svg");
}
jobhistory-component .hc-black .icon.edit,
jobhistory-component .vs-dark .icon.edit,
notebookhistory-component .hc-black .icon.edit,
notebookhistory-component .vs-dark .icon.edit {
jobhistory-component .hc-black .codicon.edit,
jobhistory-component .vs-dark .codicon.edit,
notebookhistory-component .hc-black .codicon.edit,
notebookhistory-component .vs-dark .codicon.edit {
background-image: url("edit_inverse.svg");
}
jobhistory-component .vs .icon.edit,
notebookhistory-component .vs .icon.edit {
jobhistory-component .vs .codicon.edit,
notebookhistory-component .vs .codicon.edit {
background-image: url("edit.svg");
}
jobhistory-component .actions-container .icon.edit,
notebookhistory-component .actions-container .icon.edit {
jobhistory-component .actions-container .codicon.edit,
notebookhistory-component .actions-container .codicon.edit {
background-position: 0% 50%;
background-repeat: no-repeat;
background-size: 12px;
}
a.action-label.icon.runJobIcon.non-runnable {
a.action-label.codicon.runJobIcon.non-runnable {
opacity: 0.4;
cursor: default;
}
a.action-label.icon.stopJobIcon.non-runnable {
a.action-label.codicon.stopJobIcon.non-runnable {
opacity: 0.4;
cursor: default;
}
@@ -308,8 +308,8 @@ notebookhistory-component > .jobhistory-heading-container {
display: flex;
}
jobhistory-component > .jobhistory-heading-container > .icon.in-progress,
notebookhistory-component > .jobhistory-heading-container > .icon.in-progress {
jobhistory-component > .jobhistory-heading-container > .codicon.in-progress,
notebookhistory-component > .jobhistory-heading-container > .codicon.in-progress {
width: 20px;
height: 20px;
padding-top: 16px;

14
src/sql/workbench/parts/jobManagement/browser/media/jobs.css
View File

@@ -346,7 +346,7 @@ agentview-component
border-left: 1px dotted #444444;
}
.job-heading-container > .icon.in-progress {
.job-heading-container > .codicon.in-progress {
height: 20px;
width: 20px;
padding-top: 16px;
@@ -574,21 +574,21 @@ table.jobprevruns > tbody {
display: block;
}
.vs .action-label.icon.refreshIcon {
.vs .action-label.codicon.refreshIcon {
background-image: url("refresh.svg");
}
.vs-dark .action-label.icon.refreshIcon,
.hc-black .action-label.icon.refreshIcon {
.vs-dark .action-label.codicon.refreshIcon,
.hc-black .action-label.codicon.refreshIcon {
background-image: url("refresh_inverse.svg");
}
.vs .action-label.icon.openNotebook {
.vs .action-label.codicon.openNotebook {
background-image: url("open_notebook.svg");
}
.vs-dark .action-label.icon.openNotebook,
.hc-black .action-label.icon.openNotebook {
.vs-dark .action-label.codicon.openNotebook,
.hc-black .action-label.codicon.openNotebook {
background-image: url("open_notebook_inverse.svg");
}

2
src/sql/workbench/parts/jobManagement/browser/notebookHistory.component.html
View File

@@ -6,7 +6,7 @@
-->
<div class="jobhistory-heading-container">
<h1 class="job-heading">Notebook Jobs| {{ this._agentNotebookInfo?.name }}</h1>
<div class="icon in-progress" *ngIf="showProgressWheel()"></div>
<div class="codicon in-progress" *ngIf="showProgressWheel()"></div>
</div>
<!-- Back -->

4
src/sql/workbench/parts/jobManagement/browser/notebooksView.component.html
View File

@@ -7,9 +7,9 @@
<div class="job-heading-container">
<h1 class="job-heading" *ngIf="_isCloud === false">Notebook Jobs</h1>
<h1 class="job-heading" *ngIf="_isCloud === true">No Notebooks Jobs Available</h1>
<div class="icon in-progress" *ngIf="_showProgressWheel === true"></div>
<div class="codicon in-progress" *ngIf="_showProgressWheel === true"></div>
</div>
<div #actionbarContainer class="agent-actionbar-container"></div>
<div #notebooksgrid class="jobnotebooksview-grid"></div>
<div #notebooksgrid class="jobnotebooksview-grid"></div>

2
src/sql/workbench/parts/jobManagement/browser/operatorsView.component.html
View File

@@ -7,7 +7,7 @@
<div class="job-heading-container">
<h1 class="job-heading" *ngIf="_isCloud === false">Operators</h1>
<h1 class="job-heading" *ngIf="_isCloud === true">No Operators Available</h1>
<div class="icon in-progress" *ngIf="_showProgressWheel === true"></div>
<div class="codicon in-progress" *ngIf="_showProgressWheel === true"></div>
</div>
<div #actionbarContainer class="agent-actionbar-container"></div>

2
src/sql/workbench/parts/jobManagement/browser/proxiesView.component.html
View File

@@ -7,7 +7,7 @@
<div class="job-heading-container">
<h1 class="job-heading" *ngIf="_isCloud === false">Proxies</h1>
<h1 class="job-heading" *ngIf="_isCloud === true">No Proxies Available</h1>
<div class="icon in-progress" *ngIf="_showProgressWheel === true"></div>
<div class="codicon in-progress" *ngIf="_showProgressWheel === true"></div>
</div>
<div #actionbarContainer class="agent-actionbar-container"></div>

2
src/sql/workbench/parts/notebook/browser/cellViews/media/output.css
View File

@@ -469,7 +469,7 @@ plotly-output .plotly-wrapper {
overflow-y: hidden;
}
output-component .grid-panel .action-label.icon {
output-component .grid-panel .action-label.codicon {
min-width: 16px;
margin-right: 6px;
margin-bottom: 6px;

2
src/sql/workbench/parts/notebook/browser/outputs/markdownOutput.component.html
View File

@@ -1,5 +1,5 @@
<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: row">
<div class="icon in-progress" *ngIf="loading === true"></div>
<div class="codicon in-progress" *ngIf="loading === true"></div>
<div #output link-handler [isTrusted]="isTrusted" [notebookUri]="notebookUri" class="notebook-preview" style="flex: 1 1 auto">
</div>
</div>

2
src/sql/workbench/parts/queryHistory/browser/queryHistoryRenderer.ts
View File

@@ -50,7 +50,7 @@ export class QueryHistoryRenderer implements IRenderer {
public renderTemplate(tree: ITree, templateId: string, container: HTMLElement): any {
const taskTemplate: IQueryHistoryItemTemplateData = Object.create(null);
taskTemplate.root = dom.append(container, $('.query-history-item'));
taskTemplate.icon = dom.append(taskTemplate.root, $('.icon.query-history-icon'));
taskTemplate.icon = dom.append(taskTemplate.root, $('.codicon.query-history-icon'));
taskTemplate.label = dom.append(taskTemplate.root, $('.label'));
taskTemplate.connectionInfo = dom.append(taskTemplate.root, $('.connection-info'));
taskTemplate.time = dom.append(taskTemplate.root, $('.time'));

2
src/sql/workbench/parts/tasks/browser/tasksRenderer.ts
View File

@@ -56,7 +56,7 @@ export class TaskHistoryRenderer implements IRenderer {
public renderTemplate(tree: ITree, templateId: string, container: HTMLElement): any {
const taskTemplate: ITaskHistoryTemplateData = Object.create(null);
taskTemplate.root = dom.append(container, $('.task-group'));
taskTemplate.icon = dom.append(taskTemplate.root, $('.icon.task-icon'));
taskTemplate.icon = dom.append(taskTemplate.root, $('.codicon.task-icon'));
taskTemplate.label = dom.append(taskTemplate.root, $('.label'));
taskTemplate.description = dom.append(taskTemplate.root, $('.description'));
taskTemplate.time = dom.append(taskTemplate.root, $('.time'));