feat: Display Tooltip When No Instance Preview available - MEED-6956 - …

…Meeds-io/MIPs#139 (#91)
Meeds-io · May 30, 2024 · a0d0e1f · a0d0e1f
1 parent 6631210
commit a0d0e1f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -286,3 +286,4 @@ portlets.noPortletInstancesYet=Create your first instance using this portlet
 portlets.instancePreview=Preview
 portlets.uploadPreviewTitle=Upload an illustration for portlet instance
 portlets.label.createInstance=Create instance
+portlets.noPreviewAvailable=No preview available
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue
@@ -30,14 +30,11 @@
         class="card-border-radius overflow-hidden"
         @portlet-instance-filter="keyword = $event"
         @select-tab="selectTab" />
-      <portlets-list
-        v-if="tabName === 'portlets'"
-        ref="portlets"
-        class="card-border-radius overflow-hidden"
-        :keyword="keyword" />
       <portlets-instance-main
         v-if="tabName === 'instances'"
-        ref="instances"
+        :keyword="keyword" />
+      <portlets-list
+        v-else-if="tabName === 'portlets'"
         :keyword="keyword" />
     </v-card>
     <portlets-item-instances-drawer />

diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
@@ -30,7 +30,7 @@
       must-sort
       disable-pagination
       hide-default-footer
-      class="portletsTable px-5">
+      class="card-border-radius overflow-hidden portletsTable px-5">
       <template slot="item" slot-scope="props">
         <portlets-item
           :key="props.item.id"

diff --git a/...ut-webapp/src/main/webapp/vue-app/portlets/components/portlets/drawer/InstancesDrawer.vue b/...ut-webapp/src/main/webapp/vue-app/portlets/components/portlets/drawer/InstancesDrawer.vue
@@ -55,17 +55,19 @@
           <v-list-item-action class="my-auto me-4">
             <v-tooltip bottom>
               <template #activator="{on, attrs}">
-                <v-btn
+                <div
                   v-on="on"
-                  v-bind="attrs"
-                  :disabled="!application.illustrationId"
-                  class="transparent d-flex align-center justify-center"
-                  icon
-                  @click="openIllustration(application)">
-                  <v-icon class="icon-default-color">fa-eye</v-icon>
-                </v-btn>
+                  v-bind="attrs">
+                  <v-btn
+                    :disabled="!application.illustrationId"
+                    class="transparent d-flex align-center justify-center"
+                    icon
+                    @click="openIllustration(application)">
+                    <v-icon class="icon-default-color">fa-eye</v-icon>
+                  </v-btn>
+                </div>
               </template>
-              <span>{{ $t('portlets.previewInstance') }}</span>
+              <span>{{ application.illustrationId && $t('portlets.previewInstance') || $t('portlets.noPreviewAvailable') }}</span>
             </v-tooltip>
           </v-list-item-action>
         </v-list-item>