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

… (#4255)

This change will adjust the icon sizes and improves the tooltip and
performances of page rendering.

crowdin.yml

@@ -558,24 +558,6 @@ files: [
     "escape_special_characters": 0,
     "escape_quotes": 0,
   },
-  {
-    "source": "/webapp/src/main/resources/locale/portlet/PlatformSettings_en.properties",
-
-    "translation": "%original_path%/%file_name%!_%locale_with_underscore%.%file_extension%",
-    "translation_replace": {
-      "_en!": "","ar_SA": "ar","ar_OM": "aro","az_AZ": "az","ca_ES": "ca","ceb_PH": "ceb",
-      "co_FR": "co","cs_CZ": "cs","de_DE": "de","el_GR": "el","en_US": "en","es_ES": "es_ES","eu_ES": "eu","fa_IR": "fa",
-      "fi_FI": "fi","fil_PH": "fil","fr_FR": "fr","hi_IN": "hi","hu_HU": "hu","id_ID": "id","it_IT": "it","ja_JP": "ja",
-      "kab_KAB": "kab","ko_KR": "ko","lt_LT": "lt","ms_MY": "ms","nl_NL": "nl","no_NO": "no","pcm_NG": "pcm","pl_PL": "pl",
-      "pt_BR": "pt_BR","pt_PT": "pt_PT","ro_RO": "ro","ru_RU": "ru","sk_SK": "sk","sl_SI": "sl","sq_AL": "sq",
-      "sv_SE": "sv_SE","th_TH": "th","tl_PH": "tl","tr_TR": "tr","uk_UA": "uk","ur_IN": "ur_IN","vi_VN": "vi",
-      "zh_CN": "zh_CN","zh_TW": "zh_TW",
-    },
-    "dest": "hub/social/webapp/PlatformSettings.properties",
-    "update_option": "update_as_unapproved",
-    "escape_special_characters": 0,
-    "escape_quotes": 0,
-  },
   {
     "source": "/webapp/src/main/resources/locale/portlet/SpaceTemplatesManagement_en.properties",
     "translation": "%original_path%/%file_name%!_%locale_with_underscore%.%file_extension%",

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

@@ -1062,4 +1062,5 @@ nodeIconPickerDrawer.edit=Update
 
 UIChangeAvatarContainer.title.deleteAvatar=Delete Picture
 
-sidebar.viewAllSpaces=Discover Spaces
+sidebar.viewAllSpaces=View All Spaces
+platformSettings.label.openAdministration=Enter the administration settings

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

@@ -1931,35 +1931,6 @@
       </depends>
     </module>
   </portlet>
-
-  <portlet>
-    <name>PlatformSettings</name>
-    <module>
-      <script>
-        <minify>false</minify>
-        <path>/js/platformSettings.bundle.js</path>
-      </script>
-      <depends>
-        <module>vue</module>
-      </depends>
-      <depends>
-        <module>vuetify</module>
-      </depends>
-      <depends>
-        <module>commonVueComponents</module>
-      </depends>
-      <depends>
-        <module>eXoVueI18n</module>
-      </depends>
-      <depends>
-        <module>extensionRegistry</module>
-      </depends>
-      <depends>
-        <module>jquery</module>
-        <as>$</as>
-      </depends>
-    </module>
-  </portlet>
 
   <portlet>
     <name>OrganizationalChart</name>

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

@@ -1,3 +1,6 @@
+<%@page import="java.util.ResourceBundle"%>
+<%@ page import="java.util.Locale"%>
+<%@ page import="org.exoplatform.services.resources.ResourceBundleService"%>
 <%@ page import="org.exoplatform.container.ExoContainerContext"%>
 <%@ page import="org.exoplatform.portal.config.UserPortalConfigService" %>
 <%@ page import="org.exoplatform.portal.application.PortalRequestContext" %>
@@ -6,21 +9,34 @@
 String path = ExoContainerContext.getService(UserPortalConfigService.class)
     .getDefaultSitePath("administration", request.getRemoteUser());
   if (path != null) {
+    ResourceBundle bundle;
+    String tooltip;
+    try {
+      bundle = ExoContainerContext.getService(ResourceBundleService.class).getResourceBundle("locale.portlet.Portlets", request.getLocale());
+      tooltip = bundle.getString("platformSettings.label.openAdministration");
+    } catch (Exception e) {
+      bundle = ExoContainerContext.getService(ResourceBundleService.class).getResourceBundle("locale.portlet.Portlets", Locale.ENGLISH);
+      tooltip = bundle.getString("platformSettings.label.openAdministration");
+    }
 %>
   <div class="VuetifyApp">
     <div data-app="true"
       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"
+          title="<%=tooltip%>"
+          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>
-      <script type="text/javascript">
-        require(['PORTLET/social/PlatformSettings'], app => app.init());
-      </script>
     </div>
   </div>
 <% } %>

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

@@ -56,7 +56,7 @@
         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>
+          <i class="v-icon fas fa-search" style="font-size: 20px"></i>
         </span>
       </button>
       <textarea id="searchConnectorsDefaultValue" aria-hidden="true" class="d-none"><%= jsonSearchConnectors%></textarea>

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

@@ -1,8 +1,23 @@
-<%@page import="org.exoplatform.portal.webui.util.Util"%>
+<%@page import="java.util.Objects"%>
+<%@page import="org.exoplatform.portal.application.PortalRequestContext"%>
+<%@page import="org.exoplatform.web.PortalHttpServletResponseWrapper"%>
+<%@page import="java.net.URLEncoder"%>
+<%@page import="org.exoplatform.portal.mop.user.UserNode"%>
+<%@page import="org.exoplatform.container.ExoContainerContext"%>
+<%@page import="org.exoplatform.portal.config.UserPortalConfigService"%>
 <%@page import="org.exoplatform.portal.mop.SiteKey"%>
 <%
-  SiteKey siteKey = Util.getUIPortal().getSiteKey();
-  String cacheId = "topBarMenu-" + String.valueOf(siteKey.hashCode()) + "/" + Util.getUIPortal().getSelectedUserNode().getId();
+  PortalRequestContext rcontext = PortalRequestContext.getCurrentInstance();
+  UserPortalConfigService portalConfigService = ExoContainerContext.getService(UserPortalConfigService.class);
+  SiteKey siteKey = rcontext.getSiteKey();
+
+  UserNode userNode = portalConfigService.getSiteRootNode(siteKey.getTypeName(), siteKey.getName(), request.getRemoteUser(), true);
+  String parentNodeId = userNode == null || userNode.getChildrenCount() == 0 || userNode.getChild(0).getChildrenCount() == 0 ? null : userNode.getChild(0).getId();
+  if (parentNodeId != null) {
+    PortalHttpServletResponseWrapper responseWrapper = (PortalHttpServletResponseWrapper) rcontext.getResponse();
+    responseWrapper.addHeader("Link", "</portal/rest/v1/navigations/" + siteKey.getType().name() + "?siteName=" + URLEncoder.encode(siteKey.getName()) + "&scope=ALL&visibility=displayed&visibility=temporal&nodeId=" + parentNodeId + "&expand=true>; rel=preload; as=fetch; crossorigin=use-credentials", false);
+  }
+  String cacheId = "topBarMenu-" + Objects.hash(siteKey, parentNodeId);
 %>
 <div class="VuetifyApp">
   <div data-app="true" class="v-application v-application--is-ltr theme--light grey" id="topBarMenu">
@@ -13,7 +28,7 @@
         if (window.topBarMenuHtml) {
           document.querySelector('#topBarMenu').innerHTML = window.topBarMenuHtml;
         }
-        require(['PORTLET/social/TopBarMenu'], app => app.init('<%=cacheId%>'));
+        require(['PORTLET/social/TopBarMenu'], app => app.init('<%=cacheId%>', <%=parentNodeId%>));
       }
     </script>
   </div>

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

@@ -0,0 +1,36 @@
+<%@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;
+  String tooltip;
+  try {
+    bundle = ExoContainerContext.getService(ResourceBundleService.class).getResourceBundle("locale.portlet.Portlets", request.getLocale());
+    tooltip = bundle.getString("UITopBarFavoritesPortlet.label.iconTooltip");
+  } catch (Exception e) {
+    bundle = ExoContainerContext.getService(ResourceBundleService.class).getResourceBundle("locale.portlet.Portlets", Locale.ENGLISH);
+    tooltip = bundle.getString("UITopBarFavoritesPortlet.label.iconTooltip");
+  }
+%>
+<div class="VuetifyApp">
+  <div
+    id="favoritesListPortlet"
+    data-app="true"
+    class="v-application v-application--is-ltr theme--light">
+    <div class="v-application--wrap">
+      <button
+        title="<%=tooltip%>"
+        type="button"
+        class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"
+        onclick="Vue.startApp('PORTLET/social/TopBarFavorites', 'init')">
+        <span class="v-btn__content">
+          <i
+            aria-hidden="true"
+            class="v-icon notranslate fa fa-star theme--light pb-1"
+            style="font-size: 20px;"></i>
+        </span>
+      </button>
+    </div>
+  </div>
+</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,14 @@
     <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>
+    <cache-scope>PRIVATE</cache-scope>
     <supports>
       <mime-type>text/html</mime-type>
     </supports>
@@ -786,6 +786,8 @@
       <name>layout-css-class</name>
       <value>no-layout-style</value>
     </init-param>
+    <expiration-cache>-1</expiration-cache>
+    <cache-scope>PRIVATE</cache-scope>
     <supports>
       <mime-type>text/html</mime-type>
     </supports>
@@ -1019,6 +1021,8 @@
       <name>layout-css-class</name>
       <value>no-layout-style</value>
     </init-param>
+    <expiration-cache>60</expiration-cache>
+    <cache-scope>PRIVATE</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>
                 <%