feat: zoomable indicator preview

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>

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>

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

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;
 

src/components/indicators/IndicatorDetail.vue

@@ -2,18 +2,13 @@
   <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"
+          @close="close"
+        ></IndicatorPreview>
         <div class="indicator-detail__content">
           <div class="indicator-detail__head">
             <div class="indicator-detail__name">
@@ -128,7 +123,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 +132,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 +146,12 @@ export default {
     }
   },
   components: {
-    Btn
+    Btn,
+    IndicatorPreview
   },
   data() {
     return {
       opened: false,
-      imageHeight: 100,
       isInstalling: false,
       isPublishing: false,
       isFetchingVersions: false,
@@ -473,10 +469,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 +485,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 {

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>