home indicator - add a product icon overlay
This commit is contained in:
parent
0ccc731fb8
commit
4c0810e4d5
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "code-oss-dev",
|
||||
"version": "1.45.0",
|
||||
"distro": "84d234f8633695a96e1f00c6497d0851d588acf9",
|
||||
"distro": "2b65f8a42198f5bc470b28a01fe84ec8788e6adc",
|
||||
"author": {
|
||||
"name": "Microsoft Corporation"
|
||||
},
|
||||
|
|
Before Width: | Height: | Size: 559 B After Width: | Height: | Size: 559 B |
|
@ -22,7 +22,7 @@ import { ActivityAction, ActivityActionViewItem, ICompositeBar, ICompositeBarCol
|
|||
import { ViewletDescriptor } from 'vs/workbench/browser/viewlet';
|
||||
import { Extensions as ActionExtensions, IWorkbenchActionRegistry } from 'vs/workbench/common/actions';
|
||||
import { IActivity } from 'vs/workbench/common/activity';
|
||||
import { ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
|
||||
import { ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER, ACTIVITY_BAR_ACTIVE_BACKGROUND, ACTIVITY_BAR_BACKGROUND } from 'vs/workbench/common/theme';
|
||||
import { IActivityBarService } from 'vs/workbench/services/activityBar/browser/activityBarService';
|
||||
import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService';
|
||||
import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet';
|
||||
|
@ -362,35 +362,43 @@ export class HomeAction extends Action {
|
|||
}
|
||||
|
||||
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
|
||||
const activityBarBackgroundColor = theme.getColor(ACTIVITY_BAR_BACKGROUND);
|
||||
if (activityBarBackgroundColor) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .activitybar > .content > .home-bar > .home-bar-icon-badge {
|
||||
background-color: ${activityBarBackgroundColor};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const activeForegroundColor = theme.getColor(ACTIVITY_BAR_FOREGROUND);
|
||||
if (activeForegroundColor) {
|
||||
const activityBarForegroundColor = theme.getColor(ACTIVITY_BAR_FOREGROUND);
|
||||
if (activityBarForegroundColor) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label:not(.codicon),
|
||||
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label:not(.codicon),
|
||||
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label:not(.codicon) {
|
||||
background-color: ${activeForegroundColor} !important;
|
||||
background-color: ${activityBarForegroundColor} !important;
|
||||
}
|
||||
.monaco-workbench .activitybar > .content .home-bar > .monaco-action-bar .action-item .action-label.codicon,
|
||||
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label.codicon,
|
||||
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label.codicon,
|
||||
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label.codicon {
|
||||
color: ${activeForegroundColor} !important;
|
||||
color: ${activityBarForegroundColor} !important;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const activeBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BORDER);
|
||||
if (activeBorderColor) {
|
||||
const activityBarActiveBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BORDER);
|
||||
if (activityBarActiveBorderColor) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator:before {
|
||||
border-left-color: ${activeBorderColor};
|
||||
border-left-color: ${activityBarActiveBorderColor};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const activeFocusBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_FOCUS_BORDER);
|
||||
if (activeFocusBorderColor) {
|
||||
const activityBarActiveFocusBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_FOCUS_BORDER);
|
||||
if (activityBarActiveFocusBorderColor) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:focus::before {
|
||||
visibility: hidden;
|
||||
|
@ -398,17 +406,17 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
|
|||
|
||||
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:focus .active-item-indicator:before {
|
||||
visibility: visible;
|
||||
border-left-color: ${activeFocusBorderColor};
|
||||
border-left-color: ${activityBarActiveFocusBorderColor};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const activeBackgroundColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BACKGROUND);
|
||||
if (activeBackgroundColor) {
|
||||
const activityBarActiveBackgroundColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BACKGROUND);
|
||||
if (activityBarActiveBackgroundColor) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator {
|
||||
z-index: 0;
|
||||
background-color: ${activeBackgroundColor};
|
||||
background-color: ${activityBarActiveBackgroundColor};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
|
|
@ -366,6 +366,10 @@ export class ActivitybarPart extends Part implements IActivityBarService {
|
|||
animated: false
|
||||
}));
|
||||
|
||||
const homeBarIconBadge = document.createElement('div');
|
||||
addClass(homeBarIconBadge, 'home-bar-icon-badge');
|
||||
this.homeBarContainer.appendChild(homeBarIconBadge);
|
||||
|
||||
this.homeBar.push(this._register(this.instantiationService.createInstance(HomeAction, command, title, icon)), { icon: true, label: false });
|
||||
|
||||
const content = assertIsDefined(this.content);
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
/** Home Bar */
|
||||
|
||||
.monaco-workbench .activitybar > .content > .home-bar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
|
@ -34,6 +35,19 @@
|
|||
order: -1;
|
||||
}
|
||||
|
||||
.monaco-workbench .activitybar > .content > .home-bar > .home-bar-icon-badge {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: 1; /* on top of home indicator */
|
||||
background-image: url('../../../media/code-icon.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
/** Viewlet Switcher */
|
||||
|
||||
.monaco-workbench .activitybar > .content .monaco-action-bar {
|
||||
|
|
|
@ -85,7 +85,7 @@
|
|||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 3000;
|
||||
background-image: url('code-icon.svg');
|
||||
background-image: url('../../../media/code-icon.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 16px;
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><style>.st0{fill:#f6f6f6;fill-opacity:0}.st1{fill:#fff}.st2{fill:#167abf}</style><path class="st0" d="M1024 1024H0V0h1024v1024z"/><path class="st1" d="M1024 85.333v853.333H0V85.333h1024z"/><path class="st2" d="M0 85.333h298.667v853.333H0V85.333zm1024 0v853.333H384V85.333h640zm-554.667 160h341.333v-64H469.333v64zm341.334 533.334H469.333v64h341.333l.001-64zm128-149.334H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64z"/></svg>
|
Before Width: | Height: | Size: 559 B |
|
@ -88,7 +88,7 @@ export class ReleaseNotesManager {
|
|||
this._currentReleaseNotes.webview.onDidClickLink(uri => this.onDidClickLink(URI.parse(uri)));
|
||||
this._currentReleaseNotes.onDispose(() => { this._currentReleaseNotes = undefined; });
|
||||
|
||||
const iconPath = URI.parse(require.toUrl('./media/code-icon.svg'));
|
||||
const iconPath = URI.parse(require.toUrl('vs/workbench/browser/media/code-icon.svg'));
|
||||
this._currentReleaseNotes.iconPath = {
|
||||
light: iconPath,
|
||||
dark: iconPath
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><style>.st0{fill:#f6f6f6;fill-opacity:0}.st1{fill:#fff}.st2{fill:#167abf}</style><path class="st0" d="M1024 1024H0V0h1024v1024z"/><path class="st1" d="M1024 85.333v853.333H0V85.333h1024z"/><path class="st2" d="M0 85.333h298.667v853.333H0V85.333zm1024 0v853.333H384V85.333h640zm-554.667 160h341.333v-64H469.333v64zm341.334 533.334H469.333v64h341.333l.001-64zm128-149.334H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64z"/></svg>
|
Before Width: | Height: | Size: 559 B |
|
@ -220,7 +220,7 @@
|
|||
|
||||
.file-icons-enabled .show-file-icons .vs_code_welcome_page-name-file-icon.file-icon::before {
|
||||
content: ' ';
|
||||
background-image: url('../../code-icon.svg');
|
||||
background-image: url('../../../../browser/media/code-icon.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .welcomePage .mac-only,
|
||||
|
|
|
@ -116,7 +116,7 @@
|
|||
|
||||
.file-icons-enabled .show-file-icons .vs_code_editor_walkthrough\.md-name-file-icon.md-ext-file-icon.ext-file-icon.markdown-lang-file-icon.file-icon::before {
|
||||
content: ' ';
|
||||
background-image: url('../../code-icon.svg');
|
||||
background-image: url('../../../../browser/media/code-icon.svg');
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .walkThroughContent .mac-only,
|
||||
|
|
Loading…
Reference in a new issue