A new way to subscribe (#4238)

* Implement styling for new subscribe button * Implement dropdown element and styling * Implements remaining styling and logic * Correct use of aria-selected in FT Note: was able to add aria-controls to ft-profile-selector because it keeps the hidden dropdown in the DOM. The same is not true of the ft-icon-button or ft-subscribe-button. Main point: aria-expanded should go on the button opening the dropdown, not the dropdown itself. * Resolve subscribe button staying upon bug * Remove unneeded vendor-specific transition prefixes See discussion here: https://www.web-plus-plus.com/Articles/css-transition-moz-and-webkit-vs-css3
FreeTubeApp · Nov 22, 2023 · e68c534 · e68c534
1 parent 62e7b43
commit e68c534
Show file tree

Hide file tree

Showing 17 changed files with 308 additions and 68 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
@@ -11,17 +11,12 @@
   overflow: hidden;
   color: inherit;
   text-decoration: none;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
 }
 
 .bubblePadding:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -14,6 +14,7 @@
       }"
       tabindex="0"
       role="button"
+      :aria-expanded="dropdownShown"
       @click="handleIconClick"
       @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
@@ -33,7 +34,6 @@
             v-if="dropdownOptions.length > 0"
             class="list"
             role="listbox"
-            :aria-expanded="dropdownShown"
           >
             <li
               v-for="(option, index) in dropdownOptions"
@@ -71,7 +71,6 @@
             v-if="dropdownOptions.length > 0"
             class="list"
             role="listbox"
-            :aria-expanded="dropdownShown"
           >
             <li
               v-for="(option, index) in dropdownOptions"

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
@@ -57,8 +57,6 @@
   border-radius: 100%;
   color: var(--primary-text-color);
   opacity: 0;
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
@@ -74,8 +72,6 @@
 .clearInputTextButton.visible:active {
   background-color: var(--tertiary-text-color);
   color: var(--side-nav-active-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
@@ -172,8 +168,6 @@
 .inputAction.enabled:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 
@@ -184,8 +178,6 @@
 .inputAction.enabled:active {
   background-color: var(--tertiary-text-color);
   color: var(--side-nav-active-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 

diff --git a/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css b/src/renderer/components/ft-profile-bubble/ft-profile-bubble.css
@@ -4,17 +4,12 @@
   padding-block: 10px 30px;
   padding-inline: 10px;
   cursor: pointer;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
 }
 
 .bubblePadding:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 

diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.css b/src/renderer/components/ft-profile-selector/ft-profile-selector.css
@@ -56,17 +56,12 @@ Height adjust for profile list so it won't cover navbar.  */
 .profile {
   cursor: pointer;
   block-size: 50px;
-  -webkit-transition: background 0.2s ease-out;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
 }
 
 .profile:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
   transition: background 0.2s ease-in;
 }
 

diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.js b/src/renderer/components/ft-profile-selector/ft-profile-selector.js
@@ -35,6 +35,10 @@ export default defineComponent({
     }
   },
   methods: {
+    isActiveProfile: function (profile) {
+      return profile._id === this.activeProfile._id
+    },
+
     toggleProfileList: function () {
       this.profileListShown = !this.profileListShown
 

diff --git a/src/renderer/components/ft-profile-selector/ft-profile-selector.vue b/src/renderer/components/ft-profile-selector/ft-profile-selector.vue
@@ -6,6 +6,8 @@
       :style="{ background: activeProfile.bgColor, color: activeProfile.textColor }"
       tabindex="0"
       role="button"
+      :aria-expanded="profileListShown"
+      aria-controls="profileSelectorList"
       @click="toggleProfileList"
       @mousedown="handleIconMouseDown"
       @keydown.space.prevent="toggleProfileList"
@@ -19,6 +21,7 @@
     </div>
     <ft-card
       v-show="profileListShown"
+      id="profileSelectorList"
       ref="profileList"
       class="profileList"
       tabindex="-1"
@@ -46,7 +49,7 @@
           :key="index"
           class="profile"
           :aria-labelledby="'profile-' + index + '-name'"
-          aria-selected="false"
+          :aria-selected="isActiveProfile(profile)"
           tabindex="0"
           role="option"
           @click="setActiveProfile(profile)"

diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css
diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js
@@ -25,70 +25,99 @@ export default defineComponent({
       type: String,
       required: true
     },
+    hideProfileDropdownToggle: {
+      type: Boolean,
+      default: false
+    },
     subscriptionCountText: {
       default: '',
       type: String,
       required: false
     }
   },
+  data: function () {
+    return {
+      isProfileDropdownOpen: false
+    }
+  },
   computed: {
+    profileInitials: function () {
+      return this.profileDisplayList.map((profile) => {
+        return profile?.name?.length > 0 ? Array.from(profile.name)[0].toUpperCase() : ''
+      })
+    },
+
     profileList: function () {
       return this.$store.getters.getProfileList
     },
 
+    /* sort by 'All Channels' -> active profile -> unsubscribed channels -> subscribed channels */
+    profileDisplayList: function () {
+      const mainProfileAndActiveProfile = [this.profileList[0]]
+      if (this.activeProfile._id !== MAIN_PROFILE_ID) {
+        mainProfileAndActiveProfile.push(this.activeProfile)
+      }
+
+      return [
+        ...mainProfileAndActiveProfile,
+        ...this.profileList.filter((profile, i) =>
+          i !== 0 && !this.isActiveProfile(profile) && !this.isProfileSubscribed(profile)),
+        ...this.profileList.filter((profile, i) =>
+          i !== 0 && !this.isActiveProfile(profile) && this.isProfileSubscribed(profile))
+      ]
+    },
+
     activeProfile: function () {
       return this.$store.getters.getActiveProfile
     },
 
     subscriptionInfo: function () {
-      return this.activeProfile.subscriptions.find((channel) => {
-        return channel.id === this.channelId
-      }) ?? null
-    },
-
-    isSubscribed: function () {
-      return this.subscriptionInfo !== null
+      return this.subscriptionInfoForProfile(this.activeProfile)
     },
 
     hideChannelSubscriptions: function () {
       return this.$store.getters.getHideChannelSubscriptions
     },
 
     subscribedText: function () {
-      let subscribedValue = (this.isSubscribed ? this.$t('Channel.Unsubscribe') : this.$t('Channel.Subscribe')).toUpperCase()
+      let subscribedValue = (this.isProfileSubscribed(this.activeProfile) ? this.$t('Channel.Unsubscribe') : this.$t('Channel.Subscribe')).toUpperCase()
       if (this.subscriptionCountText !== '' && !this.hideChannelSubscriptions) {
         subscribedValue += ' ' + this.subscriptionCountText
       }
       return subscribedValue
+    },
+
+    isProfileDropdownEnabled: function () {
+      return !this.hideProfileDropdownToggle && this.profileList.length > 1
     }
 
   },
   methods: {
-    handleSubscription: function () {
+    handleSubscription: function (profile = this.activeProfile) {
       if (this.channelId === '') {
         return
       }
 
-      const currentProfile = deepCopy(this.activeProfile)
+      const currentProfile = deepCopy(profile)
 
-      if (this.isSubscribed) {
+      if (this.isProfileSubscribed(profile)) {
         currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => {
           return channel.id !== this.channelId
         })
 
         this.updateProfile(currentProfile)
         showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
 
-        if (this.activeProfile._id === MAIN_PROFILE_ID) {
+        if (profile._id === MAIN_PROFILE_ID) {
           // Check if a subscription exists in a different profile.
           // Remove from there as well.
           let duplicateSubscriptions = 0
 
-          this.profileList.forEach((profile) => {
-            if (profile._id === MAIN_PROFILE_ID) {
+          this.profileList.forEach((profileInList) => {
+            if (profileInList._id === MAIN_PROFILE_ID) {
               return
             }
-            duplicateSubscriptions += this.unsubscribe(profile, this.channelId)
+            duplicateSubscriptions += this.unsubscribe(profileInList, this.channelId)
           })
 
           if (duplicateSubscriptions > 0) {
@@ -107,7 +136,7 @@ export default defineComponent({
         this.updateProfile(currentProfile)
         showToast(this.$t('Channel.Added channel to your subscriptions'))
 
-        if (this.activeProfile._id !== MAIN_PROFILE_ID) {
+        if (profile._id !== MAIN_PROFILE_ID) {
           const primaryProfile = deepCopy(this.profileList.find(prof => {
             return prof._id === MAIN_PROFILE_ID
           }))
@@ -122,6 +151,34 @@ export default defineComponent({
           }
         }
       }
+
+      if (this.isProfileDropdownEnabled && !this.isProfileDropdownOpen) {
+        this.toggleProfileDropdown()
+      }
+    },
+
+    handleProfileDropdownFocusOut: function () {
+      if (!this.$refs.subscribeButton.matches(':focus-within')) {
+        this.isProfileDropdownOpen = false
+      }
+    },
+
+    toggleProfileDropdown: function() {
+      this.isProfileDropdownOpen = !this.isProfileDropdownOpen
+    },
+
+    isActiveProfile: function (profile) {
+      return profile._id === this.activeProfile._id
+    },
+
+    subscriptionInfoForProfile: function (profile) {
+      return profile.subscriptions.find((channel) => {
+        return channel.id === this.channelId
+      }) ?? null
+    },
+
+    isProfileSubscribed: function (profile) {
+      return this.subscriptionInfoForProfile(profile) !== null
     },
 
     unsubscribe: function(profile, channelId) {