feat: Review Topbar Admin Options - MEED-7891 - Meeds-io/MIPs#159 (#4223

) This change will allow to display Site/Space icons and Company Logo all time by changing Admin options labels and behabior in UI.
Meeds-io · Dec 3, 2024 · b070c6f · b070c6f
1 parent fe5e959
commit b070c6f
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 38 deletions.
diff --git a/webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties b/webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties
@@ -176,9 +176,12 @@ generalSettings.defaultLanguageSettingError=Error while saving default language
 generalSettings.navigationCharacteristics=Topbar & Sidebar
 generalSettings.subtitle.navigationCharacteristics=Customize the navigation experience
 generalSettings.topbar={0}Topbar{1}
-generalSettings.brandingInfos=Branding Infos
-generalSettings.displayCompanyName=Company Name
-generalSettings.displaySiteName=Site Name
+generalSettings.brandingInfos=Platform Infos
+generalSettings.displayCompanyName=When the sidebar is hidden
+generalSettings.displayCompanyName.choice1=Display Logo & Name
+generalSettings.displayCompanyName.choice2=Only the Logo
+generalSettings.displaySiteName=Remind the site or space name
+generalSettings.displaySiteName.label=Display Name
 generalSettings.topbarOptions=Topbar Options
 generalSettings.header.topbarApplicationName=Name
 generalSettings.header.topbarApplicationDescription=Description

diff --git a/...ebapp/vue-apps/general-settings/components/navigation/topbar/NavigationSettingsTopbar.vue b/...ebapp/vue-apps/general-settings/components/navigation/topbar/NavigationSettingsTopbar.vue
@@ -51,19 +51,42 @@
       :settings="settings"
       class="elevation-3 mb-6 mt-4" />
     <!-- Branding Infos -->
-    <div class="font-weight-bold mb-2">
+    <div class="font-weight-bold mb-4">
       {{ $t('generalSettings.brandingInfos') }}
     </div>
-    <v-switch
+    <div class="mb-2">
+      {{ $t('generalSettings.displayCompanyName') }}
+    </div>
+    <v-radio-group
       v-model="topbarSettings.displayCompanyName"
-      :label="$t('generalSettings.displayCompanyName')"
-      class="mt-0 mb-2 width-fit-content" />
+      class="my-0 ms-n1 text-no-wrap width-fit-content"
+      mandatory>
+      <v-radio
+        :value="true"
+        class="mx-0 mt-0 mb-1">
+        <template #label>
+          <span class="text-body">{{ $t('generalSettings.displayCompanyName.choice1') }}</span>
+        </template>
+      </v-radio>
+      <v-radio
+        :value="false"
+        class="mx-0 mt-0 mb-1">
+        <template #label>
+          <span class="text-body">{{ $t('generalSettings.displayCompanyName.choice2') }}</span>
+        </template>
+      </v-radio>
+    </v-radio-group>
+
+    <div class="mb-2 mt-4">
+      {{ $t('generalSettings.displaySiteName') }}
+    </div>
     <v-switch
       v-model="topbarSettings.displaySiteName"
-      :label="$t('generalSettings.displaySiteName')"
-      class="mt-0 mb-4 width-fit-content" />
+      :label="$t('generalSettings.displaySiteName.label')"
+      class="my-0 width-fit-content" />
+
     <!-- Topbar Options -->
-    <div class="font-weight-bold mb-2">
+    <div class="font-weight-bold mb-2 mt-4">
       {{ $t('generalSettings.topbarOptions') }}
     </div>
     <v-data-table

diff --git a/...ue-apps/general-settings/components/navigation/topbar/NavigationSettingsTopbarPreview.vue b/...ue-apps/general-settings/components/navigation/topbar/NavigationSettingsTopbarPreview.vue
@@ -23,9 +23,9 @@
   <v-card
     class="d-flex align-center px-4"
     height="56">
-    <div v-if="displayCompanyName || !displaySiteName" class="d-flex">
+    <div class="d-flex">
       <v-avatar
-        class="me-3 flex-shrink-0"
+        class="flex-shrink-0"
         size="36"
         width="auto"
         tile>
@@ -35,22 +35,22 @@
           width="auto"
           alt="">
       </v-avatar>
-      <div v-if="displayCompanyName" class="align-self-center d-none d-sm-flex">
+      <div v-if="displayCompanyName" class="align-self-center d-none d-sm-flex ms-4">
         <div class="logoTitle text-body font-weight-bold menu-text-color text-truncate">
           {{ $root.branding?.companyName }}
         </div>
       </div>
     </div>
-    <div v-if="displaySiteName && displayCompanyName" class="mx-4">
+    <div class="mx-4">
       <v-icon>
         {{ $vuetify.rtl && 'fa-chevron-left' || 'fa-chevron-right' }}
       </v-icon>
     </div>
-    <div v-if="displaySiteName" class="d-flex">
-      <div class="me-3">
+    <div class="d-flex">
+      <div>
         <v-icon size="33">{{ firstSidebarSiteIcon }}</v-icon>
       </div>
-      <div class="ps-2 align-self-center d-none d-sm-flex">
+      <div v-if="displaySiteName" class="ps-2 ms-3 align-self-center d-none d-sm-flex">
         <div class="logoTitle text-body font-weight-bold menu-text-color text-truncate">
           {{ firstSidebarSiteName }}
         </div>

diff --git a/webapp/src/main/webapp/vue-apps/top-bar-logo/components/SiteName.vue b/webapp/src/main/webapp/vue-apps/top-bar-logo/components/SiteName.vue
@@ -5,13 +5,20 @@
       v-if="$root.displaySiteLogo"
       :href="$root.siteHomePath"
       :aria-label="$t('space.avatar.href.title',{0: $root.logoTitle})">
-      <v-list-item-avatar 
-        id="UserHomePortalLink"
-        size="36"
-        class="ma-0"
-        tile>
-        <v-icon size="28">{{ $root.siteIcon || 'fa-folder' }}</v-icon>
-      </v-list-item-avatar>
+      <v-tooltip :disabled="$root.displaySiteTitle" bottom>
+        <template #activator="{on, attrs}">
+          <v-list-item-avatar
+            v-on="on"
+            v-bind="attrs"
+            id="UserHomePortalLink"
+            size="36"
+            class="ma-0"
+            tile>
+            <v-icon size="28">{{ $root.siteIcon || 'fa-folder' }}</v-icon>
+          </v-list-item-avatar>
+        </template>
+        {{ $root.siteTitle }}
+      </v-tooltip>
     </a>
     <a
       v-if="$root.displaySiteTitle"

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
@@ -72,18 +72,8 @@ export function init(params) {
             return this.sidebarMode;
           }
         },
-        displayCompany() {
-          return this.displayCompanyLogo || this.displayCompanyTitle;
-        },
         displayCompanyLogo() {
-          return this.isStandaloneSite
-            || (
-              (this.mdAndUp || !this.displaySite)
-              && (
-                (this.displayCompanyName && this.sidebarModeDisplay === 'HIDDEN') ||
-                (this.sidebarModeDisplay === 'HIDDEN' && !this.displaySite)
-              )
-            );
+          return this.isStandaloneSite || this.sidebarModeDisplay === 'HIDDEN';
         },
         displayCompanyTitle() {
           return this.isStandaloneSite
@@ -94,8 +84,8 @@ export function init(params) {
                 && (this.sidebarModeDisplay === 'HIDDEN' || this.sidebarModeDisplay === 'ICON' || !this.displaySite)
             );
         },
-        displaySite() {
-          return this.displaySiteLogo || this.displaySiteTitle;
+        displayCompany() {
+          return this.displayCompanyLogo || this.displayCompanyTitle;
         },
         displaySiteTitle() {
           return this.displaySiteName
@@ -106,7 +96,10 @@ export function init(params) {
             );
         },
         displaySiteLogo() {
-          return this.displaySiteName && (this.displaySiteTitle || this.spaceLogoPath);
+          return this.siteTitle || this.spaceLogoPath;
+        },
+        displaySite() {
+          return this.displaySiteLogo || this.displaySiteTitle;
         },
       },
       created() {