feat: Display Full Company Name in Standalone Sites independently fro…

…m 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.

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

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') }}

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">

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();

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

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

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;