Skip to content

Commit

Permalink
display labels in mobile top header menu, vertical alignment for labe…
Browse files Browse the repository at this point in the history 
…ls and icons (#459)
  • Loading branch information
@marynaKhromova @pekura
marynaKhromova authored and pekura committed Apr 3, 2019
1 parent 8c51d8b commit a3f13a2
Showing 1 changed file with 149 additions and 142 deletions.
291 changes: 149 additions & 142 deletions core/src/navigation/TopNav.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<svelte:window on:click="closeAllDropdowns()" on:blur="closeAllDropdowns()" />
<svelte:window on:click="closeAllDropdowns()" on:blur="closeAllDropdowns()"/>

<div class="fd-shellbar {hideNavComponent ? 'hideNavComponent' : ''}">
<div class="fd-shellbar__group fd-shellbar__group--start">
<LogoTitle />
<LogoTitle/>
</div>
<div class="fd-shellbar__group fd-shellbar__group--end">
<div class="fd-shellbar__actions">
Expand All @@ -11,163 +11,164 @@
bind:dropDownStates
on:toggleDropdownState="toggleDropdownState(event.name)"
/>
{/if}
{#if children && pathData.length > 0}
{#each children as node}
{#if !node.hideFromNav}
<div
class="fd-shellbar__action fd-shellbar__action--hide fd-shellbar__action--collapsible"
{/if}
{#if children && pathData.length > 0}
{#each children as node}
{#if !node.hideFromNav}
<div
class="fd-shellbar__action fd-shellbar__action--hide fd-shellbar__action--collapsible"
>
<button
title="{node.label}"
class="fd-button--shell {node === selectedNode ? 'is-selected' : ''} {node.externalLink && node.externalLink.url ? 'fd-global-nav__btn--external' : ''}"
aria-controls="0AcWE812"
aria-expanded="false"
aria-haspopup="true"
on:click="handleClick(node)"
>
{#if node.icon} {#if hasOpenUIicon(node)}
<span
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}"
>
<button
title="{node.label}"
class="fd-button--shell {node === selectedNode ? 'is-selected' : ''} {node.externalLink && node.externalLink.url ? 'fd-global-nav__btn--external' : ''}"
aria-controls="0AcWE812"
aria-expanded="false"
aria-haspopup="true"
on:click="handleClick(node)"
>
{#if node.icon} {#if hasOpenUIicon(node)}
<span
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 &&
node.externalLink.url}
<span
class="sap-icon--action sap-icon--s"
></span>
{/if}
</button>
</div>
{/if}
{/each}
{#if isProductSwitcherAvailable}
<ProductSwitcher
bind:dropDownStates
on:toggleDropdownState="toggleDropdownState(event.name)"
isMobile={false}
/>
{/if}
<!-- Sample Markup for Notifications
{/if}
{:else} {node.label} {/if} {#if node.externalLink &&
node.externalLink.url}
<span
class="sap-icon--action sap-icon--s"
></span>
{/if}
</button>
</div>
{/if}
{/each}
{#if isProductSwitcherAvailable}
<ProductSwitcher
bind:dropDownStates
on:toggleDropdownState="toggleDropdownState(event.name)"
isMobile="{false}"
/>
{/if}
<!-- Sample Markup for Notifications
<div class="fd-shellbar__action fd-shellbar__action--collapsible">
<button class=" fd-button--shell sap-icon--bell" aria-label="Notifications">
<span class="fd-counter fd-counter--notification" aria-label="Unread count">25</span>
</button>
</div>
-->
-->

<!-- dropdown for top nav nodes on smaller screens -->
{#if visibleNodeCount > 0}
<div class="fd-shellbar__action fd-shellbar__action--collapse">
<div class="fd-shellbar-collapse">
<div class="fd-popover fd-popover--right">
<div class="fd-popover__control" on:click="event.stopPropagation()">
<div
class="fd-shellbar-collapse--control"
aria-controls="eYVEJ960"
aria-expanded="false"
<!-- dropdown for top nav nodes on smaller screens -->
{#if visibleNodeCount > 0}
<div class="fd-shellbar__action fd-shellbar__action--collapse">
<div class="fd-shellbar-collapse">
<div class="fd-popover fd-popover--right">
<div class="fd-popover__control" on:click="event.stopPropagation()">
<div
class="fd-shellbar-collapse--control"
aria-controls="eYVEJ960"
aria-expanded="false"
aria-haspopup="true"
role="button"
>
<button
class="fd-button--shell sap-icon--overflow"
aria-controls="overflowPopover"
aria-expanded="{dropDownStates.overflowPopover || false}"
aria-haspopup="true"
role="button"
on:click="toggleDropdownState('overflowPopover')"
data-cy="mobile-menu"
>
<button
class="fd-button--shell sap-icon--overflow"
aria-controls="overflowPopover"
aria-expanded="{dropDownStates.overflowPopover || false}"
aria-haspopup="true"
on:click="toggleDropdownState('overflowPopover')"
data-cy="mobile-menu"
>
<!-- <span class="fd-counter fd-counter--notification" aria-label="Unread count">25</span> -->
</button>
</div>
<!-- <span class="fd-counter fd-counter--notification" aria-label="Unread count">25</span> -->
</button>
</div>
<div
class="fd-popover__body fd-popover__body--right"
aria-hidden="{!(dropDownStates.overflowPopover || false)}"
id="overflowPopover"
>
<nav class="fd-menu">
<ul class="fd-menu__list">
{#each children as node} {#if !node.hideFromNav}
<li>
<a
class="fd-menu__item {node === selectedNode ? 'is-selected' : ''} {node.externalLink && node.externalLink.url ? 'fd-global-nav__btn--external' : ''}"
on:click="handleClick(node)"
</div>
<div
class="fd-popover__body fd-popover__body--right"
aria-hidden="{!(dropDownStates.overflowPopover || false)}"
id="overflowPopover"
>
<nav class="fd-menu">
<ul class="fd-menu__list">
{#each children as node} {#if !node.hideFromNav}
<li>
<a
class="fd-menu__item {node === selectedNode ? 'is-selected' : ''} {node.externalLink && node.externalLink.url ? 'fd-global-nav__btn--external' : ''}"
on:click="handleClick(node)"
>
{#if node.icon} {#if hasOpenUIicon(node)}
<span
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 node.icon} {#if hasOpenUIicon(node)}
<span
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 &&
node.externalLink.url}
<span
class="sap-icon--action sap-icon--s"
></span>
{/if}
</a>
</li>
{/if}
{/each}
{#if isProductSwitcherAvailable}
<li>
<a class="fd-menu__item" on:click="openMobileProductSwitcher(event)" data-cy="mobile-product-switcher">
<span class="fd-top-nav__icon sap-icon--grid sap-icon--m">
</span>
My Products
</a>

</li>

{/if}
</ul>
</nav>
</div>
{#if isProductSwitcherAvailable}
<ProductSwitcher
bind:dropDownStates
on:toggleDropdownState="toggleDropdownState(event.name)"
isMobile={true}
/>
{/if}
{/if}{/if} {node.label} {#if node.externalLink &&
node.externalLink.url}
<span
class="sap-icon--action sap-icon--s"
></span>
{/if}
</a>
</li>
{/if}
{/each}
{#if isProductSwitcherAvailable}
<li>
<a
class="fd-menu__item"
on:click="openMobileProductSwitcher(event)"
data-cy="mobile-product-switcher"
>
<span class="fd-top-nav__icon sap-icon--grid sap-icon--m"></span>
My Products
</a>
</li>
{/if}
</ul>
</nav>
</div>
{#if isProductSwitcherAvailable}
<ProductSwitcher
bind:dropDownStates
on:toggleDropdownState="toggleDropdownState(event.name)"
isMobile="{true}"
/>
{/if}
</div>
</div>
{/if}
{/if}
</div>
{/if}
{/if}
{#if authorizationEnabled}
<div class="fd-shellbar__action fd-shellbar__action--show-always">
<div class="fd-popover">
<div class="fd-popover__control" on:click="event.stopPropagation()">
<button
class="fd-button--shell sap-icon--customer"
aria-expanded="{dropDownStates.profilePopover || false}"
aria-haspopup="true"
on:click="toggleDropdownState('profilePopover')"
></button>
<div
class="fd-popover__body fd-popover__body--right"
aria-hidden="{!(dropDownStates.profilePopover || false)}"
id="profilePopover"
>
<nav class="fd-menu">
<Authorization/>
</nav>
</div>
<div class="fd-shellbar__action fd-shellbar__action--show-always">
<div class="fd-popover">
<div class="fd-popover__control" on:click="event.stopPropagation()">
<button
class="fd-button--shell sap-icon--customer"
aria-expanded="{dropDownStates.profilePopover || false}"
aria-haspopup="true"
on:click="toggleDropdownState('profilePopover')"
></button>
<div
class="fd-popover__body fd-popover__body--right"
aria-hidden="{!(dropDownStates.profilePopover || false)}"
id="profilePopover"
>
<nav class="fd-menu">
<Authorization/>
</nav>
</div>
</div>
</div>
{/if}

</div>

{/if}
</div>
</div>
</div>
Expand Down Expand Up @@ -314,4 +315,10 @@
height: 2em;
}
}
</style>

.fd-top-nav__icon {
display: inline-block;
vertical-align: text-top;
margin-right: 5px;
}
</style>

0 comments on commit a3f13a2

Please sign in to comment.