From 222ede8b56a4564bcc632413a3e3ad65ac7fc73c Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Tue, 8 Nov 2016 12:03:32 +0100 Subject: [PATCH] title - first cut of no more css madness --- src/vs/workbench/browser/layout.ts | 33 +++++++----- .../parts/titlebar/media/titlebarpart.css | 11 +--- .../workbench/electron-browser/integration.ts | 10 ---- .../workbench/electron-browser/workbench.ts | 54 ++++++++++++++++--- .../services/part/common/partService.ts | 2 +- 5 files changed, 70 insertions(+), 40 deletions(-) diff --git a/src/vs/workbench/browser/layout.ts b/src/vs/workbench/browser/layout.ts index 822639e4738..688c38f9ccc 100644 --- a/src/vs/workbench/browser/layout.ts +++ b/src/vs/workbench/browser/layout.ts @@ -9,7 +9,7 @@ import { Part } from 'vs/workbench/browser/part'; import { QuickOpenController } from 'vs/workbench/browser/parts/quickopen/quickOpenController'; import { Sash, ISashEvent, IVerticalSashLayoutProvider, IHorizontalSashLayoutProvider, Orientation } from 'vs/base/browser/ui/sash/sash'; import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService'; -import { IPartService, Position, ILayoutOptions } from 'vs/workbench/services/part/common/partService'; +import { IPartService, Position, ILayoutOptions, Parts } from 'vs/workbench/services/part/common/partService'; import { IViewletService } from 'vs/workbench/services/viewlet/common/viewletService'; import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; @@ -29,7 +29,7 @@ const HIDE_SIDEBAR_WIDTH_THRESHOLD = 50; const HIDE_PANEL_HEIGHT_THRESHOLD = 50; interface ComputedStyles { - titlebar: { height: number; display: string; }; + titlebar: { height: number; }; activitybar: { width: number; }; sidebar: { minWidth: number; }; panel: { minHeight: number; }; @@ -295,8 +295,7 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal // Determine styles by looking into their CSS this.computedStyles = { titlebar: { - height: parseInt(titlebarStyle.getPropertyValue('height'), 10), - display: titlebarStyle.getPropertyValue('display') + height: parseInt(titlebarStyle.getPropertyValue('height'), 10) }, activitybar: { width: parseInt(activitybarStyle.getPropertyValue('width'), 10) @@ -336,10 +335,11 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal this.workbenchSize = this.getWorkbenchArea(); - const isSidebarHidden = this.partService.isSideBarHidden(); - const isPanelHidden = this.partService.isPanelHidden(); + const isTitlebarHidden = !this.partService.isVisible(Parts.TITLEBAR_PART); + const isPanelHidden = !this.partService.isVisible(Parts.PANEL_PART); + const isStatusbarHidden = !this.partService.isVisible(Parts.STATUSBAR_PART); + const isSidebarHidden = !this.partService.isVisible(Parts.SIDEBAR_PART); const sidebarPosition = this.partService.getSideBarPosition(); - const isStatusbarHidden = this.partService.isStatusBarHidden(); // Sidebar let sidebarWidth: number; @@ -353,12 +353,7 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal } this.statusbarHeight = isStatusbarHidden ? 0 : this.computedStyles.statusbar.height; - - if (this.computedStyles.titlebar.display === 'none') { - this.titlebarHeight = 0; // custom title bar is hidden - } else { - this.titlebarHeight = this.initialComputedStyles.titlebar.height / getZoomFactor(); // adjust for zoom prevention - } + this.titlebarHeight = isTitlebarHidden ? 0 : this.initialComputedStyles.titlebar.height / getZoomFactor(); // adjust for zoom prevention this.sidebarHeight = this.workbenchSize.height - this.statusbarHeight - this.titlebarHeight; let sidebarSize = new Dimension(sidebarWidth, this.sidebarHeight); @@ -460,6 +455,13 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal workbenchContainer.scrollLeft = 0; } + // Title Part + if (isTitlebarHidden) { + this.titlebar.getContainer().hide(); + } else { + this.titlebar.getContainer().show(); + } + // Editor Part and Panel part this.editor.getContainer().size(editorSize.width, editorSize.height); this.panel.getContainer().size(panelDimension.width, panelDimension.height); @@ -497,6 +499,11 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal // Statusbar Part this.statusbar.getContainer().position(this.workbenchSize.height - this.statusbarHeight); + if (isStatusbarHidden) { + this.statusbar.getContainer().hide(); + } else { + this.statusbar.getContainer().show(); + } // Quick open this.quickopen.layout(this.workbenchSize); diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css index 18ae6955a47..47e5b41ca51 100644 --- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css +++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css @@ -16,17 +16,8 @@ -webkit-user-select: none; -webkit-app-region: drag; zoom: 1; /* prevent zooming */ -} - -.monaco-workbench > .part.titlebar, -.titlebar-style-custom .monaco-workbench.fullscreen > .part.titlebar { - height: 0; /* needs extra class to be enabled (also disabled in fullscreen mode) */ - display: none; -} - -.titlebar-style-custom .monaco-workbench > .part.titlebar { - height: 22px; line-height: 22px; + height: 22px; display: flex; } diff --git a/src/vs/workbench/electron-browser/integration.ts b/src/vs/workbench/electron-browser/integration.ts index b73371c9026..c32492adfba 100644 --- a/src/vs/workbench/electron-browser/integration.ts +++ b/src/vs/workbench/electron-browser/integration.ts @@ -141,22 +141,12 @@ export class ElectronIntegration { ipc.on('vscode:enterFullScreen', (event) => { this.partService.joinCreation().then(() => { browser.setFullscreen(true); - this.partService.addClass('fullscreen'); - - if (!this.partService.isTitleBarHidden()) { - this.partService.layout({ forceStyleRecompute: true }); // handle title bar when fullscreen changes - } }); }); ipc.on('vscode:leaveFullScreen', (event) => { this.partService.joinCreation().then(() => { browser.setFullscreen(false); - this.partService.removeClass('fullscreen'); - - if (!this.partService.isTitleBarHidden()) { - this.partService.layout({ forceStyleRecompute: true }); // handle title bar when fullscreen changes - } }); }); diff --git a/src/vs/workbench/electron-browser/workbench.ts b/src/vs/workbench/electron-browser/workbench.ts index 547ad36786c..6e2c5a27e0a 100644 --- a/src/vs/workbench/electron-browser/workbench.ts +++ b/src/vs/workbench/electron-browser/workbench.ts @@ -13,6 +13,7 @@ import strings = require('vs/base/common/strings'); import DOM = require('vs/base/browser/dom'); import { Builder, $ } from 'vs/base/browser/builder'; import { Delayer } from 'vs/base/common/async'; +import * as browser from 'vs/base/browser/browser'; import assert = require('vs/base/common/assert'); import timer = require('vs/base/common/timer'); import errors = require('vs/base/common/errors'); @@ -529,7 +530,7 @@ export class Workbench implements IPartService { public isVisible(part: Parts): boolean { switch (part) { case Parts.TITLEBAR_PART: - return this.isTitleBarHidden(); + return !this.isTitleBarHidden(); case Parts.SIDEBAR_PART: return !this.sideBarHidden; case Parts.PANEL_PART: @@ -542,18 +543,28 @@ export class Workbench implements IPartService { } public isTitleBarHidden(): boolean { + return !this.getCustomTitleBarStyle() || browser.isFullscreen(); + } + + private getCustomTitleBarStyle(): string { if (!isMacintosh) { - return true; // custom title bar is only supported on Mac currently + return null; // custom title bar is only supported on Mac currently } const isDev = !this.environmentService.isBuilt || this.environmentService.extensionDevelopmentPath; if (isDev) { - return true; // not enabled when developing due to https://github.com/electron/electron/issues/3647 + return null; // not enabled when developing due to https://github.com/electron/electron/issues/3647 } const windowConfig = this.configurationService.getConfiguration(); - return (windowConfig && windowConfig.window && windowConfig.window.titleBarStyle === 'native'); + const style = windowConfig && windowConfig.window && windowConfig.window.titleBarStyle; + + if (style === 'custom') { + return style; + } + + return null; } public isStatusBarHidden(): boolean { @@ -725,6 +736,31 @@ export class Workbench implements IPartService { // Configuration changes this.toDispose.push(this.configurationService.onDidUpdateConfiguration(() => this.onDidUpdateConfiguration())); + + // Fullscreen changes + this.toDispose.push(browser.onDidChangeFullscreen(() => this.onFullscreenChanged())); + } + + private onFullscreenChanged(): void { + if (!this.isCreated) { + return; // we need to be ready + } + + const isFullscreen = browser.isFullscreen(); + const hasCustomTitle = !!this.getCustomTitleBarStyle(); + if (isFullscreen) { + this.addClass('fullscreen'); + + if (hasCustomTitle) { + this.layout({ forceStyleRecompute: true }); // handle title bar when fullscreen changes + } + } else { + this.removeClass('fullscreen'); + + if (hasCustomTitle) { + this.layout({ forceStyleRecompute: true }); // handle title bar when fullscreen changes + } + } } private onEditorsChanged(): void { @@ -797,8 +833,14 @@ export class Workbench implements IPartService { } // Apply title style if shown - if (!this.isTitleBarHidden()) { - DOM.addClass(this.parent, 'titlebar-style-custom'); + const titleStyle = this.getCustomTitleBarStyle(); + if (titleStyle) { + DOM.addClass(this.parent, `titlebar-style-${titleStyle}`); + } + + // Apply fullscreen state + if (browser.isFullscreen()) { + this.workbench.addClass('fullscreen'); } // Create Parts diff --git a/src/vs/workbench/services/part/common/partService.ts b/src/vs/workbench/services/part/common/partService.ts index de5ca7b0a66..db2be49eebe 100644 --- a/src/vs/workbench/services/part/common/partService.ts +++ b/src/vs/workbench/services/part/common/partService.ts @@ -62,7 +62,7 @@ export interface IPartService { isVisible(part: Parts): boolean; /** - * Returns iff the titlebar part is currently hidden or not. + * Returns iff the custom titlebar part is visible. */ isTitleBarHidden(): boolean; -- GitLab