Skip to content

Commit 0d065af

Browse files
sbattensbatten
authored
adopt font window icon controls (microsoft#82301)
* adopt font window icon controls fixes microsoft#82193 * fix max/restore button
1 parent 867bcae commit 0d065af

2 files changed

Lines changed: 18 additions & 50 deletions

File tree

‎src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css‎

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -106,54 +106,29 @@
106106

107107
.monaco-workbench.fullscreen .part.titlebar > .window-controls-container {
108108
display: none;
109+
background-color: transparent;
109110
}
110111

111-
.monaco-workbench .part.titlebar > .window-controls-container > .window-icon-bg {
112+
.monaco-workbench .part.titlebar > .window-controls-container > .window-icon {
112113
display: inline-block;
113-
-webkit-app-region: no-drag;
114-
height: 100%;
115-
width: 33.34%;
116-
}
117-
118-
.monaco-workbench .part.titlebar > .window-controls-container .window-icon svg {
119-
shape-rendering: crispEdges;
120-
text-align: center;
121-
}
122-
123-
.monaco-workbench .part.titlebar.titlebar > .window-controls-container .window-close {
124-
-webkit-mask: url('chrome-close.svg') no-repeat 50% 50%;
125-
}
126-
127-
.monaco-workbench .part.titlebar.titlebar > .window-controls-container .window-unmaximize {
128-
-webkit-mask: url('chrome-restore.svg') no-repeat 50% 50%;
129-
}
130-
131-
.monaco-workbench .part.titlebar > .window-controls-container .window-maximize {
132-
-webkit-mask: url('chrome-maximize.svg') no-repeat 50% 50%;
133-
}
134-
135-
.monaco-workbench .part.titlebar > .window-controls-container .window-minimize {
136-
-webkit-mask: url('chrome-minimize.svg') no-repeat 50% 50%;
137-
}
138-
139-
.monaco-workbench .part.titlebar > .window-controls-container > .window-icon-bg > .window-icon {
114+
line-height: 30px;
140115
height: 100%;
141-
width: 100%;
142-
-webkit-mask-size: 23.1%;
116+
width: 46px;
117+
font-size: 16px;
143118
}
144119

145-
.monaco-workbench .part.titlebar > .window-controls-container > .window-icon-bg:hover {
120+
.monaco-workbench .part.titlebar > .window-controls-container > .window-icon:hover {
146121
background-color: rgba(255, 255, 255, 0.1);
147122
}
148123

149-
.monaco-workbench .part.titlebar.light > .window-controls-container > .window-icon-bg:hover {
124+
.monaco-workbench .part.titlebar.light > .window-controls-container > .window-icon:hover {
150125
background-color: rgba(0, 0, 0, 0.1);
151126
}
152127

153-
.monaco-workbench .part.titlebar > .window-controls-container > .window-icon-bg.window-close-bg:hover {
128+
.monaco-workbench .part.titlebar > .window-controls-container > .window-icon.window-close:hover {
154129
background-color: rgba(232, 17, 35, 0.9);
155130
}
156131

157132
.monaco-workbench .part.titlebar > .window-controls-container .window-icon.window-close:hover {
158-
background-color: white;
133+
color: white;
159134
}

‎src/vs/workbench/browser/parts/titlebar/titlebarPart.ts‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -413,17 +413,13 @@ export class TitlebarPart extends Part implements ITitleService {
413413
this.windowControls = append(this.element, $('div.window-controls-container'));
414414

415415
// Minimize
416-
const minimizeIconContainer = append(this.windowControls, $('div.window-icon-bg'));
417-
const minimizeIcon = append(minimizeIconContainer, $('div.window-icon'));
418-
addClass(minimizeIcon, 'window-minimize');
416+
const minimizeIcon = append(this.windowControls, $('div.window-icon.window-minimize.codicon.codicon-chrome-minimize'));
419417
this._register(addDisposableListener(minimizeIcon, EventType.CLICK, e => {
420418
this.electronService.minimizeWindow();
421419
}));
422420

423421
// Restore
424-
const restoreIconContainer = append(this.windowControls, $('div.window-icon-bg'));
425-
this.maxRestoreControl = append(restoreIconContainer, $('div.window-icon'));
426-
addClass(this.maxRestoreControl, 'window-max-restore');
422+
this.maxRestoreControl = append(this.windowControls, $('div.window-icon.window-max-restore.codicon'));
427423
this._register(addDisposableListener(this.maxRestoreControl, EventType.CLICK, async e => {
428424
const maximized = await this.electronService.isMaximized();
429425
if (maximized) {
@@ -434,10 +430,7 @@ export class TitlebarPart extends Part implements ITitleService {
434430
}));
435431

436432
// Close
437-
const closeIconContainer = append(this.windowControls, $('div.window-icon-bg'));
438-
addClass(closeIconContainer, 'window-close-bg');
439-
const closeIcon = append(closeIconContainer, $('div.window-icon'));
440-
addClass(closeIcon, 'window-close');
433+
const closeIcon = append(this.windowControls, $('div.window-icon.window-close.codicon.codicon-chrome-close'));
441434
this._register(addDisposableListener(closeIcon, EventType.CLICK, e => {
442435
this.electronService.closeWindow();
443436
}));
@@ -477,11 +470,11 @@ export class TitlebarPart extends Part implements ITitleService {
477470
private onDidChangeMaximized(maximized: boolean) {
478471
if (this.maxRestoreControl) {
479472
if (maximized) {
480-
removeClass(this.maxRestoreControl, 'window-maximize');
481-
addClass(this.maxRestoreControl, 'window-unmaximize');
473+
removeClass(this.maxRestoreControl, 'codicon-chrome-maximize');
474+
addClass(this.maxRestoreControl, 'codicon-chrome-restore');
482475
} else {
483-
removeClass(this.maxRestoreControl, 'window-unmaximize');
484-
addClass(this.maxRestoreControl, 'window-maximize');
476+
removeClass(this.maxRestoreControl, 'codicon-chrome-restore');
477+
addClass(this.maxRestoreControl, 'codicon-chrome-maximize');
485478
}
486479
}
487480

@@ -621,7 +614,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
621614
if (titlebarActiveFg) {
622615
collector.addRule(`
623616
.monaco-workbench .part.titlebar > .window-controls-container .window-icon {
624-
background-color: ${titlebarActiveFg};
617+
color: ${titlebarActiveFg};
625618
}
626619
`);
627620
}
@@ -630,7 +623,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
630623
if (titlebarInactiveFg) {
631624
collector.addRule(`
632625
.monaco-workbench .part.titlebar.inactive > .window-controls-container .window-icon {
633-
background-color: ${titlebarInactiveFg};
626+
color: ${titlebarInactiveFg};
634627
}
635628
`);
636629
}

0 commit comments

Comments
 (0)