fix: Hide User Setting Applications when advanced settings displayed - MEED-7311 - Meeds-io/meeds#2297 (#3964)

Prior to this change, when displaying a window detail in user settings,
like notification settings, an extra top margin is displayed. This
change ensures to hide all other portlets when a user setting widget is
displayed.

Author: boubaker

webapp/portlet/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingNotifications.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app v-if="displayed">
+  <v-app>
     <user-setting-notifications-window
       v-if="displayDetails"
       :settings="notificationSettings"
@@ -85,6 +85,14 @@ export default {
     displayDetails: false,
     displayed: true,
   }),
+  watch: {
+    displayed() {
+      if (this.displayed) {
+        this.$nextTick().then(() => this.$root.$emit('application-cache'));
+      }
+      this.$root.$updateApplicationVisibility(this.displayed);
+    },
+  },
   created() {
     document.addEventListener('hideSettingsApps', (event) => {
       if (event && event.detail && this.id !== event.detail) {
@@ -101,6 +109,9 @@ export default {
         }
       });
   },
+  mounted() {
+    this.$root.$updateApplicationVisibility(this.displayed);
+  },
   methods: {
     refresh() {
       return fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/notifications/settings/${eXo.env.portal.userName}`, {

webapp/portlet/src/main/webapp/vue-apps/user-setting-language/components/UserSettingLanguage.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app v-if="displayed">
+  <v-app>
     <div class="application-body">
       <v-list two-line>
         <v-list-item>
@@ -50,6 +50,14 @@ export default {
       return language && language.text;
     },
   },
+  watch: {
+    displayed() {
+      if (this.displayed) {
+        this.$nextTick().then(() => this.$root.$emit('application-cache'));
+      }
+      this.$root.$updateApplicationVisibility(this.displayed);
+    },
+  },
   created() {
     this.languages = this.languages.sort((a, b) => a.text.localeCompare(b.text));
     document.addEventListener('hideSettingsApps', (event) => {
@@ -61,6 +69,7 @@ export default {
   },
   mounted() {
     this.$nextTick().then(() => this.$root.$applicationLoaded());
+    this.$root.$updateApplicationVisibility(this.displayed);
   },
   methods: {
     openDrawer() {

webapp/portlet/src/main/webapp/vue-apps/user-setting-security/components/UserSettingSecurity.vue

@@ -1,38 +1,36 @@
 <template>
   <v-app>
-    <template v-if="displayed">
-      <user-setting-security-window
-        v-if="displayDetails"
-        @back="closeSecurityDetail" />
-      <v-card
-        v-else
-        class="application-body"
-        flat>
-        <v-list>
-          <v-list-item>
-            <v-list-item-content>
-              <v-list-item-title class="text-title">
-                {{ $t('UserSettings.security') }}
-              </v-list-item-title>
-            </v-list-item-content>
-            <v-list-item-action>
-              <span
-                :title="allowedToChangePassword ? $t('UserSettings.button.tooltip.enabled') : $t('UserSettings.button.tooltip.disabled')">
-                <v-btn
-                  :disabled="!allowedToChangePassword"
-                  small
-                  icon
-                  @click="openSecurityDetail">
-                  <v-icon size="24" class="icon-default-color">
-                    {{ $vuetify.rtl && 'fa-caret-left' || 'fa-caret-right' }}
-                  </v-icon>
-                </v-btn>
-              </span>
-            </v-list-item-action>
-          </v-list-item>
-        </v-list>
-      </v-card>
-    </template>
+    <user-setting-security-window
+      v-if="displayDetails"
+      @back="closeSecurityDetail" />
+    <v-card
+      v-else
+      class="application-body"
+      flat>
+      <v-list>
+        <v-list-item>
+          <v-list-item-content>
+            <v-list-item-title class="text-title">
+              {{ $t('UserSettings.security') }}
+            </v-list-item-title>
+          </v-list-item-content>
+          <v-list-item-action>
+            <span
+              :title="allowedToChangePassword ? $t('UserSettings.button.tooltip.enabled') : $t('UserSettings.button.tooltip.disabled')">
+              <v-btn
+                :disabled="!allowedToChangePassword"
+                small
+                icon
+                @click="openSecurityDetail">
+                <v-icon size="24" class="icon-default-color">
+                  {{ $vuetify.rtl && 'fa-caret-left' || 'fa-caret-right' }}
+                </v-icon>
+              </v-btn>
+            </span>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+    </v-card>
   </v-app>
 </template>
 
@@ -48,7 +46,10 @@ export default {
   }),
   watch: {
     displayed() {
-      this.$nextTick().then(() => this.$root.$emit('application-cache'));
+      if (this.displayed) {
+        this.$nextTick().then(() => this.$root.$emit('application-cache'));
+      }
+      this.$root.$updateApplicationVisibility(this.displayed);
     },
   },
   created() {
@@ -65,6 +66,7 @@ export default {
   },
   mounted() {
     this.$nextTick().then(() => this.$root.$applicationLoaded());
+    this.$root.$updateApplicationVisibility(this.displayed);
   },
   methods: {
     openSecurityDetail() {