Add option to auto-hide menu bar

Closes #151

Author: pol-rivero

app/src/lib/app-state.ts

@@ -374,6 +374,12 @@ export interface IAppState {
    */
   readonly hideWindowOnQuit: boolean
 
+  /**
+   * Whether or not the menu bar should be hidden until the user presses Alt.
+   * Only applicable on Linux.
+   */
+  readonly autoHideMenuBar: boolean
+
   /**
    * Whether or not the app should use spell check on commit summary and description
    */

app/src/lib/main-process-config.ts

@@ -7,11 +7,13 @@ import { TitleBarStyle } from '../ui/lib/title-bar-style'
 export type MainProcessConfig = {
   titleBarStyle: TitleBarStyle
   hideWindowOnQuit: boolean
+  autoHideMenuBar: boolean
 }
 
 const DEFAULT_CONFIG: MainProcessConfig = {
   titleBarStyle: 'native',
   hideWindowOnQuit: false,
+  autoHideMenuBar: false,
 }
 
 let cachedMainProcessConfig: MainProcessConfig | null = null

app/src/lib/stores/app-store.ts

@@ -705,6 +705,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
   private readonly lastSidebarWorktreeRefreshAt = new Map<string, number>()
   private showCompareTab: boolean = showCompareTabDefault
   private hideWindowOnQuit: boolean = __DARWIN__
+  private autoHideMenuBar: boolean = false
 
   private useWindowsOpenSSH: boolean = false
 
@@ -1317,6 +1318,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
       currentOnboardingTutorialStep: this.currentOnboardingTutorialStep,
       repositoryIndicatorsEnabled: this.repositoryIndicatorsEnabled,
       hideWindowOnQuit: this.hideWindowOnQuit,
+      autoHideMenuBar: this.autoHideMenuBar,
       commitSpellcheckEnabled: this.commitSpellcheckEnabled,
       showCommitAuthorInfo: this.showCommitAuthorInfo,
       currentDragElement: this.currentDragElement,
@@ -2757,6 +2759,7 @@ export class AppStore extends TypedBaseStore<IAppState> {
     const mainProcessConfig = await getMainProcessConfig()
     this.titleBarStyle = mainProcessConfig.titleBarStyle
     this.hideWindowOnQuit = mainProcessConfig.hideWindowOnQuit
+    this.autoHideMenuBar = mainProcessConfig.autoHideMenuBar
 
     this.lastThankYou = getObject<ILastThankYou>(lastThankYouKey)
 
@@ -8429,6 +8432,15 @@ export class AppStore extends TypedBaseStore<IAppState> {
     return updateMainProcessConfig({ hideWindowOnQuit })
   }
 
+  public _setAutoHideMenuBar(autoHideMenuBar: boolean) {
+    if (this.autoHideMenuBar === autoHideMenuBar) {
+      return
+    }
+    this.autoHideMenuBar = autoHideMenuBar
+    this.emitUpdate()
+    return updateMainProcessConfig({ autoHideMenuBar })
+  }
+
   public async _resolveCurrentEditor() {
     const match = await findEditorOrDefault(this.selectedExternalEditor)
     const resolvedExternalEditor = match != null ? match.editor : null

app/src/main-process/app-window.ts

@@ -83,6 +83,7 @@ export class AppWindow {
         windowOptions.frame = false
       }
       windowOptions.icon = join(__dirname, 'static', 'logos', '512x512.png')
+      windowOptions.autoHideMenuBar = readMainProcessConfig().autoHideMenuBar
 
       // relax restriction here for users trying to run app at a small
       // resolution and any other side-effects of dropping this restriction are

app/src/ui/app.tsx

@@ -1745,6 +1745,7 @@ export class App extends React.Component<IAppProps, IAppState> {
             showCompareTab={this.state.showCompareTab}
             repositoryIndicatorsEnabled={this.state.repositoryIndicatorsEnabled}
             hideWindowOnQuit={this.state.hideWindowOnQuit}
+            autoHideMenuBar={this.state.autoHideMenuBar}
             onEditGlobalGitConfig={this.editGlobalGitConfig}
             underlineLinks={this.state.underlineLinks}
             showDiffCheckMarks={this.state.showDiffCheckMarks}

app/src/ui/dispatcher/dispatcher.ts

@@ -3011,6 +3011,10 @@ export class Dispatcher {
     this.appStore._setHideWindowOnQuit(hideWindowOnQuit)
   }
 
+  public setAutoHideMenuBar(autoHideMenuBar: boolean) {
+    this.appStore._setAutoHideMenuBar(autoHideMenuBar)
+  }
+
   public setCommitSpellcheckEnabled(commitSpellcheckEnabled: boolean) {
     this.appStore._setCommitSpellcheckEnabled(commitSpellcheckEnabled)
   }

app/src/ui/preferences/advanced.tsx

@@ -11,11 +11,13 @@ interface IAdvancedPreferencesProps {
   readonly useExternalCredentialHelper: boolean
   readonly repositoryIndicatorsEnabled: boolean
   readonly hideWindowOnQuit: boolean
+  readonly autoHideMenuBar: boolean
   readonly onUseWindowsOpenSSHChanged: (checked: boolean) => void
   readonly onOptOutofReportingChanged: (checked: boolean) => void
   readonly onUseExternalCredentialHelperChanged: (checked: boolean) => void
   readonly onRepositoryIndicatorsEnabledChanged: (enabled: boolean) => void
   readonly onHideWindowOnQuitChanged: (enabled: boolean) => void
+  readonly onAutoHideMenuBarChanged: (enabled: boolean) => void
 }
 
 interface IAdvancedPreferencesState {
@@ -82,6 +84,12 @@ export class Advanced extends React.Component<
     this.props.onHideWindowOnQuitChanged(event.currentTarget.checked)
   }
 
+  private onAutoHideMenuBarChanged = (
+    event: React.FormEvent<HTMLInputElement>
+  ) => {
+    this.props.onAutoHideMenuBarChanged(event.currentTarget.checked)
+  }
+
   private reportDesktopUsageLabel() {
     return (
       <span>
@@ -93,7 +101,7 @@ export class Advanced extends React.Component<
 
   public render() {
     return (
-      <DialogContent>
+      <DialogContent className="advanced-tab">
         {!__DARWIN__ && this.renderAppSettings()}
         <div className="advanced-section">
           <h2>Background updates</h2>
@@ -201,6 +209,25 @@ export class Advanced extends React.Component<
             background. Use Ctrl+Q to completely quit the app.
           </p>
         </div>
+        {!__DARWIN__ && (
+          <div style={{ marginTop: 'var(--spacing)' }}>
+            <Checkbox
+              label="Auto-hide menu bar"
+              value={
+                this.props.autoHideMenuBar
+                  ? CheckboxValue.On
+                  : CheckboxValue.Off
+              }
+              onChange={this.onAutoHideMenuBarChanged}
+            />
+            <div className="git-settings-description">
+              <p>
+                Hide the menu bar and show it temporarily when Alt is pressed.
+                Takes effect after restarting the app.
+              </p>
+            </div>
+          </div>
+        )}
       </div>
     )
   }

app/src/ui/preferences/preferences.tsx

@@ -131,6 +131,7 @@ interface IPreferencesProps {
   readonly showBranchNameInRepoList: ShowBranchNameInRepoListSetting
   readonly branchSortOrder: BranchSortOrder
   readonly hideWindowOnQuit: boolean
+  readonly autoHideMenuBar: boolean
   readonly onEditGlobalGitConfig: () => void
   readonly underlineLinks: boolean
   readonly showDiffCheckMarks: boolean
@@ -193,6 +194,7 @@ interface IPreferencesState {
   readonly showBranchNameInRepoList: ShowBranchNameInRepoListSetting
   readonly branchSortOrder: BranchSortOrder
   readonly hideWindowOnQuit: boolean
+  readonly autoHideMenuBar: boolean
 
   readonly initiallySelectedTheme: ApplicationTheme
   readonly initiallySelectedTabSize: number
@@ -283,6 +285,7 @@ export class Preferences extends React.Component<
       showBranchNameInRepoList: this.props.showBranchNameInRepoList,
       branchSortOrder: this.props.branchSortOrder,
       hideWindowOnQuit: this.props.hideWindowOnQuit,
+      autoHideMenuBar: this.props.autoHideMenuBar,
       initiallySelectedTheme: this.props.selectedTheme,
       initiallySelectedTabSize: this.props.selectedTabSize,
       initiallySelectedDiffFontSize: this.props.selectedDiffFontSize,
@@ -781,6 +784,7 @@ export class Preferences extends React.Component<
             useExternalCredentialHelper={this.state.useExternalCredentialHelper}
             repositoryIndicatorsEnabled={this.state.repositoryIndicatorsEnabled}
             hideWindowOnQuit={this.state.hideWindowOnQuit}
+            autoHideMenuBar={this.state.autoHideMenuBar}
             onUseWindowsOpenSSHChanged={this.onUseWindowsOpenSSHChanged}
             onOptOutofReportingChanged={this.onOptOutofReportingChanged}
             onUseExternalCredentialHelperChanged={
@@ -790,6 +794,7 @@ export class Preferences extends React.Component<
               this.onRepositoryIndicatorsEnabledChanged
             }
             onHideWindowOnQuitChanged={this.onHideWindowOnQuitChanged}
+            onAutoHideMenuBarChanged={this.onAutoHideMenuBarChanged}
           />
         )
         break
@@ -829,6 +834,10 @@ export class Preferences extends React.Component<
     this.setState({ hideWindowOnQuit })
   }
 
+  private onAutoHideMenuBarChanged = (autoHideMenuBar: boolean) => {
+    this.setState({ autoHideMenuBar })
+  }
+
   private onLockFileDeleted = () => {
     this.setState({ existingLockFilePath: undefined })
   }
@@ -1176,6 +1185,10 @@ export class Preferences extends React.Component<
         dispatcher.setHideWindowOnQuit(this.state.hideWindowOnQuit)
       }
 
+      if (this.state.autoHideMenuBar !== this.props.autoHideMenuBar) {
+        dispatcher.setAutoHideMenuBar(this.state.autoHideMenuBar)
+      }
+
       if (this.state.hooksPreferencesDirty) {
         if (this.state.enableGitHookEnv !== undefined) {
           setHooksEnvEnabled(this.state.enableGitHookEnv)

app/styles/ui/_dialog.scss

@@ -523,7 +523,8 @@ dialog {
       min-height: $default-tab-height;
 
       &.accounts-tab,
-      &.appearance-tab {
+      &.appearance-tab,
+      &.advanced-tab {
         max-height: $default-tab-height;
         overflow: auto;
       }