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

This change will adjust the icon sizes and improves the tooltip and performances of page rendering.
Meeds-io · Dec 10, 2024 · 8821534 · 8821534
1 parent ea4da8d
commit 8821534
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/layout-webapp/src/main/webapp/WEB-INF/jsp/siteManagement.jsp b/layout-webapp/src/main/webapp/WEB-INF/jsp/siteManagement.jsp
@@ -1,6 +1,5 @@
 <%@ page import="org.exoplatform.portal.config.UserPortalConfigService" %>
 <%@ page import="org.exoplatform.container.PortalContainer" %>
-
 <%
   PortalContainer portalContainer = PortalContainer.getCurrentInstance(session.getServletContext());
   UserPortalConfigService userPortalConfigService = portalContainer.getComponentInstanceOfType(UserPortalConfigService.class);

diff --git a/layout-webapp/src/main/webapp/WEB-INF/jsp/siteNavigation.jsp b/layout-webapp/src/main/webapp/WEB-INF/jsp/siteNavigation.jsp
@@ -10,11 +10,26 @@
   if (canManageSiteNavigation) {
 %>
 <div class="VuetifyApp">
+  <div data-app="true"
+    class="v-application v-application--is-ltr theme--light"
+    id="siteNavigation">
+    <div class="v-application--wrap d-none d-sm-inline">
+      <button
+        id="topBarSiteNavigation"
+        type="button"
+        role="button"
+        class="ms-5 v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default"
+        title="Site navigation"
+        onclick="Vue.startApp('PORTLET/layout/SiteNavigation', 'init', <%=canManageSiteNavigation%>)">
+        <span class="v-btn__content">
+          <i aria-hidden="true" class="v-icon notranslate fa fa-project-diagram theme--light" style="font-size: 20px;"></i>
+        </span>
+      </button>
+    </div>
+  </div>
   <div id="siteNavigation">
     <script type="text/javascript">
       eXo.env.portal.isAdministrator = <%=isAdministrator%>;
-      eXo.env.portal.canManageSiteNavigation = <%=canManageSiteNavigation%>;
-      require(['PORTLET/layout/SiteNavigation'], app => app.init(<%=canManageSiteNavigation%>));
     </script>
   </div>
 </div>

diff --git a/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigation.vue b/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigation.vue
@@ -33,7 +33,7 @@ export default {
   },
   computed: {
     isMobile() {
-      return this.$vuetify.breakpoint.width < 768 ;
+      return this.$vuetify.breakpoint.width < this.$vuetify.breakpoint.thresholds.sm;
     },
   }
 };

diff --git a/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigationButton.vue b/layout-webapp/src/main/webapp/vue-app/site-navigation/components/SiteNavigationButton.vue
@@ -17,24 +17,21 @@
  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <v-tooltip bottom>
-    <template #activator="{on, bind}">
-      <v-btn
-        id="topBarSiteNavigation"
-        v-on="on"
-        v-bind="bind"
-        :role="'button'"
-        class="ms-5"
-        icon
-        @click="openSiteNavigationDrawer">
-        <v-icon size="20">fa-project-diagram</v-icon>
-      </v-btn>
-    </template>
-    <span>{{ $t('siteNavigation.button.tooltip.label') }}</span>
-  </v-tooltip>
+  <v-btn
+    id="topBarSiteNavigation"
+    :title="$t('siteNavigation.button.tooltip.label')"
+    :role="'button'"
+    class="ms-5"
+    icon
+    @click="openSiteNavigationDrawer">
+    <v-icon size="20">fa-project-diagram</v-icon>
+  </v-btn>
 </template>
 <script>
 export default {
+  mounted() {
+    this.openSiteNavigationDrawer();
+  },
   methods: {
     openSiteNavigationDrawer() {
       document.dispatchEvent(new CustomEvent('open-site-navigation-drawer',{detail: {