Skip to content

Commit fdc743d

Browse files
MapTo0MapTo0
authored
feat(ui5-shellbar): Improve control behaviour (#72)
1 parent a5fae96 commit fdc743d

23 files changed

+1511
-372
lines changed

‎packages/base/src/sap/ui/webcomponents/base/WebComponent.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -423,8 +423,11 @@ class WebComponent extends HTMLElement {
423423
}
424424
}
425425

426-
focus() {
426+
async focus() {
427+
await this._waitForDomRef();
428+
427429
const focusDomRef = this.getFocusDomRef();
430+
428431
if (focusDomRef) {
429432
focusDomRef.focus();
430433
}

‎packages/main/src/Icon.js

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ class Icon extends WebComponent {
104104

105105
onkeydown(event) {
106106
if (event.which === KeyCodes.SPACE) {
107+
event.preventDefault();
107108
this.__spaceDown = true;
108109
}
109110
}

‎packages/main/src/Input.js

+11
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,28 @@ import belize from "./themes/sap_belize/Input.less";
1313
import belizeHcb from "./themes/sap_belize_hcb/Input.less";
1414
import fiori3 from "./themes/sap_fiori_3/Input.less";
1515

16+
// Styles for searchField
17+
import shellBarInput from "./themes/sap_fiori_3/ShellBarInput.less";
18+
import shellBarInputBelize from "./themes/sap_belize/ShellBarInput.less";
19+
import shellBarInputBelizeHcb from "./themes/sap_belize_hcb/ShellBarInput.less";
20+
1621
ShadowDOM.registerStyle("sap_belize", "Input.css", belize);
1722
ShadowDOM.registerStyle("sap_belize_hcb", "Input.css", belizeHcb);
1823
ShadowDOM.registerStyle("sap_fiori_3", "Input.css", fiori3);
1924

25+
26+
ShadowDOM.registerStyle("sap_fiori_3", "ShellBarInput.css", shellBarInput);
27+
ShadowDOM.registerStyle("sap_belize", "ShellBarInput.css", shellBarInputBelize);
28+
ShadowDOM.registerStyle("sap_belize_hcb", "ShellBarInput.css", shellBarInputBelizeHcb);
29+
2030
/**
2131
* @public
2232
*/
2333
const metadata = {
2434
tag: "ui5-input",
2535
styleUrl: [
2636
"Input.css",
37+
"ShellBarInput.css",
2738
],
2839
defaultSlot: "suggestionItems",
2940
slots: /** @lends sap.ui.webcomponents.main.Input.prototype */ {

‎packages/main/src/Popup.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -399,7 +399,13 @@ class Popup extends WebComponent {
399399
}
400400

401401
storeCurrentFocus() {
402-
this._lastFocusableElement = document.activeElement;
402+
let element = document.activeElement;
403+
404+
while (element.shadowRoot && element.shadowRoot.activeElement) {
405+
element = element.shadowRoot.activeElement;
406+
}
407+
408+
this._lastFocusableElement = element;
403409
}
404410

405411
resetFocus() {

‎packages/main/src/ShellBar.hbs

+70-62
Original file line numberDiff line numberDiff line change
@@ -2,94 +2,102 @@
22

33
<div class="{{classes.leftContainer}}">
44

5+
{{#if ctr.icon}}
6+
<div class="sapWCShellBarBeginIcon" tabindex="0">
7+
<slot name="{{ctr.icon._slot}}"></slot>
8+
</div>
9+
{{/if}}
10+
511
{{#unless interactiveLogo}}
612
<img class="{{classes.logo}}" src="{{ctr.logo}}" />
713
{{/unless}}
814

9-
<button class="{{classes.button}}" @click="{{ctr._header.press}}">
15+
<button tabindex="0" class="{{classes.button}}" @click="{{ctr._header.press}}">
1016
{{#if interactiveLogo}}
1117
<img class="{{classes.logo}}" src="{{ctr.logo}}" />
1218
{{/if}}
1319

14-
<h1 class="{{classes.buttonTitle}}">
15-
<bdi class="{{classes.title}}">{{ctr.primaryTitle}}</bdi>
16-
</h1>
20+
{{#if ctr.primaryTitle}}
21+
<h1 class="{{classes.buttonTitle}}">
22+
<bdi class="{{classes.title}}">{{ctr.primaryTitle}}</bdi>
23+
</h1>
24+
{{/if}}
25+
1726
<span class="{{classes.arrow}}"></span>
1827
</button>
1928

2029
<h2 class="{{classes.secondaryTitle}}">{{ctr.secondaryTitle}}</h2>
2130
</div>
2231

23-
{{#if ctr.showCoPilot}}
24-
<div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerMiddle">
32+
<div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerMiddle">
33+
{{#if ctr.showCoPilot}}
2534
{{> coPilot}}
26-
</div>
27-
{{/if}}
35+
{{else}}
36+
<span class="sapWCShellBarCoPilotPlaceholder"></span>
37+
{{/if}}
38+
</div>
2839

2940
<div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerRight">
3041

31-
{{#each ctr._itemsInfo}}
32-
{{#if this.src}}
33-
<ui5-icon
34-
tabindex="{{this._tabIndex}}"
35-
data-ui5-notification-count="{{../../ctr.notificationCount}}"
36-
data-ui5-external-action-item-id="{{this.refItemid}}"
37-
tabindex="0"
38-
class="{{this.classes}}"
39-
src="{{this.src}}"
40-
id="{{this.id}}"
41-
style="{{this.style}}"
42-
@press={{this.press}}>
43-
</ui5-icon>
44-
{{else}}
45-
<div
46-
tabindex="{{this._tabIndex}}"
47-
id="{{this.id}}"
48-
class="{{this.classes}}"
49-
style="{{this.style}}"
50-
@click="{{this.press}}"
51-
>
52-
<span class="{{this.subclasses}}"></span>
53-
</div>
54-
{{/if}}
55-
{{/each}}
42+
<div class="sapWCShellBarOverflowContainerRightChild">
43+
{{#each ctr._itemsInfo}}
44+
{{#if this.src}}
45+
<ui5-icon
46+
tabindex="{{this._tabIndex}}"
47+
data-ui5-notification-count="{{../../ctr.notificationCount}}"
48+
data-ui5-external-action-item-id="{{this.refItemid}}"
49+
class="{{this.classes}}"
50+
src="{{this.src}}"
51+
id="{{this.id}}"
52+
style="{{this.style}}"
53+
@press={{this.press}}>
54+
</ui5-icon>
55+
{{else}}
56+
<div
57+
tabindex="{{this._tabIndex}}"
58+
id="{{this.id}}"
59+
style="{{this.style}}"
60+
class="{{this.classes}}"
61+
@click="{{this.press}}"
62+
>
63+
<span style="{{this.subStyles}}" class="{{this.subclasses}}"></span>
64+
</div>
65+
{{/if}}
66+
{{/each}}
67+
</div>
5668
</div>
5769

58-
<div
59-
class="{{ctr._popupSettings.classes}}"
60-
style="{{ctr._popupSettings.style}}"
61-
@focusout={{ctr._popupSettings.focusout}}
62-
>
63-
<ui5-list separators="None" @itemPress="{{ctr._actionList.itemPress}}">
64-
{{#each _hiddenIcons}}
65-
<ui5-li
66-
data-ui5-external-action-item-id="{{this.refItemid}}"
67-
icon="{{this.src}}"
68-
type="Active"
69-
@_press="{{this.press}}"
70-
>{{this.text}}
71-
</ui5-li>
72-
{{/each}}
73-
</ui5-list>
74-
</div>
70+
<ui5-popover placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" hide-header hide-arrow>
71+
<ui5-list separators="None" @itemPress="{{ctr._actionList.itemPress}}">
72+
{{#each _hiddenIcons}}
73+
<ui5-li
74+
data-ui5-external-action-item-id="{{this.refItemid}}"
75+
icon="{{this.src}}"
76+
type="Active"
77+
@_press="{{this.press}}"
78+
>{{this.text}}
79+
</ui5-li>
80+
{{/each}}
81+
</ui5-list>
82+
</ui5-popover>
7583

7684
<div class="{{classes.blockLayer}}">
7785
</div>
7886

79-
{{#if ctr.input}}
80-
<div id="{{ctr._id}}-searchfield-wrapper"
81-
class="{{classes.searchField}}"
82-
style="{{styles.searchField}}"
83-
@focusout={{ctr._searchField.focusout}}
84-
>
85-
<slot name="{{ctr.input._slot}}"></slot>
86-
</div>
87-
{{/if}}
87+
<div id="{{ctr._id}}-searchfield-wrapper"
88+
class="{{classes.searchField}}"
89+
style="{{styles.searchField}}"
90+
@focusout={{ctr._searchField.focusout}}
91+
>
92+
{{#if ctr.searchField}}
93+
<slot name="{{ctr.searchField._slot}}"></slot>
94+
{{/if}}
95+
</div>
8896
</div>
8997

9098
{{#*inline "coPilot"}}
91-
<svg version="1.1" width="48" height="48" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
92-
style="background-color: #354A5F;">
99+
<svg version="1.1" width="44" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
100+
style="background-color: transparent;">
93101
<defs>
94102
<linearGradient id="grad1" x1="0%" x2="100%" y1="100%" y2="0%">
95103
<stop offset="0%" style="stop-color:#C0D9F2;stop-opacity:0.87"></stop>
@@ -134,6 +142,6 @@
134142
begin="shell_avatar.mousedown" repeatCount="1" additive="sum"></animateTransform>
135143
</path>
136144
</g>
137-
<circle cx="0" cy="0" r="76" fill="#354A5F" id="shell_avatar"></circle>
145+
<circle cx="0" cy="0" r="76" class="sapWCShellBarCoPilotMiddle" id="shell_avatar"></circle>
138146
</svg>
139147
{{/inline}}

0 commit comments

Comments
 (0)