From a3ccb07b24fd05aabb8eaa6382d757634a4ba452 Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Wed, 11 Dec 2024 15:43:34 +0200 Subject: [PATCH 1/6] feat(ui5-flexible-column-layout): add arrow icon functionality --- packages/fiori/src/FlexibleColumnLayout.hbs | 9 ++ packages/fiori/src/FlexibleColumnLayout.ts | 113 ++++++++++++++++++ packages/fiori/src/fcl-utils/FCLLayout.ts | 65 ++++++++++ .../fiori/src/themes/FlexibleColumnLayout.css | 31 ++++- packages/fiori/src/types/FCLLayout.ts | 20 ++++ packages/fiori/test/pages/FCL.html | 56 ++++++++- packages/fiori/test/specs/FCL.spec.js | 33 +++++ 7 files changed, 322 insertions(+), 5 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.hbs b/packages/fiori/src/FlexibleColumnLayout.hbs index f3eb2544b120..bc2d8ebf8cf0 100644 --- a/packages/fiori/src/FlexibleColumnLayout.hbs +++ b/packages/fiori/src/FlexibleColumnLayout.hbs @@ -41,6 +41,15 @@ {{#*inline "gripStart"}} + {{#if arrowIconName}} + + {{/if}} = 25) { + this._hasBeenInIconVisibleLayout = true; + return FCLLayout.ThreeColumnsMidExpanded; + } + + if (moved({ + separator: "end", + from: FCLLayout.ThreeColumnsBeginHiddenMidExpanded, + forward: false, + }) && newColumnWidths.mid < newColumnWidths.end) { + return FCLLayout.ThreeColumnsBeginHiddenEndExpanded; + } + + if (moved({ + separator: "end", + from: FCLLayout.ThreeColumnsBeginHiddenEndExpanded, + forward: true, + }) && newColumnWidths.mid >= newColumnWidths.end) { + return FCLLayout.ThreeColumnsBeginHiddenMidExpanded; + } + if (moved({ separator: "end", from: FCLLayout.ThreeColumnsMidExpanded, @@ -1006,6 +1081,11 @@ class FlexibleColumnLayout extends UI5Element { display: this.showEndSeparatorGrip ? "inline-block" : "none", }, }, + arrow: { + start: { + display: this.showStartSeparatorGrip ? "inline-block" : "none", + }, + }, }; } @@ -1061,6 +1141,39 @@ class FlexibleColumnLayout extends UI5Element { return this.shadowRoot!.querySelector(".ui5-fcl-separator-end")!; } + get startArrowDOM() { + return this.shadowRoot!.querySelector(".ui5-fcl-arrow--start")!; + } + + get arrowIconName() { + const effectiveLayout = this.separatorMovementSession?.tmpFCLLayout || this.layout; + const isTablet = this.media === MEDIA.TABLET; + const startColumnHidden = !this.startColumnVisible; + + const shouldDisplayIcon = effectiveLayout === FCLLayout.ThreeColumnsBeginHiddenMidExpanded + || effectiveLayout === FCLLayout.ThreeColumnsBeginHiddenEndExpanded + || this._hasBeenInIconVisibleLayout; + + if (!shouldDisplayIcon) { + return ""; + } + + if (effectiveLayout === FCLLayout.ThreeColumnsBeginHiddenMidExpanded + || (effectiveLayout === FCLLayout.ThreeColumnsMidExpanded && isTablet && startColumnHidden)) { + return "navigation-right-arrow"; + } + + if (effectiveLayout === FCLLayout.TwoColumnsMidExpanded + || effectiveLayout === FCLLayout.ThreeColumnsMidExpanded + || effectiveLayout === FCLLayout.TwoColumnsStartExpanded + || effectiveLayout === FCLLayout.ThreeColumnsBeginHiddenEndExpanded + || effectiveLayout === FCLLayout.ThreeColumnsStartExpandedEndHidden + || effectiveLayout === FCLLayout.ThreeColumnsMidExpandedEndHidden) { + return "navigation-left-arrow"; + } + return "navigation-right-arrow"; + } + get startSeparatorTabIndex() { if (this.showStartSeparatorGrip) { return 0; diff --git a/packages/fiori/src/fcl-utils/FCLLayout.ts b/packages/fiori/src/fcl-utils/FCLLayout.ts index edeb472a245b..673d884bebb6 100644 --- a/packages/fiori/src/fcl-utils/FCLLayout.ts +++ b/packages/fiori/src/fcl-utils/FCLLayout.ts @@ -65,6 +65,20 @@ const getLayoutsByMedia = (): LayoutConfiguration => { { visible: true, gripVisible: true }, ], }, + "ThreeColumnsBeginHiddenMidExpanded": { + layout: ["0px", "67%", "33%"], + separators: [ + { visible: true, gripVisible: true }, + { visible: true, gripVisible: true }, + ], + }, + "ThreeColumnsBeginHiddenEndExpanded": { + layout: ["0px", "33%", "67%"], + separators: [ + { visible: true, gripVisible: false }, + { visible: true, gripVisible: true }, + ], + }, "MidColumnFullScreen": { layout: ["0px", "100%", "0px"], separators: [ @@ -130,6 +144,20 @@ const getLayoutsByMedia = (): LayoutConfiguration => { { visible: true, gripVisible: true }, ], }, + "ThreeColumnsBeginHiddenMidExpanded": { + layout: ["0px", "67%", "33%"], + separators: [ + { visible: true, gripVisible: true }, + { visible: true, gripVisible: true }, + ], + }, + "ThreeColumnsBeginHiddenEndExpanded": { + layout: ["0px", "33%", "67%"], + separators: [ + { visible: false }, + { visible: true, gripVisible: true }, + ], + }, "MidColumnFullScreen": { layout: ["0px", "100%", "0px"], separators: [ @@ -195,6 +223,20 @@ const getLayoutsByMedia = (): LayoutConfiguration => { { visible: false }, ], }, + "ThreeColumnsBeginHiddenMidExpanded": { + layout: ["0px", "100%", "0px"], + separators: [ + { visible: false }, + { visible: false }, + ], + }, + "ThreeColumnsBeginHiddenEndExpanded": { + layout: ["0px", "0px", "100%"], + separators: [ + { visible: false }, + { visible: false }, + ], + }, "MidColumnFullScreen": { layout: ["0px", "100%", "0px"], separators: [ @@ -213,7 +255,30 @@ const getLayoutsByMedia = (): LayoutConfiguration => { }; }; +const getPhoneTabletLayouts = () => { + return [ + "TwoColumnsMidExpanded", + "ThreeColumnsMidExpanded", + "ThreeColumnsBeginHiddenEndExpanded", + "TwoColumnsStartExpanded", + "ThreeColumnsStartExpandedEndHidden", + "ThreeColumnsMidExpandedEndHidden", + ]; +}; + +const getDesktopLayouts = () => { + return [ + "TwoColumnsMidExpanded", + "ThreeColumnsMidExpanded", + "TwoColumnsStartExpanded", + "ThreeColumnsStartExpandedEndHidden", + "ThreeColumnsMidExpandedEndHidden", + ]; +}; + export { + getPhoneTabletLayouts, + getDesktopLayouts, getLayoutsByMedia, }; diff --git a/packages/fiori/src/themes/FlexibleColumnLayout.css b/packages/fiori/src/themes/FlexibleColumnLayout.css index b779b7fb7b67..bcca75442d8a 100644 --- a/packages/fiori/src/themes/FlexibleColumnLayout.css +++ b/packages/fiori/src/themes/FlexibleColumnLayout.css @@ -33,7 +33,6 @@ display: none; } -/* arrow */ .ui5-fcl-separator { display: flex; align-items: center; @@ -50,6 +49,24 @@ border:var(--_ui5_fcl_separator_focus_border); outline: none; } + +/* arrow icon*/ +.ui5-fcl-arrow--start { + color: var(--sapButton_TextColor); + border-radius: 0.25rem; + position: absolute; + top: 1rem; + left: 50%; + transform: translateX(-50%); + cursor: pointer; + z-index: 10; +} + +.ui5-fcl-arrow--start:focus { + border: var(--_ui5_fcl_separator_focus_border); + outline: none; +} + .ui5-fcl-grip { cursor: col-resize; overflow: visible; @@ -59,7 +76,7 @@ padding-bottom: 0.3125rem; } -/* arrow decoration */ +/* grip decoration */ .ui5-fcl-grip:before { background-image: var(--_ui5_fcl_decoration_top); bottom: calc(50% + 1rem); @@ -83,8 +100,14 @@ background-position-x: calc(50% - 0.03125rem); } -.ui5-fcl-separator:hover .ui5-fcl-grip:before, -.ui5-fcl-separator:hover .ui5-fcl-grip:after { +/*only if the arrow is present the lines will be shorten*/ +.ui5-fcl-separator:has(.ui5-fcl-arrow--start):hover:not(:has(.ui5-fcl-arrow--start:hover)) .ui5-fcl-grip:before, +.ui5-fcl-separator:has(.ui5-fcl-arrow--start):hover:not(:has(.ui5-fcl-arrow--start:hover)) .ui5-fcl-grip:after { + height: calc(40% - 1rem); +} + +.ui5-fcl-separator:hover:not(:has(.ui5-fcl-arrow--start:hover)) .ui5-fcl-grip:before, +.ui5-fcl-separator:hover:not(:has(.ui5-fcl-arrow--start:hover)) .ui5-fcl-grip:after { height: calc(50% - 1rem); } diff --git a/packages/fiori/src/types/FCLLayout.ts b/packages/fiori/src/types/FCLLayout.ts index 358d32fbb8b7..11cf156777ac 100644 --- a/packages/fiori/src/types/FCLLayout.ts +++ b/packages/fiori/src/types/FCLLayout.ts @@ -72,6 +72,26 @@ enum FCLLayout { */ ThreeColumnsMidExpandedEndHidden = "ThreeColumnsMidExpandedEndHidden", + /** + * Desktop: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed. + * Tablet: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed. + * Phone: Fixed -- 100 percent width of the Mid column, only the Mid column is displayed. + * + * Use to display the Mid and End columns while the Start column is hidden. + * @public + */ + ThreeColumnsBeginHiddenMidExpanded = "ThreeColumnsBeginHiddenMidExpanded", + + /** + * Desktop: Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed. + * Tablet: Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed. + * Phone: Fixed -- 100 percent width of the End column, only the End column is displayed. + * + * Use to display the Mid column and expanded End column while the grip of the separator is not visible. + * @public + */ + ThreeColumnsBeginHiddenEndExpanded = "ThreeColumnsBeginHiddenEndExpanded", + /** * Desktop: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed * Tablet: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed diff --git a/packages/fiori/test/pages/FCL.html b/packages/fiori/test/pages/FCL.html index f0f615a7fa7f..e3ff4acb88b1 100644 --- a/packages/fiori/test/pages/FCL.html +++ b/packages/fiori/test/pages/FCL.html @@ -496,8 +496,62 @@ -

+

+ Arrow Icon: Start Column Hidden by Default +

+ + + +
+
+ Column 1 +
+ + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + +
+ + +
+
+ Column 2 +
+ + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + +
+ + +
+
+ Column 3 +
+ + + Hello worild! + Hello worild! + Hello worild! + +
+ + +

+
diff --git a/packages/fiori/test/specs/FCL.spec.js b/packages/fiori/test/specs/FCL.spec.js index d3911608fe78..d9fed68ab653 100644 --- a/packages/fiori/test/specs/FCL.spec.js +++ b/packages/fiori/test/specs/FCL.spec.js @@ -567,3 +567,36 @@ describe("ACC", () => { "Middle column is hidden from the acc tree."); }); }); + +describe("First column closing arrow behavior", () => { + it("should switch layout and update arrow icon on desktop", async () => { + const fcl = await browser.$("#fcl10"); + const arrowIcon = await fcl.shadow$(".ui5-fcl-arrow--start"); + + await fcl.setProperty("layout", "ThreeColumnsBeginHiddenMidExpanded"); + + assert.strictEqual(await arrowIcon.getAttribute("name"), "navigation-right-arrow", "Arrow should point right"); + + await arrowIcon.click(); + + assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "Layout should switch to ThreeColumnsMidExpanded"); + + assert.strictEqual(await arrowIcon.getAttribute("name"), "navigation-left-arrow", "Arrow should point left"); + }); + + it("should switch layout and update arrow icon on smaller screen", async () => { + const fcl = await browser.$("#fcl10"); + const arrowIcon = await fcl.shadow$(".ui5-fcl-arrow--start"); + + await browser.setWindowSize(1000, 1080); + await fcl.setProperty("layout", "TwoColumnsMidExpanded"); + + await arrowIcon.click(); + + assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsBeginHiddenMidExpanded", "Layout should switch to ThreeColumnsBeginHiddenMidExpanded"); + + assert.strictEqual(await arrowIcon.getAttribute("name"), "navigation-right-arrow", "Arrow should point right"); + + await browser.setWindowSize(1400, 1080); + }); +}); \ No newline at end of file From 1c2e125eb690e97acc53a278a348cc63a02c8fac Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Mon, 16 Dec 2024 11:40:13 +0200 Subject: [PATCH 2/6] refactor: added the arrow icon in the tsx template --- packages/fiori/src/FlexibleColumnLayout.ts | 4 ++++ .../src/FlexibleColumnLayoutTemplate.tsx | 21 ++++++++++++++----- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index 555ee06fb127..5a82ec0410bc 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -678,6 +678,10 @@ class FlexibleColumnLayout extends UI5Element { isRTL = this.effectiveDir === "rtl"; let step = 0; + if (!this.startColumnVisible && e.target === this.startSeparatorDOM && isLeft(e)) { + return; + } + if (isLeft(e)) { if (this.startArrowDOM === e.target) { return; diff --git a/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx b/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx index 8241bfa1d9b3..b902b715b001 100644 --- a/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx +++ b/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx @@ -84,11 +84,22 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout) function gripStart(this: FlexibleColumnLayout) { return ( - +
+ { this.arrowIconName && ( + + )} + +
); } From 65b2c65ffee23f30d42d80cf63c6091623382fff Mon Sep 17 00:00:00 2001 From: Nikola Anachkov Date: Thu, 9 Jan 2025 11:02:27 +0200 Subject: [PATCH 3/6] refactor: improve layout switch --- packages/fiori/src/FlexibleColumnLayout.ts | 125 ++++++------------ .../src/FlexibleColumnLayoutTemplate.tsx | 38 +++--- packages/fiori/src/fcl-utils/FCLLayout.ts | 75 ++++++----- .../fiori/src/themes/FlexibleColumnLayout.css | 31 ++--- packages/fiori/src/types/FCLLayout.ts | 4 +- 5 files changed, 122 insertions(+), 151 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index 5a82ec0410bc..f68307f7b21e 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -11,6 +11,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; +import Button from "@ui5/webcomponents/dist/Button.js"; import "@ui5/webcomponents-icons/dist/vertical-grip.js"; import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import { @@ -27,9 +28,8 @@ import type { PassiveEventListenerObject, AriaLandmarkRole } from "@ui5/webcompo import FCLLayout from "./types/FCLLayout.js"; import type { LayoutConfiguration } from "./fcl-utils/FCLLayout.js"; import { - getPhoneTabletLayouts, - getDesktopLayouts, getLayoutsByMedia, + getNextLayoutByArrowPress, } from "./fcl-utils/FCLLayout.js"; // Texts @@ -172,7 +172,7 @@ type UserDefinedColumnLayouts = { renderer: jsxRenderer, styles: FlexibleColumnLayoutCss, template: FlexibleColumnLayoutTemplate, - dependencies: [Icon], + dependencies: [Icon, Button], }) /** @@ -315,7 +315,6 @@ class FlexibleColumnLayout extends UI5Element { static i18nBundle: I18nBundle; _prevLayout: `${FCLLayout}` | null; - _hasBeenInIconVisibleLayout: boolean; _userDefinedColumnLayouts: UserDefinedColumnLayouts = { tablet: {}, desktop: {}, @@ -327,7 +326,6 @@ class FlexibleColumnLayout extends UI5Element { super(); this._prevLayout = null; - this._hasBeenInIconVisibleLayout = false; this.initialRendering = true; this._handleResize = this.handleResize.bind(this); this._onSeparatorMove = this.onSeparatorMove.bind(this); @@ -667,7 +665,7 @@ class FlexibleColumnLayout extends UI5Element { e.preventDefault(); const focusedElement = e.target as HTMLElement; if (focusedElement === this.startArrowDOM) { - this.toggleStartColumnVisibility(); + this.switchLayoutOnArrowPress(); return; } return; @@ -797,33 +795,6 @@ class FlexibleColumnLayout extends UI5Element { return `${(pxWidth / this._availableWidthForColumns) * 100}%`; } - toggleStartColumnVisibility() { - const isPhoneOrTablet = this.media === MEDIA.PHONE || this.media === MEDIA.TABLET, - isDesktop = this.media === MEDIA.DESKTOP, - phoneTabletLayouts = getPhoneTabletLayouts(), - desktopLayouts = getDesktopLayouts(); - - if (this.layout === FCLLayout.ThreeColumnsBeginHiddenMidExpanded || this.layout === FCLLayout.ThreeColumnsBeginHiddenEndExpanded) { - this._hasBeenInIconVisibleLayout = true; - } - - if (isPhoneOrTablet) { - if (this.layout === FCLLayout.ThreeColumnsMidExpanded || phoneTabletLayouts.includes(this.layout)) { - this.layout = FCLLayout.ThreeColumnsBeginHiddenMidExpanded; - } else if (this.layout === FCLLayout.ThreeColumnsBeginHiddenMidExpanded) { - this.layout = FCLLayout.TwoColumnsMidExpanded; - } - } - - if (isDesktop) { - if (desktopLayouts.includes(this.layout)) { - this.layout = FCLLayout.ThreeColumnsBeginHiddenMidExpanded; - } else if (this.layout === FCLLayout.ThreeColumnsBeginHiddenMidExpanded) { - this.layout = FCLLayout.ThreeColumnsMidExpanded; - } - } - } - getNextLayoutOnSeparatorMovement(separator: HTMLElement, isStartToEndDirection: boolean, fclLayoutBeforeMove: FCLLayout, columnLayoutAfterMove: FlexibleColumnLayoutColumnLayout) { const isStartSeparator = separator === this.startSeparatorDOM, separatorName = isStartSeparator ? "start" : "end", @@ -874,38 +845,37 @@ class FlexibleColumnLayout extends UI5Element { return FCLLayout.ThreeColumnsMidExpanded; } - if (moved({ - separator: "end", - from: FCLLayout.ThreeColumnsMidExpandedEndHidden, - forward: false, - // ceil before comparing to avoid floating point precision issues - }) && ((Math.ceil(newColumnWidths.end) >= COLUMN_MIN_WIDTH))) { - return FCLLayout.ThreeColumnsMidExpanded; - } - if (moved({ separator: "start", - from: FCLLayout.ThreeColumnsBeginHiddenMidExpanded, + from: FCLLayout.ThreeColumnsStartHiddenMidExpanded, forward: true, - }) && newColumnWidths.start >= 25) { - this._hasBeenInIconVisibleLayout = true; + }) && !isTablet && Math.ceil(startColumnPxWidth) >= COLUMN_MIN_WIDTH) { return FCLLayout.ThreeColumnsMidExpanded; } if (moved({ separator: "end", - from: FCLLayout.ThreeColumnsBeginHiddenMidExpanded, + from: FCLLayout.ThreeColumnsStartHiddenMidExpanded, forward: false, }) && newColumnWidths.mid < newColumnWidths.end) { - return FCLLayout.ThreeColumnsBeginHiddenEndExpanded; + return FCLLayout.ThreeColumnsStartHiddenEndExpanded; } if (moved({ separator: "end", - from: FCLLayout.ThreeColumnsBeginHiddenEndExpanded, + from: FCLLayout.ThreeColumnsStartHiddenEndExpanded, forward: true, }) && newColumnWidths.mid >= newColumnWidths.end) { - return FCLLayout.ThreeColumnsBeginHiddenMidExpanded; + return FCLLayout.ThreeColumnsStartHiddenMidExpanded; + } + + if (moved({ + separator: "end", + from: FCLLayout.ThreeColumnsMidExpandedEndHidden, + forward: false, + // ceil before comparing to avoid floating point precision issues + }) && ((Math.ceil(newColumnWidths.end) >= COLUMN_MIN_WIDTH))) { + return FCLLayout.ThreeColumnsMidExpanded; } if (moved({ @@ -961,6 +931,14 @@ class FlexibleColumnLayout extends UI5Element { return fclLayoutBeforeMove; // no layout change } + switchLayoutOnArrowPress() { + const lastUsedLayout = this.layout as FCLLayout; + this.layout = getNextLayoutByArrowPress()[lastUsedLayout as keyof typeof getNextLayoutByArrowPress]; + if (this.layout !== lastUsedLayout) { + this.fireLayoutChange(true, false); + } + } + get _availableWidthForColumns() { let width = this._width; if (this.showStartSeparator) { @@ -1063,6 +1041,10 @@ class FlexibleColumnLayout extends UI5Element { return this.disableResizing ? false : this.startSeparatorGripVisibility; } + get showStartSeparatorArrow() { + return this.disableResizing ? false : this.startSeparatorArrowVisibility; + } + get showEndSeparatorGrip() { return this.disableResizing ? false : this.endSeparatorGripVisibility; } @@ -1075,6 +1057,18 @@ class FlexibleColumnLayout extends UI5Element { return this.effectiveSeparatorsInfo[1].gripVisible; } + get startSeparatorArrowVisibility() { + return this.effectiveSeparatorsInfo[0].arrowVisible; + } + + get startArrowDirection() { + return this.effectiveSeparatorsInfo[0].arrowDirection; + } + + get startArrowDOM() { + return this.shadowRoot!.querySelector(".ui5-fcl-arrow--start")!; + } + get effectiveSeparatorsInfo() { return this._effectiveLayoutsByMedia[this.media][this.effectiveLayout].separators; } @@ -1091,39 +1085,6 @@ class FlexibleColumnLayout extends UI5Element { return this.shadowRoot!.querySelector(".ui5-fcl-separator-end")!; } - get startArrowDOM() { - return this.shadowRoot!.querySelector(".ui5-fcl-arrow--start")!; - } - - get arrowIconName() { - const effectiveLayout = this.separatorMovementSession?.tmpFCLLayout || this.layout; - const isTablet = this.media === MEDIA.TABLET; - const startColumnHidden = !this.startColumnVisible; - - const shouldDisplayIcon = effectiveLayout === FCLLayout.ThreeColumnsBeginHiddenMidExpanded - || effectiveLayout === FCLLayout.ThreeColumnsBeginHiddenEndExpanded - || this._hasBeenInIconVisibleLayout; - - if (!shouldDisplayIcon) { - return ""; - } - - if (effectiveLayout === FCLLayout.ThreeColumnsBeginHiddenMidExpanded - || (effectiveLayout === FCLLayout.ThreeColumnsMidExpanded && isTablet && startColumnHidden)) { - return "navigation-right-arrow"; - } - - if (effectiveLayout === FCLLayout.TwoColumnsMidExpanded - || effectiveLayout === FCLLayout.ThreeColumnsMidExpanded - || effectiveLayout === FCLLayout.TwoColumnsStartExpanded - || effectiveLayout === FCLLayout.ThreeColumnsBeginHiddenEndExpanded - || effectiveLayout === FCLLayout.ThreeColumnsStartExpandedEndHidden - || effectiveLayout === FCLLayout.ThreeColumnsMidExpandedEndHidden) { - return "navigation-left-arrow"; - } - return "navigation-right-arrow"; - } - get startSeparatorTabIndex() { if (this.showStartSeparatorGrip) { return 0; diff --git a/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx b/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx index b902b715b001..4e102c881aec 100644 --- a/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx +++ b/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx @@ -2,6 +2,7 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; import { getAnimationMode } from "@ui5/webcomponents-base/dist/InitialConfiguration.js"; import verticalGrip from "@ui5/webcomponents-icons/dist/vertical-grip.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; +import Button from "@ui5/webcomponents/dist/Button.js"; import type FlexibleColumnLayout from "./FlexibleColumnLayout.js"; export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout) { @@ -34,6 +35,7 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout) onKeyDown={this._onkeydown} onKeyUp={this._onkeyup} > + { arrowStart.call(this) } { gripStart.call(this) }
@@ -82,24 +84,28 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout) ); } +function arrowStart(this: FlexibleColumnLayout) { + return ( +