From 3c93662a7144784091af6fab978187e5d1e7f98b Mon Sep 17 00:00:00 2001
From: SteVen Batten <6561887+sbatten@users.noreply.github.com>
Date: Mon, 28 May 2018 15:50:05 -0700
Subject: [PATCH] changing to svg
---
.../parts/titlebar/media/chrome-close.svg | 1 +
.../parts/titlebar/media/chrome-maximize.svg | 1 +
.../parts/titlebar/media/chrome-minimize.svg | 1 +
.../parts/titlebar/media/chrome-restore.svg | 1 +
.../parts/titlebar/media/titlebarpart.css | 29 +++++++-
.../browser/parts/titlebar/titlebarPart.ts | 74 ++++++++-----------
6 files changed, 63 insertions(+), 44 deletions(-)
create mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-close.svg
create mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-maximize.svg
create mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-minimize.svg
create mode 100644 src/vs/workbench/browser/parts/titlebar/media/chrome-restore.svg
diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-close.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-close.svg
new file mode 100644
index 00000000000..7abec27cd97
--- /dev/null
+++ b/src/vs/workbench/browser/parts/titlebar/media/chrome-close.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-maximize.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-maximize.svg
new file mode 100644
index 00000000000..781322be05f
--- /dev/null
+++ b/src/vs/workbench/browser/parts/titlebar/media/chrome-maximize.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-minimize.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-minimize.svg
new file mode 100644
index 00000000000..80ecf45c9ab
--- /dev/null
+++ b/src/vs/workbench/browser/parts/titlebar/media/chrome-minimize.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/vs/workbench/browser/parts/titlebar/media/chrome-restore.svg b/src/vs/workbench/browser/parts/titlebar/media/chrome-restore.svg
new file mode 100644
index 00000000000..3ab78151c17
--- /dev/null
+++ b/src/vs/workbench/browser/parts/titlebar/media/chrome-restore.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css
index 667f7865d14..06eed419c69 100644
--- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css
+++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css
@@ -75,7 +75,7 @@
}
.monaco-workbench > .part.titlebar > .window-controls-container {
- display: block;
+ display: flex;
flex-grow: 0;
flex-shrink: 0;
margin-left: auto;
@@ -95,6 +95,33 @@
text-align: center;
}
+.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon {
+ background-size: 11px;
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+
+.monaco-workbench > .part.titlebar.titlebar > .window-controls-container > .window-close {
+ background-image: url('chrome-close.svg');
+ order: 3;
+}
+
+.monaco-workbench > .part.titlebar.titlebar > .window-controls-container > .window-unmaximize {
+ background-image: url('chrome-restore.svg');
+ order: 2;
+}
+
+.monaco-workbench > .part.titlebar.titlebar > .window-controls-container > .window-maximize {
+ background-image: url('chrome-maximize.svg');
+ order: 2;
+
+}
+
+.monaco-workbench > .part.titlebar.titlebar > .window-controls-container > .window-minimize {
+ background-image: url('chrome-minimize.svg');
+ order: 1;
+}
+
.monaco-workbench > .part.titlebar > .window-controls-container > .window-icon:hover {
background-color: rgba(255, 255, 255, 0.1);
}
diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
index 5da574b35f2..cb53370b626 100644
--- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
+++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
@@ -228,7 +228,6 @@ export class TitlebarPart extends Part implements ITitleService {
}
public createContentArea(parent: HTMLElement): HTMLElement {
- const SVGNS = 'http://www.w3.org/2000/svg';
this.titleContainer = $(parent);
if (!isMacintosh) {
@@ -263,54 +262,33 @@ export class TitlebarPart extends Part implements ITitleService {
}
});
- const $svg = (name: string, props: { [name: string]: any }) => {
- const el = document.createElementNS(SVGNS, name);
- Object.keys(props).forEach((prop) => {
- el.setAttribute(prop, props[prop]);
- });
- return el;
- };
-
if (!isMacintosh) {
- // The svgs and styles for the titlebar come from the electron-titlebar-windows package
let windowControls = $(this.titleContainer).div({ class: 'window-controls-container' });
- $(windowControls).div({ class: 'window-icon' }, (builder) => {
- const svg = $svg('svg', { x: 0, y: 0, viewBox: '0 0 10 1' });
- svg.appendChild($svg('rect', { fill: 'currentColor', width: 10, height: 1 }));
- builder.getHTMLElement().appendChild(svg);
- }).on(EventType.CLICK, () => {
+ $(windowControls).div({ class: 'window-icon window-minimize' }).on(EventType.CLICK, () => {
this.windowService.minimizeWindow().then(null, errors.onUnexpectedError);
});
- $(windowControls).div({ class: 'window-icon' }, (builder) => {
- const svgf = $svg('svg', { class: 'window-maximize', x: 0, y: 0, viewBox: '0 0 10 10' });
- svgf.appendChild($svg('path', { fill: 'currentColor', d: 'M 0 0 L 0 10 L 10 10 L 10 0 L 0 0 z M 1 1 L 9 1 L 9 9 L 1 9 L 1 1 z' }));
- builder.getHTMLElement().appendChild(svgf);
-
- const svgm = $svg('svg', { class: 'window-unmaximize', x: 0, y: 0, viewBox: '0 0 10 10' });
- const mask = $svg('mask', { id: 'Mask' });
- mask.appendChild($svg('rect', { fill: '#fff', width: 10, height: 10 }));
- mask.appendChild($svg('path', { fill: '#000', d: 'M 3 1 L 9 1 L 9 7 L 8 7 L 8 2 L 3 2 L 3 1 z' }));
- mask.appendChild($svg('path', { fill: '#000', d: 'M 1 3 L 7 3 L 7 9 L 1 9 L 1 3 z' }));
- svgm.appendChild(mask);
- svgm.appendChild($svg('path', { fill: 'currentColor', d: 'M 2 0 L 10 0 L 10 8 L 8 8 L 8 10 L 0 10 L 0 2 L 2 2 L 2 0 z', mask: 'url(#Mask)' }));
- builder.getHTMLElement().appendChild(svgm);
- }).on(EventType.CLICK, () => {
- this.windowService.isMaximized().then((maximized) => {
- if (maximized) {
- return this.windowService.unmaximizeWindow();
- } else {
- return this.windowService.maximizeWindow();
- }
- }).then(null, errors.onUnexpectedError);
+ this.windowService.isMaximized().then((maximized) => {
+ let builder;
+ if (maximized) {
+ builder = $(windowControls).div({ class: 'window-icon window-unmaximize' });
+ } else {
+ builder = $(windowControls).div({ class: 'window-icon window-maximize' });
+ }
+
+ builder.on(EventType.CLICK, (e, builder) => {
+ this.windowService.isMaximized().then((maximized) => {
+ if (maximized) {
+ return this.windowService.unmaximizeWindow();
+ } else {
+ return this.windowService.maximizeWindow();
+ }
+ }).then(null, errors.onUnexpectedError);
+ });
});
- $(windowControls).div({ class: 'window-icon window-close' }, (builder) => {
- const svg = $svg('svg', { x: '0', y: '0', viewBox: '0 0 10 10' });
- svg.appendChild($svg('polygon', { fill: 'currentColor', points: '10,1 9,0 5,4 1,0 0,1 4,5 0,9 1,10 5,6 9,10 10,9 6,5' }));
- builder.getHTMLElement().appendChild(svg);
- }).on(EventType.CLICK, () => {
+ $(windowControls).div({ class: 'window-icon window-close' }).on(EventType.CLICK, () => {
this.windowService.closeWindow().then(null, errors.onUnexpectedError);
});
@@ -337,8 +315,18 @@ export class TitlebarPart extends Part implements ITitleService {
}
private onDidChangeMaximized(maximized: boolean) {
- ($(this.titleContainer).getHTMLElement().querySelector('.window-maximize') as SVGElement).style.display = maximized ? 'none' : 'inline';
- ($(this.titleContainer).getHTMLElement().querySelector('.window-unmaximize') as SVGElement).style.display = maximized ? 'inline' : 'none';
+ if (maximized) {
+ let element = $(this.titleContainer).getHTMLElement().querySelector('.window-maximize');
+ element.classList.remove('window-maximize');
+ element.classList.add('window-unmaximize');
+ } else {
+ let element = $(this.titleContainer).getHTMLElement().querySelector('.window-unmaximize');
+ element.classList.remove('window-unmaximize');
+ element.classList.add('window-maximize');
+ }
+
+ // ($(this.titleContainer).getHTMLElement().querySelector('.window-maximize') as SVGElement).style.display = maximized ? 'none' : 'inline';
+ // ($(this.titleContainer).getHTMLElement().querySelector('.window-unmaximize') as SVGElement).style.display = maximized ? 'inline' : 'none';
// $(this.titleContainer).getHTMLElement().style.paddingLeft = maximized ? '0.15em' : '0.5em';
// $(this.titleContainer).getHTMLElement().style.paddingRight = maximized ? 'calc(2em / 12)' : '0';
}
--
GitLab