From 96cc34d9d4255ca9639b953a57d16db5df9b314d Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Tue, 3 Dec 2024 14:34:10 +0100
Subject: [PATCH] feat: Display Full Company Name in Standalone Sites
 independently from Topbar Settings - MEED-7889 - Meeds-io/MIPs#159 (#4220)

This change will ensure to display full company name and logo in
standalone sites independently from what is configured for shared layout
based sites.
---
 .../portlet/GeneralSettings_en.properties     |  9 +++++-
 .../topbar/NavigationSettingsTopbar.vue       | 30 ++++++++++++++++---
 .../components/list/SidebarListHeader.vue     |  2 +-
 .../components/SpaceFormInviteEmailDrawer.vue |  1 -
 .../top-bar-logo/components/CompanyName.vue   |  2 +-
 .../components/space/SpaceLogoBanner.vue      |  2 +-
 .../main/webapp/vue-apps/top-bar-logo/main.js | 14 +++++----
 7 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties b/webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties
index 9212bfc0c80..03d39ad8124 100644
--- a/webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties
+++ b/webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties
@@ -175,7 +175,7 @@ generalSettings.defaultLanguageSettingError=Error while saving default language
 
 generalSettings.navigationCharacteristics=Topbar & Sidebar
 generalSettings.subtitle.navigationCharacteristics=Customize the navigation experience
-generalSettings.topbar=Topbar
+generalSettings.topbar={0}Topbar{1}
 generalSettings.brandingInfos=Branding Infos
 generalSettings.displayCompanyName=Company Name
 generalSettings.displaySiteName=Site Name
@@ -260,3 +260,10 @@ generalSettings.sidebar.linkDescriptionPlaceHolder=Add a description to display
 generalSettings.sidebar.linkDescriptionDrawerTitle=Add the description translations
 generalSettings.sidebar.invalidLink=Invalid link
 generalSettings.sidebar.exceedsMaxLength=Input exceeds max length
+generalSettings.topbar.helpTooltip=What can I customize?
+generalSettings.topbar.helpDescription1=Below, find options you can customize for the topbar.
+generalSettings.topbar.helpDescription2=FYI, public site topbar will not get those customization.
+generalSettings.topbar.helpDescription3=- Decide to display platform logo and/or name when the menu is hidden
+generalSettings.topbar.helpDescription4=- Hide or not the site name or the space name. Icon or logo will be displayed no matter you decided to hide the name
+generalSettings.topbar.helpDescription5=- Identify which options can be listed for users in the topbar
+generalSettings.topbar.helpDescription6=- Precise which one can be accessed using a mobile device
diff --git a/webapp/src/main/webapp/vue-apps/general-settings/components/navigation/topbar/NavigationSettingsTopbar.vue b/webapp/src/main/webapp/vue-apps/general-settings/components/navigation/topbar/NavigationSettingsTopbar.vue
index 7a6900997c3..512b6a58e83 100644
--- a/webapp/src/main/webapp/vue-apps/general-settings/components/navigation/topbar/NavigationSettingsTopbar.vue
+++ b/webapp/src/main/webapp/vue-apps/general-settings/components/navigation/topbar/NavigationSettingsTopbar.vue
@@ -21,13 +21,35 @@
 -->
 <template>
   <div v-if="topbarSettings">
-    <div class="text-header mb-4">
-      {{ $t('generalSettings.topbar') }}
-    </div>
+    <help-label
+      label="generalSettings.topbar"
+      label-class="text-header"
+      tooltip="generalSettings.topbar.helpTooltip">
+      <template slot="helpContent">
+        <p>
+          {{ $t('generalSettings.topbar.helpDescription1') }}
+        </p>
+        <p>
+          {{ $t('generalSettings.topbar.helpDescription2') }}
+        </p>
+        <div>
+          {{ $t('generalSettings.topbar.helpDescription3') }}
+        </div>
+        <div>
+          {{ $t('generalSettings.topbar.helpDescription4') }}
+        </div>
+        <div>
+          {{ $t('generalSettings.topbar.helpDescription5') }}
+        </div>
+        <div>
+          {{ $t('generalSettings.topbar.helpDescription6') }}
+        </div>
+      </template>
+    </help-label>
     <!-- Preview -->
     <portal-general-settings-navigation-settings-topbar-preview
       :settings="settings"
-      class="elevation-3 mb-6" />
+      class="elevation-3 mb-6 mt-4" />
     <!-- Branding Infos -->
     <div class="font-weight-bold mb-2">
       {{ $t('generalSettings.brandingInfos') }}
diff --git a/webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListHeader.vue b/webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListHeader.vue
index c14b9fa5ad7..6dc77594058 100644
--- a/webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListHeader.vue
+++ b/webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListHeader.vue
@@ -41,7 +41,7 @@
           :alt="companyName"
           height="36"
           width="auto"
-          class="object-fit-contain" />
+          class="object-fit-contain">
       </v-list-item-avatar>
       <v-list-item-content>
         <v-list-item-title v-if="$root.expand" class="font-weight-bold menu-text-color text-truncate">
diff --git a/webapp/src/main/webapp/vue-apps/space-form/components/SpaceFormInviteEmailDrawer.vue b/webapp/src/main/webapp/vue-apps/space-form/components/SpaceFormInviteEmailDrawer.vue
index c26050809bb..94070788890 100644
--- a/webapp/src/main/webapp/vue-apps/space-form/components/SpaceFormInviteEmailDrawer.vue
+++ b/webapp/src/main/webapp/vue-apps/space-form/components/SpaceFormInviteEmailDrawer.vue
@@ -158,7 +158,6 @@ export default {
     apply() {
       this.$emit('input', this.emails);
       if (this.invitedMembers?.length) {
-        console.warn('this.invitedMembers', this.invitedMembers);
         this.$emit('update-members', this.invitedMembers);
       }
       this.close();
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
index b1b732aa5f6..33e2a1e9c46 100644
--- 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
@@ -18,7 +18,7 @@
           :alt="$t('space.avatar.img.alt',{0: $root.logoTitle})"
           height="36"
           width="auto"
-          class="object-fit-contain" />
+          class="object-fit-contain">
       </v-list-item-avatar>
     </a>
     <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
index 69753787735..9592a730a14 100644
--- 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
@@ -34,7 +34,7 @@
                 :alt="$t('space.avatar.img.alt',{0: $root.spaceLogoTitle})"
                 height="28"
                 width="auto"
-                class="object-fit-contain" />
+                class="object-fit-contain">
             </v-list-item-avatar>
           </a>
           <a
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
index b401445b6fc..a7a977d4634 100644
--- a/webapp/src/main/webapp/vue-apps/top-bar-logo/main.js
+++ b/webapp/src/main/webapp/vue-apps/top-bar-logo/main.js
@@ -74,7 +74,7 @@ export function init(params) {
           return this.displayCompanyLogo || this.displayCompanyTitle;
         },
         displayCompanyLogo() {
-          return (this.displayCompanyName && this.isStandaloneSite)
+          return this.isStandaloneSite
             || (
               (this.mdAndUp || !this.displaySite)
               && (
@@ -84,11 +84,13 @@ export function init(params) {
             );
         },
         displayCompanyTitle() {
-          return this.displayCompanyName
-            && this.logoTitle
-            && this.portalPath
-            && (this.xl || (this.mdAndUp && !this.displaySite))
-            && (this.sidebarModeDisplay === 'HIDDEN' || this.sidebarModeDisplay === 'ICON' || !this.displaySite);
+          return this.isStandaloneSite
+            || (this.displayCompanyName
+                && this.logoTitle
+                && this.portalPath
+                && (this.xl || (this.mdAndUp && !this.displaySite))
+                && (this.sidebarModeDisplay === 'HIDDEN' || this.sidebarModeDisplay === 'ICON' || !this.displaySite)
+            );
         },
         displaySite() {
           return this.displaySiteLogo || this.displaySiteTitle;