fix: Fix spaces Administration Components Style - MEED-5311 - Meeds-i…

…o/MIPs#131 This change will fix Spaces Administration Navigation Button style and tooltip.
Meeds-io · May 3, 2024 · c4366fe · c4366fe
1 parent dfae47b
commit c4366fe
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 22 deletions.
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/dialog/EditPortletDialog.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/dialog/EditPortletDialog.vue
@@ -25,7 +25,7 @@
     content-class="uiPopup full-width full-height"
     persistent
     max-width="100vw">
-    <v-card flat>
+    <v-card class="full-height full-width" flat>
       <v-flex class="ms-5 me-0 drawerHeader flex-grow-0">
         <v-list-item class="pe-0 ps-1">
           <v-list-item-content class="drawerTitle align-start text-header-title text-truncate">

diff --git a/...-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/EditApplicationDrawer.vue b/...-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/EditApplicationDrawer.vue
@@ -303,11 +303,14 @@ export default {
     applicationId() {
       return this.container?.children?.[0]?.storageId || this.container?.storageId;
     },
-    applicationCategory() {
-      return this.applicationTitle && this.$root.applicationCategories?.find?.(c => c?.applications?.find?.(a => a?.displayName === this.applicationTitle));
+    applicationContentId() {
+      return this.container?.children?.[0]?.contentId || this.container?.contentId;
     },
     application() {
-      return this.applicationCategory?.applications?.find?.(a => a?.displayName === this.applicationTitle);
+      return this.$root.allApplications?.find?.(a => a?.contentId === this.applicationContentId);
+    },
+    applicationCategory() {
+      return this.applicationTitle && this.$root.applicationCategories?.find?.(c => c?.applications?.find?.(a => a?.displayName === this.applicationTitle));
     },
     supportedModes() {
       return this.application?.supportedModes || [];

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/main.js b/layout-webapp/src/main/webapp/vue-app/layout-editor/main.js
@@ -54,6 +54,7 @@ export function init() {
           hoveredSection: null,
           hoveredApplication: null,
           applicationCategories: null,
+          allApplications: null,
           branding: null,
           displayMode: 'desktop',
           layout: null,
@@ -134,6 +135,8 @@ export function init() {
           document.addEventListener('drawerClosed', this.setDrawerClosed);
           this.$applicationRegistryService.getCategories('supportedModes')
             .then(categories => this.applicationCategories = categories);
+          this.$applicationRegistryService.getApplications('supportedModes')
+            .then(applications => this.allApplications = applications);
           this.$brandingService.getBrandingInformation()
             .then(data => this.branding = data);
         },

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
@@ -19,7 +19,8 @@
 <template>
   <v-app v-if="canManageSiteNavigation && !isMobile">
     <site-navigation-button
-      icon-class="text-color" />
+      icon-class="text-color"
+      embedded />
     <site-navigation-drawers-actions />
   </v-app>
 </template>

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
@@ -20,15 +20,16 @@
   <v-tooltip bottom>
     <template #activator="{ on, attrs }">
       <v-card
-        v-on="on"
+        :height="embedded && 22 || 'auto'"
+        :class="embedded && 'position-relative mx-2'"
+        class="transparent"
+        flat
         v-bind="attrs"
-        class="mx-2 position-relative"
-        height="22"
-        flat>
+        v-on="on">
         <v-btn
           :aria-label="$t('siteNavigation.button.tooltip.label')"
           :disabled="disabled"
-          class="absolute-vertical-center mt-1"
+          :class="embedded && 'absolute-vertical-center mt-1'"
           role="button"
           outlined
           icon
@@ -53,6 +54,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    embedded: {
+      type: Boolean,
+      default: false,
+    },
     iconClass: {
       type: String,
       default: null,

diff --git a/layout-webapp/src/main/webapp/vue-app/site-navigation/main.js b/layout-webapp/src/main/webapp/vue-app/site-navigation/main.js
@@ -48,18 +48,18 @@ const lang = eXo && eXo.env.portal.language || 'en';
 
 //should expose the locale ressources as REST API
 const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.portlet.SiteNavigation-${lang}.json`;
+const i18nPromise = exoi18n.loadLanguageAsync(lang, url);
 
 export function init(canManageSiteNavigation) {
-  exoi18n.loadLanguageAsync(lang, url)
-    .then(i18n => {
-      // init Vue app when locale ressources are ready
-      Vue.createApp({
-        template: `<site-navigation id="${appId}" :can-manage-site-navigation="${canManageSiteNavigation}"/>`,
-        vuetify: Vue.prototype.vuetifyOptions,
-        i18n,
-        data: () => ({
-          pageTemplates: null,
-        }),
-      }, `#${appId}`, 'site-navigation');
-    });
+  i18nPromise.then(i18n => {
+    // init Vue app when locale ressources are ready
+    Vue.createApp({
+      template: `<site-navigation id="${appId}" :can-manage-site-navigation="${canManageSiteNavigation}"/>`,
+      vuetify: Vue.prototype.vuetifyOptions,
+      i18n,
+      data: () => ({
+        pageTemplates: null,
+      }),
+    }, `#${appId}`, 'site-navigation');
+  });
 }