feat: Add tooltips on icons - MEED-7748 - Meeds-io/MIPs#160

Meeds-io · Nov 18, 2024 · aa2d4ca · aa2d4ca
1 parent 88e1d18
commit aa2d4ca
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 20 deletions.
diff --git a/webapp/src/main/resources/locale/portlet/social/SpacesAdministrationPortlet_en.properties b/webapp/src/main/resources/locale/portlet/social/SpacesAdministrationPortlet_en.properties
@@ -194,3 +194,6 @@ social.spaces.administration.manageSpaces.processingSpacesBulkOperation2=Please
 social.spaces.administration.manageSpaces.processingSpacesBulkOperation3={0}Do not close this page{1}
 social.spaces.administration.manageSpaces.spaceTemplateAppliedOnSpaces=Spaces updated with selected template
 social.spaces.administration.manageSpaces.processingSpacesBulkOperationCancelConfirm=Reloading the page will cancel non-processed spaces. Do you confirm cancellation?
+social.spaces.administration.manageSpaces.processingSpacesBulkOperation=Processing bulk actions
+social.spaces.administration.manageSpaces.successSpacesBulkOperation=Operation finished successfully on space
+social.spaces.administration.manageSpaces.errorSpacesBulkOperation=Error while processing the operation
diff --git a/...-apps/spaces-administration/components/drawer/SpacesAdministrationApplyTemplateDrawer.vue b/...-apps/spaces-administration/components/drawer/SpacesAdministrationApplyTemplateDrawer.vue
@@ -45,15 +45,16 @@
           v-if="space"
           :space="space"
           class="mb-4" />
-        <v-card
+        <v-chip
           v-else-if="spaces"
-          class="border-color full-width d-flex align-center px-4 mb-4"
-          height="40"
-          flat>
-          {{ $t('social.spaces.administration.manageSpaces.selectedSpacesCount', {
-            0: selectionCount,
-          }) }}
-        </v-card>
+          class="mb-4 light-grey-color"
+          height="40">
+          <span>
+            {{ $t('social.spaces.administration.manageSpaces.selectedSpacesCount', {
+              0: selectionCount,
+            }) }}
+          </span>
+        </v-chip>
         <div class="text-header mb-1">
           {{ $t('social.spaces.administration.manageSpaces.selectNewTemplate') }}
         </div>

diff --git a/...c/main/webapp/vue-apps/spaces-administration/components/item/SpacesAdministrationItem.vue b/...c/main/webapp/vue-apps/spaces-administration/components/item/SpacesAdministrationItem.vue
@@ -22,21 +22,45 @@
 <template>
   <tr :key="space.id">
     <td align="center">
-      <v-icon
+      <v-tooltip
         v-if="bulkOperationStatus === 'done'"
-        class="fa-lg success--text my-auto pt-2">
-        fa-check-circle
-      </v-icon>
-      <v-icon
+        top>
+        <template #activator="{on, attrs}">
+          <v-icon
+            v-on="on"
+            v-bind="attrs"
+            class="fa-lg success--text my-auto pt-2">
+            fa-check-circle
+          </v-icon>
+        </template>
+        <span>{{ $t('social.spaces.administration.manageSpaces.successSpacesBulkOperation') }}</span>
+      </v-tooltip>
+      <v-tooltip
         v-else-if="bulkOperationStatus === 'error'"
-        class="fa-lg error--text my-auto pt-2">
-        fa-exclamation-circle
-      </v-icon>
-      <v-icon
+        top>
+        <template #activator="{on, attrs}">
+          <v-icon
+            v-on="on"
+            v-bind="attrs"
+            class="fa-lg error--text my-auto pt-2">
+            fa-exclamation-circle
+          </v-icon>
+        </template>
+        <span>{{ $t('social.spaces.administration.manageSpaces.errorSpacesBulkOperation') }}</span>
+      </v-tooltip>
+      <v-tooltip
         v-else-if="bulkOperationStatus === 'processing'"
-        class="fa-lg primary--text my-auto pt-2">
-        fa-spinner
-      </v-icon>
+        top>
+        <template #activator="{on, attrs}">
+          <v-icon
+            v-on="on"
+            v-bind="attrs"
+            class="fa-lg primary--text my-auto pt-2">
+            fa-spinner
+          </v-icon>
+        </template>
+        <span>{{ $t('social.spaces.administration.manageSpaces.processingSpacesBulkOperation') }}</span>
+      </v-tooltip>
       <v-checkbox
         v-else
         :value="selected || $root.allSpacesSelected"