product switcher header to fiori3 concept

core/examples/luigi-sample-angular/src/luigi-config/extended/navigation.js

@@ -236,7 +236,8 @@ class Navigation {
   getProductSwitcherItems = () => {
     const items = [
       {
-        icon: 'https://sap.github.io/fundamental/images/products/06.png',
+        icon:
+          'https://pbs.twimg.com/profile_images/1143452953858183170/QLk-HGmK_bigger.png',
         label: 'hybris',
         externalLink: {
           url: 'https://www.hybris.com',
@@ -246,21 +247,24 @@ class Navigation {
     ];
     if (projectExists('pr1')) {
       items.push({
-        icon: 'https://sap.github.io/fundamental/images/products/06.png',
+        icon:
+          'https://pbs.twimg.com/profile_images/1143452953858183170/QLk-HGmK_bigger.png',
         label: 'Project 1',
         link: '/projects/pr1'
       });
     }
     if (projectExists('pr2')) {
       items.push({
-        icon: 'https://sap.github.io/fundamental/images/products/06.png',
+        icon:
+          'https://pbs.twimg.com/profile_images/1143452953858183170/QLk-HGmK_bigger.png',
         label: 'Project 2',
         link: '/projects/pr2'
       });
     }
     if (projectExists('pr3')) {
       items.push({
-        icon: 'https://sap.github.io/fundamental/images/products/06.png',
+        icon:
+          'https://pbs.twimg.com/profile_images/1143452953858183170/QLk-HGmK_bigger.png',
         label: 'Project 3',
         link: '/projects/pr3'
       });

core/src/TopNavDropDown.html

@@ -1,4 +1,4 @@
-
+<svelte:window on:resize="setViewportHeightVariable()"/>
 {#if !isMobile}
 <nav class="fd-menu">
   <ul class="fd-menu__list fd-menu__list--top">
@@ -77,6 +77,9 @@ <h5 class="fd-action-bar__title fd-has-type-1">{node.label}</h5>
   import { NavigationHelpers } from './utilities/helpers';
   import { RoutingHelpers } from './utilities/helpers';
   export default {
+    async oncreate() {
+      this.setViewportHeightVariable();
+    },
     async onupdate({ changed, current, previous }) {
       const currentNode = this.get().node;
       let children = this.get().children;
@@ -105,6 +108,12 @@ <h5 class="fd-action-bar__title fd-has-type-1">{node.label}</h5>
       },
       closeSubNav() {
         this.fire('close');
+      },
+      setViewportHeightVariable() {
+        // get the viewport height and multiple it by 1% to get a value for a vh unit
+        let vh = window.innerHeight * 0.01;
+        // set the value in the --vh custom property to the root of the document
+        document.documentElement.style.setProperty('--vh', `${vh}px`);
       }
     },
     helpers: {
@@ -118,6 +127,17 @@ <h5 class="fd-action-bar__title fd-has-type-1">{node.label}</h5>
   };
 </script>
 <style type="text/scss">
+  $topNavHeight: 48px;
+  $productSwitcherHeight: 64px;
+  .fd-popover__body {
+    overflow: auto;
+    max-height: calc(100vh - 50px);
+    max-height: calc(var(--vh, 1vh) * 100 - 50px);
+  }
+  .fd-product-switcher {
+    position: relative;
+    display: block;
+  }
   .fd-product-switcher__product-icon > img {
     max-height: 40px;
   }
@@ -136,17 +156,22 @@ <h5 class="fd-action-bar__title fd-has-type-1">{node.label}</h5>
     }
   }
 
-  @media (max-width: 600px) {
-    .y-full-width-list__item {
-      padding: 10px 5px !important;
+  @media (max-width: 1023px) {
+    .y-full-width-list {
+      &__icon {
+        img {
+          width: 16px;
+          vertical-align: top;
+        }
+      }
     }
   }
 
   .y-fd-modal--full-screen {
     z-index: 1000;
     position: fixed;
     box-sizing: border-box;
-    top: 0px;
+    top: $topNavHeight;
     left: 0;
     margin: auto auto;
 
@@ -175,7 +200,10 @@ <h5 class="fd-action-bar__title fd-has-type-1">{node.label}</h5>
       }
     }
     .fd-modal__body {
-      max-height: none;
+      max-height: calc(100vh - #{$topNavHeight} - #{$productSwitcherHeight});
+      max-height: calc(
+        var(--vh, 1vh) * 100 - #{$topNavHeight} - #{$productSwitcherHeight}
+      );
       padding: 0;
     }
 
@@ -201,9 +229,8 @@ <h5 class="fd-action-bar__title fd-has-type-1">{node.label}</h5>
 
     &__item {
       display: block !important;
-      padding: 20px 8px;
+      padding: 12px 15px;
       cursor: pointer;
-      margin-left: 40px;
       cursor: pointer;
 
       &:hover {

core/src/navigation/ProductSwitcher.html

@@ -23,19 +23,26 @@
         <div class="fd-product-switcher__body">
           <nav class="fd-menu">
             <ul class="fd-menu__list">
-              {#each productSwitcherItems as productSwitcherItem} {#if
-              productSwitcherItem.icon && productSwitcherItem.label}
+              {#each productSwitcherItems as productSwitcherItem}
+              {#if productSwitcherItem.label}
               <li on:click="onActionClick(productSwitcherItem)">
                 <a class="fd-menu__item">
-                  <span class="fd-product-switcher__product-icon">
-                    <img src="{productSwitcherItem.icon}">
+                  <span
+                    class="fd-product-switcher__product-icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem) ? 'sap-icon--' + productSwitcherItem.icon + ' sap-icon--m' : '' }"
+                  >
+                    {#if !hasOpenUIicon(productSwitcherItem)}
+                    <img
+                      src="{productSwitcherItem.icon}"
+                    >
+                    {/if}
                   </span>
                   <span
                     class="fd-product-switcher__product-title"
                   >{productSwitcherItem.label}</span>
                 </a>
               </li>
-              {/if} {/each}
+              {/if}
+              {/each}
             </ul>
           </nav>
         </div>
@@ -52,42 +59,43 @@
     on:click="event.stopPropagation()"
   >
     <div class="fd-modal__content" role="document">
-      <div class="fd-modal__header">
-        <h1 class="fd-modal__title">My Products</h1>
-        <!-- TODO: add proper title -->
+      <div class="fd-action-bar">
+        <div class="fd-action-bar__back">
+          <button
+            class="fd-button--light fd-button--compact sap-icon--nav-back"
+            on:click="toggleDropdownState(event)"
+            data-cy="mobile-product-switcher-close"
+          ></button>
+        </div>
+        <div class="fd-action-bar__header">
+          <h5 class="fd-action-bar__title fd-has-type-1">My Products</h5>
+        </div>
       </div>
       <div class="fd-modal__body">
         <div class="fd-product-switcher__body">
           <ul class="y-full-width-list">
             {#each productSwitcherItems as productSwitcherItem}
-            {#if productSwitcherItem.icon && productSwitcherItem.label}
+            {#if productSwitcherItem.label}
             <li
               on:click="onActionClick(productSwitcherItem)"
               class="y-full-width-list__item"
             >
               <span
-                class="y-full-width-list__icon"
-                style="background-image: url({productSwitcherItem.icon})"
-              ></span>
-              <span class="y-full-width-list__title">{productSwitcherItem.label}</span>
-              <span class="y-full-width-list__subtitle">
-                <!-- Here comes the subtitle which is unknown for now -->
+                class="y-full-width-list__icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem) ? 'sap-icon--' + productSwitcherItem.icon + ' sap-icon--m' : '' }"
+              >
+                {#if !hasOpenUIicon(productSwitcherItem)}
+                <img
+                  src="{productSwitcherItem.icon}"
+                >
+                {/if}
               </span>
+              <span class="y-full-width-list__title">{productSwitcherItem.label}</span>
             </li>
             {/if}
             {/each}
           </ul>
         </div>
       </div>
-      <footer class="fd-modal__footer">
-        <div class="fd-modal__actions">
-          <button
-            class="fd-button"
-            on:click="toggleDropdownState(event)"
-            data-cy="mobile-product-switcher-close"
-          >Close</button>
-        </div>
-      </footer>
     </div>
   </div>
 </section>
@@ -97,6 +105,7 @@ <h1 class="fd-modal__title">My Products</h1>
   import { LuigiConfig } from '../core-api';
   import { Routing } from '../services/routing';
   import { StateHelpers } from '../utilities/helpers';
+  import { NavigationHelpers } from '../utilities/helpers';
 
   export default {
     async oncreate() {
@@ -135,10 +144,28 @@ <h1 class="fd-modal__title">My Products</h1>
         // set the value in the --vh custom property to the root of the document
         document.documentElement.style.setProperty('--vh', `${vh}px`);
       }
+    },
+    helpers: {
+      hasOpenUIicon(node) {
+        return NavigationHelpers.isOpenUIiconName(node.icon);
+      }
     }
   };
 </script>
 <style type="text/scss">
+  $topNavHeight: 48px;
+  $productSwitcherHeight: 64px;
+
+  :global(.fd-popover__body) {
+    overflow: auto;
+    max-height: calc(100vh - 50px);
+    max-height: calc(var(--vh, 1vh) * 100 - 50px);
+  }
+
+  .fd-product-switcher {
+    position: relative;
+    display: block;
+  }
   .fd-product-switcher__product-icon > img {
     max-height: 40px;
   }
@@ -147,14 +174,18 @@ <h1 class="fd-modal__title">My Products</h1>
     .fd-menu__item {
       padding: 0;
       text-align: center;
+
+      &:hover {
+        background-color: transparent;
+      }
     }
   }
 
   .y-fd-modal--full-screen {
     z-index: 1000;
     position: fixed;
     box-sizing: border-box;
-    top: 0;
+    top: $topNavHeight;
     left: 0;
     margin: auto auto;
 
@@ -183,7 +214,10 @@ <h1 class="fd-modal__title">My Products</h1>
       }
     }
     .fd-modal__body {
-      max-height: none;
+      max-height: calc(100vh - #{$topNavHeight} - #{$productSwitcherHeight});
+      max-height: calc(
+        var(--vh, 1vh) * 100 - #{$topNavHeight} - #{$productSwitcherHeight}
+      );
       padding: 0;
     }
 
@@ -196,14 +230,44 @@ <h1 class="fd-modal__title">My Products</h1>
     }
   }
 
+  @media (min-width: 320px) {
+    .fd-action-bar__back {
+      display: block !important;
+    }
+  }
+
+  @media (max-width: 1023px) {
+    .y-full-width-list {
+      &__icon {
+        img {
+          width: 16px;
+          vertical-align: top;
+        }
+      }
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .fd-product-switcher {
+      &__product-icon {
+        &.sap-icon--m {
+          &:before {
+            font-size: 38px;
+          }
+        }
+      }
+    }
+  }
+
   .y-full-width-list {
     width: 100%;
     text-align: left;
     list-style: none;
 
     &__item {
       display: block;
-      padding: 12px 8px;
+      padding: 12px 15px;
+      cursor: pointer;
       cursor: pointer;
 
       &:hover {
@@ -214,15 +278,6 @@ <h1 class="fd-modal__title">My Products</h1>
       }
     }
 
-    &__icon {
-      vertical-align: middle;
-      width: 40px;
-      height: 40px;
-      grid-row: 1 / 3;
-      background-position: center;
-      background-size: cover;
-    }
-
     &__title {
       color: #515559;
     }

core/src/navigation/TopNav.html

@@ -392,6 +392,7 @@
         const dropDownState = !dropDownStates[name];
 
         this.closeAllDropdowns();
+        this.closeMobileTopNavDropDown();
 
         dropDownStates[name] = dropDownState;