feat: Enhance Topbar Buttons Tooltips - MEED-7848 - Meeds-io/meeds#2644

Prior to this change, the Browser Tooltip was used for some Topbar Icons. This change will force usage of Vuetify Tooltips to enhance UX when hovering the icons for the first time by a user. This will degrade the page rendering performances but in favor of a UX.

webapp/src/main/resources/locale/portlet/Portlets_en.properties

@@ -1063,3 +1063,4 @@ nodeIconPickerDrawer.edit=Update
 UIChangeAvatarContainer.title.deleteAvatar=Delete Picture
 
 sidebar.viewAllSpaces=View All Spaces
+topbar.searchTooltip=List your recent favorites

webapp/src/main/webapp/WEB-INF/gatein-resources.xml

@@ -1931,7 +1931,7 @@
       </depends>
     </module>
   </portlet>
-  
+
   <portlet>
     <name>PlatformSettings</name>
     <module>

webapp/src/main/webapp/WEB-INF/jsp/portlet/platformSettings.jsp

@@ -12,9 +12,15 @@ String path = ExoContainerContext.getService(UserPortalConfigService.class)
       class="v-application v-application--is-ltr theme--light"
       id="platformSettings">
       <div class="v-application--wrap">
-        <a href="/portal/administration/home/general/mainsettings" target="_blank" class="mx-2 d-none d-sm-block v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default">
+        <a
+          href="/portal/administration"
+          target="_blank"
+          class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"
+          aria-label="Enter the administration settings"
+          aria-haspopup="true"
+          aria-expanded="false">
           <span class="v-btn__content">
-            <i aria-hidden="true" role="button" aria-haspopup="true" aria-expanded="false" class="v-icon notranslate icon-default-color fas fa-cog theme--light" style="font-size: 22px;"></i>
+            <i aria-hidden="true" class="v-icon notranslate icon-default-color fas fa-cog theme--light" style="font-size: 20px;"></i>
           </span>
         </a>
       </div>

webapp/src/main/webapp/WEB-INF/jsp/portlet/search.jsp

@@ -49,22 +49,39 @@
     class="v-application v-application--is-ltr theme--light"
     id="SearchApplication"
     role="search">
-    <div class="v-application--wrap">
-      <button
-        type="button"
-        title="<%=tooltip%>"
-        class="transparent v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"
-        onclick="Vue.startApp('PORTLET/social/Search', 'init')">
-        <span class="v-btn__content">
-          <i class="v-icon fas fa-search position-static d-flex icon-medium-size icon-default-color"></i>
-        </span>
-      </button>
+    <div class="v-application--wrap d-none">
+      <v-tooltip bottom>
+        <template #activator="{on, attrs}">
+          <v-btn
+            v-on="on"
+            v-bind="attrs"
+            aria-label="<%=tooltip%>"
+            icon
+            class="transparent"
+            @click="Vue.startApp('PORTLET/social/Search', 'init')">
+            <v-icon size="20">fa-search</v-icon>
+          </v-btn>
+        </template>
+        <span class="tooltip"><%=tooltip%></span>
+      </v-tooltip>
       <textarea id="searchConnectorsDefaultValue" aria-hidden="true" class="d-none"><%= jsonSearchConnectors%></textarea>
       <textarea id="searchSkinUrlsDefaultValue" aria-hidden="true" class="d-none"><%= skinUrlsString%></textarea>
       <% if (rcontext.getRequestURI().endsWith("/search") || rcontext.getRequestURI().equals("search")) { %>
       <script type="text/javascript">
         require(['PORTLET/social/Search'], app => app.init());
       </script>
+      <% } else { %>
+      <script type="text/javascript">
+        require(['SHARED/commonVueComponents', 'SHARED/eXoVueI18n'], () => {
+          new Vue({
+            el: '#SearchApplication',
+            vuetify: Vue.prototype.vuetifyOptions,
+            mounted() {
+              document.querySelector('#SearchApplication .v-application--wrap').classList.remove('d-none');
+            },
+          });
+        });
+      </script>
       <% } %>
     </div>
   </div>

webapp/src/main/webapp/WEB-INF/jsp/portlet/topbarFavorites.jsp

@@ -0,0 +1,47 @@
+<%@page import="org.exoplatform.container.ExoContainerContext"%>
+<%@page import="java.util.Locale"%>
+<%@page import="org.exoplatform.services.resources.ResourceBundleService"%>
+<%@page import="java.util.ResourceBundle"%>
+<%
+  ResourceBundle bundle;
+  try {
+    bundle = ExoContainerContext.getService(ResourceBundleService.class).getResourceBundle("locale.portlet.Portlets", request.getLocale());
+  } catch (Exception e) {
+    bundle = ExoContainerContext.getService(ResourceBundleService.class).getResourceBundle("locale.portlet.Portlets", Locale.ENGLISH);
+  }
+  String tooltip = bundle.getString("Search.button.tooltip");
+%>
+<div class="VuetifyApp">
+  <div
+    id="favoritesListPortlet"
+    data-app="true"
+    class="v-application v-application--is-ltr theme--light">
+    <div class="v-application--wrap d-none">
+      <v-tooltip bottom>
+        <template #activator="{on, attrs}">
+          <v-btn
+            v-on="on"
+            v-bind="attrs"
+            aria-label="<%=tooltip%>"
+            icon
+            class="transparent"
+            @click="Vue.startApp('PORTLET/social/TopBarFavorites', 'init')">
+            <v-icon size="20">fa-star</v-icon>
+          </v-btn>
+        </template>
+        <span class="tooltip"><%=tooltip%></span>
+      </v-tooltip>
+    </div>
+  </div>
+  <script type="text/javascript">
+    window.require(['SHARED/commonVueComponents', 'SHARED/vuetify'], () => {
+      new Vue({
+        el: '#favoritesListPortlet',
+        vuetify: Vue.prototype.vuetifyOptions,
+        mounted() {
+          document.querySelector('#favoritesListPortlet .v-application--wrap').classList.remove('d-none');
+        },
+      });
+    });
+  </script>
+</div>

webapp/src/main/webapp/WEB-INF/jsp/portlet/topbarNotification.jsp

@@ -11,17 +11,19 @@
     <div class="v-application--wrap">
       <div class="flex">
         <div class="layout">
-          <button type="button"
-            class="text-xs-center v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default">
+          <button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default" title="Notifications">
             <span class="v-btn__content">
-              <span flat="" class="v-badge v-badge--overlap theme--light">
-                <i aria-hidden="true" class="v-icon notranslate fas fa-bell icon-medium-size icon-default-color theme--light"></i>
-                <script type="text/javascript">
-                  require(['PORTLET/social/TopBarNotification'], app => app.init(<%=badge%>));
-                </script>
+              <span class="v-badge v-badge--overlap theme--light">
+                <i
+                  aria-hidden="true"
+                  class="v-icon notranslate icon-default-color fa fa-bell theme--light"
+                  style="font-size: 20px;"></i>
               </span>
             </span>
           </button>
+          <script type="text/javascript">
+            require(['PORTLET/social/TopBarNotification'], app => app.init(<%=badge%>));
+          </script>
         </div>
       </div>
     </div>

webapp/src/main/webapp/WEB-INF/portlet.xml

@@ -620,14 +620,12 @@
     <portlet-class>org.exoplatform.commons.api.portlet.GenericDispatchedViewPortlet</portlet-class>
     <init-param>
       <name>portlet-view-dispatched-file-path</name>
-      <value>/html/topbarFavorites.html</value>
+      <value>/WEB-INF/jsp/portlet/topbarFavorites.jsp</value>
     </init-param>
     <init-param>
       <name>layout-css-class</name>
       <value>no-layout-style</value>
     </init-param>
-    <expiration-cache>-1</expiration-cache>
-    <cache-scope>PUBLIC</cache-scope>
     <supports>
       <mime-type>text/html</mime-type>
     </supports>

webapp/src/main/webapp/groovy/social/webui/UITopbarApplicationsContainer.gtmpl

@@ -44,7 +44,7 @@
               def child = uicomponent.getChildById(application.getId());
               if (child != null && child.isRendered()) {
                 %>
-          <div class="<%=application.isMobile() ? "" : "hidden-xs-only"%>">
+          <div class="<%=application.isMobile() ? "ms-2" : "ms-2 hidden-xs-only"%>">
                 <% child.processRender(rcontext);%>
           </div>
                 <%

webapp/src/main/webapp/vue-apps/common/components/Notifications.vue

@@ -1,20 +1,23 @@
 <!--
+
  This file is part of the Meeds project (https://meeds.io/).
- 
+
  Copyright (C) 2020 - 2022 Meeds Association contact@meeds.io
- 
+
  This program is free software; you can redistribute it and/or
  modify it under the terms of the GNU Lesser General Public
  License as published by the Free Software Foundation; either
  version 3 of the License, or (at your option) any later version.
+
  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  Lesser General Public License for more details.
- 
+
  You should have received a copy of the GNU Lesser General Public License
  along with this program; if not, write to the Free Software Foundation,
  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
 -->
 <template>
   <v-snackbar

webapp/src/main/webapp/vue-apps/favorites-list-top-bar/components/TopBarFavoritesButton.vue

@@ -15,12 +15,19 @@ along with this program; if not, write to the Free Software Foundation,
 Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <v-btn
-    :title="$t('UITopBarFavoritesPortlet.label.iconTooltip')"
-    :aria-label="$t('UITopBarFavoritesPortlet.label.iconTooltip')"
-    class="icon-default-color"
-    icon
-    @click="$root.$emit('open-favorite-drawer')">
-    <v-icon size="22" class="pb-1">fa-star</v-icon>
-  </v-btn>
-</template>
+  <v-tooltip bottom>
+    <template #activator="{on, attrs}">
+      <v-btn
+        v-on="on"
+        v-bind="attrs"
+        :title="$t('UITopBarFavoritesPortlet.label.iconTooltip')"
+        class="icon-default-color"
+        icon
+        @click="$root.$emit('open-favorite-drawer')">
+        <v-icon size="20">fa-star</v-icon>
+      </v-btn>
+    </template>
+    <span>{{ $t('UITopBarFavoritesPortlet.label.iconTooltip') }}</span>
+  </v-tooltip>
+</template>
+<script></script>

webapp/src/main/webapp/vue-apps/notification-top-bar/components/TopBarNotification.vue

@@ -22,21 +22,27 @@
   <v-app id="NotificationPopoverPortlet">
     <v-flex>
       <v-layout>
-        <v-btn
-          :title="$t('UIIntranetNotificationsPortlet.title.notifications')"
-          :loading="loading"
-          icon
-          class="text-xs-center"
-          @click="openDrawer">
-          <v-badge
-            :value="badge > 0"
-            :content="badge"
-            flat
-            color="var(--allPagesBadgePrimaryColor, #d32a2a)"
-            overlap>
-            <v-icon class="icon-default-color" size="22">fa-bell</v-icon>
-          </v-badge>
-        </v-btn>
+        <v-tooltip bottom>
+          <template #activator="{on, attrs}">
+            <v-btn
+              v-on="on"
+              v-bind="attrs"
+              :aria-label="$t('UIIntranetNotificationsPortlet.title.notifications')"
+              :loading="loading"
+              icon
+              @click="openDrawer">
+              <v-badge
+                :value="badge > 0"
+                :content="badge"
+                flat
+                color="var(--allPagesBadgePrimaryColor, #d32a2a)"
+                overlap>
+                <v-icon class="icon-default-color" size="20">fa-bell</v-icon>
+              </v-badge>
+            </v-btn>
+          </template>
+          <span>{{ $t('UIIntranetNotificationsPortlet.title.notifications') }}</span>
+        </v-tooltip>
       </v-layout>
     </v-flex>
     <top-bar-notification-drawer

webapp/src/main/webapp/vue-apps/platform-settings/components/PlatformSettings.vue

@@ -6,13 +6,12 @@
           :aria-label="$t('platformSettings.label.openAdministration')"
           href="/portal/administration"
           target="_blank"
-          class="mx-2"
           icon
           v-on="on"
           v-bind="attrs">
           <v-icon
             class="icon-default-color"
-            size="22">
+            size="20">
             fas fa-cog
           </v-icon>
         </v-btn>

webapp/src/main/webapp/vue-apps/search/components/SearchApplication.vue

@@ -1,12 +1,19 @@
 <template>
   <v-app role="search">
-    <v-btn
-      :title="buttonTooltip"
-      icon
-      class="transparent"
-      @click="dialog = !dialog">
-      <i class="v-icon fas fa-search icon-medium-size icon-default-color position-static d-flex"></i>
-    </v-btn>
+    <v-tooltip bottom>
+      <template #activator="{on, attrs}">
+        <v-btn
+          v-on="on"
+          v-bind="attrs"
+          :aria-label="buttonTooltip"
+          icon
+          class="transparent"
+          @click="dialog = !dialog">
+          <v-icon size="20">fa-search</v-icon>
+        </v-btn>
+      </template>
+      <span>{{ buttonTooltip }}</span>
+    </v-tooltip>
     <v-fade-transition>
       <v-flex
         v-show="dialog || standalone"
@@ -34,7 +41,6 @@
     </v-fade-transition>
   </v-app>
 </template>
-
 <script>
 export default {
   props: {