ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-03 17:23:42 -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/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 '';
}
}
}