From 7a68dd29c3518b82b8682f5b7506845e6a0e30b4 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Tue, 30 Jun 2020 09:58:51 +0300 Subject: [PATCH] feat(ui5-flexible-column-layout): new component (#1867) Introduce new component in the "fiori" package, called FlexibleColumnLayout. The component implements the master-detail-detail paradigm by displaying up to three pages in separate columns. There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns. Fixes: https://github.com/SAP/ui5-webcomponents/issues/1851 --- packages/fiori/bundle.esm.js | 1 + packages/fiori/src/FlexibleColumnLayout.hbs | 52 ++ packages/fiori/src/FlexibleColumnLayout.js | 583 +++++++++++++ packages/fiori/src/fcl-utils/FCLLayout.js | 246 ++++++ .../fiori/src/i18n/messagebundle.properties | 9 + .../fiori/src/themes/FlexibleColumnLayout.css | 102 +++ .../base/FlexibleColumnLayout-parameters.css | 6 + .../themes/sap_belize/parameters-bundle.css | 1 + .../FlexibleColumnLayout-parameters.css | 6 + .../sap_belize_hcb/parameters-bundle.css | 1 + .../FlexibleColumnLayout-parameters.css | 6 + .../sap_belize_hcw/parameters-bundle.css | 1 + .../themes/sap_fiori_3/parameters-bundle.css | 1 + .../FlexibleColumnLayout-parameters.css | 6 + .../sap_fiori_3_dark/parameters-bundle.css | 1 + packages/fiori/src/types/FCLLayout.js | 134 +++ packages/fiori/test/pages/FCL.html | 788 ++++++++++++++++++ packages/fiori/test/pages/FCLApp.html | 290 +++++++ .../samples/FlexibleColumnLayout.sample.html | 431 ++++++++++ packages/fiori/test/specs/FCL.spec.js | 99 +++ .../build-scripts/samples-prepare.js | 1 + packages/theme-base/css-vars-usage.json | 1 + 22 files changed, 2766 insertions(+) create mode 100644 packages/fiori/src/FlexibleColumnLayout.hbs create mode 100644 packages/fiori/src/FlexibleColumnLayout.js create mode 100644 packages/fiori/src/fcl-utils/FCLLayout.js create mode 100644 packages/fiori/src/themes/FlexibleColumnLayout.css create mode 100644 packages/fiori/src/themes/base/FlexibleColumnLayout-parameters.css create mode 100644 packages/fiori/src/themes/sap_belize_hcb/FlexibleColumnLayout-parameters.css create mode 100644 packages/fiori/src/themes/sap_belize_hcw/FlexibleColumnLayout-parameters.css create mode 100644 packages/fiori/src/themes/sap_fiori_3_dark/FlexibleColumnLayout-parameters.css create mode 100644 packages/fiori/src/types/FCLLayout.js create mode 100644 packages/fiori/test/pages/FCL.html create mode 100644 packages/fiori/test/pages/FCLApp.html create mode 100644 packages/fiori/test/samples/FlexibleColumnLayout.sample.html create mode 100644 packages/fiori/test/specs/FCL.spec.js diff --git a/packages/fiori/bundle.esm.js b/packages/fiori/bundle.esm.js index 3c1c7f9df6ff..22a617506423 100644 --- a/packages/fiori/bundle.esm.js +++ b/packages/fiori/bundle.esm.js @@ -7,6 +7,7 @@ import "./dist/Assets.js"; import "./dist/features/CoPilotAnimation.js"; // FIORI components +import FlexibleColumnLayout from "./dist/FlexibleColumnLayout.js"; import ProductSwitch from "./dist/ProductSwitch.js"; import ProductSwitchItem from "./dist/ProductSwitchItem.js"; import ShellBar from "./dist/ShellBar.js"; diff --git a/packages/fiori/src/FlexibleColumnLayout.hbs b/packages/fiori/src/FlexibleColumnLayout.hbs new file mode 100644 index 000000000000..0624fb6b7a33 --- /dev/null +++ b/packages/fiori/src/FlexibleColumnLayout.hbs @@ -0,0 +1,52 @@ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + {{accStartColumnText}} + {{accMiddleColumnText}} + {{accEndColumnText}} +
\ No newline at end of file diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js new file mode 100644 index 000000000000..ee36dbe74c64 --- /dev/null +++ b/packages/fiori/src/FlexibleColumnLayout.js @@ -0,0 +1,583 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; +import Float from "@ui5/webcomponents-base/dist/types/Float.js"; +import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import Button from "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents-icons/dist/icons/slim-arrow-left.js"; +import "@ui5/webcomponents-icons/dist/icons/slim-arrow-right.js"; +import FCLLayout from "./types/FCLLayout.js"; +import { + getLayoutsByMedia, + getNextLayoutByStartArrow, + getNextLayoutByEndArrow, +} from "./fcl-utils/FCLLayout.js"; + +// Texts +import { + FCL_START_COLUMN_TXT, + FCL_MIDDLE_COLUMN_TXT, + FCL_END_COLUMN_TXT, +} from "./generated/i18n/i18n-defaults.js"; + +// Template +import FlexibleColumnLayoutTemplate from "./generated/templates/FlexibleColumnLayoutTemplate.lit.js"; + +// Styles +import FlexibleColumnLayoutCss from "./generated/themes/FlexibleColumnLayout.css.js"; + +/** + * @public + */ +const metadata = { + tag: "ui5-flexible-column-layout", + properties: /** @lends sap.ui.webcomponents.fiori.FlexibleColumnLayout.prototype */ { + /** + * Defines the columns layout and their proportion. + *

+ * Note: The layout also depends on the screen size - one column for screens smaller than 900px, + * two columns between 900px and 1280px and three columns for sizes bigger than 1280px. + *

+ * Available options are: + * + *

+ * For example: layout=TwoColumnsStartExpanded means the layout will display up to two columns + * in 67%/33% proportion. + * @type {FCLLayout} + * @defaultvalue "OneColumn" + * @public + */ + layout: { + type: FCLLayout, + defaultValue: FCLLayout.OneColumn, + }, + + /** + * Defines the visibility of the arrows, + * used for expanding and shrinking the columns. + * + * @type {boolean} + * @defaultvalue false + * @public + */ + noArrows: { + type: Boolean, + }, + + /** + * Defines the component width in px. + * + * @type {Float} + * @defaultvalue 0 + * @private + */ + _width: { + type: Float, + defaultValue: 0, + }, + + /** + * Defines the effective columns layout, + * based on both the layout property and the screen size. + * Example: [67%, "33%, 0"], [25%, 50%, 25%], etc. + * + * @type {Object} + * @defaultvalue undefined + * @private + */ + _columnLayout: { + type: Object, + defaultValue: undefined, + }, + + /** + * Defines the visible columns count - 1, 2 or 3. + * + * @type {Integer} + * @defaultvalue 1 + * @private + */ + _visibleColumns: { + type: Integer, + defaultValue: 0, + }, + }, + slots: /** @lends sap.ui.webcomponents.fiori.FlexibleColumnLayout.prototype */ { + /** + * Defines the content in the start column. + * @type {HTMLElement} + * @slot + * @public + */ + startColumn: { + type: HTMLElement, + }, + + /** + * Defines the content in the middle column. + * @type {HTMLElement} + * @slot + * @public + */ + midColumn: { + type: HTMLElement, + }, + + /** + * Defines the content in the end column. + * @type {HTMLElement} + * @slot + * @public + */ + endColumn: { + type: HTMLElement, + }, + }, + events: /** @lends sap.ui.webcomponents.fiori.FlexibleColumnLayout.prototype */ { + /** + * Fired when the layout changes via user interaction by clicking the arrows + * or by changing the component size due to resizing. + * + * @param {FCLLayout} layout the current layout + * @param {Array} columnLayout the effective column layout, f.e [67%, 33%, 0] + * @param {boolean} startColumnVisible indicates if the start column is currently visible + * @param {boolean} midColumnVisible indicates if the middle column is currently visible + * @param {boolean} endColumnVisible indicates if the end column is currently visible + * @param {boolean} arrowsUsed indicates if the layout is changed via the arrows + * @param {boolean} resize indicates if the layout is changed via resizing + * @event sap.ui.webcomponents.fiori.FlexibleColumnLayout#layout-change + * @public + */ + "layout-change": { + detail: { + layout: { type: FCLLayout }, + columnLayout: { type: Array }, + startColumnVisible: { type: Boolean }, + midColumnVisible: { type: Boolean }, + endColumnVisible: { type: Boolean }, + arrowsUsed: { type: Boolean }, + resize: { type: Boolean }, + }, + }, + }, +}; + +/** + * @class + * + *

Overview

+ * + * The FlexibleColumnLayout implements the master-detail-detail paradigm by displaying up to three pages in separate columns. + * There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns. + * + *

Usage

+ * + * Use this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.). + * The Component is flexible in a sense that the application can focus the user's attention on one particular column. + * + *

Responsive Behavior

+ * + * The FlexibleColumnLayout automatically displays the maximum possible number of columns based on layout property and the window size. + * The component would display 1 column for window size smaller than 900px, up to two columns between 900px and 1280px, + * and 3 columns for sizes bigger than 1280px. + * + *

ES6 Module Import

+ * + * import @ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js"; + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.fiori.FlexibleColumnLayout + * @extends UI5Element + * @tagname ui5-flexible-column-layout + * @public + * @since 1.0.0-rc.8 + */ +class FlexibleColumnLayout extends UI5Element { + constructor() { + super(); + + this._prevLayout = null; + this.initialRendering = true; + this._handleResize = this.handleResize.bind(this); + this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori"); + } + + static get metadata() { + return metadata; + } + + static get render() { + return litRender; + } + + static get styles() { + return FlexibleColumnLayoutCss; + } + + static get template() { + return FlexibleColumnLayoutTemplate; + } + + static async onDefine() { + await Promise.all([ + Button.define(), + fetchI18nBundle("@ui5/webcomponents-fiori"), + ]); + } + + static get BREAKPOINTS() { + return { + "M": 960, + "L": 1280, + }; + } + + static get MEDIA() { + return { + PHONE: "phone", + TABLET: "tablet", + DESKTOP: "desktop", + }; + } + + onEnterDOM() { + ResizeHandler.register(this, this._handleResize); + } + + onExitDOM() { + ResizeHandler.deregister(this, this._handleResize); + } + + onAfterRendering() { + if (this.initialRendering) { + this.handleInitialRendering(); + return; + } + + this.syncLayout(); + } + + handleInitialRendering() { + this._prevLayout = this.layout; + this.updateLayout(); + this.initialRendering = false; + } + + handleResize() { + if (this.initialRendering) { + return; + } + + // store the previous layout + const prevLayoutHash = this.columnLayout.join(); + + // update the column layout, based on the current width + this.updateLayout(); + + // fire layout-change if the column layout changed + if (prevLayoutHash !== this.columnLayout.join()) { + this.fireLayoutChange(false, true); + } + } + + startArrowClick() { + this.arrowClick({ start: true, end: false }); + } + + endArrowClick() { + this.arrowClick({ start: false, end: true }); + } + + arrowClick({ start, end }) { + // update public property + this.layout = this.nextLayout(this.layout, { start, end }); + + // update layout + this.updateLayout(); + + // fire layout-change + this.fireLayoutChange(true, false); + } + + updateLayout() { + this._width = this.widthDOM; + this._columnLayout = this.nextColumnLayout(this.layout); + this._visibleColumns = this.calcVisibleColumns(this._columnLayout); + this.toggleColumns(); + } + + syncLayout() { + if (this._prevLayout !== this.layout) { + this.updateLayout(); + this._prevLayout = this.layout; + } + } + + toggleColumns() { + const toggleStartColumn = this.startColumnWidth === 0 ? "add" : "remove"; + this.startColumnDOM.classList[toggleStartColumn](".ui5-fcl-column--hidden"); + + const toggleMidColumn = this.startColumnWidth === 0 ? "add" : "remove"; + this.midColumnDOM.classList[toggleMidColumn](".ui5-fcl-column--hidden"); + + const toggleEndColumn = this.startColumnWidth === 0 ? "add" : "remove"; + this.endColumnDOM.classList[toggleEndColumn](".ui5-fcl-column--hidden"); + } + + nextLayout(layout, arrowsInfo = {}) { + if (arrowsInfo.start) { + return getNextLayoutByStartArrow()[layout]; + } + + if (arrowsInfo.end) { + return getNextLayoutByEndArrow()[layout]; + } + } + + nextColumnLayout(layout) { + return getLayoutsByMedia()[this.media][layout].layout; + } + + calcVisibleColumns(colLayot) { + return colLayot.filter(col => col !== 0).length; + } + + fireLayoutChange(arrowUsed, resize) { + this.fireEvent("layout-change", { + layout: this.layout, + columnLayout: this._columnLayout, + startColumnVisible: this.startColumnVisible, + midColumnVisible: this.midColumnVisible, + endColumnVisible: this.endColumnVisible, + arrowUsed, + resize, + }); + } + + /** + * Returns the current column layout, based on both the layout property and the screen size. + *

+ * For example: ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc, + * where the numbers represents the width of the start, middle and end columns. + * @readonly + * @type { Array } + * @defaultvalue ["100%", 0, 0] + * @public + */ + get columnLayout() { + return this._columnLayout; + } + + /** + * Returns if the start column is visible. + * @readonly + * @defaultvalue true + * @type { boolean } + * @public + */ + get startColumnVisible() { + if (this._columnLayout) { + return this._columnLayout[0] !== 0; + } + + return false; + } + + /** + * Returns if the middle column is visible. + * @readonly + * @type { boolean } + * @defaultvalue false + * @public + */ + get midColumnVisible() { + if (this._columnLayout) { + return this._columnLayout[1] !== 0; + } + + return false; + } + + /** + * Returns if the end column is visible. + * @readonly + * @type { boolean } + * @defaultvalue false + * @public + */ + get endColumnVisible() { + if (this._columnLayout) { + return this._columnLayout[2] !== 0; + } + + return false; + } + + /** + * Returns the number of currently visible columns. + * @readonly + * @type { Integer } + * @defaultvalue 1 + * @public + */ + get visibleColumns() { + return this._visibleColumns; + } + + get classes() { + return { + columns: { + start: { + "ui5-fcl-column": true, + "ui5-fcl-column--start": true, + }, + middle: { + "ui5-fcl-column": true, + "ui5-fcl-column--middle": true, + }, + end: { + "ui5-fcl-column": true, + "ui5-fcl-column--end": true, + }, + }, + }; + } + + get styles() { + return { + columns: { + start: { + width: this.startColumnWidth, + }, + middle: { + width: this.midColumnWidth, + }, + end: { + width: this.endColumnWidth, + }, + }, + arrowsContainer: { + start: { + display: this.showStartSeparator ? "flex" : "none", + }, + end: { + display: this.showEndSeparator ? "flex" : "none", + }, + }, + arrows: { + start: { + display: this.showStartArrow ? "inline-block" : "none", + transform: this.startArrowDirection === "mirror" ? "rotate(180deg)" : "", + }, + end: { + display: this.showEndArrow ? "inline-block" : "none", + transform: this.endArrowDirection === "mirror" ? "rotate(180deg)" : "", + }, + }, + }; + } + + get startColumnWidth() { + return this._columnLayout ? this._columnLayout[0] : "100%"; + } + + get midColumnWidth() { + return this._columnLayout ? this._columnLayout[1] : 0; + } + + get endColumnWidth() { + return this._columnLayout ? this._columnLayout[2] : 0; + } + + get showStartSeparator() { + return this.effectiveArrowsInfo[0].separator || this.startArrowVisibility; + } + + get showEndSeparator() { + return this.effectiveArrowsInfo[1].separator || this.endArrowVisibility; + } + + get showStartArrow() { + return this.noArrows ? false : this.startArrowVisibility; + } + + get showEndArrow() { + return this.noArrows ? false : this.endArrowVisibility; + } + + get startArrowVisibility() { + return this.effectiveArrowsInfo[0].visible; + } + + get endArrowVisibility() { + return this.effectiveArrowsInfo[1].visible; + } + + get startArrowDirection() { + return this.effectiveArrowsInfo[0].dir; + } + + get endArrowDirection() { + return this.effectiveArrowsInfo[1].dir; + } + + get effectiveArrowsInfo() { + return getLayoutsByMedia()[this.media][this.layout].arrows; + } + + get media() { + if (this._width <= FlexibleColumnLayout.BREAKPOINTS.M) { + return FlexibleColumnLayout.MEDIA.PHONE; + } + + if (this._width <= FlexibleColumnLayout.BREAKPOINTS.L) { + return FlexibleColumnLayout.MEDIA.TABLET; + } + + return FlexibleColumnLayout.MEDIA.DESKTOP; + } + + get widthDOM() { + return this.getBoundingClientRect().width; + } + + get startColumnDOM() { + return this.shadowRoot.querySelector(".ui5-fcl-column--start"); + } + + get midColumnDOM() { + return this.shadowRoot.querySelector(".ui5-fcl-column--middle"); + } + + get endColumnDOM() { + return this.shadowRoot.querySelector(".ui5-fcl-column--end"); + } + + get accStartColumnText() { + return this.i18nBundle.getText(FCL_START_COLUMN_TXT); + } + + get accMiddleColumnText() { + return this.i18nBundle.getText(FCL_MIDDLE_COLUMN_TXT); + } + + get accEndColumnText() { + return this.i18nBundle.getText(FCL_END_COLUMN_TXT); + } +} + +FlexibleColumnLayout.define(); + +export default FlexibleColumnLayout; diff --git a/packages/fiori/src/fcl-utils/FCLLayout.js b/packages/fiori/src/fcl-utils/FCLLayout.js new file mode 100644 index 000000000000..fb6c5397d088 --- /dev/null +++ b/packages/fiori/src/fcl-utils/FCLLayout.js @@ -0,0 +1,246 @@ +const getLayoutsByMedia = () => { + return { + desktop: { + "OneColumn": { + layout: ["100%", 0, 0], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "TwoColumnsStartExpanded": { + layout: ["67%", "33%", 0], + arrows: [ + { visible: true, dir: "mirror" }, + { visible: false, dir: null }, + ], + }, + "TwoColumnsMidExpanded": { + layout: ["33%", "67%", 0], + arrows: [ + { visible: true, dir: null }, + { visible: false, dir: null }, + ], + }, + "ThreeColumnsStartExpanded": { + layout: ["25%", "50%", "25%"], + arrows: [ + { visible: true, dir: null }, + { visible: true, dir: null }, + ], + }, + "ThreeColumnsMidExpanded": { + layout: ["25%", "50%", "25%"], + arrows: [ + { visible: true, dir: null }, + { visible: true, dir: null }, + ], + }, + "ThreeColumnsEndExpanded": { + layout: ["25%", "25%", "50%"], + arrows: [ + { visible: false, dir: null, separator: true }, + { visible: true, dir: "mirror" }, + ], + }, + "ThreeColumnsStartExpandedEndHidden": { + layout: ["67%", "33%", 0], + arrows: [ + { visible: true, dir: "mirror" }, + { visible: false, dir: null }, + ], + }, + "ThreeColumnsMidExpandedEndHidden": { + layout: ["33%", "67%", 0], + arrows: [ + { visible: true, dir: null }, + { visible: true, dir: null }, + ], + }, + "MidColumnFullScreen": { + layout: [0, "100%", 0], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "EndColumnFullScreen": { + layout: [0, 0, "100%"], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + }, + tablet: { + "OneColumn": { + layout: ["100%", 0, 0], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "TwoColumnsStartExpanded": { + layout: ["67%", "33%", 0], + arrows: [ + { visible: true, dir: "mirror" }, + { visible: false, dir: null }, + ], + }, + "TwoColumnsMidExpanded": { + layout: ["33%", "67%", 0], + arrows: [ + { visible: true, dir: null }, + { visible: false, dir: null }, + ], + }, + "ThreeColumnsStartExpanded": { + layout: ["67%", "33%", 0], + arrows: [ + { visible: true, dir: "mirror" }, + { visible: false, dir: null }, + ], + }, + "ThreeColumnsMidExpanded": { + layout: [0, "67%", "33%"], + arrows: [ + { visible: true, dir: null }, + { visible: true, dir: null }, + ], + }, + "ThreeColumnsEndExpanded": { + layout: [0, "33%", "67%"], + arrows: [ + { visible: false, dir: null }, + { visible: true, dir: "mirror" }, + ], + }, + "ThreeColumnsStartExpandedEndHidden": { + layout: ["67%", "33%", 0], + arrows: [ + { visible: true, dir: "mirror" }, + { visible: false, dir: null }, + ], + }, + "ThreeColumnsMidExpandedEndHidden": { + layout: ["33%", "67%", 0], + arrows: [ + { visible: true, dir: null }, + { visible: true, dir: null }, + ], + }, + "MidColumnFullScreen": { + layout: [0, "100%", 0], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "EndColumnFullScreen": { + layout: [0, 0, "100%"], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + }, + phone: { + "OneColumn": { + layout: ["100%", 0, 0], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "TwoColumnsStartExpanded": { + layout: [0, "100%", 0], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "TwoColumnsMidExpanded": { + layout: [0, "100%", 0], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "ThreeColumnsStartExpanded": { + layout: [0, 0, "100%"], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "ThreeColumnsMidExpanded": { + layout: [0, 0, "100%"], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "ThreeColumnsEndExpanded": { + layout: [0, 0, "100%"], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "ThreeColumnsStartExpandedEndHidden": { + layout: [0, 0, "100%"], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "ThreeColumnsMidExpandedEndHidden": { + layout: [0, 0, "100%"], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "MidColumnFullScreen": { + layout: [0, "100%", 0], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + "EndColumnFullScreen": { + layout: [0, 0, "100%"], + arrows: [ + { visible: false, dir: null }, + { visible: false, dir: null }, + ], + }, + }, + }; +}; + +const getNextLayoutByStartArrow = () => { + return { + "TwoColumnsStartExpanded": "TwoColumnsMidExpanded", + "TwoColumnsMidExpanded": "TwoColumnsStartExpanded", + "ThreeColumnsMidExpanded": "ThreeColumnsMidExpandedEndHidden", + "ThreeColumnsEndExpanded": "ThreeColumnsStartExpandedEndHidden", + "ThreeColumnsStartExpandedEndHidden": "ThreeColumnsMidExpandedEndHidden", + "ThreeColumnsMidExpandedEndHidden": "ThreeColumnsStartExpandedEndHidden", + }; +}; + +const getNextLayoutByEndArrow = () => { + return { + "ThreeColumnsMidExpanded": "ThreeColumnsEndExpanded", + "ThreeColumnsEndExpanded": "ThreeColumnsMidExpanded", + "ThreeColumnsStartExpandedEndHidden": "ThreeColumnsMidExpanded", + "ThreeColumnsMidExpandedEndHidden": "ThreeColumnsMidExpanded", + }; +}; + +export { + getLayoutsByMedia, + getNextLayoutByStartArrow, + getNextLayoutByEndArrow, +}; diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties index 8215c96b335c..c18daa4c2ed2 100644 --- a/packages/fiori/src/i18n/messagebundle.properties +++ b/packages/fiori/src/i18n/messagebundle.properties @@ -1,6 +1,15 @@ #This is the resource bundle for the UI5 Web Components #__ldi.translation.uuid=95d47730-48a4-4d6d-92f6-61f8c9d8f274 +#XTXT: Text for the FlexibleColumnLayout start column +FCL_START_COLUMN_TXT=First column + +#XTXT: Text for the FlexibleColumnLayout mid column +FCL_MIDDLE_COLUMN_TXT=Middle column + +#XTXT: Text for the FlexibleColumnLayout end column +FCL_END_COLUMN_TXT=Last column + #XTXT: Text for the NotificationListGroupItem NOTIFICATION_LIST_ITEM_TXT=Notification diff --git a/packages/fiori/src/themes/FlexibleColumnLayout.css b/packages/fiori/src/themes/FlexibleColumnLayout.css new file mode 100644 index 000000000000..0b661c18bce5 --- /dev/null +++ b/packages/fiori/src/themes/FlexibleColumnLayout.css @@ -0,0 +1,102 @@ +@import "./InvisibleTextStyles.css"; + +:host(:not([hidden])) { + display: block; + background: var(--_ui5_fcl_solid_bg); +} + +.ui5-fcl-root { + height: 100%; + display: flex; + flex-direction: row; +} + +/* columns */ +.ui5-fcl-column { + background: inherit; + box-sizing: border-box; + transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in; + will-change: width; + overflow-y: auto; +} + +:host([_visible-columns="2"]) .ui5-fcl-column--start { + border-right: var(--_ui5_fcl_column_border); +} + +:host([_visible-columns="3"]) .ui5-fcl-column--start { + border-right: var(--_ui5_fcl_column_border); +} + +:host([_visible-columns="2"]) .ui5-fcl-column--middle { + border-left: var(--_ui5_fcl_column_border) +} + +:host([_visible-columns="3"]) .ui5-fcl-column--middle { + border-left: var(--_ui5_fcl_column_border) +} + +:host([_visible-columns="3"]) .ui5-fcl-column--middle { + border-right: var(--_ui5_fcl_column_border) +} + +:host([_visible-columns="3"]) .ui5-fcl-column--end { + border-left: var(--_ui5_fcl_column_border); +} + +.ui5-fcl-column--hidden { + height: 0; + width: 0; + position: absolute; + visibility: hidden; +} + +/* arrow */ +.ui5-fcl-arrow-container { + display: flex; + align-items: center; + justify-content: center; + width: 1rem; + background-color: var(--sapShell_Background); +} + +.ui5-fcl-arrow { + position: relative; + width: 1.5rem; + height: 1.5rem; + min-width: 1.5rem; + will-change: transform; + overflow: visible; + z-index: 1; +} + +/* arrow decoration */ +.ui5-fcl-arrow:before { + background-image: var(--_ui5_fcl_decoration_top); + background-position-y: -0.3125rem; + bottom: 100%; +} + +.ui5-fcl-arrow:after { + background-image: var(--_ui5_fcl_decoration_bottom); + background-position-y: 0.3125rem; + top: 100%; +} + +.ui5-fcl-arrow:before, +.ui5-fcl-arrow:after { + content: ''; + position: absolute; + left: 0; + height: 4rem; + width: 100%; + transition: all 0.1s ease-in; + background-repeat: no-repeat; + background-size: 0.0625rem 100%; + background-position-x: calc(50% - 0.03125rem); +} + +.ui5-fcl-arrow:hover:before, +.ui5-fcl-arrow:hover:after { + height: 7rem; +} \ No newline at end of file diff --git a/packages/fiori/src/themes/base/FlexibleColumnLayout-parameters.css b/packages/fiori/src/themes/base/FlexibleColumnLayout-parameters.css new file mode 100644 index 000000000000..1e4852190795 --- /dev/null +++ b/packages/fiori/src/themes/base/FlexibleColumnLayout-parameters.css @@ -0,0 +1,6 @@ +:root { + --_ui5_fcl_solid_bg: var(--sapShell_Background); + --_ui5_fcl_column_border: none; + --_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapHighlightColor), #f3f4f5); + --_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapHighlightColor), #f3f4f5); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css index bb852676b2ec..c8fd179b1929 100644 --- a/packages/fiori/src/themes/sap_belize/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_belize/parameters-bundle.css @@ -1,2 +1,3 @@ +@import "../base/FlexibleColumnLayout-parameters.css"; @import "../base/ProductSwitchItem-parameters.css"; @import "../base/UploadCollection-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcb/FlexibleColumnLayout-parameters.css b/packages/fiori/src/themes/sap_belize_hcb/FlexibleColumnLayout-parameters.css new file mode 100644 index 000000000000..59233058fe7c --- /dev/null +++ b/packages/fiori/src/themes/sap_belize_hcb/FlexibleColumnLayout-parameters.css @@ -0,0 +1,6 @@ +:root { + --_ui5_fcl_solid_bg: var(--sapBackgroundColor); + --_ui5_fcl_column_border: solid 0.0625rem var(--sapGroup_ContentBorderColor); + --_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapObjectHeader_BorderColor), #000); + --_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapObjectHeader_BorderColor), #000); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css index 97855c33e4b4..6babe5296a03 100644 --- a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css @@ -1,2 +1,3 @@ +@import "./FlexibleColumnLayout-parameters.css"; @import "./ProductSwitchItem-parameters.css"; @import "./UploadCollection-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcw/FlexibleColumnLayout-parameters.css b/packages/fiori/src/themes/sap_belize_hcw/FlexibleColumnLayout-parameters.css new file mode 100644 index 000000000000..f3e4b26212ba --- /dev/null +++ b/packages/fiori/src/themes/sap_belize_hcw/FlexibleColumnLayout-parameters.css @@ -0,0 +1,6 @@ +:root { + --_ui5_fcl_solid_bg: var(--sapBackgroundColor); + --_ui5_fcl_column_border: solid 0.0625rem var(--sapGroup_ContentBorderColor); + --_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapObjectHeader_BorderColor), #fff); + --_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapObjectHeader_BorderColor), #fff); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css index 97855c33e4b4..6babe5296a03 100644 --- a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css @@ -1,2 +1,3 @@ +@import "./FlexibleColumnLayout-parameters.css"; @import "./ProductSwitchItem-parameters.css"; @import "./UploadCollection-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css index bb852676b2ec..c8fd179b1929 100644 --- a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css @@ -1,2 +1,3 @@ +@import "../base/FlexibleColumnLayout-parameters.css"; @import "../base/ProductSwitchItem-parameters.css"; @import "../base/UploadCollection-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/FlexibleColumnLayout-parameters.css b/packages/fiori/src/themes/sap_fiori_3_dark/FlexibleColumnLayout-parameters.css new file mode 100644 index 000000000000..d8eafc04f01b --- /dev/null +++ b/packages/fiori/src/themes/sap_fiori_3_dark/FlexibleColumnLayout-parameters.css @@ -0,0 +1,6 @@ +:root { + --_ui5_fcl_solid_bg: var(--sapShell_Background); + --_ui5_fcl_column_border: none; + --_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapHighlightColor), #272f37); + --_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapHighlightColor), #272f37); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css index bb852676b2ec..f51cd989bb52 100644 --- a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css @@ -1,2 +1,3 @@ +@import "./FlexibleColumnLayout-parameters.css"; @import "../base/ProductSwitchItem-parameters.css"; @import "../base/UploadCollection-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/types/FCLLayout.js b/packages/fiori/src/types/FCLLayout.js new file mode 100644 index 000000000000..e93bb9c12dc9 --- /dev/null +++ b/packages/fiori/src/types/FCLLayout.js @@ -0,0 +1,134 @@ +import DataType from "@ui5/webcomponents-base/dist/types/DataType.js"; + +/** + * Different types of FCLLayout. + * @lends sap.ui.webcomponents.fiori.types.FCLLayout.prototype + * @public + */ +const FCLLayouts = { + /** + * The layout will display 1 column. + * @public + * @type {OneColumn} + */ + OneColumn: "OneColumn", + + /** + * + * Desktop: 67/33/- Start (expanded) and Mid columns are displayed + * Tablet: 67/33/- Start (expanded) and Mid columns are displayed + * Phone: -/100/- only the Mid column is displayed + * + * Use to display both a master and a detail page when the user should focus on the master page. + * + * @type {TwoColumnsStartExpanded} + * @public + */ + TwoColumnsStartExpanded: "TwoColumnsStartExpanded", + + /** + * Desktop: 33/67/- Start and Mid (expanded) columns are displayed + * Tablet: 33/67/- Start and Mid (expanded) columns are displayed + * Phone: -/100/- only the Mid column is displayed + * + * Use to display both a master and a detail page when the user should focus on the detail page. + * + * @type {TwoColumnsMidExpanded} + * @public + */ + TwoColumnsMidExpanded: "TwoColumnsMidExpanded", + + /** + * Desktop: 25/50/25 Start, Mid (expanded) and End columns are displayed + * Tablet: 0/67/33 Mid (expanded) and End columns are displayed, Start is accessible by a layout arrow + * Phone: -/-/100 only the End column is displayed + * + * Use to display all three pages (master, detail, detail-detail) when the user should focus on the detail. + * + * @type {ThreeColumnsMidExpanded} + * @public + */ + ThreeColumnsMidExpanded: "ThreeColumnsMidExpanded", + + /** + * Desktop: 25/25/50 Start, Mid and End (expanded) columns are displayed + * Tablet: 0/33/67 Mid and End (expanded) columns are displayed, Start is accessible by layout arrows + * Phone: -/-/100 (only the End column is displayed) + * + * Use to display all three pages (master, detail, detail-detail) when the user should focus on the detail-detail. + * + * @public + * @type ThreeColumnsEndExpanded + */ + ThreeColumnsEndExpanded: "ThreeColumnsEndExpanded", + + /** + * Desktop: 67/33/0 Start (expanded) and Mid columns are displayed, End is accessible by layout arrows + * Tablet: 67/33/0 Start (expanded) and Mid columns are displayed, End is accessible by layout arrows + * Phone: -/-/100 only the End column is displayed + * + * Use to display the master and detail pages when the user should focus on the master. + * The detail-detail is still loaded and easily accessible with layout arrows. + * + * @public + * @type ThreeColumnsStartExpandedEndHidden + */ + ThreeColumnsStartExpandedEndHidden: "ThreeColumnsStartExpandedEndHidden", + + /** + * Desktop: 33/67/0 Start and Mid (expanded) columns are displayed, End is accessible by a layout arrow + * Tablet: 33/67/0 Start and Mid (expanded) columns are displayed, End is accessible by a layout arrow + * Phone: -/-/100 only the End column is displayed + * + * Use to display the master and detail pages when the user should focus on the detail. + * The detail-detail is still loaded and easily accessible with a layout arrow. + * + * @public + * @type ThreeColumnsMidExpandedEndHidden + */ + ThreeColumnsMidExpandedEndHidden: "ThreeColumnsMidExpandedEndHidden", + + /** + * Desktop: -/100/- only the Mid column is displayed + * Tablet: -/100/- only the Mid column is displayed + * Phone: -/100/- only the Mid column is displayed + * + * Use to display a detail page only, when the user should focus entirely on it. + * + * @public + * @type MidColumnFullScreen + */ + MidColumnFullScreen: "MidColumnFullScreen", + + /** + * Desktop: -/-/100 only the End column is displayed + * Tablet: -/-/100 only the End column is displayed + * Phone: -/-/100 only the End column is displayed + * + * Use to display a detail-detail page only, when the user should focus entirely on it. + * + * @public + * @type EndColumnFullScreen + */ + EndColumnFullScreen: "EndColumnFullScreen", +}; + +/** + * The number of columns of ui5-flexible-collcolumn-layout. + * + * @class + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.fiori.types.FCLLayout + * @public + * @enum {string} + */ +class FCLLayout extends DataType { + static isValid(value) { + return !!FCLLayouts[value]; + } +} + +FCLLayout.generataTypeAcessors(FCLLayouts); + +export default FCLLayout; diff --git a/packages/fiori/test/pages/FCL.html b/packages/fiori/test/pages/FCL.html new file mode 100644 index 000000000000..01deca1ae08e --- /dev/null +++ b/packages/fiori/test/pages/FCL.html @@ -0,0 +1,788 @@ + + + + + + + + Flexible Column Layout + + + + + + + + + + + +

+ Master-Detail: Master Expanded + Set to ThreeColumnsMidExpanded
+
+
+
+
+

+ + + + +
+
+ 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! + +
+ + + +

+ Master-Detail: Detail expanded + no-arrows + Set to TwoColumnsMidExpanded +

+ + + +
+
+ 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! + +
+ + + +

+ Master-Detail-Detail: Detail Expanded +
+

+ + + +
+
+ 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! + +
+ + + +

+ Master-Detail-Detail: Detail-Detail expanded +

+ + + +
+
+ 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! + +
+ + + +

+ Master-Detail-Detail: Detail expanded, Detail-Detail hidden +

+ + + +
+
+ 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! + +
+ + + +

+ Default OneColumn +

+ + + +
+
+ Column 1 +
+ + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + Hello worild! + +
+ +
+
+ Column 2 + +
+ + +
+
+ + Detail item + Detail item + Detail item + Detail item + Detail item + Detail item + Detail item + Detail item + +
+ +
+
+ Column 3 +
+ + +
+
+ + Detail - Detail + Detail - Detail + Detail - Detail + Detail - Detail + Detail - Detail + Detail - Detail + Detail - Detail + +
+ + +

+ + + +
+ + + + + + +

+ + 10 inch Portable DVD + + 7 inch Widescreen + Portable DVD Player w MP3 + Astro Laptop 1516 + + Astro Phone 6 + Audio/Video Cable Kit - 4m + + Beam Breaker B-1 + Beam Breaker B-2 + Beam Breaker B-3 + Beam Breaker B-4 + + Camcorder View + Benda Laptop 1408 + + Cepat Tablet 10.5 + + Gladiator MX + +
+ + +
+
+ + +
+ Edit + + + +
+
+
+ +
+ General Information +
+ +
+
+ + + +
+
+ Product: + +
+
+ +
+ Description: + +
+
+ +
+ Supplier: + Titanium +
+
+
+ +
+ Rating: + +
+ + +
+ +


+ + Suppliers +
+ + Titanium + Technocom + Red Point Stores + Very Best Screens + Smartcards + Alpha Printers + Printer for All + Oxynum + Fasttech + Ultrasonic United + Speaker Experts + Brainsoft + +
+
+ + +
+
+ + +
+ Edit + + + +
+
+

+ + + + + + + + + + + + + + + + + + + +
+

+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + +

+

+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + +

+

+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + +

+
+
+ + + + + diff --git a/packages/fiori/test/pages/FCLApp.html b/packages/fiori/test/pages/FCLApp.html new file mode 100644 index 000000000000..a3e1dd24970e --- /dev/null +++ b/packages/fiori/test/pages/FCLApp.html @@ -0,0 +1,290 @@ + + + + + + + + Flexible Column Layout + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
Loading companies.
+
Please wait...
+
+ +
+
+
+ + + + + + diff --git a/packages/fiori/test/samples/FlexibleColumnLayout.sample.html b/packages/fiori/test/samples/FlexibleColumnLayout.sample.html new file mode 100644 index 000000000000..42f1079aad7a --- /dev/null +++ b/packages/fiori/test/samples/FlexibleColumnLayout.sample.html @@ -0,0 +1,431 @@ +
+

FlexibleColumnLayout

+
+ +
+
+ +
@ui5/webcomponents-fiori
+ +
<ui5-fcl-column-layout>
+ + + + + +
+

FlexibleColumnLayout - One Initial Column

+
+ + + +
+ + + + + + +

+ + 10 inch Portable DVD + 7 inch WidescreenPortable DVD Player w MP3 + Astro Laptop 1516 + Astro Phone 6 + Audio/Video Cable Kit - 4m + Beam Breaker B-1 + Beam Breaker B-2 + Beam Breaker B-3 + Beam Breaker B-4 + Camcorder View + Benda Laptop 1408 + Cepat Tablet 10.5 + Gladiator MX + +
+ + +
+
+ + +
+ Edit + + + +
+
+
+ +
+ General Information +
+ +
+
+ + + +
+
+ Product: + +
+
+ +
+ Description: + +
+
+ +
+ Supplier: + Titanium +
+
+
+ +
+ Rating: + +
+ + +
+ +


+ + Suppliers +
+ + Titanium + Technocom + Red Point Stores + Very Best Screens + Smartcards + Alpha Printers + Printer for All + Oxynum + Fasttech + Ultrasonic United + Speaker Experts + Brainsoft + +
+
+ + +
+
+ + +
+ Edit + + + +
+
+

+ + + + + + + + + + + + + + + + + + + +
+

+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + +

+

+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + +

+

+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + +

+
+
+ + + +
+

+<ui5-flexible-column-layout id="fcl">
+	<!-- start column -->
+	<div slot="startColumn">
+		<ui5-shellbar primary-title="Dep. New York, USA">
+		</ui5-shellbar>
+
+		<ui5-list id="col1list" header-text="Employees">
+		</ui5-list>
+	</div>
+
+	<!-- middle column -->
+	<div slot="midColumn">
+		<div class="colHeader">
+			<ui5-button design="Emphasized">Edit</ui5-button>
+			<ui5-button design="Transparent" icon="add"></ui5-button>
+			<ui5-button id="fullscreenMidColumn" design="Transparent" icon="full-screen"></ui5-button>
+			<ui5-button id="closeMidColumn" icon="decline" design="Transparent"></ui5-button>
+		</div>
+
+		<ui5-list id="col2list" header-text="Employees">
+		</ui5-list>
+	</div>
+
+	<!-- end column -->
+	<div slot="endColumn">
+		<div class="colHeader">
+			<ui5-button design="Emphasized">Edit</ui5-button>
+			<ui5-button design="Transparent" icon="add"></ui5-button>
+			<ui5-button id="fullscreenEndColumn" design="Transparent" icon="full-screen"></ui5-button>
+			<ui5-button id="closeEndColumn" icon="decline" design="Transparent"></ui5-button>
+		</div>
+
+		<p>
+			"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod..."
+		</p>
+	</div>
+</ui5-flexible-column-layout>
+
+<script>
+	col1list.addEventListener("item-click", function(e) {
+		fcl.layout = "TwoColumnsMidExpanded";
+	});
+
+	col2list.addEventListener("item-click", function(e) {
+		fcl.layout = "ThreeColumnsEndExpanded";
+	});
+
+	closeMidColumn.addEventListener("click", function(e) {
+		fcl.layout = "OneColumn";
+	});
+	fullscreenMidColumn.addEventListener("click", function(e) {
+		fcl.layout = "MidColumnFullscreen";
+	});
+
+	fullscreenEndColumn.addEventListener("click", function(e) {
+		fcl.layout = "EndColumnFullscreen";
+	});
+
+	closeEndColumn.addEventListener("click", function(e) {
+		fcl.layout = "TwoColumnsMidExpanded";
+	});
+</script>
+
+
+ + \ No newline at end of file diff --git a/packages/fiori/test/specs/FCL.spec.js b/packages/fiori/test/specs/FCL.spec.js new file mode 100644 index 000000000000..2ed5080f0bbe --- /dev/null +++ b/packages/fiori/test/specs/FCL.spec.js @@ -0,0 +1,99 @@ + +const assert = require("chai").assert; + + +describe("FlexibleColumnLayout Behavior", () => { + browser.url("http://localhost:8081/test-resources/pages/FCL.html"); + + it("tests Desktop size 1400px", () => { + // act + browser.setWindowSize(1400, 1080); + + const layoutChangeCounter = browser.$("#testLayoutChange"); + const visibleColumns = browser.execute(() => { + const fcl = document.getElementById("fcl3"); + return fcl.getAttribute("_visible-columns"); + }); + + // assert + assert.strictEqual(visibleColumns, "3", "3 columns are visible"); + assert.strictEqual(layoutChangeCounter.getValue(), "1", "The event layout-change is not fired."); + }); + + it("tests Tablet Size 1200px", () => { + // act + browser.setWindowSize(1200, 1080); + + const layoutChangeCounter = browser.$("#testLayoutChange"); + const visibleColumns = browser.execute(() => { + const fcl = document.getElementById("fcl3"); + return fcl.getAttribute("_visible-columns"); + }); + + // assert + assert.strictEqual(visibleColumns, "2", "2 columns are visible"); + assert.strictEqual(layoutChangeCounter.getValue(), "2", "The event layout-change after resizing."); + }); + + it("tests Phone size 870px", () => { + // act + browser.setWindowSize(870, 1080); + + const layoutChangeCounter = browser.$("#testLayoutChange"); + const visibleColumns = browser.execute(() => { + const fcl = document.getElementById("fcl3"); + return fcl.getAttribute("_visible-columns"); + }); + + // assert + assert.strictEqual(visibleColumns, "1", "1 columns are visible"); + assert.strictEqual(layoutChangeCounter.getValue(), "3", "The event layout-change after resizing."); + + // reset + browser.setWindowSize(1400, 1080); + }); + + it("tests layout-change on arrow press", () => { + const fcl = browser.$("#fcl1"); + const layoutChangeCounter = browser.$("#layoutChangeRes4"); + const arrow = fcl.shadow$(".ui5-fcl-arrow--start"); + + // act + arrow.click(); + + // assert (two times the event has been fired due resize already) + assert.strictEqual(layoutChangeCounter.getValue(), "4", "The event layout-change fired once."); + assert.strictEqual(fcl.getProperty("layout"), "TwoColumnsMidExpanded", "new layout set"); + + // act + arrow.click(); + + // // assert + assert.strictEqual(layoutChangeCounter.getValue(), "5", "The event layout-change fired again."); + assert.strictEqual(fcl.getProperty("layout"), "TwoColumnsStartExpanded", "new layout set"); + }); + + it("tests change layout with API", () => { + const fcl = browser.$("#fcl1"); + const btn = browser.$("#switchBtn1"); + + let visibleColumns = browser.execute(() => { + const fcl = document.getElementById("fcl1"); + return fcl.getAttribute("_visible-columns"); + }); + + assert.strictEqual(visibleColumns, "2", "2 columns are visible"); + assert.strictEqual(fcl.getProperty("layout"), "TwoColumnsStartExpanded", "new layout set"); + + // act + btn.click(); // fcl1.layout = "ThreeColumnsMidExpanded" + + visibleColumns = browser.execute(() => { + const fcl = document.getElementById("fcl1"); + return fcl.getAttribute("_visible-columns"); + }); + + // assert + assert.strictEqual(visibleColumns, "3", "3 columns are visible"); + assert.strictEqual(fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set"); }); +}); diff --git a/packages/playground/build-scripts/samples-prepare.js b/packages/playground/build-scripts/samples-prepare.js index a2f1e580a216..dbe6f0da2d36 100644 --- a/packages/playground/build-scripts/samples-prepare.js +++ b/packages/playground/build-scripts/samples-prepare.js @@ -12,6 +12,7 @@ const components = []; // Add new components here const newComponents = [ + "FlexibleColumnLayout", "DateTimePicker", "DurationPicker", "NotificationListItem", diff --git a/packages/theme-base/css-vars-usage.json b/packages/theme-base/css-vars-usage.json index b1a5db3c24d3..e6180145f409 100644 --- a/packages/theme-base/css-vars-usage.json +++ b/packages/theme-base/css-vars-usage.json @@ -189,6 +189,7 @@ "--sapSelectedColor", "--sapShell_Active_Background", "--sapShell_Active_TextColor", + "--sapShell_Background", "--sapShell_Hover_Background", "--sapShell_InteractiveBorderColor", "--sapShell_InteractiveTextColor",