Skip to content

Commit

Permalink
fix(ui5-shellbar): fix overlapping of the search box over icons (#2155)
Browse files Browse the repository at this point in the history 
Now, when there is not enough space for the search field it is expanded to full width within the ui5-shellbar
and the search filed does not overlap any other elements in the ui5-shellbar any more.

FIXES: #2044
  • Loading branch information
@nnaydenow
nnaydenow authored Nov 26, 2020
1 parent 7ae9253 commit 3597902
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 68 deletions.
30 changes: 20 additions & 10 deletions packages/fiori/src/ShellBar.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,20 +74,30 @@
{{/if}}
</div>

<div id="{{_id}}-searchfield-wrapper"
class="ui5-shellbar-search-field"
style="{{styles.searchField}}"
>
{{#if searchField.length}}
<slot name="searchField"></slot>
{{/if}}
</div>

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

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

{{#if hasSearchField}}
{{#if _fullWidthSearch}}
<div class="ui5-shellbar-search-full-width-wrapper" style="{{styles.searchField}}">
<div class="ui5-shellbar-search-full-field">
<slot name="searchField"></slot>
</div>
<ui5-button
@click={{_handleCancelButtonPress}}
class="ui5-shellbar-button"
>
Cancel
</ui5-button>
</div>
{{/if}}

<div class="ui5-shellbar-search-field" style="{{styles.searchField}}">
{{#unless _fullWidthSearch}}
<slot name="searchField"></slot>
{{/unless}}
</div>

<ui5-button
id="{{this._id}}-item-1"
class="{{classes.items.search}} ui5-shellbar-button ui5-shellbar-search-button"
Expand Down
91 changes: 53 additions & 38 deletions packages/fiori/src/ShellBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
SHELLBAR_LOGO,
SHELLBAR_COPILOT,
SHELLBAR_NOTIFICATIONS,
SHELLBAR_CANCEL,
SHELLBAR_PROFILE,
SHELLBAR_PRODUCTS,
SHELLBAR_SEARCH,
Expand Down Expand Up @@ -144,10 +145,6 @@ const metadata = {
type: Object,
},

_searchField: {
type: Object,
},

_header: {
type: Object,
},
Expand All @@ -164,6 +161,10 @@ const metadata = {
type: Boolean,
noAttribute: true,
},
_fullWidthSearch: {
type: Boolean,
noAttribute: true,
},
},
managedSlots: true,
slots: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
Expand Down Expand Up @@ -376,7 +377,7 @@ class ShellBar extends UI5Element {

static get FIORI_3_BREAKPOINTS() {
return [
559,
599,
1023,
1439,
1919,
Expand All @@ -386,7 +387,7 @@ class ShellBar extends UI5Element {

static get FIORI_3_BREAKPOINTS_MAP() {
return {
"559": "S",
"599": "S",
"1023": "M",
"1439": "L",
"1919": "XL",
Expand Down Expand Up @@ -429,10 +430,6 @@ class ShellBar extends UI5Element {
},
};

this._searchField = {
left: 0,
};

this._handleResize = async event => {
await this._getResponsivePopover();
this.overflowPopover.close();
Expand Down Expand Up @@ -527,15 +524,19 @@ class ShellBar extends UI5Element {
const isHidden = (info.classes.indexOf("ui5-shellbar-hidden-button") !== -1);
const isSet = info.classes.indexOf("ui5-shellbar-invisible-button") === -1;
const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);

return isHidden && isSet && !isOverflowIcon;
return isHidden && isSet && !shouldStayOnScreen;
});

this._observeMenuItems();
}

onAfterRendering() {
this._overflowActions();

this._fullWidthSearch = this._showFullWidthSearch;
}

/**
Expand Down Expand Up @@ -582,10 +583,16 @@ class ShellBar extends UI5Element {

_handleActionsOverflow() {
const rightContainerRect = this.shadowRoot.querySelector(".ui5-shellbar-overflow-container-right").getBoundingClientRect();
const icons = this.shadowRoot.querySelectorAll(".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)");
let overflowSelector = ".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)";

if (this.showSearchField) {
overflowSelector += ",.ui5-shellbar-search-field";
}

const elementsToOverflow = this.shadowRoot.querySelectorAll(overflowSelector);
const isRTL = this.effectiveDir === "rtl";

let overflowCount = [].filter.call(icons, icon => {
let overflowCount = [].filter.call(elementsToOverflow, icon => {
const iconRect = icon.getBoundingClientRect();

if (isRTL) {
Expand All @@ -597,7 +604,7 @@ class ShellBar extends UI5Element {

overflowCount = overflowCount.length;

const items = this._getAllItems(!!overflowCount);
const items = this._getAllItems(!!overflowCount).filter(item => item.show);

const itemsByPriority = items.sort((item1, item2) => {
if (item1.priority > item2.priority) {
Expand Down Expand Up @@ -653,26 +660,7 @@ class ShellBar extends UI5Element {
return;
}

const searchField = this.shadowRoot.querySelector(`#${this._id}-searchfield-wrapper`);
const triggeredByOverflow = event.target.tagName.toLowerCase() === "ui5-li";
const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
const overflowButtonRect = overflowButton.getBoundingClientRect();
const isRTL = this.effectiveDir === "rtl";
let right = "";

if (isRTL) {
right = `${(triggeredByOverflow ? overflowButton.offsetLeft : event.target.offsetLeft) + overflowButtonRect.width}px`;
} else {
right = `calc(100% - ${triggeredByOverflow ? overflowButton.offsetLeft : event.target.offsetLeft}px)`;
}

this._searchField = Object.assign({}, this._searchField, {
"right": right,
});


const inputSlot = searchField.children[0];
const input = inputSlot && inputSlot.assignedNodes()[0];
const input = this.searchField[0];

// update the state immediately
if (input) {
Expand Down Expand Up @@ -719,6 +707,10 @@ class ShellBar extends UI5Element {
});
}

_handleCancelButtonPress() {
this.showSearchField = false;
}

_handleProductSwitchPress(event) {
const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch");

Expand All @@ -744,6 +736,7 @@ class ShellBar extends UI5Element {
style: `order: ${this.searchField.length ? 1 : -10}`,
id: `${this._id}-item-${1}`,
press: this._handleSearchIconPress.bind(this),
show: !!this.searchField.length,
},
...this.items.map((item, index) => {
return {
Expand Down Expand Up @@ -893,10 +886,6 @@ class ShellBar extends UI5Element {

get styles() {
return {
searchField: {
[this.effectiveDir === "rtl" ? "left" : "right"]: this._searchField.right,
"top": `${parseInt(this._searchField.top)}px`,
},
items: {
notification: {
"order": this.isIconHidden("bell") ? "-1" : "3",
Expand All @@ -911,9 +900,24 @@ class ShellBar extends UI5Element {
"order": this.isIconHidden("grid") ? "-1" : "6",
},
},
searchField: {
"display": this.correctSearchFieldStyles,
},
};
}

get correctSearchFieldStyles() {
if (this.showSearchField) {
if (this._fullWidthSearch) {
return "flex";
}

return "block";
}

return "none";
}

get customItemsInfo() {
return this._itemsInfo.filter(itemInfo => !!itemInfo.custom);
}
Expand Down Expand Up @@ -982,6 +986,17 @@ class ShellBar extends UI5Element {
return this.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationCount);
}

get _cancelBtnText() {
return this.i18nBundle.getText(SHELLBAR_CANCEL);
}

get _showFullWidthSearch() {
const size = this._handleBarBreakpoints();
const searchBtnHidden = !!this.shadowRoot.querySelector(".ui5-shellbar-search-button.ui5-shellbar-hidden-button");

return ((size === "S") || searchBtnHidden);
}

get _profileText() {
return this.i18nBundle.getText(SHELLBAR_PROFILE);
}
Expand Down
5 changes: 4 additions & 1 deletion packages/fiori/src/i18n/messagebundle.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,11 @@ SHELLBAR_SEARCH = Search
#XACT: ARIA announcement for the more button
SHELLBAR_OVERFLOW = More

#XACT: ARIA announcement for the cancel button
SHELLBAR_CANCEL = Cancel

#XACT: ARIA announcement for roledescription attribute of Wizard navigation header
WIZARD_NAV_ARIA_ROLE_DESCRIPTION = Wizard

#XACT: WizardProgressNavigator predefined text for step
WIZARD_NAV_STEP_DEFAULT_HEADING=Step
WIZARD_NAV_STEP_DEFAULT_HEADING=Step
53 changes: 40 additions & 13 deletions packages/fiori/src/themes/ShellBar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,15 +170,19 @@ slot[name="profile"] {
padding: 0.25rem 1rem;
}

:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
padding: 0.25rem 1rem;
}

:host([breakpoint-size="S"]) ::slotted([ui5-button][slot="startButton"]) {
margin-right: 0;
}

:host([breakpoint-size="S"]) .ui5-shellbar-search-field {
width: 200px;
:host([breakpoint-size="M"]) .ui5-shellbar-root {
padding: 0.25rem 2rem;
}

:host([breakpoint-size="M"]) .ui5-shellbar-root {
:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
padding: 0.25rem 2rem;
}

Expand Down Expand Up @@ -263,10 +267,13 @@ slot[name="profile"] {
overflow: hidden;
box-sizing: border-box;
white-space: nowrap;
margin-left: 8rem;
flex: 1;
}

:host(:not([show-search-field])) .ui5-shellbar-overflow-container-right {
margin-left: 8rem;
}

.ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
display: flex;
float: right;
Expand Down Expand Up @@ -307,11 +314,6 @@ slot[name="profile"] {
cursor: pointer;
}

:host(:not([show-search-field])) .ui5-shellbar-search-field {
display: none;
}


:host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
margin-left: 1rem;
}
Expand Down Expand Up @@ -358,18 +360,39 @@ slot[name="profile"] {
}

.ui5-shellbar-search-field {
z-index: 101;
position: absolute;
width: 240px;
top: 0.25rem;
min-width: 240px;
margin-left: 0.5rem;
}

.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
height: 2.25rem;
width: 100%;
}

.ui5-shellbar-search-full-width-wrapper {
position: absolute;
top: 0;
left: 0;
background: var(--sapShellColor);
height: 100%;
width: 100%;
z-index: 100;
display: flex;
align-items: center;
box-sizing: border-box;
}

.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button {
width: auto;
}

::slotted([ui5-input]) {
background-color: var(--sapShellColor);
border: 1px solid var(--sapShell_InteractiveBorderColor);
color: var(--sapShell_TextColor);
height: 100%;
width: 100%;
}

::slotted([ui5-input][focused]) {
Expand Down Expand Up @@ -451,11 +474,15 @@ slot[name="profile"] {
margin-left: 0;
}

[dir="rtl"] .ui5-shellbar-overflow-container-right {
:host(:not([show-search-field])) [dir="rtl"] .ui5-shellbar-overflow-container-right {
margin-right: 8rem;
margin-left: 0;
}

[dir="rtl"] .ui5-shellbar-overflow-container-right {
margin-left: 0;
}

[dir="rtl"] .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
float: left;
}
Expand Down
Loading

0 comments on commit 3597902

Please sign in to comment.