ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-03 01:25:38 -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

2
src/sql/workbench/browser/modal/media/modal.css
View File

@@ -27,7 +27,7 @@
padding: 15px;
}
.modal .icon.in-progress {
.modal .codicon.in-progress {
width: 25px;
height: 25px;
}

2
src/sql/workbench/browser/modal/modal.ts
View File

@@ -240,7 +240,7 @@ export abstract class Modal extends Disposable implements IThemable {
if (!this._modalOptions.isAngular) {
this._modalFooterSection = DOM.append(modalContent, DOM.$('.modal-footer'));
if (this._modalOptions.hasSpinner) {
this._spinnerElement = DOM.append(this._modalFooterSection, DOM.$('.icon.in-progress'));
this._spinnerElement = DOM.append(this._modalFooterSection, DOM.$('.codicon.in-progress'));
DOM.hide(this._spinnerElement);
}
this._leftFooter = DOM.append(this._modalFooterSection, DOM.$('.left-footer'));

4
src/sql/workbench/browser/modelComponents/formContainer.component.ts
View File

@@ -52,7 +52,7 @@ class FormItem {
<ng-container *ngIf="isHorizontal(item)">
<div *ngIf="hasItemTitle(item)" class="form-cell form-cell-title" [style.font-size]="getItemTitleFontSize(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
<span class="icon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
<span class="codicon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
</div>
<div class="form-cell">
<div class="form-component-container">
@@ -72,7 +72,7 @@ class FormItem {
<div class="form-vertical-container" *ngIf="isVertical(item)" [style.height]="getRowHeight(item)" [ngClass]="{'form-group-item': isInGroup(item)}">
<div class="form-item-row" [style.font-size]="getItemTitleFontSize(item)">
{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
<span class="icon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
<span class="codicon help form-info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
</div>
<div class="form-item-row" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">

2
src/sql/workbench/browser/modelComponents/image.component.ts
View File

@@ -55,7 +55,7 @@ export default class ImageComponent extends ComponentWithIconBase implements ICo
if (this.iconPath) {
if (!this._iconClass) {
super.updateIcon();
DOM.addClasses(this.imageContainer.nativeElement, this._iconClass, 'icon');
DOM.addClasses(this.imageContainer.nativeElement, this._iconClass, 'codicon');
} else {
super.updateIcon();
}

2
src/sql/workbench/browser/modelComponents/media/image.css
View File

@@ -3,7 +3,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
modelview-image div.icon {
modelview-image div.codicon {
background-repeat: no-repeat;
background-position: center;
background-size: contain;

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'));

4
src/sql/workbench/services/dashboard/browser/newDashboardTabDialogImpl.ts
View File

@@ -53,7 +53,7 @@ interface ExtensionListTemplate {
class ExtensionListRenderer implements IListRenderer<IDashboardUITab, ExtensionListTemplate> {
public static TEMPLATE_ID = 'extensionListRenderer';
private static readonly OPENED_TAB_CLASS = 'success';
private static readonly ICON_CLASS = 'extension-status-icon icon';
private static readonly ICON_CLASS = 'extension-status-icon codicon';
public get templateId(): string {
return ExtensionListRenderer.TEMPLATE_ID;
@@ -62,7 +62,7 @@ class ExtensionListRenderer implements IListRenderer<IDashboardUITab, ExtensionL
public renderTemplate(container: HTMLElement): ExtensionListTemplate {
const tableTemplate: ExtensionListTemplate = Object.create(null);
tableTemplate.root = DOM.append(container, DOM.$('div.list-row.extensionTab-list'));
tableTemplate.icon = DOM.append(tableTemplate.root, DOM.$('div.icon'));
tableTemplate.icon = DOM.append(tableTemplate.root, DOM.$('div.codicon'));
let titleContainer = DOM.append(tableTemplate.root, DOM.$('div.extension-details'));
tableTemplate.title = DOM.append(titleContainer, DOM.$('div.title'));
tableTemplate.description = DOM.append(titleContainer, DOM.$('div.description'));

6
src/sql/workbench/services/errorMessage/browser/errorMessageDialog.ts
View File

@@ -107,13 +107,13 @@ export class ErrorMessageDialog extends Modal {
private updateIconTitle(): void {
switch (this._severity) {
case Severity.Error:
this.titleIconClassName = 'sql icon error';
this.titleIconClassName = 'sql codicon error';
break;
case Severity.Warning:
this.titleIconClassName = 'sql icon warning';
this.titleIconClassName = 'sql codicon warning';
break;
case Severity.Info:
this.titleIconClassName = 'sql icon info';
this.titleIconClassName = 'sql codicon info';
break;
}
}

6
src/sql/workbench/services/errorMessage/browser/media/errorMessageDialog.css
View File

@@ -9,7 +9,7 @@
height: 200px;
}
.error-dialog .icon.error, .error-dialog .icon.warning , .error-dialog .icon.info {
.error-dialog .codicon.error, .error-dialog .codicon.warning , .error-dialog .codicon.info {
width: 20px;
height: 20px;
float: left;
@@ -22,6 +22,6 @@
user-select: text;
}
.modal .footer-button a.monaco-button.monaco-text-button.icon.scriptToClipboard {
.modal .footer-button a.monaco-button.monaco-text-button.codicon.scriptToClipboard {
width: 120px;
}
}

11
src/sql/workbench/services/insights/browser/insightsDialogView.ts
View File

@@ -45,6 +45,7 @@ import { ITextResourcePropertiesService } from 'vs/editor/common/services/resour
const labelDisplay = nls.localize("insights.item", "Item");
const valueDisplay = nls.localize("insights.value", "Value");
const iconClass = 'codicon';
class InsightTableView<T> extends ViewletPanel {
private _table: Table<T>;
@@ -88,22 +89,22 @@ function stateFormatter(row: number, cell: number, value: any, columnDef: Slick.
// render icon if passed
if (resource.icon) {
icon.classList.add('icon');
icon.classList.add(iconClass);
icon.classList.add(resource.icon);
} else {
icon.classList.remove('icon');
icon.classList.remove(iconClass);
}
//render state badge if present
if (resource.stateColor) {
badgeContent.style.backgroundColor = resource.stateColor;
badgeContent.classList.remove('icon');
badgeContent.classList.remove(iconClass);
} else if (resource.stateIcon) {
badgeContent.style.backgroundColor = '';
badgeContent.classList.add('icon');
badgeContent.classList.add(iconClass);
badgeContent.classList.add(resource.stateIcon);
} else {
badgeContent.classList.remove('icon');
badgeContent.classList.remove(iconClass);
badgeContent.style.backgroundColor = '';
}

4
src/sql/workbench/services/insights/browser/media/insightsDialog.css
View File

@@ -3,7 +3,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.insights span {
.insights span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
@@ -30,4 +30,4 @@
overflow: hidden;
width: 22px;
height: 22px;
}
}