maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Activity bar: need dark/light icons (fixes #23693)

Browse source
This commit is contained in:
Benjamin Pasero 2017-04-19 10:14:01 +02:00
parent 833b15a098
commit 1de45560f1
18 changed files with 74 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/vs/workbench/browser/parts/activitybar/activitybarPart.ts
View file

@ -31,7 +31,7 @@ import { dispose, IDisposable } from 'vs/base/common/lifecycle';
import { ToggleActivityBarVisibilityAction } from 'vs/workbench/browser/actions/toggleActivityBarVisibility';
import SCMPreview from 'vs/workbench/parts/scm/browser/scmPreview';
import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
import { ACTIVITY_BAR_BACKGROUND } from 'vs/workbench/common/theme';
import { ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BACKGROUND_LIGHT_DEFAULT } from 'vs/workbench/common/theme';
import { highContrastBorder, highContrastOutline, focus } from 'vs/platform/theme/common/colorRegistry';
interface IViewletActivity {
@ -219,7 +219,8 @@ export class ActivitybarPart extends Part implements IActivityBarService {
// Part container
const container = this.getContainer();
container.style('background-color', this.getColor(ACTIVITY_BAR_BACKGROUND));
const background = this.getColor(ACTIVITY_BAR_BACKGROUND);
container.style('background-color', background);
const useBorder = this.isHighContrastTheme;
const isPositionLeft = this.partService.getSideBarPosition() === SideBarPosition.LEFT;
@ -230,6 +231,15 @@ export class ActivitybarPart extends Part implements IActivityBarService {
container.style('border-left-width', useBorder && !isPositionLeft ? '1px' : null);
container.style('border-left-style', useBorder && !isPositionLeft ? 'solid' : null);
container.style('border-left-color', useBorder && !isPositionLeft ? this.getColor(highContrastBorder) : null);
// Toggle 'light' class if we are in light theme and the background color does not match our default
// so that viewlet icons can provide a light version of the view icon. We do this because our default
// light activity bar background is actually dark. If we have the default color, we do not want light icons.
if (this.isLightTheme && background && background.toLowerCase() !== ACTIVITY_BAR_BACKGROUND_LIGHT_DEFAULT.toLowerCase()) {
container.addClass('light');
} else {
container.removeClass('light');
}
}
private showContextMenu(e: MouseEvent): void {

7
src/vs/workbench/common/theme.ts
View file

@ -176,9 +176,10 @@ export const STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND = registerColor('statusBarInf
// < --- Activity Bar --- >
export const ACTIVITY_BAR_BACKGROUND_LIGHT_DEFAULT = '#2C2C2C';
export const ACTIVITY_BAR_BACKGROUND = registerColor('activityBarBackground', {
dark: '#333333',
light: '#2C2C2C',
light: ACTIVITY_BAR_BACKGROUND_LIGHT_DEFAULT,
hc: '#000000'
}, nls.localize('activityBarBackground', "Activity bar background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
@ -267,6 +268,10 @@ export class Themable extends Disposable {
return this.theme.type === 'hc';
}
protected get isLightTheme(): boolean {
return this.theme.type === 'light';
}
protected get toUnbind() {
return this._toUnbind;
}

1
src/vs/workbench/parts/debug/browser/media/debug-dark.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M17 19.488v4.248c0 .462.09 1.264-.373 1.264H15v-1h1v-3.19l-.173-.18c-1.453 1.205-3.528 1.248-4.67.108C10 19.578 10.118 18 11.376 16H8v1H7v-1.627C7 14.91 7.802 15 8.264 15h4.105L17 19.488zM14 9h-1V8h1.955c.46 0 1.045.22 1.045.682v3.345l.736.875c.18-.973.89-1.71 1.914-1.71.143 0 .35.014.35.04V9h1v2.618c0 .117.265.382.382.382H23v1h-2.233c.027 0 .042.154.042.298 0 1.025-.74 1.753-1.712 1.932l.875.77H23.318c.462 0 .682.583.682 1.045V19h-1v-1h-2.52L14 11.698V9zM16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4zm10 12c0 2.397-.85 4.6-2.262 6.324L9.676 8.262C11.4 6.85 13.602 6 16 6c5.514 0 10 4.486 10 10zM6 16c0-2.398.85-4.6 2.262-6.324L22.324 23.74C20.6 25.15 18.397 26 16 26c-5.514 0-10-4.486-10-10z" fill="#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 834 B

1
src/vs/workbench/parts/debug/browser/media/debug-light.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M17 19.488v4.248c0 .462.09 1.264-.373 1.264H15v-1h1v-3.19l-.173-.18c-1.453 1.205-3.528 1.248-4.67.108C10 19.578 10.118 18 11.376 16H8v1H7v-1.627C7 14.91 7.802 15 8.264 15h4.105L17 19.488zM14 9h-1V8h1.955c.46 0 1.045.22 1.045.682v3.345l.736.875c.18-.973.89-1.71 1.914-1.71.143 0 .35.014.35.04V9h1v2.618c0 .117.265.382.382.382H23v1h-2.233c.027 0 .042.154.042.298 0 1.025-.74 1.753-1.712 1.932l.875.77H23.318c.462 0 .682.583.682 1.045V19h-1v-1h-2.52L14 11.698V9zM16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4zm10 12c0 2.397-.85 4.6-2.262 6.324L9.676 8.262C11.4 6.85 13.602 6 16 6c5.514 0 10 4.486 10 10zM6 16c0-2.398.85-4.6 2.262-6.324L22.324 23.74C20.6 25.15 18.397 26 16 26c-5.514 0-10-4.486-10-10z" fill="#424242"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 837 B

6
src/vs/workbench/parts/debug/browser/media/debug.contribution.css
View file

@ -5,7 +5,11 @@
/* Activity Bar */
.monaco-workbench > .activitybar .monaco-action-bar .action-label.debug {
background-image: url('debug.svg');
background-image: url('debug-dark.svg');
}
.monaco-workbench > .activitybar.light .monaco-action-bar .action-label.debug {
background-image: url('debug-light.svg');
}
.monaco-editor .debug-top-stack-frame-line,

1
src/vs/workbench/parts/debug/browser/media/debug.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-white{fill:#FFFFFF;}</style><path class="icon-canvas-transparent" d="M32 32H0V0h32v32z" id="canvas"/><g id="iconBg"><path class="icon-white" d="M17 19.488v4.248c0 .462.09 1.264-.373 1.264H15v-1h1v-3.19l-.173-.18c-1.453 1.205-3.528 1.248-4.67.108C10 19.578 10.118 18 11.376 16H8v1H7v-1.627C7 14.91 7.802 15 8.264 15h4.105L17 19.488zM14 9h-1V8h1.955c.46 0 1.045.22 1.045.682v3.345l.736.875c.18-.973.89-1.71 1.914-1.71.143 0 .35.014.35.04V9h1v2.618c0 .117.265.382.382.382H23v1h-2.233c.027 0 .042.154.042.298 0 1.025-.74 1.753-1.712 1.932l.875.77H23.318c.462 0 .682.583.682 1.045V19h-1v-1h-2.52L14 11.698V9zM16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4zm10 12c0 2.397-.85 4.6-2.262 6.324L9.676 8.262C11.4 6.85 13.602 6 16 6c5.514 0 10 4.486 10 10zM6 16c0-2.398.85-4.6 2.262-6.324L22.324 23.74C20.6 25.15 18.397 26 16 26c-5.514 0-10-4.486-10-10z"/></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

8
src/vs/workbench/parts/extensions/electron-browser/media/extensions-status.svg → src/vs/workbench/parts/extensions/electron-browser/media/extensions-dark.svg
View file

@ -1,12 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g id="iconBg">
<path class="st0" d="M12.9,47.1H30V60H0V0h25.7v12.9H12.9V47.1z M17.1,42.9h25.7V17.1H17.1V42.9z M30,0v12.9h8.6V8.6h12.9v12.9
h-4.3V30H60V0H30z M47.1,47.1H34.3V60H60V34.3H47.1V47.1z"/>
</g>
h-4.3V30H60V0H30z M47.1,47.1H34.3V60H60V34.3H47.1V47.1z" fill="#fff"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 625 B

After

Width:  |  Height:  |  Size: 461 B

6
src/vs/workbench/parts/extensions/electron-browser/media/extensions-light.svg Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<path class="st0" d="M12.9,47.1H30V60H0V0h25.7v12.9H12.9V47.1z M17.1,42.9h25.7V17.1H17.1V42.9z M30,0v12.9h8.6V8.6h12.9v12.9
h-4.3V30H60V0H30z M47.1,47.1H34.3V60H60V34.3H47.1V47.1z" fill="#424242"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 464 B

6
src/vs/workbench/parts/extensions/electron-browser/media/extensions.css
View file

@ -4,5 +4,9 @@
*--------------------------------------------------------------------------------------------*/
.monaco-workbench > .activitybar > .content .monaco-action-bar .action-label.extensions {
background: url('extensions-status.svg') center center/22px no-repeat;
background: url('extensions-dark.svg') center center/22px no-repeat;
}
.monaco-workbench > .activitybar.light > .content .monaco-action-bar .action-label.extensions {
background: url('extensions-light.svg') center center/22px no-repeat;
}

4
src/vs/workbench/parts/files/browser/media/explorerviewlet.css
View file

@ -8,6 +8,10 @@
background-image: url('files-dark.svg');
}
.monaco-workbench > .activitybar.light .monaco-action-bar .action-label.explore {
background-image: url('files-light.svg');
}
/* --- Explorer viewlet --- */
.explorer-viewlet {
height: 100%;

1
src/vs/workbench/parts/files/browser/media/files-light.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M17.705 8h-8.705s-2 .078-2 2v15s0 2 2 2l11-.004c2 .004 2-1.996 2-1.996v-11.491l-4.295-5.509zm-1.705 2v5h4v10h-11v-15h7zm5.509-6h-8.493s-2.016.016-2.031 2h8.015v.454l3.931 4.546h1.069v12c2 0 2-1.995 2-1.995v-11.357l-4.491-5.648z" fill="#424242"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 323 B

1
src/vs/workbench/parts/git/browser/media/git-light.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M27.459 14.902l-10.439-10.439c-.296-.294-.672-.452-1.089-.452-.417 0-.793.157-1.089.452l-2.248 2.247 2.549 2.549c.249-.112.522-.177.813-.177 1.106 0 2.002.896 2.002 2.002 0 .291-.064.565-.176.814l2.311 2.336c.25-.111.633-.234.923-.234 1.106 0 2 .911 2 2.016s-.894 1.969-2 1.969c-1.105-.001-2.016-.751-2.016-1.985 0-.28.016-.462.119-.704l-2.373-2.374-.023.007v6.274c.747.295 1.277 1.026 1.277 1.875 0 1.105-.878 2.016-1.984 2.016-1.104 0-2.031-.926-2.031-2.031 0-.846.535-1.564 1.28-1.857l.001-6.25c-.762-.282-1.309-1.009-1.309-1.871 0-.28.059-.546.162-.788l-2.555-2.557-7.115 7.114c-.599.601-.601 1.576.001 2.178l10.44 10.518c.296.295.671.45 1.089.45.415 0 .796-.159 1.089-.45l10.391-10.471c.601-.599.599-1.576 0-2.177z" fill="#424242"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 815 B

10
src/vs/workbench/parts/git/browser/media/git.contribution.css
View file

@ -24,7 +24,15 @@
}
/* Activity Bar */
.monaco-workbench > .activitybar .monaco-action-bar .action-label.git,
.monaco-workbench > .activitybar .monaco-action-bar .action-label.git {
background-image: url('git-dark.svg');
}
.monaco-workbench > .activitybar.light .monaco-action-bar .action-label.git {
background-image: url('git-light.svg');
}
/* Status / Quick Open */
.monaco-shell .git-statusbar-group > .git-statusbar-branch-item,
.vs-dark .monaco-workbench .quick-open-widget .quick-open-tree .quick-open-entry .quick-open-entry-icon.git {
background-image: url('git-dark.svg');

0
src/vs/workbench/parts/scm/electron-browser/media/icon.svg → src/vs/workbench/parts/scm/electron-browser/media/icon-dark.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

12
src/vs/workbench/parts/scm/electron-browser/media/icon-light.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="10px" height="16px" viewBox="0 0 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>repo-forked</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Octicons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="repo-forked" fill="#424242">
<path d="M8,1 C6.89,1 6,1.89 6,3 C6,3.73 6.41,4.38 7,4.72 L7,6 L5,8 L3,6 L3,4.72 C3.59,4.38 4,3.74 4,3 C4,1.89 3.11,1 2,1 C0.89,1 0,1.89 0,3 C0,3.73 0.41,4.38 1,4.72 L1,6.5 L4,9.5 L4,11.28 C3.41,11.62 3,12.26 3,13 C3,14.11 3.89,15 5,15 C6.11,15 7,14.11 7,13 C7,12.27 6.59,11.62 6,11.28 L6,9.5 L9,6.5 L9,4.72 C9.59,4.38 10,3.74 10,3 C10,1.89 9.11,1 8,1 L8,1 Z M2,4.2 C1.34,4.2 0.8,3.65 0.8,3 C0.8,2.35 1.35,1.8 2,1.8 C2.65,1.8 3.2,2.35 3.2,3 C3.2,3.65 2.65,4.2 2,4.2 L2,4.2 Z M5,14.2 C4.34,14.2 3.8,13.65 3.8,13 C3.8,12.35 4.35,11.8 5,11.8 C5.65,11.8 6.2,12.35 6.2,13 C6.2,13.65 5.65,14.2 5,14.2 L5,14.2 Z M8,4.2 C7.34,4.2 6.8,3.65 6.8,3 C6.8,2.35 7.35,1.8 8,1.8 C8.65,1.8 9.2,2.35 9.2,3 C9.2,3.65 8.65,4.2 8,4.2 L8,4.2 Z" id="Shape"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

6
src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css
View file

@ -4,11 +4,15 @@
*--------------------------------------------------------------------------------------------*/
.monaco-workbench > .activitybar > .content .monaco-action-bar .action-label.scm {
background-image: url('icon.svg');
background-image: url('icon-dark.svg');
background-size: 19px;
background-position: center;
}
.monaco-workbench > .activitybar.light > .content .monaco-action-bar .action-label.scm {
background-image: url('icon-light.svg');
}
.scm-viewlet .monaco-list-row {
padding: 0 12px 0 20px;
line-height: 22px;

1
src/vs/workbench/parts/search/browser/media/search-light.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M19.23 4.095c-4.842 0-8.769 3.928-8.769 8.771 0 1.781.539 3.43 1.449 4.815 0 0-5.482 5.455-7.102 7.102-1.621 1.646 1.001 4.071 2.602 2.409 1.602-1.659 7.006-7.005 7.006-7.005 1.384.911 3.035 1.45 4.814 1.45 4.845 0 8.772-3.93 8.772-8.771.001-4.844-3.927-8.771-8.772-8.771zm0 15.035c-3.459 0-6.265-2.804-6.265-6.264 0-3.46 2.805-6.265 6.265-6.265 3.462 0 6.266 2.804 6.266 6.265 0 3.46-2.804 6.264-6.266 6.264z" fill="#424242"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 505 B

4
src/vs/workbench/parts/search/browser/media/search.contribution.css
View file

@ -6,4 +6,8 @@
/* Activity Bar */
.monaco-workbench > .activitybar .monaco-action-bar .action-label.search {
background-image: url('search-dark.svg');
}
.monaco-workbench > .activitybar.light .monaco-action-bar .action-label.search {
background-image: url('search-light.svg');
}