From 2e97c8a2be4705451c4ebb9786a3515861de6773 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 14 Nov 2023 13:50:54 +0200 Subject: [PATCH 1/4] feat(ui5-dynamic-page): ensure visibility of title content that never overflows --- packages/fiori/src/DynamicPageTitle.hbs | 9 +++++--- packages/fiori/src/DynamicPageTitle.ts | 23 ++++++++++++++++++++ packages/fiori/test/pages/DynamicPage.html | 4 ++-- packages/main/src/Toolbar.ts | 25 +++++++++++++++++++++- 4 files changed, 55 insertions(+), 6 deletions(-) diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs index d16f77714045..0d4a29894a11 100644 --- a/packages/fiori/src/DynamicPageTitle.hbs +++ b/packages/fiori/src/DynamicPageTitle.hbs @@ -11,18 +11,21 @@ {{/if}} -
+
- {{#if hasContent}} + {{#if hasContent}}
{{/if}} -
+
{{#unless mobileNavigationActions}}
diff --git a/packages/fiori/src/DynamicPageTitle.ts b/packages/fiori/src/DynamicPageTitle.ts index 0319361d55b8..20030c101037 100644 --- a/packages/fiori/src/DynamicPageTitle.ts +++ b/packages/fiori/src/DynamicPageTitle.ts @@ -8,6 +8,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js"; +import type { ToolbarMinWidthChangeEventDetail } from "@ui5/webcomponents/dist/Toolbar.js"; // Template import DynamicPageTitleTemplate from "./generated/templates/DynamicPageTitleTemplate.lit.js"; @@ -75,6 +76,8 @@ class DynamicPageTitle extends UI5Element { mobileNavigationActions!: boolean; _handleResize: ResizeObserverCallback; + minContentWidth?: number; + minActionsWidth?: number; constructor() { super(); @@ -136,6 +139,17 @@ class DynamicPageTitle extends UI5Element { }; } + get styles() { + return { + content: { + "min-width": `${this.minContentWidth || 0}px`, + }, + actions: { + "min-width": `${this.minActionsWidth || 0}px`, + }, + }; + } + onEnterDOM() { ResizeHandler.register(this, this._handleResize); } @@ -162,6 +176,15 @@ class DynamicPageTitle extends UI5Element { handleResize() { this.mobileNavigationActions = this.offsetWidth < 1280; } + + onMinContentWidthChange(event: CustomEvent) { + const container = (event.target)?.assignedSlot?.parentElement; + if (container === this.getDomRef()?.querySelector(".ui5-dynamic-page-title--content")) { + this.minContentWidth = event.detail.minWidth; + } else if (container === this.getDomRef()?.querySelector(".ui5-dynamic-page-title--actions")) { + this.minActionsWidth = event.detail.minWidth; + } + } } DynamicPageTitle.define(); diff --git a/packages/fiori/test/pages/DynamicPage.html b/packages/fiori/test/pages/DynamicPage.html index 726576c99892..7b8935a3a97d 100644 --- a/packages/fiori/test/pages/DynamicPage.html +++ b/packages/fiori/test/pages/DynamicPage.html @@ -56,14 +56,14 @@
- - + diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 17eca059464c..5cc71bb55cb3 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -41,6 +41,10 @@ import { import Button from "./Button.js"; import Popover from "./Popover.js"; +type ToolbarMinWidthChangeEventDetail = { + minWidth: number, +}; + function calculateCSSREMValue(styleSet: CSSStyleDeclaration, propertyName: string): number { return Number(styleSet.getPropertyValue(propertyName).replace("rem", "")) * parseInt(getComputedStyle(document.body).getPropertyValue("font-size")); } @@ -167,6 +171,7 @@ class Toolbar extends UI5Element { _onInteract!: EventListener; itemsToOverflow: Array = []; itemsWidth = 0; + minContentWidth = 0; popoverOpen = false; itemsWidthMeasured = false; @@ -410,15 +415,30 @@ class Toolbar extends UI5Element { } storeItemsWidth() { - let totalWidth = 0; + let totalWidth = 0, + minWidth = 0; this.items.forEach((item: ToolbarItem) => { const itemWidth = this.getItemWidth(item); totalWidth += itemWidth; + if (item.overflowPriority === ToolbarItemOverflowBehavior.NeverOverflow) { + minWidth += itemWidth; + } this.ITEMS_WIDTH_MAP.set(item._id, itemWidth); }); + if (minWidth && totalWidth > minWidth) { + minWidth += this.overflowButtonSize; + } + + if (minWidth !== this.minContentWidth) { + this.fireEvent("_minContentWidthChange", { + minWidth, + }); + } + this.itemsWidth = totalWidth; + this.minContentWidth = minWidth; } distributeItems(overflowSpace = 0) { @@ -621,3 +641,6 @@ class Toolbar extends UI5Element { Toolbar.define(); export default Toolbar; +export type { + ToolbarMinWidthChangeEventDetail, +}; From fae01caaa9f216842731c65b1a76a2d7ad68e9fc Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Mon, 20 Nov 2023 14:04:36 +0200 Subject: [PATCH 2/4] feat(ui5-dynamic-page) actions style corrected Co-authored-by: Dobrin Dimchev --- packages/fiori/src/DynamicPageTitle.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs index 0d4a29894a11..bb537538df66 100644 --- a/packages/fiori/src/DynamicPageTitle.hbs +++ b/packages/fiori/src/DynamicPageTitle.hbs @@ -25,7 +25,7 @@ {{/if}}
+ style="{{styles.actions}}"> {{#unless mobileNavigationActions}}
From a8b274994ddbc9d398c3174da74c9617fb89a06d Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Mon, 20 Nov 2023 16:35:53 +0200 Subject: [PATCH 3/4] feat(ui5-dynamic-page): sizing of toolbar wrappers corrected --- packages/fiori/src/DynamicPageTitle.hbs | 10 +++++----- packages/fiori/src/DynamicPageTitle.ts | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs index bb537538df66..5bcb8e5de14a 100644 --- a/packages/fiori/src/DynamicPageTitle.hbs +++ b/packages/fiori/src/DynamicPageTitle.hbs @@ -17,11 +17,11 @@
- {{#if hasContent}} -
- -
+ {{#if hasContent}} +
+ +
{{/if}}
) { - const container = (event.target)?.assignedSlot?.parentElement; - if (container === this.getDomRef()?.querySelector(".ui5-dynamic-page-title--content")) { + const slotName = (event.target)?.assignedSlot?.name; + if (!slotName || slotName === "content") { this.minContentWidth = event.detail.minWidth; - } else if (container === this.getDomRef()?.querySelector(".ui5-dynamic-page-title--actions")) { + } else if (slotName === "actions") { this.minActionsWidth = event.detail.minWidth; } } From d58eb59dec5c4c25101a63beea48569eb8c3dd86 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Mon, 20 Nov 2023 17:53:07 +0200 Subject: [PATCH 4/4] feat(ui5-dynamic-page): apply review feedback --- packages/fiori/src/DynamicPageTitle.hbs | 2 +- packages/main/src/Toolbar.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs index 5bcb8e5de14a..d7e8686feece 100644 --- a/packages/fiori/src/DynamicPageTitle.hbs +++ b/packages/fiori/src/DynamicPageTitle.hbs @@ -12,7 +12,7 @@
+ @ui5-_min-content-width-change={{onMinContentWidthChange}}>
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 5cc71bb55cb3..a9795ee382c2 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -432,8 +432,9 @@ class Toolbar extends UI5Element { } if (minWidth !== this.minContentWidth) { - this.fireEvent("_minContentWidthChange", { - minWidth, + const spaceAroundContent = this.offsetWidth - this.getDomRef()!.offsetWidth; + this.fireEvent("_min-content-width-change", { + minWidth: minWidth + spaceAroundContent, }); }