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;
-}