Settings menu & UX improvements (#5029)

* Implement settings section sorting

* Make IS_ELECTRON property used directly

* Implement settings menu with icons

* Implement short labels and fallback to longer label when translation doesn't exist

* Implement dynamic scroll-based underlining of active section

* Ensure General Settings is always first, ignoring sorting

Solving the problem of preventing 'jumping around' when changing locales with alphabetical sorting is hard. This problem is easily solved by stickying general settings to the top of the list unconditionally. This is in line with ChunkyProgrammer's initial assessment of how to improve the settings order in #1739, albeit not also moving Theme Settings to the top for the time being. The rationale from a functional level is that General Settings is a hub. Even when you change languages, change sort order, or what have you, General Settings is right at the top. I don't imagine we need to update the label of the setting, as I think this relationship is quite intuitive.

* Styling & documentation improvements; remove problematized Hot Pink link underline removal experiment

* Implement bare minimum mobile styling

* Increase link padding

* Fix underline to be equal on both sides

* Update to have first section active by default

* Make constant for 'active' class name

* Replace proxy icon with more fitting one

* Move shortTitle logic

* Update scrolling logic to not use anchor links

* Implement mobile view for Settings Menu

* Replace rounded corners and move section titles to the interior

* Update font sizes and breakpoints to work for all supported devices & languages

* Update as per review comments

* Make class-specific constants declared in file

* Update settings menu link sizing to be dynamic to better accommodate mobile/tablet devices

* Focus active menu on mobile close

* Replace shortTitle with title, & replace EN-US labels with shorter forms

* Update menu font size for mobile devices

* Focus section heading on navigating to it in desktop view

---------

Co-authored-by: Jason <[email protected]>

src/renderer/components/ft-settings-menu/ft-settings-menu.css

@@ -0,0 +1,125 @@
+.settingsMenu {
+  /* top nav + margin */
+  inset-block-start: 96px;
+  position: sticky;
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: 0;
+  block-size: calc(85vh - 96px);
+  max-block-size: 600px;
+}
+
+.header {
+  inline-size: fit-content;
+  margin-block: 0 10px;
+}
+
+.title {
+  text-decoration: none;
+  color: var(--tertiary-text-color);
+  inline-size: 220px;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+}
+
+/* prevent hover styling from showing on title click for mobile */
+@media (hover: hover) {
+  .title:hover {
+    color: var(--primary-text-color);
+  }
+}
+
+.titleContent {
+  inline-size: fit-content;
+  max-inline-size: 100%;
+}
+
+
+.iconAndTitleText {
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  /* needed to have underline poke out */
+  margin-inline-start: 3px;
+}
+
+.titleUnderline {
+  /* have underline poke out */
+  inline-size: calc(100% + 6px);
+
+  /* prevent "active" border from visibly pushing the content up */
+  border-block-end: 4px solid transparent;
+}
+
+@media only screen and (width >= 1015px) {
+  .settingsMenu {
+    margin-block: 0;
+    font-size: 16px;
+  }
+
+  .header {
+    margin-block-start: 10px;
+    font-size: 26px;
+  }
+
+  .titleIcon {
+    inline-size: 16px;
+    block-size: 16px;
+  }
+
+  .title.active {
+    color: var(--primary-text-color);
+    font-weight: 600;
+  }
+
+  .title.active .titleUnderline {
+    border-block-end: 4px solid var(--primary-color);
+  }
+}
+
+/* overall mobile breakpoint; large text */
+@media only screen and (width <= 1015px) {
+  .settingsMenu {
+    inline-size: fit-content;
+    margin-inline: auto;
+    position: relative;
+    inset-block-start: 0;
+    font-size: 30px;
+    max-block-size: 1100px;
+  }
+
+  .titleIcon {
+    inline-size: 30px;
+    block-size: 30px;
+    margin-inline-end: 10px;
+  }
+
+  .title {
+    inline-size: fit-content;
+    max-inline-size: 90vw;
+  }
+
+  .header {
+    font-size: 32px;
+  }
+}
+
+/* small height or width mobile breakpoint; intermediary text */
+@media only screen and (width <= 1015px) and (height <= 830px),
+  only screen and (width <= 500px) {
+  .settingsMenu {
+    font-size: 25px;
+  }
+
+  .titleIcon {
+    inline-size: 25px;
+    block-size: 25px;
+    margin-inline-end: 5px;
+  }
+
+  .header {
+    font-size: 25px;
+  }
+}

src/renderer/components/ft-settings-menu/ft-settings-menu.js

@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'FtSettingsMenu',
+  props: {
+    settingsSections: {
+      type: Array,
+      required: true
+    },
+  },
+  emits: ['navigate-to-section'],
+  methods: {
+    goToSettingsSection: function (sectionType) {
+      this.$emit('navigate-to-section', sectionType)
+    }
+  }
+})

src/renderer/components/ft-settings-menu/ft-settings-menu.vue

@@ -0,0 +1,32 @@
+<template>
+  <menu
+    class="settingsMenu"
+  >
+    <h2 class="header">
+      {{ $t('Settings.Settings') }}
+    </h2>
+    <a
+      v-for="(settingsSection) in settingsSections"
+      :id="settingsSection.type"
+      :key="settingsSection.type + '-link'"
+      class="title"
+      href="javascript:;"
+      @click.stop="goToSettingsSection(settingsSection.type)"
+      @keydown.enter.stop="goToSettingsSection(settingsSection.type)"
+    >
+      <div class="titleContent">
+        <div class="iconAndTitleText">
+          <font-awesome-icon
+            :icon="['fas', settingsSection.icon]"
+            class="titleIcon"
+          />
+          {{ settingsSection.title }}
+        </div>
+        <div class="titleUnderline" />
+      </div>
+    </a>
+  </menu>
+</template>
+
+<script src="./ft-settings-menu.js" />
+<style scoped src="./ft-settings-menu.css" />

src/renderer/components/ft-settings-section/ft-settings-section.js

@@ -7,10 +7,5 @@ export default defineComponent({
       type: String,
       required: true
     },
-  },
-  computed: {
-    allSettingsSectionsExpandedByDefault: function () {
-      return this.$store.getters.getAllSettingsSectionsExpandedByDefault
-    }
   }
 })

src/renderer/components/ft-settings-section/ft-settings-section.scss

@@ -1,16 +1,20 @@
 .settingsSection {
-  background-color: var(--card-bg-color);
   margin-block: 0;
-  margin-inline: auto;
-  inline-size: 85%;
 
   @media only screen and (width <= 800px) {
     inline-size: 100%;
   }
+}
 
-  &[open] {
-    padding-block-end: 15px;
-  }
+.sectionHeader {
+  cursor: pointer;
+  display: block;
+  padding: 1px;
+}
+
+.sectionBody {
+  background-color: var(--card-bg-color);
+  padding-block: 10px;
 
   > div {
     box-sizing: border-box;
@@ -26,22 +30,9 @@
   }
 }
 
-.sectionLine {
-  border: 0;
-  border-block-start: 2px solid var(--primary-color);
-  margin-block-start: -1px;
-  inline-size: 100%;
-}
-
-.sectionHeader {
-  cursor: pointer;
-  display: block;
-  padding: 1px;
-}
-
 .sectionTitle {
   user-select: none;
-  margin-inline-start: 2%;
+  margin-inline-start: 20px;
   margin-block: 0.5em;
 }
 

src/renderer/components/ft-settings-section/ft-settings-section.vue

@@ -1,16 +1,14 @@
 <template>
-  <details
-    :open="allSettingsSectionsExpandedByDefault"
+  <div
     class="settingsSection"
   >
-    <summary class="sectionHeader">
+    <div class="sectionBody">
       <h3 class="sectionTitle">
         {{ title }}
       </h3>
-    </summary>
-    <hr class="sectionLine">
-    <slot />
-  </details>
+      <slot />
+    </div>
+  </div>
 </template>
 
 <script src="./ft-settings-section.js" />

src/renderer/components/proxy-settings/proxy-settings.vue

@@ -19,7 +19,7 @@
           :select-names="protocolNames"
           :select-values="protocolValues"
           class="protocol-dropdown"
-          :icon="['fas', 'microchip']"
+          :icon="['fas', 'network-wired']"
           @change="handleUpdateProxyProtocol"
         />
       </ft-flex-box>