fix the contrast rate issue of couple view icons in activity bar (#21003)

* fix connections and notebooks view icon issue

* update name

* remove css reference
This commit is contained in:
Alan Ren
2022-10-26 19:27:42 -07:00
committed by GitHub
parent 4b4c5d8ffe
commit e691263956
8 changed files with 13 additions and 47 deletions

View File

@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>ADS_jupyterBook</title>
<path d="M22.545,2.25V24H3.8a2.207,2.207,0,0,1-.878-.176,2.238,2.238,0,0,1-1.2-1.2,2.208,2.208,0,0,1-.176-.879V18H1.194c-.141,0-.28-.006-.416-.018a1.077,1.077,0,0,1-.369-.093.617.617,0,0,1-.264-.229.891.891,0,0,1,0-.82.631.631,0,0,1,.264-.229,1.1,1.1,0,0,1,.369-.093c.136-.012.275-.018.416-.018h.351v-3H1.194c-.141,0-.28-.006-.416-.018a1.077,1.077,0,0,1-.369-.093.617.617,0,0,1-.264-.229.891.891,0,0,1,0-.82.631.631,0,0,1,.264-.229,1.1,1.1,0,0,1,.369-.093c.136-.012.275-.018.416-.018h.351V9H1.194c-.141,0-.28-.006-.416-.018a1.077,1.077,0,0,1-.369-.093A.617.617,0,0,1,.145,8.66a.891.891,0,0,1,0-.82.631.631,0,0,1,.264-.229,1.1,1.1,0,0,1,.369-.093c.136-.012.275-.018.416-.018h.351v-3H1.194c-.141,0-.28-.006-.416-.018a1.077,1.077,0,0,1-.369-.093A.617.617,0,0,1,.145,4.16a.742.742,0,0,1-.1-.41.747.747,0,0,1,.1-.41.631.631,0,0,1,.264-.229,1.1,1.1,0,0,1,.369-.093C.914,3.006,1.053,3,1.194,3h.351V2.508c0-.195.008-.387.024-.574a1.689,1.689,0,0,1,.152-.563A2.221,2.221,0,0,1,3.8,0H20.3a2.215,2.215,0,0,1,.879.176,2.248,2.248,0,0,1,.715.48,2.273,2.273,0,0,1,.481.715A2.214,2.214,0,0,1,22.545,2.25Zm-1.5,17.25V2.25a.76.76,0,0,0-.75-.75H3.8a.745.745,0,0,0-.41.1.634.634,0,0,0-.228.257,1.124,1.124,0,0,0-.1.352,3.191,3.191,0,0,0-.023.393c0,.07,0,.139.006.205s0,.131,0,.193H3.4c.133,0,.268.006.4.018a1.088,1.088,0,0,1,.369.093.672.672,0,0,1,.27.229.714.714,0,0,1,.1.41.709.709,0,0,1-.1.41.657.657,0,0,1-.27.229,1.065,1.065,0,0,1-.369.093c-.136.012-.271.018-.4.018H3.045v3H3.4c.133,0,.268.006.4.018a1.088,1.088,0,0,1,.369.093.672.672,0,0,1,.27.229.853.853,0,0,1,0,.82.657.657,0,0,1-.27.229,1.065,1.065,0,0,1-.369.093C3.665,8.994,3.53,9,3.4,9H3.045v3H3.4c.133,0,.268.006.4.018a1.088,1.088,0,0,1,.369.093.672.672,0,0,1,.27.229.853.853,0,0,1,0,.82.657.657,0,0,1-.27.229,1.065,1.065,0,0,1-.369.093c-.136.012-.271.018-.4.018H3.045v3H3.4c.133,0,.268.006.4.018a1.088,1.088,0,0,1,.369.093.672.672,0,0,1,.27.229.853.853,0,0,1,0,.82.657.657,0,0,1-.27.229,1.065,1.065,0,0,1-.369.093c-.136.012-.271.018-.4.018H3.045v1.5Zm0,3V21h-18v.75a.762.762,0,0,0,.75.75Z" fill="#fff"/>
<path d="M16.545,4.5v3h-7.5v-3h7.5m1.5-1.5H7.545V9h10.5V3Z" fill="#fff"/>
<rect x="0.045" width="24" height="24" fill="none"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -638,12 +638,6 @@ Includes non-masked style declarations. */
background-image: url("database_colored.svg");
}
.book.codicon {
-webkit-mask-image: url("book_image.svg");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%;
}
.small {
width: 16px;
height: 16px;

View File

@@ -3,7 +3,6 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/dataExplorer.contribution';
import { localize } from 'vs/nls';
import { Registry } from 'vs/platform/registry/common/platform';
import { LifecyclePhase } from 'vs/workbench/services/lifecycle/common/lifecycle';

View File

@@ -23,9 +23,11 @@ import { ViewPane } from 'vs/workbench/browser/parts/views/viewPane';
import { ViewPaneContainer } from 'vs/workbench/browser/parts/views/viewPaneContainer';
import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
import { SqlIconId } from 'sql/base/common/codicons';
import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
import { Codicon } from 'vs/base/common/codicons';
export const VIEWLET_ID = 'workbench.view.connections';
export const ConnectionsViewIcon = registerIcon('ads-connections', Codicon.serverEnvironment, localize('ads-connections', 'Icon represent a server.'));
export class DataExplorerViewletViewsContribution implements IWorkbenchContribution {
@@ -105,7 +107,7 @@ export const VIEW_CONTAINER = Registry.as<IViewContainersRegistry>(ViewContainer
keybindings: { primary: KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KeyD },
order: 0
},
icon: { id: SqlIconId.dataExplorer },
icon: ConnectionsViewIcon,
order: 0,
storageId: `${VIEWLET_ID}.state`
}, ViewContainerLocation.Sidebar, { isDefault: true });

View File

@@ -1,24 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
/* Activity Bar */
.monaco-workbench .activitybar .monaco-action-bar .action-label.dataExplorer {
-webkit-mask: url('server_page_inverse.svg') 50% 50% / 24px no-repeat;
background-color: rgba(255, 255, 255, 0.4);
}
/* Checked */
.monaco-workbench .activitybar .monaco-action-bar .checked .action-label.dataExplorer {
background-color: rgb(255, 255, 255); /* this is a patch, will need to find a better long term fix*/
}
/* Hovered */
.monaco-workbench .activitybar .monaco-action-bar .action-label.dataExplorer:hover {
background-color: rgb(255, 255, 255);
}
.monaco-workbench .activitybar .monaco-action-bar .action-item:focus .action-label.dataExplorer {
background-color: rgba(255, 255, 255);
}

View File

@@ -40,6 +40,8 @@ import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
import { ITextQueryBuilderOptions, QueryBuilder } from 'vs/workbench/services/search/common/queryBuilder';
import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
import { Codicon } from 'vs/base/common/codicons';
export const VIEWLET_ID = 'workbench.view.notebooks';
@@ -409,8 +411,7 @@ export class NotebookExplorerViewPaneContainer extends ViewPaneContainer {
}
}
export const notebookIconId = 'book';
export const NotebooksViewIcon = registerIcon('ads-notebooks', Codicon.notebook, localize('ads-notebook', 'Icon represent a notebook.'));
export const NOTEBOOK_VIEW_CONTAINER = Registry.as<IViewContainersRegistry>(ViewContainerExtensions.ViewContainersRegistry).registerViewContainer({
id: VIEWLET_ID,
title: localize('notebookExplorer.name', "Notebooks"),
@@ -420,7 +421,7 @@ export const NOTEBOOK_VIEW_CONTAINER = Registry.as<IViewContainersRegistry>(View
keybindings: { primary: KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KeyB },
order: 0
},
icon: { id: notebookIconId },
icon: NotebooksViewIcon,
order: 6,
storageId: `${VIEWLET_ID}.state`
}, ViewContainerLocation.Sidebar);

View File

@@ -22,8 +22,8 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { Button } from 'sql/base/browser/ui/button/button';
import { extensionsViewIcon } from 'vs/workbench/contrib/extensions/browser/extensionsIcons';
import { settingsViewBarIcon } from 'vs/workbench/browser/parts/activitybar/activitybarPart';
import { notebookIconId } from 'sql/workbench/contrib/notebook/browser/notebookExplorer/notebookExplorerViewlet';
import { SqlIconId } from 'sql/base/common/codicons';
import { NotebooksViewIcon } from 'sql/workbench/contrib/notebook/browser/notebookExplorer/notebookExplorerViewlet';
import { ConnectionsViewIcon } from 'sql/workbench/contrib/dataExplorer/browser/dataExplorerViewlet';
const $ = dom.$;
interface TourData {
@@ -44,8 +44,8 @@ interface TourData {
popupImage: string;
}
const dataExplorerIconCssSelector = `.action-label.${SqlIconId.dataExplorer}`;
const notebookIconCssSelector = `.action-label.${notebookIconId}`;
const dataExplorerIconCssSelector = ThemeIcon.asCSSSelector(ConnectionsViewIcon);
const notebookIconCssSelector = ThemeIcon.asCSSSelector(NotebooksViewIcon);
const extensionsIconCssSelector = ThemeIcon.asCSSSelector(extensionsViewIcon);
const settingsGearIconCssSelector = ThemeIcon.asCSSSelector(settingsViewBarIcon);