diff --git a/packages/main/src/ShellBar.hbs b/packages/main/src/ShellBar.hbs index 8c030dd657ef..3e1756871c56 100644 --- a/packages/main/src/ShellBar.hbs +++ b/packages/main/src/ShellBar.hbs @@ -7,7 +7,7 @@ {{/if}} {{#unless interactiveLogo}} - + {{/unless}} {{#if showArrowDown}} @@ -96,8 +96,8 @@ {{#*inline "coPilot"}} - + diff --git a/packages/main/src/ShellBar.js b/packages/main/src/ShellBar.js index c922152dc795..71c47957cee5 100644 --- a/packages/main/src/ShellBar.js +++ b/packages/main/src/ShellBar.js @@ -2,6 +2,7 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; import { getRTL } from "@ui5/webcomponents-base/src/Configuration"; import URI from "@ui5/webcomponents-base/src/types/URI"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent"; +import Function from "@ui5/webcomponents-base/src/types/Function"; import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler"; import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation"; @@ -136,6 +137,14 @@ const metadata = { _header: { type: Object, }, + + _logoPress: { + type: Function, + }, + + _coPilotPress: { + type: Function, + }, }, slots: /** @lends sap.ui.webcomponents.main.ShellBar.prototype */ { @@ -231,6 +240,32 @@ const metadata = { targetRef: { type: HTMLElement }, }, }, + + /** + * Fired, when the logo is pressed. + * + * @event + * @param {HTMLElement} targetRef dom ref of the clicked element + * @public + */ + logoPress: { + detail: { + targetRef: { type: HTMLElement }, + }, + }, + + /** + * Fired, when the co pilot is pressed. + * + * @event + * @param {HTMLElement} targetRef dom ref of the clicked element + * @public + */ + coPilotPress: { + detail: { + targetRef: { type: HTMLElement }, + }, + }, }, }; @@ -374,6 +409,18 @@ class ShellBar extends WebComponent { this.shadowRoot.querySelector("ui5-popover").close(); this._overflowActions(); }; + + this._logoPress = event => { + this.fireEvent("logoPress", { + targetRef: this.shadowRoot.querySelector(".sapWCShellBarLogo"), + }); + }; + + this._coPilotPress = event => { + this.fireEvent("coPilotPress", { + targetRef: this.shadowRoot.querySelector(".ui5-shellbar-coPilot"), + }); + }; } onBeforeRendering() { diff --git a/packages/main/src/themes-next/ShellBar.css b/packages/main/src/themes-next/ShellBar.css index 415fd7e32462..645ae71d18e6 100644 --- a/packages/main/src/themes-next/ShellBar.css +++ b/packages/main/src/themes-next/ShellBar.css @@ -193,6 +193,7 @@ ui5-shellbar { } .sapWCShellBarLogo { + cursor: pointer; height: 1.675rem; } diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html b/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html index d8c30ef357a3..f7e04f1250d7 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html @@ -175,6 +175,14 @@ window["press-input"].value = "Product Switch" }); + shellbar.addEventListener("logoPress", function(event) { + window["press-input"].value = "Logo" + }); + + shellbar.addEventListener("coPilotPress", function(event) { + window["press-input"].value = "CoPilot" + }); + ["disc", "call"].forEach(function(id) { window[id].addEventListener("press", function(event) { window["press-input"].value = event.target.id; diff --git a/packages/main/test/specs/ShellBar.spec.js b/packages/main/test/specs/ShellBar.spec.js index d65c1d4c475e..f6fe91379280 100644 --- a/packages/main/test/specs/ShellBar.spec.js +++ b/packages/main/test/specs/ShellBar.spec.js @@ -228,6 +228,22 @@ describe("Component Behaviour", () => { assert.strictEqual(input.getValue(), "Product Switch", "Input value is set by click event of Product Switch icon"); }); + it("tests logoPress event", () => { + const logo = browser.findElementDeep("#shellbar >>> .sapWCShellBarLogo"); + const input = browser.findElementDeep("#press-input"); + + logo.click(); + assert.strictEqual(input.getValue(), "Logo", "Input value is set by click event of Logo"); + }); + + it("tests coPilotPress event", () => { + const coPilot = browser.findElementDeep("#shellbar >>> .ui5-shellbar-coPilot"); + const input = browser.findElementDeep("#press-input"); + + coPilot.click(); + assert.strictEqual(input.getValue(), "CoPilot", "Input value is set by click event of CoPilot"); + }); + it("tests if searchfield appears when clicking on search icon", () => { const searchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarSearchIcon"); const searchField = browser.findElementDeep("#shellbar ui5-input");