From f4d9c4e3285bc9782187e46ee0f39748925c3689 Mon Sep 17 00:00:00 2001
From: Romain <46404814+yourcontact@users.noreply.github.com>
Date: Wed, 22 Apr 2020 17:48:49 +0200
Subject: Organize settings with horizontal tabs (#569)

* Align settings section titles on same row

* Add className to Settings Titles to copy tab layout from 'Available Services'

* Add all Settings Titles to the horizontal tab layout at the top of the form

* Add state for active settings taband onClick

* Add condition for each Settings div to show when activeSetttingsTab plus fix typo 'appearance'

* Add condition for each Settings div to show when activeSetttingsTab plus fix typo 'appearance'

* Add margins in between setting tabs

* Remove 50px of top margin to minimize blank space above tabs

* Remove temporary &nbsp;&nbsp; in between tabs now that CSS is in place

* Apply code changes

* Delete unused code const { activeSettingsTab } = this.state;

Co-authored-by: Amine Mouafik <amine@mouafik.fr>
---
 .../settings/settings/EditSettingsForm.js          | 582 ++++++++++++---------
 1 file changed, 321 insertions(+), 261 deletions(-)

(limited to 'src/components/settings')

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 6d86c09ec..787623298 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -173,10 +173,17 @@ export default @observer class EditSettingsForm extends Component {
     intl: intlShape,
   };
 
-  state={
+  state = {
+    activeSetttingsTab: 'general',
     clearCacheButtonClicked: false,
   }
 
+  setActiveSettingsTab(tab) {
+    this.setState({
+      activeSetttingsTab: tab,
+    });
+  }
+
   onClearCacheClicked=() => {
     this.setState({ clearCacheButtonClicked: true });
   }
@@ -241,190 +248,203 @@ export default @observer class EditSettingsForm extends Component {
             onChange={e => this.submit(e)}
             id="form"
           >
+            {/* Titles */}
+            <div className="recipes__navigation">
+              <h2
+                id="general"
+                className={this.state.activeSetttingsTab === 'general' ? 'badge badge--primary' : 'badge'}
+                onClick={() => { this.setActiveSettingsTab('general'); }}
+              >
+                {intl.formatMessage(messages.headlineGeneral)}
+              </h2>
+              <h2
+                id="appearance"
+                className={this.state.activeSetttingsTab === 'appearance' ? 'badge badge--primary' : 'badge'}
+                onClick={() => { this.setActiveSettingsTab('appearance'); }}
+              >
+                {intl.formatMessage(messages.headlineAppearance)}
+              </h2>
+              <h2
+                id="language"
+                className={this.state.activeSetttingsTab === 'language' ? 'badge badge--primary' : 'badge'}
+                onClick={() => { this.setActiveSettingsTab('language'); }}
+              >
+                {intl.formatMessage(messages.headlineLanguage)}
+              </h2>
+              <h2
+                id="advanced"
+                className={this.state.activeSetttingsTab === 'advanced' ? 'badge badge--primary' : 'badge'}
+                onClick={() => { this.setActiveSettingsTab('advanced'); }}
+              >
+                {intl.formatMessage(messages.headlineAdvanced)}
+              </h2>
+              <h2
+                id="updates"
+                className={this.state.activeSetttingsTab === 'updates' ? 'badge badge--primary' : 'badge'}
+                onClick={() => { this.setActiveSettingsTab('updates'); }}
+              >
+                {intl.formatMessage(messages.headlineUpdates)}
+              </h2>
+            </div>
+
             {/* General */}
-            <h2 id="general">{intl.formatMessage(messages.headlineGeneral)}</h2>
-            <Toggle field={form.$('autoLaunchOnStart')} />
-            <Toggle field={form.$('runInBackground')} />
-            <Toggle field={form.$('enableSystemTray')} />
-            <Toggle field={form.$('reloadAfterResume')} />
-            <Toggle field={form.$('startMinimized')} />
-            {process.platform === 'win32' && (
-              <Toggle field={form.$('minimizeToSystemTray')} />
-            )}
-            <Toggle field={form.$('privateNotifications')} />
-            <Select field={form.$('navigationBarBehaviour')} />
+            { this.state.activeSetttingsTab === 'general' && (
+              <div>
+                <Toggle field={form.$('autoLaunchOnStart')} />
+                <Toggle field={form.$('runInBackground')} />
+                <Toggle field={form.$('enableSystemTray')} />
+                <Toggle field={form.$('reloadAfterResume')} />
+                <Toggle field={form.$('startMinimized')} />
+                {process.platform === 'win32' && (
+                  <Toggle field={form.$('minimizeToSystemTray')} />
+                )}
+                <Toggle field={form.$('privateNotifications')} />
+                <Select field={form.$('navigationBarBehaviour')} />
 
-            <Hr />
+                <Hr />
 
-            <Toggle field={form.$('sentry')} />
-            <p>{intl.formatMessage(messages.sentryInfo)}</p>
+                <Toggle field={form.$('sentry')} />
+                <p>{intl.formatMessage(messages.sentryInfo)}</p>
 
-            <Hr />
+                <Hr />
 
-            <Toggle field={form.$('hibernate')} />
-            {hibernationEnabled && (
-              <>
-                <Select field={form.$('hibernationStrategy')} />
-                <Toggle field={form.$('hibernateOnStartup')} />
-              </>
-            )}
-            <p
-              className="settings__message"
-              style={{
-                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
-              }}
-            >
-              <span>
-                { intl.formatMessage(messages.hibernateInfo) }
-              </span>
-            </p>
-
-            <Hr />
-
-            {isWorkspaceEnabled && (
-              <Toggle field={form.$('keepAllWorkspacesLoaded')} />
-            )}
+                <Toggle field={form.$('hibernate')} />
+                {hibernationEnabled && (
+                  <>
+                    <Select field={form.$('hibernationStrategy')} />
+                    <Toggle field={form.$('hibernateOnStartup')} />
+                  </>
+                )}
+                <p
+                  className="settings__message"
+                  style={{
+                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                  }}
+                >
+                  <span>
+                    { intl.formatMessage(messages.hibernateInfo) }
+                  </span>
+                </p>
 
-            <Hr />
+                <Hr />
 
-            {isTodosEnabled && (
-              <>
-                <Toggle field={form.$('enableTodos')} />
-                {isTodosActivated && (
-                  <div>
-                    <Select field={form.$('predefinedTodoServer')} />
-                    {form.$('predefinedTodoServer').value === 'isUsingCustomTodoService' && (
+                {isWorkspaceEnabled && (
+                  <Toggle field={form.$('keepAllWorkspacesLoaded')} />
+                )}
+
+                <Hr />
+
+                {isTodosEnabled && (
+                  <>
+                    <Toggle field={form.$('enableTodos')} />
+                    {isTodosActivated && (
                       <div>
-                        <Input
-                          placeholder="Todo Server"
-                          onChange={e => this.submit(e)}
-                          field={form.$('customTodoServer')}
-                        />
-                        <p
-                          className="settings__message"
-                          style={{
-                            borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
-                          }}
-                        >
-                          { intl.formatMessage(messages.todoServerInfo) }
-                        </p>
+                        <Select field={form.$('predefinedTodoServer')} />
+                        {form.$('predefinedTodoServer').value === 'isUsingCustomTodoService' && (
+                          <div>
+                            <Input
+                              placeholder="Todo Server"
+                              onChange={e => this.submit(e)}
+                              field={form.$('customTodoServer')}
+                            />
+                            <p
+                              className="settings__message"
+                              style={{
+                                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                              }}
+                            >
+                              { intl.formatMessage(messages.todoServerInfo) }
+                            </p>
+                          </div>
+                        )}
                       </div>
                     )}
-                  </div>
+                  </>
                 )}
-              </>
-            )}
-
 
-            <Hr />
+                <Hr />
 
-            <Toggle field={form.$('lockingFeatureEnabled')} />
-            {lockingFeatureEnabled && (
-              <>
-                {systemPreferences.canPromptTouchID() && (
-                  <Toggle field={form.$('useTouchIdToUnlock')} />
-                )}
-
-                <Input
-                  placeholder={intl.formatMessage(messages.lockedPassword)}
-                  onChange={e => this.submit(e)}
-                  field={form.$('lockedPassword')}
-                  type="password"
-                  scorePassword
-                  showPasswordToggle
-                />
-                <p>
-                  { intl.formatMessage(messages.lockedPasswordInfo) }
-                </p>
+                <Toggle field={form.$('lockingFeatureEnabled')} />
+                {lockingFeatureEnabled && (
+                  <>
+                    {systemPreferences.canPromptTouchID() && (
+                      <Toggle field={form.$('useTouchIdToUnlock')} />
+                    )}
 
-                <Input
-                  placeholder="Lock after inactivity"
-                  onChange={e => this.submit(e)}
-                  field={form.$('inactivityLock')}
-                  autoFocus
-                />
-                <p>
-                  { intl.formatMessage(messages.inactivityLockInfo) }
-                </p>
-              </>
-            )}
-            <p
-              className="settings__message"
-              style={{
-                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
-              }}
-            >
-              <span>
-                { intl.formatMessage(messages.lockInfo) }
-              </span>
-            </p>
-
-            <Hr />
-
-            <Toggle field={form.$('scheduledDNDEnabled')} />
-            {scheduledDNDEnabled && (
-              <>
-                <div style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                }}
-                >
-                  <div style={{
-                    padding: '0 1rem',
-                    width: '100%',
-                  }}
-                  >
                     <Input
-                      placeholder="17:00"
+                      placeholder={intl.formatMessage(messages.lockedPassword)}
                       onChange={e => this.submit(e)}
-                      field={form.$('scheduledDNDStart')}
-                      type="time"
+                      field={form.$('lockedPassword')}
+                      type="password"
+                      scorePassword
+                      showPasswordToggle
                     />
-                  </div>
-                  <div style={{
-                    padding: '0 1rem',
-                    width: '100%',
-                  }}
-                  >
+                    <p>
+                      { intl.formatMessage(messages.lockedPasswordInfo) }
+                    </p>
+
                     <Input
-                      placeholder="09:00"
+                      placeholder="Lock after inactivity"
                       onChange={e => this.submit(e)}
-                      field={form.$('scheduledDNDEnd')}
-                      type="time"
+                      field={form.$('inactivityLock')}
+                      autoFocus
                     />
-                  </div>
-                </div>
-                <p>
-                  { intl.formatMessage(messages.scheduledDNDTimeInfo) }
+                    <p>
+                      { intl.formatMessage(messages.inactivityLockInfo) }
+                    </p>
+                  </>
+                )}
+                <p
+                  className="settings__message"
+                  style={{
+                    borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                  }}
+                >
+                  <span>
+                    { intl.formatMessage(messages.lockInfo) }
+                  </span>
                 </p>
-              </>
-            )}
-            <p
-              className="settings__message"
-              style={{
-                borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
-              }}
-            >
-              <span>
-                { intl.formatMessage(messages.scheduledDNDInfo) }
-              </span>
-            </p>
-
-
-            {/* Appearance */}
-            <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
-            <Toggle field={form.$('showDisabledServices')} />
-            <Toggle field={form.$('showMessageBadgeWhenMuted')} />
 
-            {isMac && <Toggle field={form.$('showDragArea')} />}
-
-            <Hr />
-
-            {(isMac || isWindows) && <Toggle field={form.$('adaptableDarkMode')} />}
-            {!((isMac || isWindows) && isAdaptableDarkModeEnabled) && <Toggle field={form.$('darkMode')} />}
-            {(isDarkmodeEnabled || isAdaptableDarkModeEnabled) && (
-              <>
-                <Toggle field={form.$('universalDarkMode')} />
+                <Hr />
+
+                <Toggle field={form.$('scheduledDNDEnabled')} />
+                {scheduledDNDEnabled && (
+                  <>
+                    <div style={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                    }}
+                    >
+                      <div style={{
+                        padding: '0 1rem',
+                        width: '100%',
+                      }}
+                      >
+                        <Input
+                          placeholder="17:00"
+                          onChange={e => this.submit(e)}
+                          field={form.$('scheduledDNDStart')}
+                          type="time"
+                        />
+                      </div>
+                      <div style={{
+                        padding: '0 1rem',
+                        width: '100%',
+                      }}
+                      >
+                        <Input
+                          placeholder="09:00"
+                          onChange={e => this.submit(e)}
+                          field={form.$('scheduledDNDEnd')}
+                          type="time"
+                        />
+                      </div>
+                    </div>
+                    <p>
+                      { intl.formatMessage(messages.scheduledDNDTimeInfo) }
+                    </p>
+                  </>
+                )}
                 <p
                   className="settings__message"
                   style={{
@@ -432,100 +452,138 @@ export default @observer class EditSettingsForm extends Component {
                   }}
                 >
                   <span>
-                    { intl.formatMessage(messages.universalDarkModeInfo) }
+                    { intl.formatMessage(messages.scheduledDNDInfo) }
                   </span>
                 </p>
-              </>
+              </div>
             )}
 
-            <Hr />
+            {/* Appearance */}
+            { this.state.activeSetttingsTab === 'appearance' && (
+              <div>
+                <Toggle field={form.$('showDisabledServices')} />
+                <Toggle field={form.$('showMessageBadgeWhenMuted')} />
+
+                {isMac && <Toggle field={form.$('showDragArea')} />}
+
+                <Hr />
+
+                {(isMac || isWindows) && <Toggle field={form.$('adaptableDarkMode')} />}
+                {!((isMac || isWindows) && isAdaptableDarkModeEnabled) && <Toggle field={form.$('darkMode')} />}
+                {(isDarkmodeEnabled || isAdaptableDarkModeEnabled) && (
+                <>
+                  <Toggle field={form.$('universalDarkMode')} />
+                  <p
+                    className="settings__message"
+                    style={{
+                      borderTop: 0, marginTop: 0, paddingTop: 0, marginBottom: '2rem',
+                    }}
+                  >
+                    <span>
+                      { intl.formatMessage(messages.universalDarkModeInfo) }
+                    </span>
+                  </p>
+                </>
+                )}
 
-            <Select field={form.$('serviceRibbonWidth')} />
+                <Hr />
 
-            <Select field={form.$('iconSize')} />
+                <Select field={form.$('serviceRibbonWidth')} />
 
-            <Hr />
+                <Select field={form.$('iconSize')} />
 
-            <Input
-              placeholder="Accent Color"
-              onChange={e => this.submit(e)}
-              field={form.$('accentColor')}
-            />
-            <p>{intl.formatMessage(messages.accentColorInfo)}</p>
+                <Hr />
 
-            {/* Language */}
-            <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
-            <Select field={form.$('locale')} showLabel={false} />
-
-            <Hr />
-
-            <PremiumFeatureContainer
-              condition={!isSpellcheckerIncludedInCurrentPlan}
-              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
-            >
-              <Fragment>
-                <Toggle
-                  field={form.$('enableSpellchecking')}
+                <Input
+                  placeholder="Accent Color"
+                  onChange={e => this.submit(e)}
+                  field={form.$('accentColor')}
                 />
-                {form.$('enableSpellchecking').value && (
-                  <Select field={form.$('spellcheckerLanguage')} />
-                )}
-              </Fragment>
-            </PremiumFeatureContainer>
-            <a
-              href={FRANZ_TRANSLATION}
-              target="_blank"
-              className="link"
-            >
-              {intl.formatMessage(messages.translationHelp)}
-              {' '}
-              <i className="mdi mdi-open-in-new" />
-            </a>
+                <p>{intl.formatMessage(messages.accentColorInfo)}</p>
+              </div>
+            )}
+
+            {/* Language */}
+            { this.state.activeSetttingsTab === 'language' && (
+              <div>
+                <Select field={form.$('locale')} showLabel={false} />
+
+                <Hr />
+
+                <PremiumFeatureContainer
+                  condition={!isSpellcheckerIncludedInCurrentPlan}
+                  gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
+                >
+                  <Fragment>
+                    <Toggle
+                      field={form.$('enableSpellchecking')}
+                    />
+                    {form.$('enableSpellchecking').value && (
+                    <Select field={form.$('spellcheckerLanguage')} />
+                    )}
+                  </Fragment>
+                </PremiumFeatureContainer>
+                <a
+                  href={FRANZ_TRANSLATION}
+                  target="_blank"
+                  className="link"
+                >
+                  {intl.formatMessage(messages.translationHelp)}
+                  {' '}
+                  <i className="mdi mdi-open-in-new" />
+                </a>
+              </div>
+            )}
 
             {/* Advanced */}
-            <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
-            <Toggle field={form.$('enableGPUAcceleration')} />
-            <p className="settings__help">{intl.formatMessage(messages.enableGPUAccelerationInfo)}</p>
-            <div className="settings__settings-group">
-              <h3>
-                {intl.formatMessage(messages.subheadlineCache)}
-              </h3>
-              <p>
-                {intl.formatMessage(messages.cacheInfo, {
-                  size: cacheSize,
-                })}
-              </p>
-              {notCleared && (
-              <p>
-                {intl.formatMessage(messages.cacheNotCleared)
-                }
-              </p>
-              )}
-              <p>
-                <Button
-                  buttonType="secondary"
-                  label={intl.formatMessage(messages.buttonClearAllCache)}
-                  onClick={() => { onClearAllCache(); this.onClearCacheClicked(); }}
-                  disabled={isClearingAllCache}
-                  loaded={!isClearingAllCache}
-                />
-              </p>
-              <div style={{
-                marginTop: 20,
-              }}
-              >
-                <Button
-                  buttonType="secondary"
-                  label="Open Process Manager"
-                  onClick={openProcessManager}
-                />
+            { this.state.activeSetttingsTab === 'advanced' && (
+              <div>
+                <Toggle field={form.$('enableGPUAcceleration')} />
+                <p className="settings__help">{intl.formatMessage(messages.enableGPUAccelerationInfo)}</p>
+                <div className="settings__settings-group">
+                  <h3>
+                    {intl.formatMessage(messages.subheadlineCache)}
+                  </h3>
+                  <p>
+                    {intl.formatMessage(messages.cacheInfo, {
+                      size: cacheSize,
+                    })}
+                  </p>
+                  {
+                    notCleared && (
+                      <p>
+                        {intl.formatMessage(messages.cacheNotCleared)}
+                      </p>
+                    )
+                  }
+                  <p>
+                    <Button
+                      buttonType="secondary"
+                      label={intl.formatMessage(messages.buttonClearAllCache)}
+                      onClick={() => { onClearAllCache(); this.onClearCacheClicked(); }}
+                      disabled={isClearingAllCache}
+                      loaded={!isClearingAllCache}
+                    />
+                  </p>
+                  <div style={{
+                    marginTop: 20,
+                  }}
+                  >
+                    <Button
+                      buttonType="secondary"
+                      label="Open Process Manager"
+                      onClick={openProcessManager}
+                    />
+                  </div>
+                </div>
               </div>
-            </div>
+            )}
 
             {/* Updates */}
-            <h2 id="updates">{intl.formatMessage(messages.headlineUpdates)}</h2>
-            <Toggle field={form.$('automaticUpdates')} />
-            {automaticUpdates && (
+            { this.state.activeSetttingsTab === 'updates' && (
+            <div>
+              <Toggle field={form.$('automaticUpdates')} />
+              {automaticUpdates && (
               <div>
                 <Toggle field={form.$('beta')} />
                 {updateIsReadyToInstall ? (
@@ -544,37 +602,39 @@ export default @observer class EditSettingsForm extends Component {
                 )}
                 <br />
               </div>
-            )}
-            {intl.formatMessage(messages.currentVersion)}
-            {' '}
-            {remote.app.getVersion()}
-            {noUpdateAvailable && (
+              )}
+              {intl.formatMessage(messages.currentVersion)}
+              {' '}
+              {remote.app.getVersion()}
+              {noUpdateAvailable && (
               <>
                 <br />
                 <br />
                 {intl.formatMessage(messages.updateStatusUpToDate)}
               </>
-            )
-            }
-            <p className="settings__message">
-              <span className="mdi mdi-github-face" />
-              <span>
+              )
+              }
+              <p className="settings__message">
+                <span className="mdi mdi-github-face" />
+                <span>
 
 
                 Ferdi is based on
-                {' '}
-                <a href="https://github.com/meetfranz/franz" target="_blank">Franz</a>
+                  {' '}
+                  <a href="https://github.com/meetfranz/franz" target="_blank">Franz</a>
 
 
                 , a project published
                 under the
-                {' '}
-                <a href="https://github.com/meetfranz/franz/blob/master/LICENSE" target="_blank">Apache-2.0 License</a>
-              </span>
-              <br />
-              <span className="mdi mdi-information" />
-              {intl.formatMessage(messages.languageDisclaimer)}
-            </p>
+                  {' '}
+                  <a href="https://github.com/meetfranz/franz/blob/master/LICENSE" target="_blank">Apache-2.0 License</a>
+                </span>
+                <br />
+                <span className="mdi mdi-information" />
+                {intl.formatMessage(messages.languageDisclaimer)}
+              </p>
+            </div>
+            )}
           </form>
         </div>
       </div>
-- 
cgit v1.2.3-54-g00ecf