From 4897f4db2645c3d96b297aa8680bce2e020e4393 Mon Sep 17 00:00:00 2001 From: Philipp Brumm Date: Wed, 18 May 2016 23:26:54 +0200 Subject: [PATCH] replace OSX window title bar with custom title-bar --- src/atom-environment.coffee | 7 ++++ src/main-process/atom-window.coffee | 1 + src/title-bar-element.coffee | 30 ++++++++++++++++ src/title-bar.coffee | 6 ++++ static/atom.less | 6 ++++ static/title-bar.less | 54 +++++++++++++++++++++++++++++ static/variables/ui-variables.less | 12 +++++++ static/workspace-view.less | 19 +++++++++- 8 files changed, 134 insertions(+), 1 deletion(-) create mode 100644 src/title-bar-element.coffee create mode 100644 src/title-bar.coffee create mode 100644 static/title-bar.less diff --git a/src/atom-environment.coffee b/src/atom-environment.coffee index 5247ceb97..71e3bf6f9 100644 --- a/src/atom-environment.coffee +++ b/src/atom-environment.coffee @@ -31,6 +31,7 @@ ContextMenuManager = require './context-menu-manager' CommandInstaller = require './command-installer' Clipboard = require './clipboard' Project = require './project' +TitleBar = require './title-bar' Workspace = require './workspace' PanelContainer = require './panel-container' Panel = require './panel' @@ -44,6 +45,7 @@ Gutter = require './gutter' TextEditorRegistry = require './text-editor-registry' AutoUpdateManager = require './auto-update-manager' +TitleBarElement = require './title-bar-element' WorkspaceElement = require './workspace-element' PanelContainerElement = require './panel-container-element' PanelElement = require './panel-element' @@ -193,6 +195,8 @@ class AtomEnvironment extends Model @config, @project, packageManager: @packages, grammarRegistry: @grammars, deserializerManager: @deserializers, notificationManager: @notifications, @applicationDelegate, @clipboard, viewRegistry: @views, assert: @assert.bind(this) }) + + @titleBar = new TitleBar() if process.platform is 'darwin' @themes.workspace = @workspace @textEditors = new TextEditorRegistry @@ -259,6 +263,8 @@ class AtomEnvironment extends Model registerDefaultCommands({commandRegistry: @commands, @config, @commandInstaller, notificationManager: @notifications, @project, @clipboard}) registerDefaultViewProviders: -> + @views.addViewProvider TitleBar, (model, env) -> + new TitleBarElement().initialize(model, env) @views.addViewProvider Workspace, (model, env) -> new WorkspaceElement().initialize(model, env) @views.addViewProvider PanelContainer, (model, env) -> @@ -678,6 +684,7 @@ class AtomEnvironment extends Model @deserialize(state) if state? @deserializeTimings.atom = Date.now() - startTime + @document.body.appendChild(@views.getView(@titleBar)) if @titleBar @document.body.appendChild(@views.getView(@workspace)) @backgroundStylesheet?.remove() diff --git a/src/main-process/atom-window.coffee b/src/main-process/atom-window.coffee index 774cbbf0f..1d8ab304b 100644 --- a/src/main-process/atom-window.coffee +++ b/src/main-process/atom-window.coffee @@ -23,6 +23,7 @@ class AtomWindow options = show: false title: 'Atom' + titleBarStyle: 'hidden' # Add an opaque backgroundColor (instead of keeping the default # transparent one) to prevent subpixel anti-aliasing from being disabled. # We believe this is a regression introduced with Electron 0.37.3, and diff --git a/src/title-bar-element.coffee b/src/title-bar-element.coffee new file mode 100644 index 000000000..24fa6091a --- /dev/null +++ b/src/title-bar-element.coffee @@ -0,0 +1,30 @@ + +module.exports = +class TitleBarElement extends HTMLElement + initialize: (@model, {@views, @workspace, @project, @config, @styles}) -> + + @classList.add('title-bar') + + @titleElement = document.createElement('div') + @titleElement.classList.add('title') + @titleElement.textContent = document.title + @appendChild @titleElement + + @activeItemSubscription = atom.workspace.onDidChangeActivePaneItem (activeItem) => + @subscribeToActiveTextEditor() + + return this + + subscribeToActiveTextEditor: -> + @cursorSubscription?.dispose() + @cursorSubscription = @getActiveTextEditor()?.onDidChangeTitle => + @updateTitle() + @updateTitle() + + updateTitle: -> + @titleElement.textContent = document.title + + getActiveTextEditor: -> + atom.workspace.getActiveTextEditor() + +module.exports = TitleBarElement = document.registerElement 'atom-title-bar', prototype: TitleBarElement.prototype diff --git a/src/title-bar.coffee b/src/title-bar.coffee new file mode 100644 index 000000000..eb7e52266 --- /dev/null +++ b/src/title-bar.coffee @@ -0,0 +1,6 @@ +Model = require './model' + +module.exports = +class TitleBar extends Model + constructor: (params) -> + super diff --git a/static/atom.less b/static/atom.less index 3b36a4aa7..90898ef10 100644 --- a/static/atom.less +++ b/static/atom.less @@ -17,10 +17,16 @@ // Core components @import "cursors"; +@import "bootstrap-overrides"; +@import "badges"; +@import "buttons"; +@import "icons"; +@import "links"; @import "panels"; @import "panes"; @import "syntax"; @import "text-editor-light"; +@import "title-bar"; @import "workspace-view"; // Atom UI library diff --git a/static/title-bar.less b/static/title-bar.less new file mode 100644 index 000000000..ce0f9db1a --- /dev/null +++ b/static/title-bar.less @@ -0,0 +1,54 @@ +@import "./variables/ui-variables"; + +.title-bar { + height: 23px; + + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue"; + font-size: @title-bar-text-size; + color: @title-bar-text-focused; + -webkit-user-select: none; + + padding: 0 10px 0 70px; + overflow: hidden; + + .title { + flex: 0 1 auto; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + + background-image: linear-gradient(@title-bar-gradient-focused); + border-bottom: 1px solid @title-bar-border-color-focused; + + .is-blurred & { + color: @title-bar-text-blurred; + background-image: linear-gradient(@title-bar-gradient-blurred); + border-bottom-color: @title-bar-border-color-blurred; + } + + [title-bar-style="combined"] & { + display: none; + position: absolute; + } +} + +[title-bar-style="combined"] .tab-bar { + height: 37px; + padding-left: 80px; + background-image: linear-gradient(@title-bar-gradient-focused); + + .tab { + top: 7px; + border-radius: 3px 3px 0 0 !important; + &:after { + border-radius: 3px 3px 0 0 !important; + } + } +} diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less index 0a549954d..2362f2a43 100644 --- a/static/variables/ui-variables.less +++ b/static/variables/ui-variables.less @@ -79,6 +79,18 @@ @tab-height: 30px; +// TitleBar + +@title-bar-text-size: 13px; + +@title-bar-gradient-focused: #ededed 0, #ededed 1px, #e7e7e7 2px, #d1d1d1 100%; +@title-bar-text-focused: #4d4d4d; +@title-bar-border-color-focused: #afafaf; + +@title-bar-gradient-blurred: #fafafa 0px, #f6f6f6 2px, #f6f6f6 100%; +@title-bar-text-blurred: #d3d3d3; +@title-bar-border-color-blurred: #d1d1d1; + // Other diff --git a/static/workspace-view.less b/static/workspace-view.less index 6d272a018..08db20721 100644 --- a/static/workspace-view.less +++ b/static/workspace-view.less @@ -1,9 +1,26 @@ @import "ui-variables"; +@import "octicon-mixins"; + +@font-face { .octicon-font(); } + +html { + font-family: @font-family; + font-size: @font-size; +} + +html, +body { + width: 100vw; + height: 100vh; + overflow: hidden; + display: flex; + flex-direction: column; +} atom-workspace { display: flex; flex-direction: column; - height: 100%; + flex-grow: 1; overflow: hidden; position: relative; color: @text-color;