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
SAP · Apr 9, 2019 · f24f78b · f24f78b
1 parent 4b34422
commit f24f78b
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 71 deletions.
diff --git a/packages/main/src/ShellBar.hbs b/packages/main/src/ShellBar.hbs
@@ -26,6 +26,14 @@
 			</button>
 		{{/if}}
 
+		<ui5-popover class="sapWCShellBarMenuPopover" hide-header placement-type="Bottom">
+			<ui5-list separators="None" mode="SingleSelect" @itemPress={{ctr._menuItemPress}}>
+				{{#each ctr.menuItems}}
+					<slot name="{{this._slot}}"></slot>
+				{{/each}}
+			</ui5-list>
+		</ui5-popover>
+
 		<h2 class="{{classes.secondaryTitle}}">{{ctr.secondaryTitle}}</h2>
 	</div>
 
@@ -67,7 +75,7 @@
 		</div>
 	</div>
 
-	<ui5-popover placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" hide-header hide-arrow>
+	<ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" hide-header hide-arrow>
 		<ui5-list separators="None" @itemPress="{{ctr._actionList.itemPress}}">
 			{{#each _hiddenIcons}}
 				<ui5-li

diff --git a/packages/main/src/ShellBar.js b/packages/main/src/ShellBar.js
@@ -145,6 +145,10 @@ const metadata = {
 		_coPilotPress: {
 			type: Function,
 		},
+
+		_menuItemPress: {
+			type: Function,
+		},
 	},
 
 	slots: /** @lends  sap.ui.webcomponents.main.ShellBar.prototype */ {
@@ -163,6 +167,22 @@ const metadata = {
 			multiple: true,
 		},
 
+		/**
+		 * Defines the items displayed in menu after a click on the primary title.
+		 * </br></br>
+		 * <b>Note:</b>
+		 * You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
+		 *
+		 * @type {HTMLElement}
+		 * @slot
+		 * @since 0.10
+		 * @public
+		 */
+		menuItems: {
+			type: HTMLElement,
+			multiple: true,
+		},
+
 		/**
 		 * Defines the <code>ui5-input</code>, that will be used as a search field.
 		 *
@@ -187,19 +207,6 @@ const metadata = {
 	},
 	defaultSlot: "items",
 	events: /** @lends sap.ui.webcomponents.main.ShellBar.prototype */ {
-		/**
-		 * Fired, when the primaryTitle is pressed.
-		 *
-		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
-		 * @public
-		 */
-		titlePress: {
-			detail: {
-				targetRef: { type: HTMLElement },
-			},
-		},
-
 		/**
 		 *
 		 * Fired, when the notification icon is pressed.
@@ -246,6 +253,7 @@ const metadata = {
 		 *
 		 * @event
 		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @since 0.10
 		 * @public
 		 */
 		logoPress: {
@@ -259,13 +267,28 @@ const metadata = {
 		 *
 		 * @event
 		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @since 0.10
 		 * @public
 		 */
 		coPilotPress: {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
 		},
+
+		/**
+		 * Fired, when a menu item is selected
+		 *
+		 * @event
+		 * @param {HTMLElement} item dom ref of the clicked list item
+		 * @since 0.10
+		 * @public
+		 */
+		menuItemPress: {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
 	},
 };
 
@@ -332,20 +355,28 @@ class ShellBar extends WebComponent {
 
 		this._actionList = {
 			itemPress: event => {
-				const popover = this.shadowRoot.querySelector("ui5-popover");
+				const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
 
 				popover.close();
 			},
 		};
 
 		this._header = {
 			press: event => {
-				this.fireEvent("titlePress", {
-					targetRef: this.shadowRoot.querySelector(".sapWCShellBarMenuButton"),
-				});
+				const menuPopover = this.shadowRoot.querySelector(".sapWCShellBarMenuPopover");
+
+				if (this.menuItems.length) {
+					menuPopover.openBy(this.shadowRoot.querySelector(".sapWCShellBarMenuButton"));
+				}
 			},
 		};
 
+		this._menuItemPress = event => {
+			this.fireEvent("menuItemPress", {
+				item: event.detail.item,
+			});
+		};
+
 		this._itemNav = new ItemNavigation(this);
 
 		this._itemNav.getItemsCallback = () => {
@@ -406,7 +437,7 @@ class ShellBar extends WebComponent {
 		};
 
 		this._handleResize = event => {
-			this.shadowRoot.querySelector("ui5-popover").close();
+			this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover").close();
 			this._overflowActions();
 		};
 
@@ -571,7 +602,7 @@ class ShellBar extends WebComponent {
 	}
 
 	_toggleActionPopover() {
-		const popover = this.shadowRoot.querySelector("ui5-popover");
+		const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
 		const overflowButton = this.shadowRoot.querySelector(".sapWCShellBarOverflowIcon");
 		popover.openBy(overflowButton);
 	}

diff --git a/packages/main/src/ShellBarTemplateContext.js b/packages/main/src/ShellBarTemplateContext.js
@@ -44,6 +44,7 @@ class ShellBarTemplateContext {
 					"sapWCShellBarMenuButtonNoTitle": !state.primaryTitle,
 					"sapWCShellBarMenuButtonNoLogo": !state.logo,
 					"sapWCShellBarMenuButtonMerged": state._breakpointSize === "S",
+					"sapWCShellBarMenuButtonInteractive": !!state.menuItems.length,
 					"sapWCShellBarMenuButton": true,
 				},
 				buttonTitle: {

diff --git a/packages/main/src/themes-next/ShellBar.css b/packages/main/src/themes-next/ShellBar.css
@@ -40,20 +40,20 @@ ui5-shellbar {
 	font-weight: bold;
 }
 
-.sapWCShellBarMenuButton:hover,
+.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive:hover,
 .sapWCShellBarIconButton:hover,
 .sapWCShellBarImageButton:hover {
 	background: var(--sapUiShellHoverBackground);
 }
 
-.sapWCShellBarMenuButton:active,
+.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive:active,
 .sapWCShellBarIconButton:active,
 .sapWCShellBarImageButton:active {
 	background: var(--sapUiShellActiveBackground);
 	color: var(--sapUiShellActiveTextColor);
 }
 
-.sapWCShellBarMenuButton:focus::after,
+.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive:focus::after,
 .sapWCShellBarIconButton:focus::after,
 .sapWCShellBarImageButton:focus::after {
 	content: "";
@@ -67,7 +67,7 @@ ui5-shellbar {
 	z-index: 1;
 }
 
-.sapWCShellBarMenuButton::-moz-focus-inner {
+.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive::-moz-focus-inner {
 	border: none;
 }
 
@@ -107,7 +107,7 @@ ui5-shellbar {
 	overflow: hidden;
 }
 
-.sapWCShellBarMenuButtonArrow {
+.sapWCShellBarMenuButtonInteractive .sapWCShellBarMenuButtonArrow {
 	display: inline-block;
 	margin-left: 0.5rem;
 	width: 10px;
@@ -197,6 +197,10 @@ ui5-shellbar {
 	height: 1.675rem;
 }
 
+.sapWCShellBarLogo:not([src]) {
+	display: none;
+}
+
 .sapWCShellBarIconButton {
 	min-width: 2.25rem;
 	font-size: 1rem;
@@ -232,6 +236,19 @@ ui5-shellbar {
 	display: flex;
 	align-items: center;
 	padding: 0.25rem 0.5rem;
+	cursor: text;
+	-webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+	user-select: text;
+}
+
+.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive {
+	-webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+	user-select: none;
+	cursor: pointer;
 }
 
 .sapWCShellBarMenuButton.sapWCShellBarMenuButtonNoLogo {
@@ -379,7 +396,7 @@ span[dir=rtl] .sapWCShellBarMenuButton {
 	margin-left: 0;
 }
 
-span[dir=rtl] .sapWCShellBarMenuButtonArrow {
+span[dir=rtl] .sapWCShellBarMenuButtonInteractive .sapWCShellBarMenuButtonArrow {
 	margin-right: .5rem;
 	margin-left: 0;
 }

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html b/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html
@@ -124,6 +124,12 @@
 		<ui5-shellbar-item data-ui5-slot="items" id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
 
 		<ui5-input data-ui5-slot="searchField"></ui5-input>
+
+		<ui5-li id="menu-item-1" data-ui5-slot="menuItems" type="Active">Application 1</ui5-li>
+		<ui5-li id="menu-item-2" data-ui5-slot="menuItems" type="Active">Application 2</ui5-li>
+		<ui5-li data-ui5-slot="menuItems" type="Active">Application 3</ui5-li>
+		<ui5-li data-ui5-slot="menuItems" type="Active">Application 4</ui5-li>
+		<ui5-li data-ui5-slot="menuItems" type="Active">Application 5</ui5-li>
 	</ui5-shellbar>
 
 	<ui5-popover id="popover" hide-header placement-type="Bottom">
@@ -162,11 +168,6 @@
 			window["press-input"].value = "Profile";
 		});
 
-		shellbar.addEventListener("titlePress", function(event) {
-			window["app-list-popover"].openBy(event.detail.targetRef);
-			window["press-input"].value = "Title";
-		});
-
 		shellbar.addEventListener("notificationsPress", function(event) {
 			window["press-input"].value = "Notifications"
 		});
@@ -183,6 +184,10 @@
 			window["press-input"].value = "CoPilot"
 		});
 
+		shellbar.addEventListener("menuItemPress", function(event) {
+			window["press-input"].value = event.detail.item.textContent;
+		});
+
 		["disc", "call"].forEach(function(id) {
 			window[id].addEventListener("press", function(event) {
 				window["press-input"].value = event.target.id;

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/ShellBar.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/ShellBar.sample.html
@@ -67,6 +67,12 @@ <h3>ShellBar</h3>
 	<ui5-shellbar-item data-ui5-slot="items" id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
 
 	<ui5-input data-ui5-slot="searchField"></ui5-input>
+
+	<ui5-li data-ui5-slot="menuItems" type="Active">Application 1</ui5-li>
+	<ui5-li data-ui5-slot="menuItems" type="Active">Application 2</ui5-li>
+	<ui5-li data-ui5-slot="menuItems" type="Active">Application 3</ui5-li>
+	<ui5-li data-ui5-slot="menuItems" type="Active">Application 4</ui5-li>
+	<ui5-li data-ui5-slot="menuItems" type="Active">Application 5</ui5-li>
 </ui5-shellbar>
 
 <ui5-popover id="action-popover" hide-header placement-type="Bottom">
@@ -85,24 +91,11 @@ <h3>ShellBar</h3>
 	</div>
 </ui5-popover>
 
-<ui5-popover id="app-list-popover" hide-header placement-type="Bottom">
-	<ui5-list separators="None">
-		<ui5-li type="Active">Application 1</ui5-li>
-		<ui5-li type="Active">Application 2</ui5-li>
-		<ui5-li type="Active">Application 3</ui5-li>
-		<ui5-li type="Active">Application 4</ui5-li>
-		<ui5-li type="Active">Application 5</ui5-li>
-	</ui5-list>
-</ui5-popover>
-
 <script>
 	shellbar.addEventListener("profilePress", function(event) {
 		window["action-popover"].openBy(event.detail.targetRef);
 	});
 
-	shellbar.addEventListener("titlePress", function(event) {
-		window["app-list-popover"].openBy(event.detail.targetRef);
-	});
 </script>
 				</div>
 
@@ -126,6 +119,13 @@ <h3>ShellBar</h3>
 	<ui5-shellbar-item data-ui5-slot="items" id="call" src="sap-icon://incoming-call" text="Incoming Calls"></ui5-shellbar-item>
 
 	<ui5-input data-ui5-slot="searchField"></ui5-input>
+
+	<ui5-li data-ui5-slot="menuItems" type="Active">Application 1</ui5-li>
+	<ui5-li data-ui5-slot="menuItems" type="Active">Application 2</ui5-li>
+	<ui5-li data-ui5-slot="menuItems" type="Active">Application 3</ui5-li>
+	<ui5-li data-ui5-slot="menuItems" type="Active">Application 4</ui5-li>
+	<ui5-li data-ui5-slot="menuItems" type="Active">Application 5</ui5-li>
+
 </ui5-shellbar>
 
 <ui5-popover id="popover" hide-header placement-type="Bottom">
@@ -144,24 +144,11 @@ <h3>ShellBar</h3>
 	</div>
 </ui5-popover>
 
-<ui5-popover id="app-list-popover" hide-header placement-type="Bottom">
-	<ui5-list separators="None">
-		<ui5-li type="Active">Application 1</ui5-li>
-		<ui5-li type="Active">Application 2</ui5-li>
-		<ui5-li type="Active">Application 3</ui5-li>
-		<ui5-li type="Active">Application 4</ui5-li>
-		<ui5-li type="Active">Application 5</ui5-li>
-	</ui5-list>
-</ui5-popover>
-
 <script>
 	shellbar.addEventListener("profilePress", function(event) {
 		popover.openBy(event.detail.targetRef);
 	});
 
-	shellbar.addEventListener("titlePress", function(event) {
-		window["app-list-popover"].openBy(event.detail.targetRef);
-	});
 </script>
 		</xmp>
 				</pre>