Skip to content

Commit

Permalink
fix(ui5-shellbar): provide correct target ref when item is in overflo…
Browse files Browse the repository at this point in the history 
…w popover (#1334)

FIXES: #1325
  • Loading branch information
@MapTo0
MapTo0 committed Mar 23, 2020
1 parent 5a99536 commit 7636bb7
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 120 deletions.
12 changes: 8 additions & 4 deletions packages/fiori/src/ShellBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@ const metadata = {

/**
* Fired, when the product switch icon is activated.
* <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
*
* @event
* @param {HTMLElement} targetRef dom ref of the activated element
Expand Down Expand Up @@ -280,6 +281,7 @@ const metadata = {

/**
* Fired, when a menu item is activated
* <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
*
* @event
* @param {HTMLElement} item dom ref of the activated list item
Expand Down Expand Up @@ -448,7 +450,7 @@ class ShellBar extends UI5Element {
_menuItemPress(event) {
this.fireEvent("menuItemClick", {
item: event.detail.item,
});
}, true);
}

_logoPress(event) {
Expand Down Expand Up @@ -712,9 +714,11 @@ class ShellBar extends UI5Element {
}

_handleProductSwitchPress(event) {
this.fireEvent("productSwitchClick", {
targetRef: this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch"),
});
const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch");

this._defaultItemPressPrevented = !this.fireEvent("productSwitchClick", {
targetRef: buttonRef.classList.contains("ui5-shellbar-hidden-button") ? event.target : buttonRef,
}, true);
}

/**
Expand Down
233 changes: 117 additions & 116 deletions packages/fiori/test/pages/ShellBar.html
View file
Original file line number Diff line number Diff line change
@@ -1,141 +1,141 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Shell Bar</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

<script data-ui5-config type="application/json">
{
"rtl": false
}
</script>

<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Shell Bar</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

<script data-ui5-config type="application/json">
{
"rtl": false
}
</script>

<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../resources/bundle.esm.js" type="module"></script>
<script nomodule src="../../resources/bundle.es5.js"></script>

<style>
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.popover-content {
margin-top: 1rem;
}

.shellbar-example {
margin-top: 1px;
}
</style>
<style>
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.popover-content {
margin-top: 1rem;
}

.shellbar-example {
margin-top: 1px;
}
</style>
</head>

<body style="background-color: var(--sapBackgroundColor);">
<ui5-shellbar
class="shellbar-example"
primary-title="Product Title"
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
secondary-title="Second Title"
class="shellbar-example"
primary-title="Product Title"
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
secondary-title="Second Title"
></ui5-shellbar>

<ui5-shellbar
class="shellbar-example"
primary-title="Product Title"
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
secondary-title="Second Title"
show-co-pilot
class="shellbar-example"
primary-title="Product Title"
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
secondary-title="Second Title"
show-co-pilot
></ui5-shellbar>

<ui5-shellbar
class="shellbar-example"
primary-title="Product Title"
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
secondary-title="Second Title"
show-notifications
show-product-switch
class="shellbar-example"
primary-title="Product Title"
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
secondary-title="Second Title"
show-notifications
show-product-switch
></ui5-shellbar>

<ui5-shellbar
class="shellbar-example"
primary-title="Custom Actions"
secondary-title="Second Title"
id="shellbarwithitems"
class="shellbar-example"
primary-title="Custom Actions"
secondary-title="Second Title"
id="shellbarwithitems"
>
<ui5-shellbar-item icon="accelerated" text="Hello World!"></ui5-shellbar-item>
<ui5-shellbar-item icon="accept" text="Hello World!"></ui5-shellbar-item>
<ui5-shellbar-item icon="alert" text="Hello World!"></ui5-shellbar-item>
<ui5-shellbar-item icon="discussion" text="Hello World!" count="42"></ui5-shellbar-item>
<ui5-shellbar-item icon="error" text="Hello World!"></ui5-shellbar-item>
<ui5-shellbar-item icon="hello-world" text="UI5 Webcomponents"></ui5-shellbar-item>
<ui5-shellbar-item icon="laptop" text="UI5 Webcomponents"></ui5-shellbar-item>
<ui5-shellbar-item icon="nutrition-activity" text="UI5 Webcomponents"></ui5-shellbar-item>
<ui5-shellbar-item icon="sound-loud" text="UI5 Webcomponents"></ui5-shellbar-item>
<ui5-shellbar-item icon="accelerated" text="Hello World!"></ui5-shellbar-item>
<ui5-shellbar-item icon="accept" text="Hello World!"></ui5-shellbar-item>
<ui5-shellbar-item icon="alert" text="Hello World!"></ui5-shellbar-item>
<ui5-shellbar-item icon="discussion" text="Hello World!" count="42"></ui5-shellbar-item>
<ui5-shellbar-item icon="error" text="Hello World!"></ui5-shellbar-item>
<ui5-shellbar-item icon="hello-world" text="UI5 Webcomponents"></ui5-shellbar-item>
<ui5-shellbar-item icon="laptop" text="UI5 Webcomponents"></ui5-shellbar-item>
<ui5-shellbar-item icon="nutrition-activity" text="UI5 Webcomponents"></ui5-shellbar-item>
<ui5-shellbar-item icon="sound-loud" text="UI5 Webcomponents"></ui5-shellbar-item>
</ui5-shellbar>

<ui5-shellbar
class="shellbar-example"
secondary-title="No primary title"
class="shellbar-example"
secondary-title="No primary title"
></ui5-shellbar>

<ui5-shellbar
id="shellbarWithLogoClick"
class="shellbar-example"
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
primary-title="SAP Labs Bulgaria"
show-notifications
show-product-switch
id="shellbarWithLogoClick"
class="shellbar-example"
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
primary-title="SAP Labs Bulgaria"
show-notifications
show-product-switch
>
<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
<ui5-avatar slot="profile" icon="customer"></ui5-avatar>

<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
<ui5-shellbar-item icon="thing-type" text="Messages"></ui5-shellbar-item>
<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
<ui5-shellbar-item icon="thing-type" text="Messages"></ui5-shellbar-item>
<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>

<ui5-input slot="searchField"></ui5-input>
<ui5-input slot="searchField"></ui5-input>

</ui5-shellbar>

<ui5-shellbar
class="shellbar-example"
id="shellbar"
primary-title="Product Title"
secondary-title="Second title"
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
second-title="Second Title"
notification-count="99+"
show-notifications
show-product-switch
show-co-pilot
class="shellbar-example"
id="shellbar"
primary-title="Product Title"
secondary-title="Second title"
logo="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"
second-title="Second Title"
notification-count="99+"
show-notifications
show-product-switch
show-co-pilot
>

<ui5-avatar slot="profile" image="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png"></ui5-avatar>
<ui5-avatar slot="profile" image="https://openui5nightly.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png"></ui5-avatar>

<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>

<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>

<ui5-input slot="searchField"></ui5-input>
<ui5-input slot="searchField"></ui5-input>

<ui5-li id="menu-item-1" slot="menuItems">Application 1</ui5-li>
<ui5-li id="menu-item-2" slot="menuItems">Application 2</ui5-li>
<ui5-li slot="menuItems">Application 3</ui5-li>
<ui5-li slot="menuItems">Application 4</ui5-li>
<ui5-li slot="menuItems">Application 5</ui5-li>
<ui5-li id="menu-item-1" slot="menuItems">Application 1</ui5-li>
<ui5-li id="menu-item-2" slot="menuItems">Application 2</ui5-li>
<ui5-li slot="menuItems">Application 3</ui5-li>
<ui5-li slot="menuItems">Application 4</ui5-li>
<ui5-li slot="menuItems">Application 5</ui5-li>
</ui5-shellbar>

<section class="ui5-content-density-compact">
<h3>ShellBar in Compact</h3>
<div>
<ui5-shellbar primary-title="Product Title" show-notifications>
<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
<ui5-shellbar-item icon="disconnected" text="Disconnect"></ui5-shellbar-item>
<ui5-shellbar-item icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
<ui5-li id="menu-item-1" slot="menuItems">Application 1</ui5-li>
<ui5-li id="menu-item-2" slot="menuItems">Application 2</ui5-li>
<ui5-li slot="menuItems">Application 3</ui5-li>
Expand All @@ -146,36 +146,36 @@ <h3>ShellBar in Compact</h3>
</section>

<ui5-popover id="popover" placement-type="Bottom">
<div class="popover-header">
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">John Doe</ui5-title>
</div>

<div class="popover-content">
<ui5-list separators="None" >
<ui5-li icon="sys-find">App Finder</ui5-li>
<ui5-li icon="settings">Settings</ui5-li>
<ui5-li icon="edit">Edit Home Page</ui5-li>
<ui5-li icon="sys-help">Help</ui5-li>
<ui5-li icon="log">Sign out</ui5-li>
</ui5-list>
</div>
<div class="popover-header">
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">John Doe</ui5-title>
</div>

<div class="popover-content">
<ui5-list separators="None" >
<ui5-li icon="sys-find">App Finder</ui5-li>
<ui5-li icon="settings">Settings</ui5-li>
<ui5-li icon="edit">Edit Home Page</ui5-li>
<ui5-li icon="sys-help">Help</ui5-li>
<ui5-li icon="log">Sign out</ui5-li>
</ui5-list>
</div>
</ui5-popover>

<ui5-popover id="app-list-popover" placement-type="Bottom">
<ui5-list separators="None">
<ui5-li>Application 1</ui5-li>
<ui5-li>Application 2</ui5-li>
<ui5-li>Application 3</ui5-li>
<ui5-li>Application 4</ui5-li>
<ui5-li>Application 5</ui5-li>
</ui5-list>
<ui5-list separators="None">
<ui5-li>Application 1</ui5-li>
<ui5-li>Application 2</ui5-li>
<ui5-li>Application 3</ui5-li>
<ui5-li>Application 4</ui5-li>
<ui5-li>Application 5</ui5-li>
</ui5-list>
</ui5-popover>

<ui5-popover id="custom-item-popover" placement-type="Bottom">
<ui5-list separators="None">
<ui5-li id="custom-item-1" type="Active">Custom Popover Item 1</ui5-li>
<ui5-li type="Active">Custom Popover Item 2</ui5-li>
</ui5-list>
<ui5-list separators="None">
<ui5-li id="custom-item-1" type="Active">Custom Popover Item 1</ui5-li>
<ui5-li type="Active">Custom Popover Item 2</ui5-li>
</ui5-list>
</ui5-popover>

<ui5-input id="press-input" style="margin-top: 2rem;"></ui5-input>
Expand Down Expand Up @@ -216,6 +216,7 @@ <h3>ShellBar in Compact</h3>
});

shellbar.addEventListener("ui5-productSwitchClick", function(event) {
event.preventDefault();
window["press-input"].value = "Product Switch"
});

Expand Down
12 changes: 12 additions & 0 deletions packages/fiori/test/specs/ShellBar.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,18 @@ describe("Component Behavior", () => {
assert.strictEqual(input.getValue(), "Product Switch", "Input value is set by click event of Product Switch icon");
});

it("tests preventDefalt of productSwitchClick event", () => {
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
const staticAreaItemClassName = browser.getStaticAreaItemClassName("#shellbar")
const overflowPopover = browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
const productSwitchIcon = overflowPopover.$("ui5-list ui5-li:nth-child(5)");

overflowButton.click();
productSwitchIcon.click();

assert.ok(overflowPopover.isDisplayed(), "overflow popover should not be closed");
});

it("tests if searchfield toggles when clicking on search icon", () => {
const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
const searchField = browser.$("#shellbar ui5-input");
Expand Down

0 comments on commit 7636bb7

Please sign in to comment.