ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-10 18:22:34 -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/base/browser/ui/breadcrumb/breadcrumb.component.ts
View File

@@ -19,12 +19,12 @@ import { subscriptionToDisposable } from 'sql/base/browser/lifecycle';
<span style="display: flex; flex-flow: row; align-items: center; margin: 10px">
<ng-template ngFor let-item let-first="first" let-last="last" [ngForOf]="menuItems">
<span style="padding: 5px; display: flex; align-items: center">
<span *ngIf="item.icon" class="icon" style="display: inline-block; margin-right: 5px" [ngClass]="item.icon"></span>
<span *ngIf="item.icon" class="codicon" style="display: inline-block; margin-right: 5px" [ngClass]="item.icon"></span>
<span *ngIf="first">{{item.label}}</span>
<span *ngIf="last" style="">{{item.label}}</span>
<a class="router-link" *ngIf="!last && !first" (click)="route(item.routerLink)" >{{item.label}}</a>
</span>
<span *ngIf="!last" class="icon chevron-right"></span>
<span *ngIf="!last" class="codicon chevron-right"></span>
</ng-template>
</span>
`

12
src/sql/base/browser/ui/breadcrumb/media/breadcrumb.css
View File

@@ -4,23 +4,23 @@
*--------------------------------------------------------------------------------------------*/
.vs .chevron-right.icon {
.vs .chevron-right.codicon {
background-image: url("chevron_right.svg");
}
.vs-dark .chevron-right.icon,
.hc-black .chevron-right.icon {
.vs-dark .chevron-right.codicon,
.hc-black .chevron-right.codicon {
background-image: url("chevron_right_inverse.svg");
}
breadcrumb .icon {
breadcrumb .codicon {
background-size: 16px;
background-position: 50% 50%;
background-repeat: no-repeat;
padding: 8px;
}
breadcrumb .chevron-right.icon {
breadcrumb .chevron-right.codicon {
background-size: 16px;
background-position: 50% 50%;
background-repeat: no-repeat;
@@ -29,4 +29,4 @@ breadcrumb .chevron-right.icon {
breadcrumb .router-link {
cursor: pointer;
}
}

2
src/sql/base/browser/ui/panel/media/panel.css
View File

@@ -72,7 +72,7 @@ panel {
line-height: 45px;
}
.tabbedPanel .tabList .tab .tabLabel.icon {
.tabbedPanel .tabList .tab .tabLabel.codicon {
background-repeat: no-repeat;
background-position: center center;
background-size: 20px;

2
src/sql/base/browser/ui/panel/tabHeader.component.ts
View File

@@ -58,7 +58,7 @@ export class TabHeaderComponent extends Disposable implements AfterContentInit,
let tabLabelcontainer = this._tabLabelRef.nativeElement as HTMLElement;
if (this.showIcon && this.tab.iconClass) {
tabLabelcontainer.className = 'tabLabel icon';
tabLabelcontainer.className = 'tabLabel codicon';
tabLabelcontainer.classList.add(this.tab.iconClass);
} else {
tabLabelcontainer.className = 'tabLabel';

2
src/sql/base/browser/ui/taskbar/taskbar.ts
View File

@@ -64,7 +64,7 @@ export class Taskbar {
*/
public static createTaskbarSpinner(): HTMLElement {
let spinnerContainer = document.createElement('div');
spinnerContainer.className = 'taskbar-progress icon in-progress ';
spinnerContainer.className = 'taskbar-progress codicon in-progress ';
spinnerContainer.style.visibility = 'hidden';
return spinnerContainer;
}

12
src/sql/base/parts/editableDropdown/browser/media/dropdownList.css
View File

@@ -3,16 +3,16 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.vs .dropdown-arrow.icon {
.vs .dropdown-arrow.codicon {
background-image: url("dropdownarrow.svg");
}
.vs-dark .dropdown-arrow.icon,
.hc-black .dropdown-arrow.icon {
.vs-dark .dropdown-arrow.codicon,
.hc-black .dropdown-arrow.codicon {
background-image: url("dropdownarrow_inverse.svg");
}
.monaco-dropdown .monaco-action-bar .action-label.icon.dropdown-arrow {
.monaco-dropdown .monaco-action-bar .action-label.codicon.dropdown-arrow {
padding: 0;
background-size: 10px;
background-position: 50%;
@@ -38,12 +38,12 @@
overflow: hidden;
}
.connection-input .monaco-dropdown .monaco-action-bar .action-label.icon.dropdown-arrow {
.connection-input .monaco-dropdown .monaco-action-bar .action-label.codicon.dropdown-arrow {
background-position: 50%;
background-size: cover;
}
.connection-input .monaco-inputbox .monaco-action-bar .action-item .icon {
.connection-input .monaco-inputbox .monaco-action-bar .action-item .codicon {
width: 8px;
height: 8px;
}

4
src/sql/platform/accounts/browser/accountListRenderer.ts
View File

@@ -58,7 +58,7 @@ export class AccountPickerListRenderer implements IListRenderer<azdata.Account,
const tableTemplate: AccountPickerListTemplate = Object.create(null);
const badge = DOM.$('div.badge');
tableTemplate.root = DOM.append(container, DOM.$('div.list-row.account-picker-list'));
tableTemplate.icon = DOM.append(tableTemplate.root, DOM.$('div.icon'));
tableTemplate.icon = DOM.append(tableTemplate.root, DOM.$('div.codicon'));
DOM.append(tableTemplate.icon, badge);
tableTemplate.badgeContent = DOM.append(badge, DOM.$('div.badge-content'));
tableTemplate.label = DOM.append(tableTemplate.root, DOM.$('div.label'));
@@ -81,7 +81,7 @@ export class AccountPickerListRenderer implements IListRenderer<azdata.Account,
}
if (account.isStale) {
templateData.badgeContent.className = 'badge-content icon warning-badge';
templateData.badgeContent.className = 'badge-content codicon warning-badge';
} else {
templateData.badgeContent.className = 'badge-content';
}

6
src/sql/platform/accounts/browser/accountManagement.contribution.ts
View File

@@ -64,12 +64,12 @@ ExtensionsRegistry.registerExtensionPoint<IAccountContrib | IAccountContrib[]>({
const iconClass = id;
if (typeof icon === 'string') {
const path = resources.joinPath(extension.description.extensionLocation, icon);
createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(path)}`);
createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(path)}`);
} else {
const light = resources.joinPath(extension.description.extensionLocation, icon.light);
const dark = resources.joinPath(extension.description.extensionLocation, icon.dark);
createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(light)}`);
createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(dark)}`);
createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(light)}`);
createCSSRule(`.vs-dark .codicon.${iconClass}, .hc-black .codicon.${iconClass}`, `background-image: ${asCSSUrl(dark)}`);
}
}
}

6
src/sql/platform/accounts/browser/accountPickerImpl.ts
View File

@@ -115,7 +115,7 @@ export class AccountPicker extends Disposable {
// Create refresh account action
this._refreshContainer = DOM.append(this._rootElement, DOM.$('div.refresh-container'));
DOM.append(this._refreshContainer, DOM.$('div.sql icon warning'));
DOM.append(this._refreshContainer, DOM.$('div.sql codicon warning'));
const actionBar = new ActionBar(this._refreshContainer, { animated: false });
this._refreshAccountAction = this._instantiationService.createInstance(RefreshAccountAction);
actionBar.push(this._refreshAccountAction, { icon: false, label: true });
@@ -169,7 +169,7 @@ export class AccountPicker extends Disposable {
if (account) {
const badge = DOM.$('div.badge');
const row = DOM.append(container, DOM.$('div.selected-account-container'));
const icon = DOM.append(row, DOM.$('div.icon'));
const icon = DOM.append(row, DOM.$('div.codicon'));
DOM.append(icon, badge);
const badgeContent = DOM.append(badge, DOM.$('div.badge-content'));
const label = DOM.append(row, DOM.$('div.label'));
@@ -181,7 +181,7 @@ export class AccountPicker extends Disposable {
label.innerText = account.displayInfo.displayName + ' (' + account.displayInfo.contextualDisplayName + ')';
if (account.isStale) {
badgeContent.className = 'badge-content icon warning-badge';
badgeContent.className = 'badge-content codicon warning-badge';
} else {
badgeContent.className = 'badge-content';
}

8
src/sql/platform/accounts/browser/media/accountActions.css
View File

@@ -4,11 +4,11 @@
*--------------------------------------------------------------------------------------------*/
/* Icons for various account actions */
.vs .action-item .icon.add-linked-account-action {
.vs .action-item .codicon.add-linked-account-action {
background-image: url('new_account.svg');
}
.vs-dark .action-item .icon.add-linked-account-action,
.hc-black .action-item .icon.add-linked-account-action {
.vs-dark .action-item .codicon.add-linked-account-action,
.hc-black .action-item .codicon.add-linked-account-action {
background-image: url('new_account_inverse.svg');
}
}

8
src/sql/platform/accounts/browser/media/accountDialog.css
View File

@@ -55,14 +55,14 @@
line-height: 18px !important;
}
.account-view .list-row .icon {
.account-view .list-row .codicon {
flex: 0 0 50px;
height: 50px;
width: 50px;
background-size: 50px;
}
.account-view .list-row .icon .badge {
.account-view .list-row .codicon .badge {
position: absolute;
top: 43px;
left: 43px;
@@ -71,7 +71,7 @@
height: 22px;
}
.account-view .list-row .icon .badge .badge-content {
.account-view .list-row .codicon .badge .badge-content {
width: 22px;
height: 22px;
background-size: 22px;
@@ -90,7 +90,7 @@
background-repeat: no-repeat;
}
.account-view .list-row .actions-container .action-item .action-label.icon.remove {
.account-view .list-row .actions-container .action-item .action-label.codicon.remove {
background-size: 14px !important;
}

16
src/sql/platform/accounts/browser/media/accountPicker.css
View File

@@ -10,7 +10,7 @@
align-items: flex-start;
}
.selected-account-container .icon {
.selected-account-container .codicon {
flex: 0 0 25px;
height: 25px;
width: 25px;
@@ -22,11 +22,11 @@
align-self: center;
}
.selected-account-container .icon {
.selected-account-container .codicon {
background-size: 25px;
}
.selected-account-container .icon .badge {
.selected-account-container .codicon .badge {
position: relative;
top: 15px;
left: 15px;
@@ -35,7 +35,7 @@
height: 12px;
}
.selected-account-container .icon .badge .badge-content {
.selected-account-container .codicon .badge .badge-content {
width: 12px;
height: 12px;
background-size: 12px;
@@ -53,14 +53,14 @@
padding: 6px;
}
.account-list-container .list-row .icon {
.account-list-container .list-row .codicon {
flex: 0 0 35px;
height: 35px;
width: 35px;
background-size: 35px;
}
.account-list-container .list-row .icon .badge {
.account-list-container .list-row .codicon .badge {
position: relative;
top: 22px;
left: 22px;
@@ -69,7 +69,7 @@
height: 15px;
}
.account-list-container .list-row .icon .badge .badge-content {
.account-list-container .list-row .codicon .badge .badge-content {
width: 15px;
height: 15px;
background-size: 15px;
@@ -87,7 +87,7 @@
justify-content: flex-start;
}
.refresh-container .icon {
.refresh-container .codicon {
flex: 0 0 16px;
height: 16px;
width: 16px;

6
src/sql/platform/accounts/common/accountActions.ts
View File

@@ -75,7 +75,7 @@ export class RemoveAccountAction extends Action {
@INotificationService private _notificationService: INotificationService,
@IAccountManagementService private _accountManagementService: IAccountManagementService
) {
super(RemoveAccountAction.ID, RemoveAccountAction.LABEL, 'remove-account-action icon remove');
super(RemoveAccountAction.ID, RemoveAccountAction.LABEL, 'remove-account-action codicon remove');
}
public run(): Promise<boolean> {
@@ -115,7 +115,7 @@ export class ApplyFilterAction extends Action {
id: string,
label: string
) {
super(id, label, 'apply-filters-action icon filter');
super(id, label, 'apply-filters-action codicon filter');
}
public run(): Promise<boolean> {
@@ -136,7 +136,7 @@ export class RefreshAccountAction extends Action {
@IAccountManagementService private _accountManagementService: IAccountManagementService,
@ILogService private readonly logService: ILogService
) {
super(RefreshAccountAction.ID, RefreshAccountAction.LABEL, 'refresh-account-action icon refresh');
super(RefreshAccountAction.ID, RefreshAccountAction.LABEL, 'refresh-account-action codicon refresh');
}
public run(): Promise<boolean> {
if (this.account) {

6
src/sql/platform/jobManagement/browser/jobManagementUtilities.ts
View File

@@ -7,8 +7,8 @@ import * as nls from 'vs/nls';
export class JobManagementUtilities {
public static startIconClass: string = 'action-label icon runJobIcon';
public static stopIconClass: string = 'action-label icon stopJobIcon';
public static startIconClass: string = 'action-label codicon runJobIcon';
public static stopIconClass: string = 'action-label codicon stopJobIcon';
public static jobMessageLength: number = 110;
public static convertToStatusString(status: number): string {
@@ -146,4 +146,4 @@ export class JobManagementUtilities {
}
return '';
}
}
}

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;
}
}