feat: Review Site navigation button style - MEED-7543 - Meeds-io/meed…

…s#273 (#223) This change will use the same style for navigation button in top bar as other displayed buttons.
Meeds-io · Sep 25, 2024 · 44855fb · 44855fb
1 parent 3617ada
commit 44855fb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 76 deletions.
diff --git a/...bapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationDrawer.vue b/...bapp/vue-app/common-layout-components/components/site-navigation/SiteNavigationDrawer.vue
@@ -120,7 +120,7 @@ export default {
   methods: {
     open(event) {
       this.siteName = event?.siteName || eXo.env.portal.spaceDisplayName || eXo.env.portal.siteKeyName;
-      this.siteType = event?.siteType || 'PORTAL';
+      this.siteType = event?.siteType || eXo.env.portal.siteKeyType;
       this.siteId = event?.siteId || eXo.env.portal.siteId;
       this.includeGlobal = event?.includeGlobal || false;
       this.getNavigationNodes();

diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteCardMenu.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteCardMenu.vue
@@ -117,23 +117,20 @@ export default {
     displayActionMenu: false,
   }),
   computed: {
-    isDefaultPortalSite() {
-      return this.site.name.toLowerCase() === eXo.env.portal.defaultPortalName.toLowerCase();
+    isMetaSite() {
+      return this.site.name === eXo.env.portal.defaultPortal;
     },
     isGlobalSite() {
-      return this.site.name.toLowerCase() === eXo.env.portal.globalPortalName.toLowerCase();
+      return this.site.name === 'global';
     },
     isGroupSite() {
       return this.site.siteType === 'GROUP';
     },
-    canDelete() {
-      return !(this.isDefaultPortalSite || this.isGlobalSite || this.isGroupSite);
-    },
     isPortalSite() {
       return this.site.siteType === 'PORTAL';
     },
-    canEditLayout() {
-      return !(this.isGlobalSite || this.isGroupSite) && (this.site?.metaSite || !this.site.displayed);
+    canDelete() {
+      return !this.isMetaSite && !this.isGlobalSite && !this.isGroupSite;
     },
     canEditSite() {
       return this.site.canEdit;

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
@@ -18,9 +18,7 @@
 -->
 <template>
   <v-app v-if="canManageSiteNavigation && !isMobile">
-    <site-navigation-button
-      icon-class="text-color"
-      embedded />
+    <site-navigation-button />
     <site-navigation-drawers-actions />
     <layout-analytics application-name="siteNavigation" />
   </v-app>

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
@@ -18,78 +18,31 @@
 -->
 <template>
   <v-tooltip bottom>
-    <template #activator="{ on, attrs }">
-      <v-card
-        :height="embedded && 22 || 'auto'"
-        :class="embedded && 'position-relative mx-2'"
-        class="transparent"
-        flat
-        v-bind="attrs"
-        v-on="on">
-        <v-btn
-          :aria-label="$t('siteNavigation.button.tooltip.label')"
-          :disabled="disabled"
-          :class="embedded && 'absolute-vertical-center mt-1'"
-          role="button"
-          outlined
-          icon
-          @click="openSiteNavigationDrawer">
-          <v-icon
-            :color="iconColor"
-            :class="iconClass"
-            size="16">
-            fas fa-sitemap
-          </v-icon>
-        </v-btn>
-      </v-card>
+    <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-sitemap</v-icon>
+      </v-btn>
     </template>
     <span>{{ $t('siteNavigation.button.tooltip.label') }}</span>
   </v-tooltip>
 </template>
-
 <script>
 export default {
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    embedded: {
-      type: Boolean,
-      default: false,
-    },
-    iconClass: {
-      type: String,
-      default: null,
-    },
-    iconColor: {
-      type: String,
-      default: null,
-    },
-    siteName: {
-      type: String,
-      default: null,
-    },
-    siteType: {
-      type: String,
-      default: null,
-    },
-    siteId: {
-      type: String,
-      default: null,
-    },
-  },
   methods: {
     openSiteNavigationDrawer() {
-      let params;
-      if (this.siteName && this.siteType) {
-        params = {
-          siteName: this.siteName,
-          siteType: this.siteType,
-          siteId: this.siteId,
-        };
-      }
-      document.dispatchEvent(new CustomEvent('open-site-navigation-drawer',{detail: params}));
+      document.dispatchEvent(new CustomEvent('open-site-navigation-drawer',{detail: {
+        siteName: this.siteName,
+        siteType: this.siteType,
+        siteId: this.siteId,
+        includeGlobal: eXo.env.portal.metaPortalName === eXo.env.portal.siteKeyName && eXo.env.portal.siteKeyType === 'portal',
+      }}));
     }
   }
 };