Implement side nav subscription list options

kommunarr · Oct 25, 2023 · 24cf09b · 24cf09b
1 parent c574dd8
commit 24cf09b
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 48 deletions.
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -25,23 +25,25 @@
   transition: background 0.2s ease-in;
 }
 
-.bubblePadding.small {
-  min-inline-size: 40%;
-  min-block-size: 55px;
-  gap: 0px;
+.bubblePadding.sideNavGrid {
   padding-block: 5px;
-  padding-inline: 5px;
-  box-sizing: border-box;
+  padding-inline: 0;
+  gap: 10px;
+  block-size: unset;
 }
 
-.bubblePadding.small > .bubble {
+.bubblePadding.sideNavGrid > .bubble {
   inline-size: 35px;
   block-size: 35px;
 }
 
+.bubblePadding.sideNavGrid > .channelName {
+  max-inline-size: 90%;
+  font-size: 10.5px;
+  white-space: nowrap;
+}
+
 .bubble {
-  inline-size: 50px;
-  block-size: 50px;
   border-radius: 100%;
   -webkit-border-radius: 100%;
 }

diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.js
@@ -15,14 +15,22 @@ export default defineComponent({
       type: String,
       required: true
     },
+    bubbleSize: {
+      type: Number,
+      default: 50
+    },
     showSelected: {
       type: Boolean,
       default: false
     },
-    appearance: {
-      type: String,
-      default: 'default'
-    }
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    sideNavGrid: {
+      type: Boolean,
+      default: false
+    },
   },
   data: function () {
     return {

diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue
@@ -3,17 +3,23 @@
     v-if="!showSelected"
     class="bubblePadding"
     :class="{
-      [appearance]: true
+      sideNavGrid
     }"
     :aria-labelledby="sanitizedId"
+    :title="showTitle ? null : channelName"
     :to="`/channel/${channelId}`"
   >
     <img
       class="bubble"
+      :style="{
+        blockSize: bubbleSize + 'px',
+        inlineSize: bubbleSize + 'px'
+      }"
       :src="channelThumbnail"
       alt=""
     >
     <div
+      v-if="showTitle"
       :id="sanitizedId"
       class="channelName"
     >
@@ -26,11 +32,16 @@
     role="button"
     tabindex="0"
     :aria-labelledby="sanitizedId"
+    :title="showTitle ? null : channelName"
     @click="handleClick"
     @keydown.space.enter.prevent="handleClick($event)"
   >
     <img
       class="bubble"
+      :style="{
+        blockSize: bubbleSize + 'px',
+        inlineSize: bubbleSize + 'px'
+      }"
       :src="channelThumbnail"
       alt=""
     >
@@ -45,6 +56,7 @@
     </div>
     <div
       :id="sanitizedId"
+      :hidden="!showTitle"
       class="channelName"
     >
       {{ channelName }}

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -81,6 +81,11 @@
   }
 }
 
+.iconFtButton {
+  display: flex;
+  gap: 10px;
+}
+
 .iconDropdown {
   background-color: var(--side-nav-color);
   box-shadow: 0 1px 2px rgb(0 0 0 / 50%);

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -33,8 +33,13 @@
       <font-awesome-icon
         :icon="!hideIcon ? icon : null"
         :class="{ [theme]: true }"
+        :style="{
+          fontSize: size + 'px'
+        }"
       />
-      {{ title }}
+      <span>
+        {{ title }}
+      </span>
     </ft-button>
     <template
       v-if="dropdownShown"

diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
@@ -169,15 +169,11 @@
   margin-block-end: 0.3em;
 }
 
-.grid {
+.iconGrid {
   display: flex;
   flex-wrap: wrap;
 }
 
-.useSpaceForMoreEntriesWithTitles > * {
-  flex: 1;
-}
-
 @media only screen and (max-width: 680px) {
   .inner {
     display: contents; /* sunglasses emoji */

diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
@@ -200,7 +200,7 @@
       </router-link>
       <hr>
       <div
-        v-if="!hideActiveSubscriptions && (!isOpen | subscriptionList.displayType === 'list')"
+        v-if="!hideActiveSubscriptions && (!isOpen | subscriptionListOptions.displayType === 'list')"
       >
         <router-link
           v-for="(channel, index) in activeSubscriptions"
@@ -230,21 +230,21 @@
           </p>
         </router-link>
       </div>
-      <!-- && !(subscriptionListOptions.displayType === 'grid' &&
-              !subscriptionListOptions.showGridItemTitles) -->
       <div
         v-if="isOpen && subscriptionListOptions.displayType === 'grid'"
-        class="grid"
-        :style="{ minInlineSize: (subscriptionListOptions.itemsPerGridRow * 100) + '%'} "
+        class="iconGrid"
       >
         <ft-channel-bubble
           v-for="(channel, index) in activeSubscriptions"
           :id="`sidenav-channel-${index}`"
           :key="index"
+          :style="{ inlineSize: 100 / subscriptionListOptions.itemsPerGridRow + '%' }"
           :channel-id="channel.id"
           :channel-name="channel.name"
           :channel-thumbnail="channel.thumbnail"
-          appearance="small"
+          :side-nav-grid="true"
+          :bubble-size="subscriptionListOptions.itemsPerGridRow > 2 ? 35 : 50"
+          :show-title="subscriptionListOptions.showGridItemTitles"
           @click="navigate(`channel/${channel.id}`)"
         />
       </div>

diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
@@ -241,7 +241,7 @@ export default defineComponent({
         radioGroupSort.push(
           {
             type: 'checkbox',
-            label: this.$t('Settings.List Display Settings.Sort.Use Default Sort'),
+            label: this.$t('Settings.List Display Settings.Sort.Use default sort'),
             value: 'defaultSort',
             checked: listOptions.sort === 'defaultSort',
           }
@@ -251,13 +251,13 @@ export default defineComponent({
       radioGroupSort.push(
         {
           type: 'checkbox',
-          label: this.$t('Settings.List Display Settings.Sort.Sort by Title (Ascending)'),
+          label: this.$t('Settings.List Display Settings.Sort.Sort by title (A to Z)'),
           value: 'alphabeticalAscending',
           checked: listOptions.sort === 'alphabeticalAscending',
         },
         {
           type: 'checkbox',
-          label: this.$t('Settings.List Display Settings.Sort.Sort by Title (Descending)'),
+          label: this.$t('Settings.List Display Settings.Sort.Sort by title (Z to A)'),
           value: 'alphabeticalDescending',
           checked: listOptions.sort === 'alphabeticalDescending',
         }
@@ -326,13 +326,13 @@ export default defineComponent({
             },
             {
               type: 'checkbox',
-              label: this.$t('Settings.List Display Settings.Titles.Grid.Show Grid Item Titles'),
+              label: this.$t('Settings.List Display Settings.Display Type.Grid.Show grid item titles'),
               value: 'showGridItemTitles',
               checked: listOptions.showGridItemTitles
             },
             {
               type: 'checkbox',
-              label: this.$t('Settings.List Display Settings.Titles.Grid.Hide Grid Item Titles'),
+              label: this.$t('Settings.List Display Settings.Display Type.Grid.Hide grid item titles'),
               value: 'hideGridItemTitles',
               checked: !listOptions.showGridItemTitles,
             }

diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
@@ -39,25 +39,14 @@
         />
       </div>
     </div>
-    <ft-flex-box>
-      <ft-slider
-        :label="$t('Settings.Theme Settings.UI Scale')"
-        :default-value="uiScale"
-        :min-value="minUiScale"
-        :max-value="maxUiScale"
-        :step="uiScaleStep"
-        value-extension="%"
-        @change="updateUiScale(parseInt($event))"
-      />
-    </ft-flex-box>
     <br>
-    <!-- theme="base-no-default" -->
     <ft-flex-box>
       <ft-icon-button
         :icon="['fas', 'bars']"
         :title="$t('Settings.List Display Settings.Subscription List Display Options')"
         :use-ft-button="true"
         :close-on-click="false"
+        :size="22"
         dropdown-position-x="bottom"
         :dropdown-options="subscriptionListDisplayDropdownOptions"
         @click="handleSubscriptionListDisplayDropdownOptionClick"
@@ -67,6 +56,7 @@
         :title="$t('Settings.List Display Settings.Profile List Display Options')"
         :use-ft-button="true"
         :close-on-click="false"
+        :size="22"
         dropdown-position-x="bottom"
         :dropdown-options="profileListDisplayDropdownOptions"
         @click="handleProfileListDisplayDropdownOptionClick"
@@ -76,11 +66,23 @@
         :title="$t('Settings.List Display Settings.Settings Section List Display Options')"
         :use-ft-button="true"
         :close-on-click="false"
+        :size="22"
         dropdown-position-x="bottom"
         :dropdown-options="settingsSectionListDisplayDropdownOptions"
         @click="handleSettingsSectionListDisplayDropdownOptionClick"
       />
     </ft-flex-box>
+    <ft-flex-box>
+      <ft-slider
+        :label="$t('Settings.Theme Settings.UI Scale')"
+        :default-value="uiScale"
+        :min-value="minUiScale"
+        :max-value="maxUiScale"
+        :step="uiScaleStep"
+        value-extension="%"
+        @change="updateUiScale(parseInt($event))"
+      />
+    </ft-flex-box>
     <br>
     <ft-flex-box>
       <ft-select

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -478,16 +478,16 @@ Settings:
     Profile List Display Options: Profile List Display Options
     Settings Section List Display Options: Settings Section List Display Options
     Sort:
-      Use Default Sort: Use Default Sort
-      Sort by Title (Ascending): Sort by Title (Ascending)
-      Sort by Title (Descending): Sort by Title (Descending)
+      Use default sort: Use default sort
+      Sort by title (A to Z): Sort by title (A to Z)
+      Sort by title (Z to A): Sort by title (Z to A)
     Display Type:
       List: List
       Grid:
         Grid: Grid
         Item per grid row: 1 item per grid row | {number} items per grid row
-        Show Grid Item Titles: Show Grid Item Titles
-        Hide Grid Item Titles: Hide Grid Item Titles
+        Show grid item titles: Show grid item titles
+        Hide grid item titles: Hide grid item titles
 
 About:
   #On About page