Add options for showing title plus app switcher - experimental (#3700)

SAP · Apr 19, 2024 · 33b4016 · 33b4016
1 parent 14c43a2
commit 33b4016
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 7 deletions.
diff --git a/core/src/navigation/LogoTitle.svelte b/core/src/navigation/LogoTitle.svelte
@@ -19,6 +19,8 @@
   export let hasLogo;
   export let title;
   export let hasApps;
+  export let keepMainTitle;
+  export let showSubTitle = true;
   export let dropDownStates = {};
   export let showMainAppEntry;
   export let selectedItem;
@@ -59,6 +61,8 @@
           defaultSubTitle,
           showMainAppEntry,
           hasApps,
+          keepMainTitle,
+          showSubTitle,
           hasLogo,
           logo,
         };
@@ -90,6 +94,10 @@
               showMainAppEntry = obj.showMainAppEntry;
             } else if (prop === 'hasApps') {
               hasApps = obj.hasApps;
+            } else if (prop === 'keepMainTitle') {
+              keepMainTitle = obj.keepMainTitle;
+            } else if (prop === 'showSubTitle') {
+              showSubTitle = obj.showSubTitle;
             } else if (prop === 'hasLogo') {
               hasLogo = obj.hasLogo;
             }
@@ -209,10 +217,10 @@
   </span>
 {/if}
 {#if title}
-  {#if !hasApps}
+  {#if !hasApps || keepMainTitle}
     {#if addNavHrefForAnchor}
       <a
-        class="fd-shellbar__title lui-shellbar-single-app-title"
+        class="fd-shellbar__title lui-shellbar-single-app-title {hasApps && 'lui-has-apps'}"
         data-testid="luigi-topnav-title"
         on:click={(event) => {
           NavigationHelpers.handleNavAnchorClickedWithoutMetaKey(event) &&
@@ -221,7 +229,7 @@
         href="/"
       >
         <span>
-          {$getTranslation(title)}
+          {$getTranslation(keepMainTitle ? defaultTitle : title)}
         </span>
       </a>
     {:else}
@@ -232,11 +240,13 @@
         on:click={() => goTo('/')}
       >
         <span>
-          {$getTranslation(title)}
+          {$getTranslation(keepMainTitle ? defaultTitle : title)}
         </span>
       </span>
-    {/if}{:else}
-    <div class="fd-popover">
+    {/if}
+  {/if}
+  {#if hasApps}
+    <div class="fd-popover {keepMainTitle && 'lui-keep-main'}">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div class="fd-popover__control" on:click|stopPropagation={() => {}}>
         {#if addNavHrefForAnchor}
@@ -374,7 +384,7 @@
       </div>
     </div>
   {/if}
-  {#if subTitle}
+  {#if subTitle && showSubTitle}
     <div class="fd-shellbar__subtitle">{$getTranslation(subTitle)}</div>
   {/if}{/if}
 

diff --git a/core/src/navigation/services/header.js b/core/src/navigation/services/header.js
@@ -10,6 +10,10 @@ export const processHeaderSettings = component => {
         component.set({ appSwitcherItems: appSwitcher.items });
         component.set({ showMainAppEntry: appSwitcher.showMainAppEntry });
         component.set({ itemRenderer: appSwitcher.itemRenderer });
+        if (GenericHelpers.requestExperimentalFeature('btpToolLayout')) {
+          component.set({ keepMainTitle: appSwitcher.keepMainTitle });
+          component.set({ showSubTitle: appSwitcher.showSubTitle !== false });
+        }
       }
       component.set({
         hasApps:

diff --git a/core/src/styles/btp_tool_layout.scss b/core/src/styles/btp_tool_layout.scss
@@ -19,3 +19,22 @@
 body:not(.semiCollapsed) .fd-tool-layout.fd-tool-layout .fd-app__sidebar.fd-app__sidebar .fd-side-nav.lui-nav-header-visible {
   top: calc(3.25rem + 0.5rem);
 }
+
+.btp-layout {
+  .fd-shellbar__title.lui-has-apps > span::after {
+    content: "\23D0";
+    color: var(--sapGroup_TitleBorderColor);
+    position: absolute;
+    top: -.5em;
+    padding-left: 0.3em;
+    font-size: 2em;
+  }
+
+  .fd-shellbar__group--product > .fd-shellbar__title.lui-has-apps {
+    padding-right: 1.25rem;
+  }
+
+  .fd-shellbar__group--product > .lui-keep-main {
+    margin-left: -.5rem;
+  }
+}
diff --git a/core/src/styles/fd_horizon.scss b/core/src/styles/fd_horizon.scss
@@ -9,6 +9,11 @@
   --luigi__shellbar--height: 3.5rem;
 }
 
+.fd-shellbar .fd-shellbar__group .fd-shellbar__button:hover, 
+.fd-shellbar .fd-shellbar__group .fd-shellbar__button.is-hover {
+  box-shadow: var(--sapContent_Interaction_Shadow);
+}
+
 @font-face {
   font-family: 'SAP-icons';
   src: url('@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff') format('woff');