Skip to content

Commit f24f78b

Browse files
MapTo0MapTo0
authored
feat(ui5-shellbar): menuItems slot and menuItemPress event (#317)
- menuItems renders list items in a popover which is might be open by clicking the primary title - menuItemPress is fired when a menu item is pressed - if no menu items are defined - no arrow down is rendered next to the primary title BREAKING CHANGE: titlePress event is removed and replaced by menuItems slot. FIXES: #290
1 parent 4b34422 commit f24f78b

File tree

7 files changed

+136
-71
lines changed

7 files changed

+136
-71
lines changed

‎packages/main/src/ShellBar.hbs

+9-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,14 @@
2626
</button>
2727
{{/if}}
2828

29+
<ui5-popover class="sapWCShellBarMenuPopover" hide-header placement-type="Bottom">
30+
<ui5-list separators="None" mode="SingleSelect" @itemPress={{ctr._menuItemPress}}>
31+
{{#each ctr.menuItems}}
32+
<slot name="{{this._slot}}"></slot>
33+
{{/each}}
34+
</ui5-list>
35+
</ui5-popover>
36+
2937
<h2 class="{{classes.secondaryTitle}}">{{ctr.secondaryTitle}}</h2>
3038
</div>
3139

@@ -67,7 +75,7 @@
6775
</div>
6876
</div>
6977

70-
<ui5-popover placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" hide-header hide-arrow>
78+
<ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" hide-header hide-arrow>
7179
<ui5-list separators="None" @itemPress="{{ctr._actionList.itemPress}}">
7280
{{#each _hiddenIcons}}
7381
<ui5-li

‎packages/main/src/ShellBar.js

+50-19
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,10 @@ const metadata = {
145145
_coPilotPress: {
146146
type: Function,
147147
},
148+
149+
_menuItemPress: {
150+
type: Function,
151+
},
148152
},
149153

150154
slots: /** @lends sap.ui.webcomponents.main.ShellBar.prototype */ {
@@ -163,6 +167,22 @@ const metadata = {
163167
multiple: true,
164168
},
165169

170+
/**
171+
* Defines the items displayed in menu after a click on the primary title.
172+
* </br></br>
173+
* <b>Note:</b>
174+
* You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
175+
*
176+
* @type {HTMLElement}
177+
* @slot
178+
* @since 0.10
179+
* @public
180+
*/
181+
menuItems: {
182+
type: HTMLElement,
183+
multiple: true,
184+
},
185+
166186
/**
167187
* Defines the <code>ui5-input</code>, that will be used as a search field.
168188
*
@@ -187,19 +207,6 @@ const metadata = {
187207
},
188208
defaultSlot: "items",
189209
events: /** @lends sap.ui.webcomponents.main.ShellBar.prototype */ {
190-
/**
191-
* Fired, when the primaryTitle is pressed.
192-
*
193-
* @event
194-
* @param {HTMLElement} targetRef dom ref of the clicked element
195-
* @public
196-
*/
197-
titlePress: {
198-
detail: {
199-
targetRef: { type: HTMLElement },
200-
},
201-
},
202-
203210
/**
204211
*
205212
* Fired, when the notification icon is pressed.
@@ -246,6 +253,7 @@ const metadata = {
246253
*
247254
* @event
248255
* @param {HTMLElement} targetRef dom ref of the clicked element
256+
* @since 0.10
249257
* @public
250258
*/
251259
logoPress: {
@@ -259,13 +267,28 @@ const metadata = {
259267
*
260268
* @event
261269
* @param {HTMLElement} targetRef dom ref of the clicked element
270+
* @since 0.10
262271
* @public
263272
*/
264273
coPilotPress: {
265274
detail: {
266275
targetRef: { type: HTMLElement },
267276
},
268277
},
278+
279+
/**
280+
* Fired, when a menu item is selected
281+
*
282+
* @event
283+
* @param {HTMLElement} item dom ref of the clicked list item
284+
* @since 0.10
285+
* @public
286+
*/
287+
menuItemPress: {
288+
detail: {
289+
item: { type: HTMLElement },
290+
},
291+
},
269292
},
270293
};
271294

@@ -332,20 +355,28 @@ class ShellBar extends WebComponent {
332355

333356
this._actionList = {
334357
itemPress: event => {
335-
const popover = this.shadowRoot.querySelector("ui5-popover");
358+
const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
336359

337360
popover.close();
338361
},
339362
};
340363

341364
this._header = {
342365
press: event => {
343-
this.fireEvent("titlePress", {
344-
targetRef: this.shadowRoot.querySelector(".sapWCShellBarMenuButton"),
345-
});
366+
const menuPopover = this.shadowRoot.querySelector(".sapWCShellBarMenuPopover");
367+
368+
if (this.menuItems.length) {
369+
menuPopover.openBy(this.shadowRoot.querySelector(".sapWCShellBarMenuButton"));
370+
}
346371
},
347372
};
348373

374+
this._menuItemPress = event => {
375+
this.fireEvent("menuItemPress", {
376+
item: event.detail.item,
377+
});
378+
};
379+
349380
this._itemNav = new ItemNavigation(this);
350381

351382
this._itemNav.getItemsCallback = () => {
@@ -406,7 +437,7 @@ class ShellBar extends WebComponent {
406437
};
407438

408439
this._handleResize = event => {
409-
this.shadowRoot.querySelector("ui5-popover").close();
440+
this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover").close();
410441
this._overflowActions();
411442
};
412443

@@ -571,7 +602,7 @@ class ShellBar extends WebComponent {
571602
}
572603

573604
_toggleActionPopover() {
574-
const popover = this.shadowRoot.querySelector("ui5-popover");
605+
const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
575606
const overflowButton = this.shadowRoot.querySelector(".sapWCShellBarOverflowIcon");
576607
popover.openBy(overflowButton);
577608
}

‎packages/main/src/ShellBarTemplateContext.js

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ class ShellBarTemplateContext {
4444
"sapWCShellBarMenuButtonNoTitle": !state.primaryTitle,
4545
"sapWCShellBarMenuButtonNoLogo": !state.logo,
4646
"sapWCShellBarMenuButtonMerged": state._breakpointSize === "S",
47+
"sapWCShellBarMenuButtonInteractive": !!state.menuItems.length,
4748
"sapWCShellBarMenuButton": true,
4849
},
4950
buttonTitle: {

‎packages/main/src/themes-next/ShellBar.css

+23-6
Original file line numberDiff line numberDiff line change
@@ -40,20 +40,20 @@ ui5-shellbar {
4040
font-weight: bold;
4141
}
4242

43-
.sapWCShellBarMenuButton:hover,
43+
.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive:hover,
4444
.sapWCShellBarIconButton:hover,
4545
.sapWCShellBarImageButton:hover {
4646
background: var(--sapUiShellHoverBackground);
4747
}
4848

49-
.sapWCShellBarMenuButton:active,
49+
.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive:active,
5050
.sapWCShellBarIconButton:active,
5151
.sapWCShellBarImageButton:active {
5252
background: var(--sapUiShellActiveBackground);
5353
color: var(--sapUiShellActiveTextColor);
5454
}
5555

56-
.sapWCShellBarMenuButton:focus::after,
56+
.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive:focus::after,
5757
.sapWCShellBarIconButton:focus::after,
5858
.sapWCShellBarImageButton:focus::after {
5959
content: "";
@@ -67,7 +67,7 @@ ui5-shellbar {
6767
z-index: 1;
6868
}
6969

70-
.sapWCShellBarMenuButton::-moz-focus-inner {
70+
.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive::-moz-focus-inner {
7171
border: none;
7272
}
7373

@@ -107,7 +107,7 @@ ui5-shellbar {
107107
overflow: hidden;
108108
}
109109

110-
.sapWCShellBarMenuButtonArrow {
110+
.sapWCShellBarMenuButtonInteractive .sapWCShellBarMenuButtonArrow {
111111
display: inline-block;
112112
margin-left: 0.5rem;
113113
width: 10px;
@@ -197,6 +197,10 @@ ui5-shellbar {
197197
height: 1.675rem;
198198
}
199199

200+
.sapWCShellBarLogo:not([src]) {
201+
display: none;
202+
}
203+
200204
.sapWCShellBarIconButton {
201205
min-width: 2.25rem;
202206
font-size: 1rem;
@@ -232,6 +236,19 @@ ui5-shellbar {
232236
display: flex;
233237
align-items: center;
234238
padding: 0.25rem 0.5rem;
239+
cursor: text;
240+
-webkit-user-select: text;
241+
-moz-user-select: text;
242+
-ms-user-select: text;
243+
user-select: text;
244+
}
245+
246+
.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive {
247+
-webkit-user-select: none;
248+
-moz-user-select: none;
249+
-ms-user-select: none;
250+
user-select: none;
251+
cursor: pointer;
235252
}
236253

237254
.sapWCShellBarMenuButton.sapWCShellBarMenuButtonNoLogo {
@@ -379,7 +396,7 @@ span[dir=rtl] .sapWCShellBarMenuButton {
379396
margin-left: 0;
380397
}
381398

382-
span[dir=rtl] .sapWCShellBarMenuButtonArrow {
399+
span[dir=rtl] .sapWCShellBarMenuButtonInteractive .sapWCShellBarMenuButtonArrow {
383400
margin-right: .5rem;
384401
margin-left: 0;
385402
}

‎packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html

+10-5
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,12 @@
124124
<ui5-shellbar-item data-ui5-slot="items" id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
125125

126126
<ui5-input data-ui5-slot="searchField"></ui5-input>
127+
128+
<ui5-li id="menu-item-1" data-ui5-slot="menuItems" type="Active">Application 1</ui5-li>
129+
<ui5-li id="menu-item-2" data-ui5-slot="menuItems" type="Active">Application 2</ui5-li>
130+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 3</ui5-li>
131+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 4</ui5-li>
132+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 5</ui5-li>
127133
</ui5-shellbar>
128134

129135
<ui5-popover id="popover" hide-header placement-type="Bottom">
@@ -162,11 +168,6 @@
162168
window["press-input"].value = "Profile";
163169
});
164170

165-
shellbar.addEventListener("titlePress", function(event) {
166-
window["app-list-popover"].openBy(event.detail.targetRef);
167-
window["press-input"].value = "Title";
168-
});
169-
170171
shellbar.addEventListener("notificationsPress", function(event) {
171172
window["press-input"].value = "Notifications"
172173
});
@@ -183,6 +184,10 @@
183184
window["press-input"].value = "CoPilot"
184185
});
185186

187+
shellbar.addEventListener("menuItemPress", function(event) {
188+
window["press-input"].value = event.detail.item.textContent;
189+
});
190+
186191
["disc", "call"].forEach(function(id) {
187192
window[id].addEventListener("press", function(event) {
188193
window["press-input"].value = event.target.id;

‎packages/main/test/sap/ui/webcomponents/main/samples/ShellBar.sample.html

+13-26
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,12 @@ <h3>ShellBar</h3>
6767
<ui5-shellbar-item data-ui5-slot="items" id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
6868

6969
<ui5-input data-ui5-slot="searchField"></ui5-input>
70+
71+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 1</ui5-li>
72+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 2</ui5-li>
73+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 3</ui5-li>
74+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 4</ui5-li>
75+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 5</ui5-li>
7076
</ui5-shellbar>
7177

7278
<ui5-popover id="action-popover" hide-header placement-type="Bottom">
@@ -85,24 +91,11 @@ <h3>ShellBar</h3>
8591
</div>
8692
</ui5-popover>
8793

88-
<ui5-popover id="app-list-popover" hide-header placement-type="Bottom">
89-
<ui5-list separators="None">
90-
<ui5-li type="Active">Application 1</ui5-li>
91-
<ui5-li type="Active">Application 2</ui5-li>
92-
<ui5-li type="Active">Application 3</ui5-li>
93-
<ui5-li type="Active">Application 4</ui5-li>
94-
<ui5-li type="Active">Application 5</ui5-li>
95-
</ui5-list>
96-
</ui5-popover>
97-
9894
<script>
9995
shellbar.addEventListener("profilePress", function(event) {
10096
window["action-popover"].openBy(event.detail.targetRef);
10197
});
10298

103-
shellbar.addEventListener("titlePress", function(event) {
104-
window["app-list-popover"].openBy(event.detail.targetRef);
105-
});
10699
</script>
107100
</div>
108101

@@ -126,6 +119,13 @@ <h3>ShellBar</h3>
126119
<ui5-shellbar-item data-ui5-slot="items" id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
127120

128121
<ui5-input data-ui5-slot="searchField"></ui5-input>
122+
123+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 1</ui5-li>
124+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 2</ui5-li>
125+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 3</ui5-li>
126+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 4</ui5-li>
127+
<ui5-li data-ui5-slot="menuItems" type="Active">Application 5</ui5-li>
128+
129129
</ui5-shellbar>
130130

131131
<ui5-popover id="popover" hide-header placement-type="Bottom">
@@ -144,24 +144,11 @@ <h3>ShellBar</h3>
144144
</div>
145145
</ui5-popover>
146146

147-
<ui5-popover id="app-list-popover" hide-header placement-type="Bottom">
148-
<ui5-list separators="None">
149-
<ui5-li type="Active">Application 1</ui5-li>
150-
<ui5-li type="Active">Application 2</ui5-li>
151-
<ui5-li type="Active">Application 3</ui5-li>
152-
<ui5-li type="Active">Application 4</ui5-li>
153-
<ui5-li type="Active">Application 5</ui5-li>
154-
</ui5-list>
155-
</ui5-popover>
156-
157147
<script>
158148
shellbar.addEventListener("profilePress", function(event) {
159149
popover.openBy(event.detail.targetRef);
160150
});
161151

162-
shellbar.addEventListener("titlePress", function(event) {
163-
window["app-list-popover"].openBy(event.detail.targetRef);
164-
});
165152
</script>
166153
</xmp>
167154
</pre>

0 commit comments

Comments
 (0)