feat: zoomable indicator preview

Tucsky · Oct 17, 2024 · d4b4242 · d4b4242
1 parent a7ce503
commit d4b4242
Show file tree

Hide file tree

Showing 11 changed files with 288 additions and 132 deletions.
diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
@@ -36,7 +36,7 @@
         @click="toggleTimeframeDropdown($event, $refs.timeframeButton)"
         class="-arrow -cases pane-header__highlight pane-chart__timeframe-selector"
       >
-        {{ !isKnownTimeframe ? timeframeForHuman : '' }}
+        <span>{{ !isKnownTimeframe ? timeframeForHuman : '' }}</span>
       </Btn>
       <hr />
     </pane-header>

diff --git a/src/components/chart/TimeframeDropdown.vue b/src/components/chart/TimeframeDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <dropdown v-model="value">
+  <dropdown :value="value" @input="$emit('input', $event)">
     <div class="timeframe-dropdown">
       <div class="dropdown-item timeframe-dropdown__header" @click.stop>
         <timeframe-input
@@ -233,14 +233,22 @@ export default {
     }
   }
 
-  &:hover {
-    .icon-star {
-      display: block;
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      .icon-star {
+        display: block;
 
-      &:hover {
-        color: var(--theme-color-base);
+        &:hover {
+          color: var(--theme-color-base);
+        }
       }
     }
   }
+
+  @media (hover: none) and (pointer: coarse) {
+    .icon-star {
+      display: block;
+    }
+  }
 }
 </style>
diff --git a/src/components/chart/controls.ts b/src/components/chart/controls.ts
@@ -593,6 +593,10 @@ export default class ChartControl {
       components.timeframeDropdown = createComponent(module.default, propsData)
 
       mountComponent(components.timeframeDropdown)
+
+      components.timeframeDropdown.$on('input', value => {
+        components.timeframeDropdown.value = value
+      })
     } else {
       if (components.timeframeDropdown.value === event.currentTarget) {
         components.timeframeDropdown.value = null

diff --git a/src/components/framework/Btn.vue b/src/components/framework/Btn.vue
@@ -7,13 +7,13 @@
     class="btn"
     @click="onClick"
   >
-    <loader v-if="loading" class="btn__loader" small />
+    <loader v-if="isLoading" class="btn__loader" small />
     <slot />
   </component>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import Loader from '@/components/framework/Loader.vue'
 
 @Component({
@@ -50,10 +50,15 @@ import Loader from '@/components/framework/Loader.vue'
   }
 })
 export default class Btn extends Vue {
-  loading: boolean
+  isLoading = false
+
+  @Watch('loading')
+  onLoadingChange(value) {
+    this.isLoading = value
+  }
 
   onClick(event) {
-    if (!this.loading) {
+    if (!this.isLoading) {
       this.$emit('click', event)
     }
   }
@@ -63,7 +68,6 @@ export default class Btn extends Vue {
 <style lang="scss" scoped>
 .btn {
   &__loader {
-    margin-right: 0.5rem;
     width: 0.5em;
     height: 0.5em;
 

diff --git a/src/components/indicators/IndicatorDetail.vue b/src/components/indicators/IndicatorDetail.vue
@@ -2,18 +2,14 @@
   <transition name="indicator-detail" @after-leave="$emit('close')">
     <div v-if="opened" class="indicator-detail" @click="onBackdropClick">
       <div class="indicator-detail__wrapper hide-scrollbar">
-        <div
+        <IndicatorPreview
           class="indicator-detail__preview"
-          :style="{ '--image-height': imageHeight + 'px' }"
-        >
-          <Btn class="indicator-detail__close -text" @click="close">
-            <i class="icon-cross"></i>
-          </Btn>
-          <code class="indicator-detail__id -filled">
-            <small>#{{ indicator.id }}</small>
-          </code>
-          <img v-if="image" :src="image" @load="onImageLoad" />
-        </div>
+          :id="indicator.id"
+          :preview="indicator.preview"
+          :path="indicator.imagePath"
+          :is-installed="isInstalled"
+          @close="close"
+        ></IndicatorPreview>
         <div class="indicator-detail__content">
           <div class="indicator-detail__head">
             <div class="indicator-detail__name">
@@ -128,7 +124,7 @@
   </transition>
 </template>
 
-<script>
+<script lang="ts">
 import Btn from '@/components/framework/Btn.vue'
 import importService from '@/services/importService'
 import { ago, sleep } from '@/utils/helpers'
@@ -137,6 +133,7 @@ import workspacesService from '@/services/workspacesService'
 import EditResourceDialog from '@/components/library/EditResourceDialog.vue'
 import { openPublishDialog } from '@/components/library/helpers'
 import { computeThemeColorAlpha } from '@/utils/colors'
+import IndicatorPreview from './IndicatorPreview.vue'
 
 export default {
   props: {
@@ -150,12 +147,12 @@ export default {
     }
   },
   components: {
-    Btn
+    Btn,
+    IndicatorPreview
   },
   data() {
     return {
       opened: false,
-      imageHeight: 100,
       isInstalling: false,
       isPublishing: false,
       isFetchingVersions: false,
@@ -172,17 +169,6 @@ export default {
     isInstalled() {
       return !!this.indicator.script
     },
-    image() {
-      if (this.imageObjectUrl) {
-        return this.imageObjectUrl
-      }
-
-      if (this.indicator.imagePath) {
-        return `${import.meta.env.VITE_APP_LIB_URL}${this.indicator.imagePath}`
-      }
-
-      return null
-    },
     createdAt() {
       if (this.indicator.createdAt) {
         return `${ago(this.indicator.createdAt)} ago`
@@ -247,7 +233,6 @@ export default {
     indicator: {
       immediate: true,
       handler() {
-        this.loadPreview()
         if (this.isInstalling) {
           this.addToChart()
         }
@@ -257,12 +242,6 @@ export default {
   mounted() {
     this.opened = true
   },
-  beforeDestroy() {
-    if (this.imageObjectUrl) {
-      URL.revokeObjectURL(this.imageObjectUrl)
-      this.imageObjectUrl = null
-    }
-  },
   methods: {
     close() {
       this.opened = false
@@ -289,24 +268,6 @@ export default {
         this.close()
       }
     },
-    loadPreview() {
-      this.clearPreview()
-
-      const preview = this.indicator.preview
-
-      if (
-        this.isInstalled &&
-        (preview instanceof Blob || preview instanceof File)
-      ) {
-        this.imageObjectUrl = URL.createObjectURL(preview)
-      }
-    },
-    clearPreview() {
-      if (this.imageObjectUrl) {
-        URL.revokeObjectURL(this.imageObjectUrl)
-        this.imageObjectUrl = null
-      }
-    },
     async fetchIndicatorVersions() {
       if (this.indicator.versions) {
         return
@@ -366,10 +327,6 @@ export default {
           throw new Error('invalid payload')
         }
 
-        if (this.image) {
-          indicator.data.preview = await (await fetch(this.image)).blob()
-        }
-
         await importService.importIndicator(indicator, false, true)
       } catch (error) {
         console.error(error)
@@ -473,10 +430,6 @@ export default {
         await workspacesService.saveIndicator(indicator, true)
         this.$emit('reload', indicator.id)
       }
-    },
-    onImageLoad(event) {
-      const img = event.target
-      this.imageHeight = img.naturalHeight
     }
   }
 }
@@ -493,37 +446,8 @@ export default {
   z-index: 27;
 
   &__preview {
-    height: 100px;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
     border-radius: 0.75rem 0.75rem 0 0;
-    background-color: var(--theme-background-o75);
-    transition: height 0.2s $ease-out-expo;
     max-height: 420px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 0.75rem 0.75rem 0 0;
-    }
-
-    &:hover {
-      height: var(--image-height);
-    }
-  }
-
-  &__id {
-    position: absolute;
-    top: 0.5rem;
-    left: 0.5rem;
-  }
-
-  &__close {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
   }
 
   &__name {

diff --git a/src/components/indicators/IndicatorLibraryDialog.vue b/src/components/indicators/IndicatorLibraryDialog.vue
@@ -15,10 +15,7 @@
     <template #subheader>
       <tabs v-model="tab">
         <tab name="installed"> Installed </tab>
-        <tab v-if="communityTabEnabled" name="community">
-          Community
-          <span class="badge -red ml8">new</span>
-        </tab>
+        <tab v-if="communityTabEnabled" name="community"> Community </tab>
       </tabs>
     </template>