diff --git a/app/src/main-process/app-window.ts b/app/src/main-process/app-window.ts index 127b6b7d515..dff0cde2af6 100644 --- a/app/src/main-process/app-window.ts +++ b/app/src/main-process/app-window.ts @@ -60,6 +60,7 @@ export class AppWindow { } else if (__WIN32__) { windowOptions.frame = false } else if (__LINUX__) { + windowOptions.frame = false windowOptions.icon = path.join(__dirname, 'static', 'icon-logo.png') } diff --git a/app/src/ui/app.tsx b/app/src/ui/app.tsx index 5143a8d7050..e517ac56aa0 100644 --- a/app/src/ui/app.tsx +++ b/app/src/ui/app.tsx @@ -986,8 +986,8 @@ export class App extends React.Component { * on Windows. */ private renderAppMenuBar() { - // We only render the app menu bar on Windows - if (!__WIN32__) { + // We render the app menu bar on Windows and Linux + if (__DARWIN__) { return null } @@ -1046,13 +1046,16 @@ export class App extends React.Component { // When we're in full-screen mode on Windows we only need to render // the title bar when the menu bar is active. On other platforms we // never render the title bar while in full-screen mode. + + const appMenuPlatform = __WIN32__ || __LINUX__ + if (inFullScreen) { - if (!__WIN32__ || !menuBarActive) { + if (!appMenuPlatform || !menuBarActive) { return null } } - const showAppIcon = __WIN32__ && !this.state.showWelcomeFlow + const showAppIcon = appMenuPlatform && !this.state.showWelcomeFlow return ( { const inFullScreen = this.props.windowState === 'full-screen' const isMaximized = this.props.windowState === 'maximized' + const appMenuPlatform = __WIN32__ || __LINUX__ + // No Windows controls when we're in full-screen mode. - const winControls = __WIN32__ && !inFullScreen ? : null + const winControls = + appMenuPlatform && !inFullScreen ? : null // On Windows it's not possible to resize a frameless window if the // element that sits flush along the window edge has -webkit-app-region: drag. diff --git a/app/styles/mixins/_platform.scss b/app/styles/mixins/_platform.scss index 0191bdd2dcc..b3c7bd55584 100644 --- a/app/styles/mixins/_platform.scss +++ b/app/styles/mixins/_platform.scss @@ -41,3 +41,25 @@ @content; } } + +// A mixin which takes a content block that should only +// be applied when the current (real or emulated) operating +// system is Linux. +// +// This helper mixin is useful in so far that it allows us +// to keep platform specific styles next to cross-platform +// styles instead of splitting them out and possibly forgetting +// about them. +@mixin linux { + body.platform-linux & { + @content; + } +} + +// An exact copy of the linux mixin except that it allows for +// writing base-level rules +@mixin linux-context { + body.platform-linux { + @content; + } +} diff --git a/app/styles/ui/window/_title-bar.scss b/app/styles/ui/window/_title-bar.scss index 2662b3bb513..5693d20cb26 100644 --- a/app/styles/ui/window/_title-bar.scss +++ b/app/styles/ui/window/_title-bar.scss @@ -27,6 +27,18 @@ } } + @include linux { + height: var(--win32-title-bar-height); + background: var(--win32-title-bar-background-color); + border-bottom: 1px solid #000; + + .app-icon { + color: var(--toolbar-button-secondary-color); + margin: 0 var(--spacing); + align-self: center; + } + } + .resize-handle { position: absolute; top: 0px;