feat(ui5-shellbar): Improve control behaviour (#72)

SAP · Feb 21, 2019 · fdc743d · fdc743d
1 parent a5fae96
commit fdc743d
Show file tree

Hide file tree

Showing 23 changed files with 1,511 additions and 372 deletions.
diff --git a/packages/base/src/sap/ui/webcomponents/base/WebComponent.js b/packages/base/src/sap/ui/webcomponents/base/WebComponent.js
@@ -423,8 +423,11 @@ class WebComponent extends HTMLElement {
 		}
 	}
 
-	focus() {
+	async focus() {
+		await this._waitForDomRef();
+
 		const focusDomRef = this.getFocusDomRef();
+
 		if (focusDomRef) {
 			focusDomRef.focus();
 		}

diff --git a/packages/main/src/Icon.js b/packages/main/src/Icon.js
@@ -104,6 +104,7 @@ class Icon extends WebComponent {
 
 	onkeydown(event) {
 		if (event.which === KeyCodes.SPACE) {
+			event.preventDefault();
 			this.__spaceDown = true;
 		}
 	}

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -13,17 +13,28 @@ import belize from "./themes/sap_belize/Input.less";
 import belizeHcb from "./themes/sap_belize_hcb/Input.less";
 import fiori3 from "./themes/sap_fiori_3/Input.less";
 
+// Styles for searchField
+import shellBarInput from "./themes/sap_fiori_3/ShellBarInput.less";
+import shellBarInputBelize from "./themes/sap_belize/ShellBarInput.less";
+import shellBarInputBelizeHcb from "./themes/sap_belize_hcb/ShellBarInput.less";
+
 ShadowDOM.registerStyle("sap_belize", "Input.css", belize);
 ShadowDOM.registerStyle("sap_belize_hcb", "Input.css", belizeHcb);
 ShadowDOM.registerStyle("sap_fiori_3", "Input.css", fiori3);
 
+
+ShadowDOM.registerStyle("sap_fiori_3", "ShellBarInput.css", shellBarInput);
+ShadowDOM.registerStyle("sap_belize", "ShellBarInput.css", shellBarInputBelize);
+ShadowDOM.registerStyle("sap_belize_hcb", "ShellBarInput.css", shellBarInputBelizeHcb);
+
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-input",
 	styleUrl: [
 		"Input.css",
+		"ShellBarInput.css",
 	],
 	defaultSlot: "suggestionItems",
 	slots: /** @lends sap.ui.webcomponents.main.Input.prototype */ {

diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
@@ -399,7 +399,13 @@ class Popup extends WebComponent {
 	}
 
 	storeCurrentFocus() {
-		this._lastFocusableElement = document.activeElement;
+		let element = document.activeElement;
+
+		while (element.shadowRoot && element.shadowRoot.activeElement) {
+			element = element.shadowRoot.activeElement;
+		}
+
+		this._lastFocusableElement = element;
 	}
 
 	resetFocus() {

diff --git a/packages/main/src/ShellBar.hbs b/packages/main/src/ShellBar.hbs
@@ -2,94 +2,102 @@
 
 	<div class="{{classes.leftContainer}}">
 
+		{{#if ctr.icon}}
+			<div class="sapWCShellBarBeginIcon" tabindex="0">
+				<slot name="{{ctr.icon._slot}}"></slot>
+			</div>
+		{{/if}}
+
 		{{#unless interactiveLogo}}
 			<img class="{{classes.logo}}" src="{{ctr.logo}}" />
 		{{/unless}}
 
-		<button class="{{classes.button}}" @click="{{ctr._header.press}}">
+		<button tabindex="0" class="{{classes.button}}" @click="{{ctr._header.press}}">
 			{{#if interactiveLogo}}
 				<img class="{{classes.logo}}" src="{{ctr.logo}}" />
 			{{/if}}
 
-			<h1 class="{{classes.buttonTitle}}">
-				<bdi class="{{classes.title}}">{{ctr.primaryTitle}}</bdi>
-			</h1>
+			{{#if ctr.primaryTitle}}
+				<h1 class="{{classes.buttonTitle}}">
+					<bdi class="{{classes.title}}">{{ctr.primaryTitle}}</bdi>
+				</h1>
+			{{/if}}
+
 			<span class="{{classes.arrow}}"></span>
 		</button>
 
 		<h2 class="{{classes.secondaryTitle}}">{{ctr.secondaryTitle}}</h2>
 	</div>
 
-	{{#if ctr.showCoPilot}}
-		<div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerMiddle">
+	<div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerMiddle">
+		{{#if ctr.showCoPilot}}
 			{{> coPilot}}
-		</div>
-	{{/if}}
+		{{else}}
+			<span class="sapWCShellBarCoPilotPlaceholder"></span>
+		{{/if}}
+	</div>
 
 	<div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerRight">
 
-		{{#each ctr._itemsInfo}}
-			{{#if this.src}}
-				<ui5-icon
-					tabindex="{{this._tabIndex}}"
-					data-ui5-notification-count="{{../../ctr.notificationCount}}"
-					data-ui5-external-action-item-id="{{this.refItemid}}"
-					tabindex="0"
-					class="{{this.classes}}"
-					src="{{this.src}}"
-					id="{{this.id}}"
-					style="{{this.style}}"
-					@press={{this.press}}>
-				</ui5-icon>
-			{{else}}
-				<div 
-					tabindex="{{this._tabIndex}}"
-					id="{{this.id}}"
-					class="{{this.classes}}"
-					style="{{this.style}}"
-					@click="{{this.press}}"
-				>
-					<span class="{{this.subclasses}}"></span>
-				</div>
-			{{/if}}
-		{{/each}}
+		<div class="sapWCShellBarOverflowContainerRightChild">
+			{{#each ctr._itemsInfo}}
+				{{#if this.src}}
+					<ui5-icon
+						tabindex="{{this._tabIndex}}"
+						data-ui5-notification-count="{{../../ctr.notificationCount}}"
+						data-ui5-external-action-item-id="{{this.refItemid}}"
+						class="{{this.classes}}"
+						src="{{this.src}}"
+						id="{{this.id}}"
+						style="{{this.style}}"
+						@press={{this.press}}>
+					</ui5-icon>
+				{{else}}
+					<div
+						tabindex="{{this._tabIndex}}"
+						id="{{this.id}}"
+						style="{{this.style}}"
+						class="{{this.classes}}"
+						@click="{{this.press}}"
+					>
+						<span style="{{this.subStyles}}" class="{{this.subclasses}}"></span>
+					</div>
+				{{/if}}
+			{{/each}}
+		</div>
 	</div>
 
-	<div
-		class="{{ctr._popupSettings.classes}}"
-		style="{{ctr._popupSettings.style}}"
-		@focusout={{ctr._popupSettings.focusout}}
-	>
-			<ui5-list separators="None" @itemPress="{{ctr._actionList.itemPress}}">
-				{{#each _hiddenIcons}}
-					<ui5-li 
-						data-ui5-external-action-item-id="{{this.refItemid}}" 
-						icon="{{this.src}}"
-						type="Active"
-						@_press="{{this.press}}"
-					>{{this.text}}
-					</ui5-li>
-				{{/each}}
-			</ui5-list>
-	</div>
+	<ui5-popover placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" hide-header hide-arrow>
+		<ui5-list separators="None" @itemPress="{{ctr._actionList.itemPress}}">
+			{{#each _hiddenIcons}}
+				<ui5-li
+					data-ui5-external-action-item-id="{{this.refItemid}}" 
+					icon="{{this.src}}"
+					type="Active"
+					@_press="{{this.press}}"
+				>{{this.text}}
+				</ui5-li>
+			{{/each}}
+		</ui5-list>
+	</ui5-popover>
 
 	<div class="{{classes.blockLayer}}">
 	</div>
 
-	{{#if ctr.input}}
-		<div id="{{ctr._id}}-searchfield-wrapper"
-			class="{{classes.searchField}}"
-			style="{{styles.searchField}}"
-			@focusout={{ctr._searchField.focusout}}
-		>
-			<slot name="{{ctr.input._slot}}"></slot>
-		</div>
-	{{/if}}
+	<div id="{{ctr._id}}-searchfield-wrapper"
+		class="{{classes.searchField}}"
+		style="{{styles.searchField}}"
+		@focusout={{ctr._searchField.focusout}}
+	>
+		{{#if ctr.searchField}}
+			<slot name="{{ctr.searchField._slot}}"></slot>
+		{{/if}}
+	</div>
 </div>
 
 {{#*inline "coPilot"}}
-	<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"
-		style="background-color: #354A5F;">
+	<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"
+		style="background-color: transparent;">
 		<defs>
 			<linearGradient id="grad1" x1="0%" x2="100%" y1="100%" y2="0%">
 				<stop offset="0%" style="stop-color:#C0D9F2;stop-opacity:0.87"></stop>
@@ -134,6 +142,6 @@
 					begin="shell_avatar.mousedown" repeatCount="1" additive="sum"></animateTransform>
 			</path>
 		</g>
-		<circle cx="0" cy="0" r="76" fill="#354A5F" id="shell_avatar"></circle>
+		<circle cx="0" cy="0" r="76" class="sapWCShellBarCoPilotMiddle" id="shell_avatar"></circle>
 	</svg>
 {{/inline}}