diff --git a/src/atom-environment.coffee b/src/atom-environment.coffee index 62ab5937d..e69aeb55e 100644 --- a/src/atom-environment.coffee +++ b/src/atom-environment.coffee @@ -698,6 +698,9 @@ class AtomEnvironment extends Model if process.platform is 'darwin' and @config.get('core.titleBar') is 'custom' @workspace.addHeaderPanel({item: new TitleBar({@workspace, @themes, @applicationDelegate})}) @document.body.classList.add('custom-title-bar') + if process.platform is 'darwin' and @config.get('core.titleBar') is 'custom-inset' + @workspace.addHeaderPanel({item: new TitleBar({@workspace, @themes, @applicationDelegate})}) + @document.body.classList.add('custom-inset-title-bar') if process.platform is 'darwin' and @config.get('core.titleBar') is 'hidden' @document.body.classList.add('hidden-title-bar') diff --git a/src/config-schema.js b/src/config-schema.js index b43cb9e10..52102ec58 100644 --- a/src/config-schema.js +++ b/src/config-schema.js @@ -360,8 +360,8 @@ if (process.platform === 'darwin') { configSchema.core.properties.titleBar = { type: 'string', default: 'native', - enum: ['native', 'custom', 'hidden'], - description: 'Use a custom, theme-aware title bar or hide the title bar altogether.
Note: Switching to a custom or hidden title bar will compromise some functionality.
This setting will require a relaunch of Atom to take effect.' + enum: ['native', 'custom', 'custom-inset', 'hidden'], + description: 'A `custom` title bar adapts to theme colors. Choosing `custom-inset` adds a bit more padding. The title bar can also be completely `hidden`.
Note: Switching to a custom or hidden title bar will compromise some functionality.
This setting will require a relaunch of Atom to take effect.' } } diff --git a/src/main-process/atom-window.coffee b/src/main-process/atom-window.coffee index 7fd119aa7..266f5d292 100644 --- a/src/main-process/atom-window.coffee +++ b/src/main-process/atom-window.coffee @@ -46,9 +46,12 @@ class AtomWindow if @shouldAddCustomTitleBar() options.titleBarStyle = 'hidden' - if @shouldHideTitleBar() + if @shouldAddCustomInsetTitleBar() options.titleBarStyle = 'hidden-inset' + if @shouldHideTitleBar() + options.frame = false + @browserWindow = new BrowserWindow options @atomApplication.addWindow(this) @@ -234,6 +237,11 @@ class AtomWindow process.platform is 'darwin' and @atomApplication.config.get('core.titleBar') is 'custom' + shouldAddCustomInsetTitleBar: -> + not @isSpec and + process.platform is 'darwin' and + @atomApplication.config.get('core.titleBar') is 'custom-inset' + shouldHideTitleBar: -> not @isSpec and process.platform is 'darwin' and diff --git a/static/title-bar.less b/static/title-bar.less index 3c22c8d7f..8d0ad24ed 100644 --- a/static/title-bar.less +++ b/static/title-bar.less @@ -1,33 +1,32 @@ @import "ui-variables"; -// Custom Title Bar ------------------------------- +@title-bar-height: 22px; +@traffic-lights-width: 68px; + +@inset-title-bar-height: 38px; +@inset-traffic-lights-width: 78px; @title-bar-text-size: 13px; -@title-bar-height: 23px; @title-bar-background-color: @base-background-color; @title-bar-border-color: @base-border-color; -body.fullscreen .title-bar { - margin-top: -@title-bar-height; -} + +// Title Bar ------------------------------- .title-bar { - box-sizing: content-box; - height: @title-bar-height; - transition: margin-top 160ms; - - flex-shrink: 0; display: flex; + flex-shrink: 0; align-items: center; justify-content: center; - + overflow: hidden; + box-sizing: content-box; font-size: @title-bar-text-size; + background-color: @title-bar-background-color; + border-bottom: 1px solid @title-bar-border-color; + transition: margin-top 160ms; -webkit-user-select: none; -webkit-app-region: drag; - padding: 0 70px; - overflow: hidden; - .title { flex: 0 1 auto; overflow: hidden; @@ -35,60 +34,63 @@ body.fullscreen .title-bar { text-overflow: ellipsis; } - background-color: @title-bar-background-color; - border-bottom: 1px solid @title-bar-border-color; - .is-blurred & { color: @text-color-subtle; } } -// Hidden Title Bar ------------------------------- +// Custom ------------------------------- -@traffic-lights-width: 78px; -@traffic-lights-height: 38px; - -.hidden-title-bar:not(.fullscreen) { - atom-panel-container.header:empty + atom-workspace-axis.horizontal atom-panel-container.left { - min-width: 78px; // keep some width for traffic lights when tree-view is hidden - padding-top: @traffic-lights-height; // add space for traffic lights - } - - // Add space for traffic lights in header panels - atom-panel.header:first-child { - box-sizing: content-box; - height: @traffic-lights-height; +.custom-title-bar { + .title-bar { + height: @title-bar-height; padding-left: @traffic-lights-width; - overflow-x: auto; - overflow-y: hidden; + padding-right: @traffic-lights-width; } - // Enable dragging + &.fullscreen .title-bar { + margin-top: -@title-bar-height; // hide title bar in fullscreen mode + } + + atom-panel.modal { + top: @title-bar-height; // Move modals down + } +} + + +// Custom Inset ------------------------------- + +.custom-inset-title-bar { + .title-bar { + height: @inset-title-bar-height; + padding-left: @inset-traffic-lights-width; + padding-right: @inset-traffic-lights-width; + } + + &.fullscreen .title-bar { + margin-top: -@inset-title-bar-height; // hide title bar in fullscreen mode + } + + atom-panel.modal { + top: @inset-title-bar-height; // Move modals down + } +} + + +// Hidden ------------------------------- + +.hidden-title-bar { atom-panel-container.left, .tree-view, .tab-bar, - .status-bar, - atom-panel.header:first-child { - -webkit-app-region: drag; + .status-bar { + -webkit-app-region: drag; // Enable dragging } - // Disable dragging (on child elements) .tree-view > li, .tree-view-resize-handle, .tab { - -webkit-app-region: no-drag; + -webkit-app-region: no-drag; // Disable dragging (on child elements) } } - - -// Modal ------------------------------- -// Prevent traffic lights from overlapping modals - -.custom-title-bar atom-panel.modal { - top: @title-bar-height; -} - -.hidden-title-bar atom-panel.modal { - top: @traffic-lights-height; -}