impr: browser tab's ticker text hover logic

staniel359 · staniel359 · commit 61cb7a66c422 · 2025-04-14T10:47:20.000+03:00
diff --git a/src/assets/styles/Components.sass b/src/assets/styles/Components.sass
@@ -644,3 +644,7 @@
 .base-accordion
   & > .content
     @extend .no-padding, .main-bottom-section
+
+.base-ticker-container
+  .ticker
+    will-change: transform
diff --git a/src/components/containers/BaseTickerContainer.vue b/src/components/containers/BaseTickerContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="white-space-no-wrap"
+    class="white-space-no-wrap base-ticker-container"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
   >
@@ -18,6 +18,12 @@
 <script>
 export default {
   name: 'BaseTickerContainer',
+  props: {
+    isEnabled: {
+      type: Boolean,
+      default: true
+    }
+  },
   data () {
     return {
       content: null,
@@ -65,16 +71,18 @@ export default {
     } = this.$refs
 
     this.ticker = ticker
+
     this.content = content
 
     this.setContentPaddingRight(
       this.gapWidth
     )
 
     if (this.isTickable) {
-      this.ticker.appendChild(
-        this.contentClone
-      )
+      this.ticker
+        .appendChild(
+          this.contentClone
+        )
     } else {
       this.setContentPaddingRight(
         0
@@ -83,27 +91,38 @@ export default {
   },
   methods: {
     handleMouseEnter () {
-      if (this.isTickable) {
-        this.speed = (
-          this.speedPixels / 60
-        )
+      if (!this.isEnabled) { return }
 
-        this.animate()
-      }
+      this.activate()
     },
     handleMouseLeave () {
+      if (!this.isEnabled) { return }
+
+      this.deactivate()
+    },
+    handleRequestAnimationFrame () {
+      this.animate()
+    },
+    activate () {
+      if (!this.isTickable) { return }
+
+      this.speed = (
+        this.speedPixels / 60
+      )
+
+      this.animate()
+    },
+    deactivate () {
       cancelAnimationFrame(
         this.animationFrame
       )
 
       this.progress = 0
+
       this.speed = 0
 
       this.transformTicker()
     },
-    handleRequestAnimationFrame () {
-      this.animate()
-    },
     animate () {
       this.progress -= this.speed
 
@@ -135,7 +154,4 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
-.ticker
-  will-change: transform
-</style>
+<style lang="sass" scoped></style>
diff --git a/src/components/layout/TheBrowserTabs/BrowserTab.vue b/src/components/layout/TheBrowserTabs/BrowserTab.vue
@@ -8,6 +8,8 @@
     :is-invertable="!isActive"
     @click="handleClick"
     @auxclick.stop="handleAuxClick"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
     <BaseIcon
       class="main-right-extrasmall-icon main-left-small-icon"
@@ -17,11 +19,13 @@
     />
 
     <BaseTickerContainer
+      ref="ticker"
       :key="key"
       class="tab-name text-overflow-hidden"
       :class="{
         active: isActive
       }"
+      :is-enabled="false"
     >
       {{ tabTitle }}
     </BaseTickerContainer>
@@ -154,6 +158,16 @@ export default {
         this.callTabClose()
       }
     },
+    handleMouseEnter () {
+      this.$refs
+        .ticker
+        .activate()
+    },
+    handleMouseLeave () {
+      this.$refs
+        .ticker
+        .deactivate()
+    },
     callTabClose () {
       window
         .mainProcess
