fix: Apply Custom Styling to the Topbar - MEED-8205 - MIPs#174 (#4390)

Meeds-io · Jan 29, 2025 · 07df558 · 07df558
1 parent 359e92a
commit 07df558
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 16 deletions.
diff --git a/webapp/src/main/webapp/vue-apps/top-bar-logo/components/CompanyName.vue b/webapp/src/main/webapp/vue-apps/top-bar-logo/components/CompanyName.vue
@@ -27,7 +27,7 @@
       :class="$root.displayCompanyLogo && 'ms-4'"
       :aria-label="$t('menu.companyNameTooltip',{0: $root.logoTitle})"
       class="align-self-center brandingContainer">
-      <div class="logoTitle top-bar-text-body text-truncate">
+      <div class="logoTitle text-body menu-text-color font-weight-bold">
         {{ $root.logoTitle }}
       </div>
     </a>

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-logo/components/SiteName.vue b/webapp/src/main/webapp/vue-apps/top-bar-logo/components/SiteName.vue
@@ -26,7 +26,7 @@
       :class="$root.displaySiteLogo && 'ms-4'"
       :title="tooltip"
       class="align-self-center brandingContainer">
-      <div class="siteTitle top-bar-text-body text-truncate">
+      <div class="siteTitle text-body menu-text-color font-weight-bold text-truncate">
         {{ $root.siteTitle }}
       </div>
     </a>

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-logo/components/space/SpaceLogoBanner.vue b/webapp/src/main/webapp/vue-apps/top-bar-logo/components/space/SpaceLogoBanner.vue
@@ -10,7 +10,7 @@
       transition="slide-x-transition"
       max-width="350"
       min-width="300"
-      content-class="no-box-shadow full-height pa-1 mt-6 "
+      content-class="no-box-shadow full-height pa-1 mt-6"
       offset-y>
       <template #activator="{ on, attrs }">
         <v-card
@@ -42,15 +42,15 @@
             :href="$root.spacePortalPath"
             :class="$root.displaySiteLogo && 'ms-4'"
             class="align-self-center brandingContainer space">
-            <div class="logoTitle top-bar-text-body text-truncate">
+            <div class="logoTitle text-body menu-text-color font-weight-bold text-truncate">
               {{ $root.spaceLogoTitle }}
             </div>
           </a>
         </v-card>
       </template>
       <v-card
         v-if="menu"
-        class="top-bar-background"
+        :class="isTopBarElement && 'layout-top-bar' || ''"
         elevation="2">
         <v-list class="pa-0 transparent">
           <v-list-item class="pt-3">
@@ -76,7 +76,7 @@
                 <span>{{ $root.spaceLogoTitle }}</span>
               </v-tooltip>
               <v-list-item-subtitle>
-                <span class="top-bar-text-body">{{ $root.membersNumber }} {{ $t('space.logo.banner.popover.members') }}</span>
+                <span class="text-body">{{ $root.membersNumber }} {{ $t('space.logo.banner.popover.members') }}</span>
               </v-list-item-subtitle>
               <p v-sanitized-html="$root.spaceDescription" class="text-truncate-2 text-caption text--primary font-weight-medium"></p>
             </v-list-item-content>
@@ -89,7 +89,7 @@
                 <v-row no-gutters class="align-center">
                   <v-col
                     cols="6"
-                    class="text-truncate top-bar-text-body text-left">
+                    class="text-truncate text-body text-left">
                     {{ $t('space.logo.banner.popover.managers') }}
                   </v-col>
                   <v-col
@@ -168,6 +168,9 @@ export default {
         canRedactOnSpace: this.$root.canRedactOnSpace,
       };
     },
+    isTopBarElement() {
+      return this.$root.isTopBarElement;
+    }
   },
   created() {
     document.addEventListener('metadata.favorite.updated', this.favoriteUpdated);

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-logo/main.js b/webapp/src/main/webapp/vue-apps/top-bar-logo/main.js
@@ -45,6 +45,7 @@ export function init(params) {
         isSitePage: params.isSitePage,
         siteIcon: params.siteIcon,
         isStandaloneSite: !document.querySelector('#HamburgerNavigationMenu'),
+        isTopBarElement: false
       },
       computed: {
         xl() {
@@ -109,6 +110,9 @@ export function init(params) {
         document.addEventListener('homeLinkUpdated', this.updateUserHome);
         document.addEventListener('sidebar-mode-changed', this.updateSidebarMode);
       },
+      mounted() {
+        this.isTopBarElement = !!this.$el.closest('.layout-top-bar');
+      },
       methods: {
         updateUserHome(event) {
           this.portalPath = event?.detail;

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuItem.vue b/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuItem.vue
@@ -23,7 +23,7 @@
   <v-menu
     v-model="showMenu"
     rounded
-    content-class="topBar-navigation-drop-menu top-bar-background"
+    :content-class="`topBar-navigation-drop-menu ${isTopBarElement && 'layout-top-bar' || ''}`"
     :left="$vuetify.rtl"
     :open-on-hover="isOpenedOnHover"
     bottom
@@ -37,7 +37,7 @@
         :rel="navigationNodeRel"
         :link="hasPage"
         :aria-label="navigation.label"
-        :class="`mx-auto text-break ${notClickable} top-bar-text-body`"
+        :class="`mx-auto text-break ${notClickable}`"
         :value="navigationNodeUri"
         v-on="on"
         v-bind="attrs"
@@ -119,6 +119,9 @@ export default {
     childrenHasPage() {
       return this.checkChildrenHasPage(this.navigation);
     },
+    isTopBarElement() {
+      return this.$root.isTopBarElement;
+    }
   },
   watch: {
     showMenu() {

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuSubItem.vue b/webapp/src/main/webapp/vue-apps/top-bar-menu/components/NavigationMenuSubItem.vue
@@ -50,7 +50,7 @@
             :class="hasPage && ' ' || ' not-clickable '"
             @mouseleave="showMenu = false"
             @mouseover="showMenu = true">
-            <span class="top-bar-text-body">{{ navigation.label }}</span>
+            <span class="text-body">{{ navigation.label }}</span>
           </v-list-item-title>
           <v-list-item-icon
             v-if="hasChildren && childrenHasPage"

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/components/TopBarNavigationMenu.vue b/webapp/src/main/webapp/vue-apps/top-bar-menu/components/TopBarNavigationMenu.vue
@@ -23,11 +23,12 @@
   <v-app :class="componentId" class="topBarMenu">
     <v-footer
       v-if="isMobile && mobileNavigations.length"
-      class="top-bar-background pt-0 pr-0 pl-0 elevation-2"
+      class="pt-0 pr-0 pl-0 elevation-2"
       inset
       fixed>
       <v-tabs
         class="navigation-mobile-menu"
+        :class="isTopBarElement && 'layout-top-bar' || ''"
         v-model="tab"
         color="none"
         optional
@@ -109,6 +110,9 @@ export default {
     baseSiteUri() {
       return `${eXo.env.portal.context}/${this.siteUri}/`;
     },
+    isTopBarElement() {
+      return this.$root.isTopBarElement;
+    }
   },
   watch: {
     isMobile() {

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/components/mobile/NavigationMobileMenuItem.vue b/webapp/src/main/webapp/vue-apps/top-bar-menu/components/mobile/NavigationMobileMenuItem.vue
@@ -26,7 +26,7 @@
     offset-y>
     <template #activator="{ attrs, on }">
       <v-tab
-        class="mx-auto pa-1 text-break top-bar-text-body navigation-mobile-menu-tab"
+        class="mx-auto pa-1 text-break navigation-mobile-menu-tab"
         v-bind="attrs"
         :href="navigationNodeUri"
         :target="navigationNodeTarget"
@@ -61,6 +61,7 @@
     </template>
     <navigation-mobile-menu-sub-item
       v-if="hasChildren"
+      class="transparent"
       :navigation="navigation.children"
       :base-site-uri="baseSiteUri"
       :show-menu="showMenu"

diff --git a/...p/src/main/webapp/vue-apps/top-bar-menu/components/mobile/NavigationMobileMenuSubItem.vue b/...p/src/main/webapp/vue-apps/top-bar-menu/components/mobile/NavigationMobileMenuSubItem.vue
@@ -23,7 +23,7 @@
   <v-bottom-sheet
     v-model="showChildren"
     inset
-    content-class="topBar-navigation-bottom-drop-menu top-bar-background"
+    :content-class="`topBar-navigation-bottom-drop-menu ${isTopBarElement && 'layout-top-bar' || ''}`"
     hide-overlay>
     <v-sheet
       v-if="showChildren"
@@ -54,9 +54,7 @@
               :link="!!nav.pageKey"
               @click="checkLink(nav, $event)">
               <v-list-item-content>
-                <v-list-item-title>
-                  <span class="top-bar-text-body">{{ nav.label }}</span>
-                </v-list-item-title>
+                <v-list-item-title class="text-body" v-text="nav.label" />
               </v-list-item-content>
               <v-list-item-icon
                 v-if="nav.children?.length"
@@ -101,6 +99,11 @@ export default {
     navigationObject: null,
     showChildren: false,
   }),
+  computed: {
+    isTopBarElement() {
+      return this.$root.isTopBarElement;
+    }
+  },
   watch: {
     showMenu(value) {
       this.showChildren = value;

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-menu/main.js b/webapp/src/main/webapp/vue-apps/top-bar-menu/main.js
@@ -46,6 +46,7 @@ export function init(cacheId, parentNodeId) {
       data: {
         cacheId,
         parentNodeId,
+        isTopBarElement: true
       },
       template: `<top-bar-navigation-menu v-cacheable id="${appId}" />`,
       vuetify,