Skip to content

Commit

Permalink
add product switcher to navigation (SAP#371)
Browse files Browse the repository at this point in the history
added product switcher to top nav
  • Loading branch information
JohannesDoberer authored Jan 29, 2019
1 parent 3ba3f4d commit 69b23e7
Show file tree
Hide file tree
Showing 8 changed files with 165 additions and 41 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
describe('ProductSwitcher', () => {
beforeEach(() => {
cy.visit('http://localhost:4200');
cy.login('tets@email.com', 'tets');
});

it('Clicking around the product switcher', () => {
//check if hybris is there
cy.get('.fd-product-switcher')
.click()
.contains('hybris');

//check if internal link is there
cy.get('.fd-product-switcher .fd-product-switcher__body')
.contains('Project 1')
.click();

cy.location().should(loc => {
expect(loc.pathname).to.eq('/projects/pr1');
});
});
});
10 changes: 0 additions & 10 deletions core/examples/luigi-sample-angular/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 2 additions & 5 deletions core/examples/luigi-sample-angular/src/assets/404.html
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,11 @@
</head>
<body>
<header class="fd-page__header">
<h1 class="fd-action-bar__title">
Ooooooooops :(
</h1>
<h1 class="fd-action-bar__title">Ooooooooops :(</h1>
<h2 class="fd-action-bar__description">
Yes, you guessed right, it's a
<strong class="error-number--real">404</strong>
<strong class="error-number--spacer">404</strong>
error
<strong class="error-number--spacer">404</strong> error
</h2>
</header>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,34 @@ class Navigation {
*/
fallbackLabelResolver: id => id.replace(/\b\w/g, l => l.toUpperCase())
};
// The following configuration will be used to render a product switcher component
productSwitcher = {
items: [
{
icon: 'https://sap.github.io/fundamental/images/products/06.png',
label: 'hybris',
externalLink: {
url: 'https://www.hybris.com',
sameWindow: false
}
},
{
icon: 'https://sap.github.io/fundamental/images/products/06.png',
label: 'Project 1',
link: '/projects/pr1'
},
{
icon: 'https://sap.github.io/fundamental/images/products/06.png',
label: 'Project 2',
link: '/projects/pr2'
},
{
icon: 'https://sap.github.io/fundamental/images/products/06.png',
label: 'Project 3',
link: '/projects/pr3'
}
]
};
}

export const navigation = new Navigation(
Expand Down
4 changes: 1 addition & 3 deletions core/src/Backdrop.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<div class="{backdropClass}" aria-hidden="false">
<slot></slot>
</div>
<div class="{backdropClass}" aria-hidden="false"><slot></slot></div>

<script type="text/javascript">
import { LuigiConfig } from './services/config.js';
Expand Down
12 changes: 3 additions & 9 deletions core/src/navigation/LogoTitle.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
class="fd-shellbar__logo { !hasLogo ? 'fd-shellbar__logo--image-replaced' : '' } { hasLogo ? 'lui-customlogo' : ''}"
aria-label="SAP"
>
{#if hasLogo}
<img on:click="goTo('/')" ref:logo />
{/if}
{#if hasLogo} <img on:click="goTo('/')" ref:logo /> {/if}
</div>

{#if title}
Expand All @@ -14,13 +12,9 @@
class="fd-shellbar__logo fd-shellbar__logo--control fd-product-menu__logo { !hasLogo ? 'fd-shellbar__logo--image-replaced' : '' } { hasLogo ? 'lui-customlogo' : ''}"
aria-label="SAP"
>
{#if hasLogo}
<img on:click="goTo('/')" ref:logo2 />
{/if}
</div>
<div class="fd-shellbar__title" on:click="goTo('/')">
{title}
{#if hasLogo} <img on:click="goTo('/')" ref:logo2 /> {/if}
</div>
<div class="fd-shellbar__title" on:click="goTo('/')">{title}</div>
</div>
{/if}

Expand Down
91 changes: 91 additions & 0 deletions core/src/navigation/ProductSwitcher.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
{#if productSwitcherItems && productSwitcherItems.length &&
Object.keys(productSwitcherItems[0]).length}
<div class="fd-shellbar__action fd-shellbar__action--collapsible">
<div class="fd-product-switcher">
<div class="fd-popover fd-popover--right">
<div class="fd-popover__control" on:click="event.stopPropagation()">
<button
class="fd-button--shell sap-icon--grid"
aria-expanded="{dropDownStates.productSwitcherPopover || false}"
aria-haspopup="true"
on:click="toggleDropdownState('productSwitcherPopover')"
></button>
</div>
<div
class="fd-popover__body fd-popover__body--right"
aria-hidden="{!(dropDownStates.productSwitcherPopover || false)}"
id="productSwitcherPopover"
>
<div class="fd-product-switcher__body">
<nav class="fd-menu">
<ul class="fd-menu__list">
{#each productSwitcherItems as productSwitcherItem} {#if
productSwitcherItem.icon && productSwitcherItem.label}
<li on:click="onActionClick(productSwitcherItem)">
<a class="fd-menu__item">
<span class="fd-product-switcher__product-icon">
<img src="{productSwitcherItem.icon}" />
</span>
<span class="fd-product-switcher__product-title">
{productSwitcherItem.label}
</span>
</a>
</li>
{/if} {/each}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
{/if}
<script type="text/javascript">
import { LuigiConfig } from '../services/config.js';
import * as Routing from '../services/routing.js';
export default {
async oncreate() {
const productSwitcherConfig = LuigiConfig.getConfigValue(
'navigation.productSwitcher'
);
this.set({
config: productSwitcherConfig
});

if (productSwitcherConfig) {
const productSwitcherItems = await LuigiConfig.getConfigValueAsync(
'navigation.productSwitcher.items'
);
this.set({
productSwitcherItems
});
}
},
methods: {
onActionClick(productSwitcherItem) {
this.root.getUnsavedChangesModalPromise().then(() => {
if (productSwitcherItem.externalLink) {
window.open(
productSwitcherItem.externalLink.url,
productSwitcherItem.externalLink.sameWindow ? '_self' : '_blank'
);
} else {
Routing.navigateTo(productSwitcherItem.link);
}
});
},
toggleDropdownState(name) {
this.fire('toggleDropdownState', { name });
}
}
};
</script>
<style type="text/scss">
.fd-product-switcher__product-icon > img {
max-height: 40px;
}
.fd-menu__item {
padding: 0;
text-align: center;
}
</style>
32 changes: 18 additions & 14 deletions core/src/navigation/TopNav.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<svelte:window on:click="closeAllDropdowns()" on:blur="closeAllDropdowns()" />

<div class="fd-shellbar {hideNavComponent ? 'hideNavComponent' : ''}">
<div class="fd-shellbar__group fd-shellbar__group--start">
<LogoTitle />
</div>
<div class="fd-shellbar__group fd-shellbar__group--start"><LogoTitle /></div>
<div class="fd-shellbar__group fd-shellbar__group--end">
<div class="fd-shellbar__actions">
{#if !authorizationEnabled || isLoggedIn}
Expand All @@ -28,11 +26,10 @@
class="fd-top-nav__icon sap-icon--{node.icon} sap-icon--m"
></span>
{:else}
<img class="fd-top-nav__icon nav-icon" src="{node.icon}" />
{/if} {:else} {node.label} {/if} {#if node.externalLink &&
<img class="fd-top-nav__icon nav-icon" src="{node.icon}" /> {/if}
{:else} {node.label} {/if} {#if node.externalLink &&
node.externalLink.url}
<span class="sap-icon--action sap-icon--s"></span>
{/if}
<span class="sap-icon--action sap-icon--s"></span> {/if}
</button>
</div>
{/if} {/each}
Expand Down Expand Up @@ -93,8 +90,7 @@
/>
{/if} {:else} {node.label} {/if} {#if node.externalLink &&
node.externalLink.url}
<span class="sap-icon--action sap-icon--s"></span>
{/if}
<span class="sap-icon--action sap-icon--s"></span> {/if}
</a>
</li>
{/if} {/each}
Expand All @@ -109,7 +105,7 @@
<div class="fd-popover">
<div class="fd-popover__control" on:click="event.stopPropagation()">
<button
class=" fd-button--shell sap-icon--customer"
class="fd-button--shell sap-icon--customer"
aria-expanded="{dropDownStates.profilePopover || false}"
aria-haspopup="true"
on:click="toggleDropdownState('profilePopover')"
Expand All @@ -119,13 +115,16 @@
aria-hidden="{!(dropDownStates.profilePopover || false)}"
id="profilePopover"
>
<nav class="fd-menu">
<Authorization />
</nav>
<nav class="fd-menu"><Authorization /></nav>
</div>
</div>
</div>
</div>
{/if} {#if isProductSwitcherAvailable}
<ProductSwitcher
bind:dropDownStates
on:toggleDropdownState="toggleDropdownState(event.name)"
/>
{/if}
</div>
</div>
Expand All @@ -135,6 +134,7 @@
import ContextSwitcher from './ContextSwitcher.html';
import LogoTitle from './LogoTitle.html';
import Authorization from '../Authorization.html';
import ProductSwitcher from './ProductSwitcher.html';
import { LuigiConfig } from '../services/config.js';
import * as Routing from '../services/routing';
import * as Navigation from './services/navigation.js';
Expand Down Expand Up @@ -176,6 +176,9 @@
oncreate() {
this.set({
authorizationEnabled: LuigiConfig.isAuthorizationEnabled(),
isProductSwitcherAvailable: LuigiConfig.getConfigValue(
'navigation.productSwitcher'
),
hideNavComponent: LuigiConfig.getConfigBooleanValue(
'settings.hideNavigation'
)
Expand Down Expand Up @@ -228,7 +231,8 @@
components: {
Authorization,
ContextSwitcher,
LogoTitle
LogoTitle,
ProductSwitcher
}
};
</script>
Expand Down

0 comments on commit 69b23e7

Please sign in to comment.