Settings menu & UX improvements

src/constants.js

@@ -73,16 +73,23 @@ const SyncEvents = {
   }
 }
 
+// Settings
+const ACTIVE_CLASS_NAME = 'active'
+
 // Utils
 const MAIN_PROFILE_ID = 'allChannels'
 
 // YouTube search character limit is 100 characters
 const SEARCH_CHAR_LIMIT = 100
 
+const SETTINGS_MOBILE_WIDTH_THRESHOLD = 1015
+
 export {
   IpcChannels,
   DBActions,
   SyncEvents,
+  ACTIVE_CLASS_NAME,
   MAIN_PROFILE_ID,
-  SEARCH_CHAR_LIMIT
+  SEARCH_CHAR_LIMIT,
+  SETTINGS_MOBILE_WIDTH_THRESHOLD
 }

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

@@ -0,0 +1,150 @@
+.settingsMenu {
+  /* top nav + margin */
+  inset-block-start: 96px;
+  position: sticky;
+  display: flex;
+  flex-direction: column;
+  font-size: 22px;
+  padding-inline-start: 0;
+  block-size: fit-content;
+}
+
+.header {
+  font-size: 26px;
+  inline-size: fit-content;
+  margin-block: 0 10px;
+}
+
+.title {
+  text-decoration: none;
+  color: var(--tertiary-text-color);
+  inline-size: 220px;
+  padding-block: 3px;
+}
+
+/* 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;
+}
+
+.titleIcon {
+  inline-size: 22px;
+  block-size: 22px;
+}
+
+@media only screen and (width >= 1015px) {
+  .settingsMenu {
+    margin-block: 0;
+  }
+
+  .header {
+    margin-block-start: 10px;
+  }
+
+  .title.active {
+    color: var(--primary-text-color);
+    font-weight: 600;
+  }
+
+  .title.active .titleUnderline {
+    border-block-end: 4px solid var(--primary-color);
+  }
+}
+
+@media only screen and (width <= 1015px) {
+  .settingsMenu {
+    inline-size: fit-content;
+    margin-inline: auto;
+    position: relative;
+    inset-block-start: 0;
+    font-size: 30px;
+  }
+
+  .titleIcon {
+    inline-size: 30px;
+    block-size: 30px;
+    margin-inline-end: 10px;
+  }
+
+  .title {
+    inline-size: auto;
+  }
+
+  .header {
+    font-size: 32px;
+  }
+
+  /*
+  TODO: integrate settings menu into mobile view
+
+  .header {
+    display: none;
+  }
+  .settingsMenu {
+    position: fixed;
+    flex-direction: row;
+    gap: 5px;
+    overflow-x: scroll;
+  }
+
+  .title {
+    inline-size: 100%;
+  } */
+}
+
+@media only screen and (width <= 1015px) and (height <= 830px) {
+  .settingsMenu {
+    font-size: 25px;
+  }
+
+  .titleIcon {
+    inline-size: 25px;
+    block-size: 25px;
+  }
+
+  .header {
+    font-size: 28px;
+  }
+}
+
+@media only screen and (width <= 1015px) and (height <= 735px),
+screen and (width >= 1015px) and (height <= 600px) {
+  .settingsMenu {
+    font-size: 18px;
+  }
+
+  .titleIcon {
+    inline-size: 18px;
+    block-size: 18px;
+    margin-inline-end: 5px;
+  }
+
+  .header {
+    font-size: 22px;
+  }
+}

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.shortTitle }}
+        </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,21 @@
 .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);
+  border-radius: 20px;
+  padding-block: 10px;
 
   > div {
     box-sizing: border-box;
@@ -26,22 +31,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">
-      <h3 class="sectionTitle">
-        {{ title }}
-      </h3>
-    </summary>
-    <hr class="sectionLine">
-    <slot />
-  </details>
+    <h3 class="sectionTitle">
+      {{ title }}
+    </h3>
+    <div class="sectionBody">
+      <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>