Skip to content

Commit

Permalink
feat(ui5-shellbar): introducing Joule (#8036)
Browse files Browse the repository at this point in the history
  • Loading branch information
@plamenivanov91
plamenivanov91 committed Jan 26, 2024
1 parent 19c4df1 commit ed5c20f
Show file tree
Hide file tree
Showing 13 changed files with 135 additions and 199 deletions.
58 changes: 21 additions & 37 deletions packages/fiori/src/ShellBar.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@
</div>
{{/if}}

<span class="ui5-shellbar-menu-button-arrow"></span>
<ui5-icon class="ui5-shellbar-menu-button-arrow"
name="slim-arrow-down">
</ui5-icon>
</button>
{{/if}}
{{/if}}
Expand Down Expand Up @@ -88,27 +90,17 @@
</div>

<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle">
{{#if showCoPilot}}
<div class="ui5-shellbar-copilot-wrapper"
tabindex="0"
aria-label="{{_copilotText}}"
role="button"
title="{{_copilotText}}"
@keydown="{{_coPilotKeydown}}"
@keyup="{{_coPilotKeyup}}"
?active="{{coPilotActive}}"
data-ui5-stable="copilot"
>
{{> coPilot}}
</div>
{{else}}
<span class="ui5-shellbar-co-pilot-placeholder"></span>
{{#if _isXXLBreakpoint}}
{{#if hasSearchField}}
<slot name="searchField"></slot>
{{/if}}
{{/if}}
</div>

<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
<div class="ui5-shellbar-overflow-container-right-child">

{{#unless _isXXLBreakpoint }}
{{#if hasSearchField}}
{{#if _fullWidthSearch}}
<div class="ui5-shellbar-search-full-width-wrapper" style="{{styles.searchField}}">
Expand Down Expand Up @@ -143,6 +135,19 @@
.accessibilityAttributes={{accInfo.search.accessibilityAttributes}}
></ui5-button>
{{/if}}
{{/unless}}

{{#if showCoPilot}}
<ui5-button
id="{{this._id}}-item-coPilot"
@click={{_coPilotClick}}
tooltip="{{_copilotText}}"
class="{{classes.items.copilot}} ui5-shellbar-button ui5-shellbar-coPilot"
icon={{_coPilotIcon}}
design="Transparent"
data-ui5-stable="copilot"
/>
{{/if}}

{{#each customItemsInfo}}
<ui5-button
Expand Down Expand Up @@ -220,24 +225,3 @@
<slot name="profile"></slot>
</ui5-button>
{{/inline}}

{{#*inline "coPilot"}}
<svg @click="{{_coPilotClick}}" focusable="false" width="48" role="presentation" aria-hidden="true" height="48" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">
<defs>
<linearGradient id="f" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" class="ui5-shellbar-co-pilot-color1 ui5-shellbar-co-pilot-opaicty7"/><stop offset="80%" class="ui5-shellbar-co-pilot-color2 ui5-shellbar-co-pilot-opaicty7"/></linearGradient>
<linearGradient id="e" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" class="ui5-shellbar-co-pilot-color1 ui5-shellbar-co-pilot-opaicty36"/><stop offset="80%" class="ui5-shellbar-co-pilot-color2 ui5-shellbar-co-pilot-opaicty36"/></linearGradient>
<linearGradient id="c" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" class="ui5-shellbar-co-pilot-color1 ui5-shellbar-co-pilot-opaicty2"/><stop offset="80%" class="ui5-shellbar-co-pilot-color2 ui5-shellbar-co-pilot-opaicty2"/></linearGradient>
<path id="d" d="M98.158 0c.158 17.395-9.107 31.335-18.609 45.928-9.21 14.153-18.933 25.29-33.377 34.045C31.427 88.918 17.25 94.39 0 94.273c-17.155-.115-30.823-6.582-45.798-14.949-15.216-8.497-27.76-16.77-37.253-31.375C-92.668 33.158-98.487 17.571-97.179 0c1.233-16.978 12.691-29.086 21.044-43.957 8.456-15.059 12.272-32.152 26.873-41.367 14.76-9.322 31.83-7.68 49.262-6.77 16.897.88 31.86 3.06 46.42 11.693 14.452 8.568 23.18 20.866 32.26 34.976C88.05-30.91 98.014-17.277 98.157 0z">
<animate attributeName="d" values="{{coPilot.animationValues}}" dur="30s" repeatCount="indefinite"/>
<animateTransform attributeName="transform" type="scale" values="1;1.05;1.05;1.02;1" dur="0.15s" begin="a.mousedown" repeatCount="1" additive="sum"/>
</path><mask id="b"><circle r="120" fill="#fff"/><circle r="76"/></mask>
</defs>
<g mask="url(#b)">
<g transform="rotate(54)"><use xlink:href="#d" fill="url(#c)">
{{#if coPilot.animated}}<animateTransform attributeName="transform" type="rotate" from="54" to="416" dur="15s" repeatCount="indefinite"/>{{/if}}</use></g>
<use xlink:href="#d" fill="url(#e)" transform="rotate(74)"/>
<g transform="rotate(90)"><use xlink:href="#d" fill="url(#f)">
{{#if coPilot.animated}}<animateTransform attributeName="transform" type="rotate" from="90" to="450" dur="30s" repeatCount="indefinite"/>{{/if}}</use></g>
</g><circle cx="0" cy="0" r="76" class="ui5-shellbar-co-pilot-circle" id="a"/>
</svg>
{{/inline}}
77 changes: 48 additions & 29 deletions packages/fiori/src/ShellBar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/Lis
import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import Popover from "@ui5/webcomponents/dist/Popover.js";
import Button from "@ui5/webcomponents/dist/Button.js";
import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
import type Input from "@ui5/webcomponents/dist/Input.js";
import type { IButton } from "@ui5/webcomponents/dist/Interfaces.js";
import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
Expand All @@ -37,6 +38,10 @@ import ShellBarPopoverTemplate from "./generated/templates/ShellBarPopoverTempla
import shellBarStyles from "./generated/themes/ShellBar.css.js";
import ShellBarPopoverCss from "./generated/themes/ShellBarPopover.css.js";

// Icons
import "@ui5/webcomponents-icons/dist/da.js";
import "@ui5/webcomponents-icons/dist/da-2.js";

import {
SHELLBAR_LABEL,
SHELLBAR_LOGO,
Expand Down Expand Up @@ -402,12 +407,6 @@ class ShellBar extends UI5Element {
@property()
breakpointSize!: string;

/**
* @private
*/
@property({ type: Boolean })
coPilotActive!: boolean;

/**
* @private
*/
Expand All @@ -429,6 +428,12 @@ class ShellBar extends UI5Element {
@property({ type: Boolean, noAttribute: true })
_fullWidthSearch!: boolean;

@property({ type: Boolean, noAttribute: true })
_coPilotPressed!: boolean;

@property({ type: Boolean, noAttribute: true })
_isXXLBreakpoint!: boolean;

/**
* Defines the <code>ui5-shellbar</code> aditional items.
* <br><br>
Expand Down Expand Up @@ -498,11 +503,20 @@ class ShellBar extends UI5Element {
_defaultItemPressPrevented: boolean;
menuItemsObserver: MutationObserver;
coPilot?: ShellBarCoPilot;
_coPilotIcon: string;
_debounceInterval?: Timeout | null;
_hiddenIcons?: Array<IShelBarItemInfo>;
_handleResize: ResizeObserverCallback;
_headerPress: () => Promise<void>;

static get CO_PILOT_ICON_PRESSED() {
return "sap-icon://da-2";
}

static get CO_PILOT_ICON_UNPRESSED() {
return "sap-icon://da";
}

static get FIORI_3_BREAKPOINTS() {
return [
599,
Expand All @@ -528,6 +542,7 @@ class ShellBar extends UI5Element {

this._itemsInfo = [];
this._isInitialRendering = true;
this._coPilotIcon = ShellBar.CO_PILOT_ICON_UNPRESSED;

// marks if preventDefault() is called in item's press handler
this._defaultItemPressPrevented = false;
Expand All @@ -554,6 +569,12 @@ class ShellBar extends UI5Element {
};
}

_toggleCoPilotIcon(button: ToggleButton) {
this._coPilotIcon = !this._coPilotPressed ? ShellBar.CO_PILOT_ICON_PRESSED : ShellBar.CO_PILOT_ICON_UNPRESSED;
button.icon = this._coPilotIcon;
this._coPilotPressed = !this._coPilotPressed;
}

_debounce(fn: () => Promise<void>, delay: number) {
clearTimeout(this._debounceInterval!);
this._debounceInterval = setTimeout(() => {
Expand Down Expand Up @@ -616,34 +637,15 @@ class ShellBar extends UI5Element {
}
}

_fireCoPilotClick() {
_fireCoPilotClick(e: Event) {
this.fireEvent<ShellBarCoPilotClickEventDetail>("co-pilot-click", {
targetRef: this.shadowRoot!.querySelector(".ui5-shellbar-coPilot")!,
});
this._toggleCoPilotIcon(e.target as ToggleButton);
}

_coPilotClick() {
this._fireCoPilotClick();
}

_coPilotKeydown(e: KeyboardEvent) {
if (isSpace(e)) {
this.coPilotActive = true;
e.preventDefault();
return;
}

if (isEnter(e)) {
this.coPilotActive = true;
this._fireCoPilotClick();
}
}

_coPilotKeyup(e: KeyboardEvent) {
if (isSpace(e)) {
this._fireCoPilotClick();
}
this.coPilotActive = false;
_coPilotClick(e: MouseEvent) {
this._fireCoPilotClick(e);
}

onBeforeRendering() {
Expand Down Expand Up @@ -693,6 +695,7 @@ class ShellBar extends UI5Element {
this.breakpointSize = mappedSize;
}

this._isXXLBreakpoint = this.breakpointSize === "XXL";
return mappedSize;
}

Expand Down Expand Up @@ -953,6 +956,19 @@ class ShellBar extends UI5Element {
press: this._handleSearchIconPress.bind(this),
show: !!this.searchField.length,
},
{
icon: this._coPilotIcon,
text: this._copilotText,
classes: `${this.showCoPilot ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
priority: 4,
domOrder: this.showCoPilot ? (++domOrder) : -1,
styles: {
order: this.showCoPilot ? 1 : -10,
},
id: `${this.id}-item-coPilot`,
press: this._coPilotClick.bind(this),
show: !!this.showCoPilot,
},
...this.items.map((item: ShellBarItem) => {
item._getRealDomRef = () => this.getDomRef()!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
return {
Expand Down Expand Up @@ -1108,6 +1124,9 @@ class ShellBar extends UI5Element {
search: {
"ui5-shellbar-hidden-button": this.isIconHidden("search"),
},
copilot: {
"ui5-shellbar-hidden-button": this.isIconHidden(this._coPilotIcon),
},
overflow: {
"ui5-shellbar-hidden-button": this.isIconHidden("overflow"),
},
Expand Down
2 changes: 1 addition & 1 deletion packages/fiori/src/i18n/messagebundle.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ SHELLBAR_LABEL = Shell Bar
SHELLBAR_LOGO = Logo

#XACT: ARIA announcement for the CoPilot button
SHELLBAR_COPILOT = CoPilot
SHELLBAR_COPILOT = Joule

#XACT: ARIA announcement for the notifications button
SHELLBAR_NOTIFICATIONS = {0} Notifications
Expand Down
Loading

0 comments on commit ed5c20f

Please sign in to comment.