Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-shellbar): enable items keyboard handling #1473

Merged
merged 9 commits into from
Apr 14, 2020
+250 −175
Merged

fix(ui5-shellbar): enable items keyboard handling #1473

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d85b5a3
fix(ui5-shellbar): enable items navigation with TAB
ilhan007 Apr 13, 2020
0028964
update tests
ilhan007 Apr 13, 2020
bb37a9a
use ui5-buttons only
ilhan007 Apr 13, 2020
2923514
fix IE visual issues
ilhan007 Apr 14, 2020
863b4bb
fix test
ilhan007 Apr 14, 2020
b4b4862
fix menu popover initial focus
ilhan007 Apr 14, 2020
e86aac0
enable keyboard handling for coPilot
ilhan007 Apr 14, 2020
79d4bce
extract duplicated code
ilhan007 Apr 14, 2020
4cd28df
adjust menu btn tabindex
ilhan007 Apr 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 73 additions & 31 deletions packages/fiori/src/ShellBar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<div
class="{{classes.wrapper}}"
dir="{{rtl}}"
@keydown={{_onkeydown}}
>
<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">

Expand Down Expand Up @@ -40,36 +39,6 @@
{{/if}}
</div>

<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">

<div class="ui5-shellbar-overflow-container-right-child">
{{#each _itemsInfo}}
{{#if this.icon}}
<ui5-icon
tabindex="{{this._tabIndex}}"
data-count="{{this.count}}"
data-ui5-notification-count="{{../notificationCount}}"
data-ui5-external-action-item-id="{{this.refItemid}}"
class="{{this.classes}}"
name="{{this.icon}}"
id="{{this.id}}"
style="{{this.style}}"
@click={{this.press}}>
</ui5-icon>
{{else}}
<slot
name="profile"
id="{{this.id}}"
style="{{this.style}}"
class="{{this.classes}}"
tabindex="{{this._tabIndex}}"
@click={{this.press}}
></slot>
{{/if}}
{{/each}}
</div>
</div>

<div id="{{_id}}-searchfield-wrapper"
class="ui5-shellbar-search-field"
style="{{styles.searchField}}"
Expand All @@ -78,6 +47,79 @@
<slot name="searchField"></slot>
{{/if}}
</div>

<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">

<div class="ui5-shellbar-overflow-container-right-child">

{{#if hasSearchField}}
<ui5-button
id="{{this._id}}-item-1"
class="{{classes.items.search}} ui5-shellbar-button ui5-shellbar-search-button"
icon="sap-icon://search"
data-ui5-text="Search"
data-ui5-notification-count="{{notificationCount}}"
@click={{_handleSearchIconPress}}
></ui5-button>
{{/if}}

{{#each customItemsInfo}}
<ui5-button
id="{{this.id}}"
style="{{this.style}}"
class="{{this.classes}}"
icon="{{this.icon}}"
data-count="{{this.count}}"
data-ui5-notification-count="{{../notificationCount}}"
data-ui5-external-action-item-id="{{this.refItemid}}"
@click={{this.press}}
></ui5-button>
{{/each}}

{{#if showNotifications}}
<ui5-button
id="{{this._id}}-item-2"
style="{{styles.items.notification}}"
class="{{classes.items.notification}} ui5-shellbar-button ui5-shellbar-bell-button"
icon="sap-icon://bell"
data-ui5-text="Notifications"
data-ui5-notification-count="{{notificationCount}}"
@click={{_handleNotificationsPress}}
></ui5-button>
{{/if}}

<ui5-button
id="{{this._id}}-item-5"
style="{{styles.items.overflow}}"
class="{{classes.items.overflow}} ui5-shellbar-button ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button"
icon="sap-icon://overflow"
@click="{{_handleOverflowPress}}"
></ui5-button>

{{#if hasProfile}}
<ui5-button
id="{{this._id}}-item-3"
@click={{_handleProfilePress}}
style="{{styles.items.profile}}"
class="ui5-shellbar-button ui5-shellbar-image-button">
<slot
name="profile"
></slot>
</ui5-button>
{{/if}}

{{#if showProductSwitch}}
<ui5-button
id="{{this._id}}-item-4"
style="{{styles.items.product}}"
class="{{classes.items.product}} ui5-shellbar-button ui5-shellbar-button-product-switch"
icon="sap-icon://grid"
data-ui5-text="Product Switch"
@click={{_handleProductSwitchPress}}
></ui5-button>
{{/if}}
</div>
</div>
</div>

{{#*inline "coPilot"}}
Expand Down
Loading