ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -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"> <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"> <ng-template ngFor let-item let-first="first" let-last="last" [ngForOf]="menuItems">
<span style="padding: 5px; display: flex; align-items: center"> <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="first">{{item.label}}</span>
<span *ngIf="last" style="">{{item.label}}</span> <span *ngIf="last" style="">{{item.label}}</span>
<a class="router-link" *ngIf="!last && !first" (click)="route(item.routerLink)" >{{item.label}}</a> <a class="router-link" *ngIf="!last && !first" (click)="route(item.routerLink)" >{{item.label}}</a>
</span> </span>
<span *ngIf="!last" class="icon chevron-right"></span> <span *ngIf="!last" class="codicon chevron-right"></span>
</ng-template> </ng-template>
</span> </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"); background-image: url("chevron_right.svg");
} }
.vs-dark .chevron-right.icon, .vs-dark .chevron-right.codicon,
.hc-black .chevron-right.icon { .hc-black .chevron-right.codicon {
background-image: url("chevron_right_inverse.svg"); background-image: url("chevron_right_inverse.svg");
} }
breadcrumb .icon { breadcrumb .codicon {
background-size: 16px; background-size: 16px;
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 8px; padding: 8px;
} }
breadcrumb .chevron-right.icon { breadcrumb .chevron-right.codicon {
background-size: 16px; background-size: 16px;
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -29,4 +29,4 @@ breadcrumb .chevron-right.icon {
breadcrumb .router-link { breadcrumb .router-link {
cursor: pointer; cursor: pointer;
} }

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

@@ -72,7 +72,7 @@ panel {
line-height: 45px; line-height: 45px;
} }
.tabbedPanel .tabList .tab .tabLabel.icon { .tabbedPanel .tabList .tab .tabLabel.codicon {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: 20px; 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; let tabLabelcontainer = this._tabLabelRef.nativeElement as HTMLElement;
if (this.showIcon && this.tab.iconClass) { if (this.showIcon && this.tab.iconClass) {
tabLabelcontainer.className = 'tabLabel icon'; tabLabelcontainer.className = 'tabLabel codicon';
tabLabelcontainer.classList.add(this.tab.iconClass); tabLabelcontainer.classList.add(this.tab.iconClass);
} else { } else {
tabLabelcontainer.className = 'tabLabel'; 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 { public static createTaskbarSpinner(): HTMLElement {
let spinnerContainer = document.createElement('div'); let spinnerContainer = document.createElement('div');
spinnerContainer.className = 'taskbar-progress icon in-progress '; spinnerContainer.className = 'taskbar-progress codicon in-progress ';
spinnerContainer.style.visibility = 'hidden'; spinnerContainer.style.visibility = 'hidden';
return spinnerContainer; 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. * 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"); background-image: url("dropdownarrow.svg");
} }
.vs-dark .dropdown-arrow.icon, .vs-dark .dropdown-arrow.codicon,
.hc-black .dropdown-arrow.icon { .hc-black .dropdown-arrow.codicon {
background-image: url("dropdownarrow_inverse.svg"); 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; padding: 0;
background-size: 10px; background-size: 10px;
background-position: 50%; background-position: 50%;
@@ -38,12 +38,12 @@
overflow: hidden; 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-position: 50%;
background-size: cover; 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; width: 8px;
height: 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 tableTemplate: AccountPickerListTemplate = Object.create(null);
const badge = DOM.$('div.badge'); const badge = DOM.$('div.badge');
tableTemplate.root = DOM.append(container, DOM.$('div.list-row.account-picker-list')); 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); DOM.append(tableTemplate.icon, badge);
tableTemplate.badgeContent = DOM.append(badge, DOM.$('div.badge-content')); tableTemplate.badgeContent = DOM.append(badge, DOM.$('div.badge-content'));
tableTemplate.label = DOM.append(tableTemplate.root, DOM.$('div.label')); tableTemplate.label = DOM.append(tableTemplate.root, DOM.$('div.label'));
@@ -81,7 +81,7 @@ export class AccountPickerListRenderer implements IListRenderer<azdata.Account,
} }
if (account.isStale) { if (account.isStale) {
templateData.badgeContent.className = 'badge-content icon warning-badge'; templateData.badgeContent.className = 'badge-content codicon warning-badge';
} else { } else {
templateData.badgeContent.className = 'badge-content'; 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; const iconClass = id;
if (typeof icon === 'string') { if (typeof icon === 'string') {
const path = resources.joinPath(extension.description.extensionLocation, icon); const path = resources.joinPath(extension.description.extensionLocation, icon);
createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(path)}`); createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(path)}`);
} else { } else {
const light = resources.joinPath(extension.description.extensionLocation, icon.light); const light = resources.joinPath(extension.description.extensionLocation, icon.light);
const dark = resources.joinPath(extension.description.extensionLocation, icon.dark); const dark = resources.joinPath(extension.description.extensionLocation, icon.dark);
createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(light)}`); createCSSRule(`.codicon.${iconClass}`, `background-image: ${asCSSUrl(light)}`);
createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(dark)}`); 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 // Create refresh account action
this._refreshContainer = DOM.append(this._rootElement, DOM.$('div.refresh-container')); 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 }); const actionBar = new ActionBar(this._refreshContainer, { animated: false });
this._refreshAccountAction = this._instantiationService.createInstance(RefreshAccountAction); this._refreshAccountAction = this._instantiationService.createInstance(RefreshAccountAction);
actionBar.push(this._refreshAccountAction, { icon: false, label: true }); actionBar.push(this._refreshAccountAction, { icon: false, label: true });
@@ -169,7 +169,7 @@ export class AccountPicker extends Disposable {
if (account) { if (account) {
const badge = DOM.$('div.badge'); const badge = DOM.$('div.badge');
const row = DOM.append(container, DOM.$('div.selected-account-container')); 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); DOM.append(icon, badge);
const badgeContent = DOM.append(badge, DOM.$('div.badge-content')); const badgeContent = DOM.append(badge, DOM.$('div.badge-content'));
const label = DOM.append(row, DOM.$('div.label')); 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 + ')'; label.innerText = account.displayInfo.displayName + ' (' + account.displayInfo.contextualDisplayName + ')';
if (account.isStale) { if (account.isStale) {
badgeContent.className = 'badge-content icon warning-badge'; badgeContent.className = 'badge-content codicon warning-badge';
} else { } else {
badgeContent.className = 'badge-content'; badgeContent.className = 'badge-content';
} }

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

@@ -4,11 +4,11 @@
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
/* Icons for various account actions */ /* 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'); background-image: url('new_account.svg');
} }
.vs-dark .action-item .icon.add-linked-account-action, .vs-dark .action-item .codicon.add-linked-account-action,
.hc-black .action-item .icon.add-linked-account-action { .hc-black .action-item .codicon.add-linked-account-action {
background-image: url('new_account_inverse.svg'); 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; line-height: 18px !important;
} }
.account-view .list-row .icon { .account-view .list-row .codicon {
flex: 0 0 50px; flex: 0 0 50px;
height: 50px; height: 50px;
width: 50px; width: 50px;
background-size: 50px; background-size: 50px;
} }
.account-view .list-row .icon .badge { .account-view .list-row .codicon .badge {
position: absolute; position: absolute;
top: 43px; top: 43px;
left: 43px; left: 43px;
@@ -71,7 +71,7 @@
height: 22px; height: 22px;
} }
.account-view .list-row .icon .badge .badge-content { .account-view .list-row .codicon .badge .badge-content {
width: 22px; width: 22px;
height: 22px; height: 22px;
background-size: 22px; background-size: 22px;
@@ -90,7 +90,7 @@
background-repeat: no-repeat; 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; background-size: 14px !important;
} }

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

@@ -10,7 +10,7 @@
align-items: flex-start; align-items: flex-start;
} }
.selected-account-container .icon { .selected-account-container .codicon {
flex: 0 0 25px; flex: 0 0 25px;
height: 25px; height: 25px;
width: 25px; width: 25px;
@@ -22,11 +22,11 @@
align-self: center; align-self: center;
} }
.selected-account-container .icon { .selected-account-container .codicon {
background-size: 25px; background-size: 25px;
} }
.selected-account-container .icon .badge { .selected-account-container .codicon .badge {
position: relative; position: relative;
top: 15px; top: 15px;
left: 15px; left: 15px;
@@ -35,7 +35,7 @@
height: 12px; height: 12px;
} }
.selected-account-container .icon .badge .badge-content { .selected-account-container .codicon .badge .badge-content {
width: 12px; width: 12px;
height: 12px; height: 12px;
background-size: 12px; background-size: 12px;
@@ -53,14 +53,14 @@
padding: 6px; padding: 6px;
} }
.account-list-container .list-row .icon { .account-list-container .list-row .codicon {
flex: 0 0 35px; flex: 0 0 35px;
height: 35px; height: 35px;
width: 35px; width: 35px;
background-size: 35px; background-size: 35px;
} }
.account-list-container .list-row .icon .badge { .account-list-container .list-row .codicon .badge {
position: relative; position: relative;
top: 22px; top: 22px;
left: 22px; left: 22px;
@@ -69,7 +69,7 @@
height: 15px; height: 15px;
} }
.account-list-container .list-row .icon .badge .badge-content { .account-list-container .list-row .codicon .badge .badge-content {
width: 15px; width: 15px;
height: 15px; height: 15px;
background-size: 15px; background-size: 15px;
@@ -87,7 +87,7 @@
justify-content: flex-start; justify-content: flex-start;
} }
.refresh-container .icon { .refresh-container .codicon {
flex: 0 0 16px; flex: 0 0 16px;
height: 16px; height: 16px;
width: 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, @INotificationService private _notificationService: INotificationService,
@IAccountManagementService private _accountManagementService: IAccountManagementService @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> { public run(): Promise<boolean> {
@@ -115,7 +115,7 @@ export class ApplyFilterAction extends Action {
id: string, id: string,
label: string label: string
) { ) {
super(id, label, 'apply-filters-action icon filter'); super(id, label, 'apply-filters-action codicon filter');
} }
public run(): Promise<boolean> { public run(): Promise<boolean> {
@@ -136,7 +136,7 @@ export class RefreshAccountAction extends Action {
@IAccountManagementService private _accountManagementService: IAccountManagementService, @IAccountManagementService private _accountManagementService: IAccountManagementService,
@ILogService private readonly logService: ILogService @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> { public run(): Promise<boolean> {
if (this.account) { 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 { export class JobManagementUtilities {
public static startIconClass: string = 'action-label icon runJobIcon'; public static startIconClass: string = 'action-label codicon runJobIcon';
public static stopIconClass: string = 'action-label icon stopJobIcon'; public static stopIconClass: string = 'action-label codicon stopJobIcon';
public static jobMessageLength: number = 110; public static jobMessageLength: number = 110;
public static convertToStatusString(status: number): string { public static convertToStatusString(status: number): string {
@@ -146,4 +146,4 @@ export class JobManagementUtilities {
} }
return ''; return '';
} }
} }

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

@@ -27,7 +27,7 @@
padding: 15px; padding: 15px;
} }
.modal .icon.in-progress { .modal .codicon.in-progress {
width: 25px; width: 25px;
height: 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) { if (!this._modalOptions.isAngular) {
this._modalFooterSection = DOM.append(modalContent, DOM.$('.modal-footer')); this._modalFooterSection = DOM.append(modalContent, DOM.$('.modal-footer'));
if (this._modalOptions.hasSpinner) { 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); DOM.hide(this._spinnerElement);
} }
this._leftFooter = DOM.append(this._modalFooterSection, DOM.$('.left-footer')); 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)"> <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)}"> <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> {{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>
<div class="form-cell"> <div class="form-cell">
<div class="form-component-container"> <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-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)"> <div class="form-item-row" [style.font-size]="getItemTitleFontSize(item)">
{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span> {{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>
<div class="form-item-row" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)"> <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)"> <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.iconPath) {
if (!this._iconClass) { if (!this._iconClass) {
super.updateIcon(); super.updateIcon();
DOM.addClasses(this.imageContainer.nativeElement, this._iconClass, 'icon'); DOM.addClasses(this.imageContainer.nativeElement, this._iconClass, 'codicon');
} else { } else {
super.updateIcon(); 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. * 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-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;

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

@@ -163,7 +163,7 @@
</div> </div>
<div class="modal-footer" #modalFooterContainer> <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="right-footer">
<div class="footer-button" #scriptButtonContainer> <div class="footer-button" #scriptButtonContainer>
</div> </div>
@@ -173,4 +173,4 @@
</div> </div>
</div> </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 */ /* 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 > .codicon.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 .object-element-group:before {
position: absolute; position: absolute;
display: block; display: block;
width: 36px; width: 36px;
@@ -135,4 +135,4 @@ margin-bottom: 2px;
/* Add connection button */ /* Add connection button */
.server-explorer-viewlet .button-section { .server-explorer-viewlet .button-section {
padding: 20px; 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) }], providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardErrorContainer) }],
template: ` template: `
<div class="error-container"> <div class="error-container">
<div class="icon globalError"> <div class="codicon globalError">
</div> </div>
<div class="error-message" #errorMessage> <div class="error-message" #errorMessage>
</div> </div>

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

@@ -108,8 +108,8 @@ margin-bottom: 2px;
} }
/* loading for OE node */ /* 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 > .codicon.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 .object-element-group:before {
position: absolute; position: absolute;
display: block; display: block;
width: 36px; width: 36px;
@@ -129,4 +129,4 @@ margin-bottom: 2px;
/* Add connection button */ /* Add connection button */
.server-explorer-viewlet .button-section { .server-explorer-viewlet .button-section {
padding: 20px; padding: 20px;
} }

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

@@ -7,7 +7,7 @@
<div class="job-heading-container"> <div class="job-heading-container">
<h1 class="job-heading" *ngIf="_isCloud === false">Alerts</h1> <h1 class="job-heading" *ngIf="_isCloud === false">Alerts</h1>
<h1 class="job-heading" *ngIf="_isCloud === true">No Alerts Available</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>
<div #actionbarContainer class="agent-actionbar-container"></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"> <div class="jobhistory-heading-container">
<h1 class="job-heading">Jobs | {{this._agentJobInfo?.name}} </h1> <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> </div>
<!-- Back --> <!-- Back -->
@@ -161,4 +161,4 @@
</div> </div>
<h3 *ngIf="showSteps === false">No Steps Available</h3> <h3 *ngIf="showSteps === false">No Steps Available</h3>
</div> </div>
</div> </div>

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

@@ -7,9 +7,9 @@
<div class="job-heading-container"> <div class="job-heading-container">
<h1 class="job-heading" *ngIf="_isCloud === false">Jobs</h1> <h1 class="job-heading" *ngIf="_isCloud === false">Jobs</h1>
<h1 class="job-heading" *ngIf="_isCloud === true">No Jobs Available</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>
<div #actionbarContainer class="agent-actionbar-container"></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"); content: url("back_inverse.svg");
} }
.vs .action-label.icon.newStepIcon { .vs .action-label.codicon.newStepIcon {
background-image: url("new.svg"); background-image: url("new.svg");
} }
.vs-dark .action-label.icon.newStepIcon, .vs-dark .action-label.codicon.newStepIcon,
.hc-black .action-label.icon.newStepIcon { .hc-black .action-label.codicon.newStepIcon {
background-image: url("new_inverse.svg"); background-image: url("new_inverse.svg");
} }
jobhistory-component .hc-black .icon.edit, jobhistory-component .hc-black .codicon.edit,
jobhistory-component .vs-dark .icon.edit, jobhistory-component .vs-dark .codicon.edit,
notebookhistory-component .hc-black .icon.edit, notebookhistory-component .hc-black .codicon.edit,
notebookhistory-component .vs-dark .icon.edit { notebookhistory-component .vs-dark .codicon.edit {
background-image: url("edit_inverse.svg"); background-image: url("edit_inverse.svg");
} }
jobhistory-component .vs .icon.edit, jobhistory-component .vs .codicon.edit,
notebookhistory-component .vs .icon.edit { notebookhistory-component .vs .codicon.edit {
background-image: url("edit.svg"); background-image: url("edit.svg");
} }
jobhistory-component .actions-container .icon.edit, jobhistory-component .actions-container .codicon.edit,
notebookhistory-component .actions-container .icon.edit { notebookhistory-component .actions-container .codicon.edit {
background-position: 0% 50%; background-position: 0% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 12px; background-size: 12px;
} }
a.action-label.icon.runJobIcon.non-runnable { a.action-label.codicon.runJobIcon.non-runnable {
opacity: 0.4; opacity: 0.4;
cursor: default; cursor: default;
} }
a.action-label.icon.stopJobIcon.non-runnable { a.action-label.codicon.stopJobIcon.non-runnable {
opacity: 0.4; opacity: 0.4;
cursor: default; cursor: default;
} }
@@ -308,8 +308,8 @@ notebookhistory-component > .jobhistory-heading-container {
display: flex; display: flex;
} }
jobhistory-component > .jobhistory-heading-container > .icon.in-progress, jobhistory-component > .jobhistory-heading-container > .codicon.in-progress,
notebookhistory-component > .jobhistory-heading-container > .icon.in-progress { notebookhistory-component > .jobhistory-heading-container > .codicon.in-progress {
width: 20px; width: 20px;
height: 20px; height: 20px;
padding-top: 16px; 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; border-left: 1px dotted #444444;
} }
.job-heading-container > .icon.in-progress { .job-heading-container > .codicon.in-progress {
height: 20px; height: 20px;
width: 20px; width: 20px;
padding-top: 16px; padding-top: 16px;
@@ -574,21 +574,21 @@ table.jobprevruns > tbody {
display: block; display: block;
} }
.vs .action-label.icon.refreshIcon { .vs .action-label.codicon.refreshIcon {
background-image: url("refresh.svg"); background-image: url("refresh.svg");
} }
.vs-dark .action-label.icon.refreshIcon, .vs-dark .action-label.codicon.refreshIcon,
.hc-black .action-label.icon.refreshIcon { .hc-black .action-label.codicon.refreshIcon {
background-image: url("refresh_inverse.svg"); background-image: url("refresh_inverse.svg");
} }
.vs .action-label.icon.openNotebook { .vs .action-label.codicon.openNotebook {
background-image: url("open_notebook.svg"); background-image: url("open_notebook.svg");
} }
.vs-dark .action-label.icon.openNotebook, .vs-dark .action-label.codicon.openNotebook,
.hc-black .action-label.icon.openNotebook { .hc-black .action-label.codicon.openNotebook {
background-image: url("open_notebook_inverse.svg"); 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"> <div class="jobhistory-heading-container">
<h1 class="job-heading">Notebook Jobs| {{ this._agentNotebookInfo?.name }}</h1> <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> </div>
<!-- Back --> <!-- Back -->

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

@@ -7,9 +7,9 @@
<div class="job-heading-container"> <div class="job-heading-container">
<h1 class="job-heading" *ngIf="_isCloud === false">Notebook Jobs</h1> <h1 class="job-heading" *ngIf="_isCloud === false">Notebook Jobs</h1>
<h1 class="job-heading" *ngIf="_isCloud === true">No Notebooks Jobs Available</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>
<div #actionbarContainer class="agent-actionbar-container"></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"> <div class="job-heading-container">
<h1 class="job-heading" *ngIf="_isCloud === false">Operators</h1> <h1 class="job-heading" *ngIf="_isCloud === false">Operators</h1>
<h1 class="job-heading" *ngIf="_isCloud === true">No Operators Available</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>
<div #actionbarContainer class="agent-actionbar-container"></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"> <div class="job-heading-container">
<h1 class="job-heading" *ngIf="_isCloud === false">Proxies</h1> <h1 class="job-heading" *ngIf="_isCloud === false">Proxies</h1>
<h1 class="job-heading" *ngIf="_isCloud === true">No Proxies Available</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>
<div #actionbarContainer class="agent-actionbar-container"></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; overflow-y: hidden;
} }
output-component .grid-panel .action-label.icon { output-component .grid-panel .action-label.codicon {
min-width: 16px; min-width: 16px;
margin-right: 6px; margin-right: 6px;
margin-bottom: 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 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 #output link-handler [isTrusted]="isTrusted" [notebookUri]="notebookUri" class="notebook-preview" style="flex: 1 1 auto">
</div> </div>
</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 { public renderTemplate(tree: ITree, templateId: string, container: HTMLElement): any {
const taskTemplate: IQueryHistoryItemTemplateData = Object.create(null); const taskTemplate: IQueryHistoryItemTemplateData = Object.create(null);
taskTemplate.root = dom.append(container, $('.query-history-item')); 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.label = dom.append(taskTemplate.root, $('.label'));
taskTemplate.connectionInfo = dom.append(taskTemplate.root, $('.connection-info')); taskTemplate.connectionInfo = dom.append(taskTemplate.root, $('.connection-info'));
taskTemplate.time = dom.append(taskTemplate.root, $('.time')); 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 { public renderTemplate(tree: ITree, templateId: string, container: HTMLElement): any {
const taskTemplate: ITaskHistoryTemplateData = Object.create(null); const taskTemplate: ITaskHistoryTemplateData = Object.create(null);
taskTemplate.root = dom.append(container, $('.task-group')); 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.label = dom.append(taskTemplate.root, $('.label'));
taskTemplate.description = dom.append(taskTemplate.root, $('.description')); taskTemplate.description = dom.append(taskTemplate.root, $('.description'));
taskTemplate.time = dom.append(taskTemplate.root, $('.time')); 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> { class ExtensionListRenderer implements IListRenderer<IDashboardUITab, ExtensionListTemplate> {
public static TEMPLATE_ID = 'extensionListRenderer'; public static TEMPLATE_ID = 'extensionListRenderer';
private static readonly OPENED_TAB_CLASS = 'success'; 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 { public get templateId(): string {
return ExtensionListRenderer.TEMPLATE_ID; return ExtensionListRenderer.TEMPLATE_ID;
@@ -62,7 +62,7 @@ class ExtensionListRenderer implements IListRenderer<IDashboardUITab, ExtensionL
public renderTemplate(container: HTMLElement): ExtensionListTemplate { public renderTemplate(container: HTMLElement): ExtensionListTemplate {
const tableTemplate: ExtensionListTemplate = Object.create(null); const tableTemplate: ExtensionListTemplate = Object.create(null);
tableTemplate.root = DOM.append(container, DOM.$('div.list-row.extensionTab-list')); 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')); let titleContainer = DOM.append(tableTemplate.root, DOM.$('div.extension-details'));
tableTemplate.title = DOM.append(titleContainer, DOM.$('div.title')); tableTemplate.title = DOM.append(titleContainer, DOM.$('div.title'));
tableTemplate.description = DOM.append(titleContainer, DOM.$('div.description')); 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 { private updateIconTitle(): void {
switch (this._severity) { switch (this._severity) {
case Severity.Error: case Severity.Error:
this.titleIconClassName = 'sql icon error'; this.titleIconClassName = 'sql codicon error';
break; break;
case Severity.Warning: case Severity.Warning:
this.titleIconClassName = 'sql icon warning'; this.titleIconClassName = 'sql codicon warning';
break; break;
case Severity.Info: case Severity.Info:
this.titleIconClassName = 'sql icon info'; this.titleIconClassName = 'sql codicon info';
break; break;
} }
} }

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

@@ -9,7 +9,7 @@
height: 200px; 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; width: 20px;
height: 20px; height: 20px;
float: left; float: left;
@@ -22,6 +22,6 @@
user-select: text; 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; 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 labelDisplay = nls.localize("insights.item", "Item");
const valueDisplay = nls.localize("insights.value", "Value"); const valueDisplay = nls.localize("insights.value", "Value");
const iconClass = 'codicon';
class InsightTableView<T> extends ViewletPanel { class InsightTableView<T> extends ViewletPanel {
private _table: Table<T>; private _table: Table<T>;
@@ -88,22 +89,22 @@ function stateFormatter(row: number, cell: number, value: any, columnDef: Slick.
// render icon if passed // render icon if passed
if (resource.icon) { if (resource.icon) {
icon.classList.add('icon'); icon.classList.add(iconClass);
icon.classList.add(resource.icon); icon.classList.add(resource.icon);
} else { } else {
icon.classList.remove('icon'); icon.classList.remove(iconClass);
} }
//render state badge if present //render state badge if present
if (resource.stateColor) { if (resource.stateColor) {
badgeContent.style.backgroundColor = resource.stateColor; badgeContent.style.backgroundColor = resource.stateColor;
badgeContent.classList.remove('icon'); badgeContent.classList.remove(iconClass);
} else if (resource.stateIcon) { } else if (resource.stateIcon) {
badgeContent.style.backgroundColor = ''; badgeContent.style.backgroundColor = '';
badgeContent.classList.add('icon'); badgeContent.classList.add(iconClass);
badgeContent.classList.add(resource.stateIcon); badgeContent.classList.add(resource.stateIcon);
} else { } else {
badgeContent.classList.remove('icon'); badgeContent.classList.remove(iconClass);
badgeContent.style.backgroundColor = ''; 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. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
.insights span { .insights span {
display: inline-block; display: inline-block;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@@ -30,4 +30,4 @@
overflow: hidden; overflow: hidden;
width: 22px; width: 22px;
height: 22px; height: 22px;
} }