From 5b0768b1e735f9e9a0499b6ec84f3fcbc0492cfd Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Thu, 18 Jul 2024 15:30:53 +0300 Subject: [PATCH 01/19] WIP(ui5-tool-page): add ui5-tool-page component --- packages/fiori/src/ToolPage.hbs | 14 +++ packages/fiori/src/ToolPage.ts | 97 ++++++++++++++++ packages/fiori/src/bundle.esm.ts | 1 + packages/fiori/src/themes/ShellBar.css | 1 + packages/fiori/src/themes/ToolPage.css | 62 ++++++++++ .../src/themes/base/ToolPage-parameters.css | 5 + .../themes/sap_horizon/parameters-bundle.css | 1 + packages/fiori/test/pages/ToolPage.html | 109 ++++++++++++++++++ 8 files changed, 290 insertions(+) create mode 100644 packages/fiori/src/ToolPage.hbs create mode 100644 packages/fiori/src/ToolPage.ts create mode 100644 packages/fiori/src/themes/ToolPage.css create mode 100644 packages/fiori/src/themes/base/ToolPage-parameters.css create mode 100644 packages/fiori/test/pages/ToolPage.html diff --git a/packages/fiori/src/ToolPage.hbs b/packages/fiori/src/ToolPage.hbs new file mode 100644 index 000000000000..a5881fed3982 --- /dev/null +++ b/packages/fiori/src/ToolPage.hbs @@ -0,0 +1,14 @@ +
+
+ +
+
+ +
+ +
+
+
diff --git a/packages/fiori/src/ToolPage.ts b/packages/fiori/src/ToolPage.ts new file mode 100644 index 000000000000..8215b5a8bee1 --- /dev/null +++ b/packages/fiori/src/ToolPage.ts @@ -0,0 +1,97 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import browserScrollbarCSS from "@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.js"; +import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; +import type SideNavigation from "./SideNavigation.js"; + +// Template +import ToolPageTemplate from "./generated/templates/ToolPageTemplate.lit.js"; + +// Styles +import ToolPageCss from "./generated/themes/ToolPage.css.js"; + +/** + * @class + * + * ### Overview + * + * The `ui5-tool-page` is a container ... + * ### ES6 Module Import + * + * `import "@ui5/webcomponents-fiori/dist/ToolPage.js";` + * @constructor + * @extends UI5Element + * @since 2.1.0 + * @public + */ +@customElement({ + tag: "ui5-tool-page", + languageAware: true, + renderer: litRender, + styles: [ + browserScrollbarCSS, + ToolPageCss, + ], + template: ToolPageTemplate, +}) +class ToolPage extends UI5Element { + _sideCollapsed = false; + + /** + * Indicates whether if the side menu is collapsed. + * @default false + * @public + */ + @property({ type: Boolean }) + set sideCollapsed(value: boolean) { + this._sideCollapsed = value; + + if (isPhone()) { + return; + } + + if (this.sideContent.length > 0) { + (this.sideContent[0] as SideNavigation).collapsed = value; + } + } + + get sideCollapsed() { + return this._sideCollapsed; + } + + /** + * Defines the header HTML Element. + * @public + */ + @slot() + header!: Array; + + /** + * Defines the side content HTML Element. + * @public + */ + @slot() + sideContent!: Array; + + /** + * Defines the content HTML Element. + * @public + */ + @slot({ type: HTMLElement, "default": true }) + content!: Array; + + get classes() { + return { + root: { + "ui5-tool-page-phone": isPhone(), + }, + }; + } +} + +ToolPage.define(); + +export default ToolPage; diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts index 0a1ed35529de..28c0978f9a39 100644 --- a/packages/fiori/src/bundle.esm.ts +++ b/packages/fiori/src/bundle.esm.ts @@ -34,6 +34,7 @@ import SideNavigationItem from "./SideNavigationItem.js"; import SideNavigationSubItem from "./SideNavigationSubItem.js"; import SortItem from "./SortItem.js"; import Timeline from "./Timeline.js"; +import ToolPage from "./ToolPage.js"; import UploadCollection from "./UploadCollection.js"; import UploadCollectionItem from "./UploadCollectionItem.js"; import ViewSettingsDialog from "./ViewSettingsDialog.js"; diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css index 1424c0625163..fd1bc3c991cf 100644 --- a/packages/fiori/src/themes/ShellBar.css +++ b/packages/fiori/src/themes/ShellBar.css @@ -25,6 +25,7 @@ font-size: var(--sapFontSize); font-weight: normal; box-sizing: border-box; + border-radius: inherit; } .ui5-shellbar-menu-button, diff --git a/packages/fiori/src/themes/ToolPage.css b/packages/fiori/src/themes/ToolPage.css new file mode 100644 index 000000000000..d240655c4e30 --- /dev/null +++ b/packages/fiori/src/themes/ToolPage.css @@ -0,0 +1,62 @@ + +:host(:not([hidden])) { + width: 100%; + height: 100%; + display: block; + padding: 0.5rem 0.5rem 0 0.5rem; + background: var(--sapBackgroundColor); + box-sizing: border-box; + overflow: hidden; +} + +::slotted([ui5-shellbar]) { + box-shadow: var(--_ui5_tool_page_box_shadow); + border-radius: 0.5rem; +} + +.ui5-tool-page-root { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + box-sizing: border-box; +} + +.ui5-tool-page-header { + +} + +.ui5-tool-page-section { + display: flex; + flex: 1; + min-height: 0; + position: relative; +} + +.ui5-tool-page-aside { + margin: 0.5rem 0.5rem 0 0; + transition: transform 0.3s; + z-index: 1; +} + +.ui5-tool-page-phone .ui5-tool-page-aside { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 100%; +} + +.ui5-tool-page-content { + flex: 1; + min-width: 0; + margin: 0.5rem 0 0 0; + + box-shadow: var(--_ui5_tool_page_box_shadow); + border-radius: 0.5rem 0.5rem 0 0; + background: var(--sapBackgroundColor); +} + +:host([side-collapsed]) .ui5-tool-page-phone .ui5-tool-page-aside { + transform: translateX(calc(-100% - 0.25rem)); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/base/ToolPage-parameters.css b/packages/fiori/src/themes/base/ToolPage-parameters.css new file mode 100644 index 000000000000..49b9dbfaa5e6 --- /dev/null +++ b/packages/fiori/src/themes/base/ToolPage-parameters.css @@ -0,0 +1,5 @@ +:root { + --_ui5_tool_page_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_tool_page_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_tool_page_box_shadow: 0 0 0.125rem 0 var(--_ui5_tool_page_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_tool_page_shadow_color2); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css index c9c606d96283..cb3c56eb778d 100644 --- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css @@ -8,6 +8,7 @@ @import "./ProductSwitchItem-parameters.css"; @import "./ShellBar-parameters.css"; @import "./TimelineItem-parameters.css"; +@import "../base/ToolPage-parameters.css"; @import "./SideNavigation-parameters.css"; @import "./UploadCollection-parameters.css"; @import "./Wizard-parameters.css"; diff --git a/packages/fiori/test/pages/ToolPage.html b/packages/fiori/test/pages/ToolPage.html new file mode 100644 index 000000000000..1d28771a86b3 --- /dev/null +++ b/packages/fiori/test/pages/ToolPage.html @@ -0,0 +1,109 @@ + + + + + Tool Page + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ selection-change event + +
+
+ click event + +
+
+ prevent selection-change event + +
+
+
+ + + + + From dc90dc088938356a54c1ea5cbcb77bb3da0c9336 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Thu, 18 Jul 2024 16:43:28 +0300 Subject: [PATCH 02/19] chore: fix styles --- packages/fiori/src/SideNavigation.ts | 2 +- packages/fiori/src/ToolPage.hbs | 2 +- packages/fiori/src/ToolPage.ts | 29 ++++++++++------- packages/fiori/src/themes/ToolPage.css | 31 ++++++++++++++++--- .../sap_horizon_dark/parameters-bundle.css | 1 + .../sap_horizon_hcb/ToolPage-parameters.css | 7 +++++ .../sap_horizon_hcb/parameters-bundle.css | 1 + .../sap_horizon_hcw/ToolPage-parameters.css | 7 +++++ .../sap_horizon_hcw/parameters-bundle.css | 1 + 9 files changed, 63 insertions(+), 18 deletions(-) create mode 100644 packages/fiori/src/themes/sap_horizon_hcb/ToolPage-parameters.css create mode 100644 packages/fiori/src/themes/sap_horizon_hcw/ToolPage-parameters.css diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts index a9b696ca836b..d08b3ca7155d 100644 --- a/packages/fiori/src/SideNavigation.ts +++ b/packages/fiori/src/SideNavigation.ts @@ -196,7 +196,7 @@ class SideNavigation extends UI5Element { * @private */ @property({ type: Boolean }) - isTouchDevice = false;; + isTouchDevice = false; static i18nBundle: I18nBundle; diff --git a/packages/fiori/src/ToolPage.hbs b/packages/fiori/src/ToolPage.hbs index a5881fed3982..53cf7e5e4cc4 100644 --- a/packages/fiori/src/ToolPage.hbs +++ b/packages/fiori/src/ToolPage.hbs @@ -1,4 +1,4 @@ -
+
diff --git a/packages/fiori/src/ToolPage.ts b/packages/fiori/src/ToolPage.ts index 8215b5a8bee1..72d507a2e242 100644 --- a/packages/fiori/src/ToolPage.ts +++ b/packages/fiori/src/ToolPage.ts @@ -4,7 +4,11 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import browserScrollbarCSS from "@ui5/webcomponents/dist/generated/themes/BrowserScrollbar.css.js"; -import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; +import { + isPhone, + isTablet, + isCombi, +} from "@ui5/webcomponents-base/dist/Device.js"; import type SideNavigation from "./SideNavigation.js"; // Template @@ -38,11 +42,22 @@ import ToolPageCss from "./generated/themes/ToolPage.css.js"; template: ToolPageTemplate, }) class ToolPage extends UI5Element { - _sideCollapsed = false; + _sideCollapsed = isPhone() || (isTablet() && !isCombi()); + + /** + * @private + */ + @property({ type: Boolean }) + isPhone = isPhone(); + + /** + * @private + */ + @property({ type: Boolean }) + isTablet = isTablet() && !isCombi(); /** * Indicates whether if the side menu is collapsed. - * @default false * @public */ @property({ type: Boolean }) @@ -82,14 +97,6 @@ class ToolPage extends UI5Element { */ @slot({ type: HTMLElement, "default": true }) content!: Array; - - get classes() { - return { - root: { - "ui5-tool-page-phone": isPhone(), - }, - }; - } } ToolPage.define(); diff --git a/packages/fiori/src/themes/ToolPage.css b/packages/fiori/src/themes/ToolPage.css index d240655c4e30..96093d7d715a 100644 --- a/packages/fiori/src/themes/ToolPage.css +++ b/packages/fiori/src/themes/ToolPage.css @@ -9,9 +9,12 @@ overflow: hidden; } -::slotted([ui5-shellbar]) { - box-shadow: var(--_ui5_tool_page_box_shadow); - border-radius: 0.5rem; +:host(:not([hidden][is-tablet])) { + padding: 0.5rem; +} + +:host(:not([hidden][is-phone])) { + padding: 0.25rem; } .ui5-tool-page-root { @@ -39,7 +42,11 @@ z-index: 1; } -.ui5-tool-page-phone .ui5-tool-page-aside { +:host([is-phone]) .ui5-tool-page-aside { + margin: 0.25rem 0.25rem 0 0; +} + +:host([is-phone]) .ui5-tool-page-aside { position: absolute; top: 0; left: 0; @@ -57,6 +64,20 @@ background: var(--sapBackgroundColor); } -:host([side-collapsed]) .ui5-tool-page-phone .ui5-tool-page-aside { +:host([is-phone]) .ui5-tool-page-content { + margin: 0.25rem 0 0 0; +} + +:host([is-phone]) .ui5-tool-page-content, +:host([is-tablet]) .ui5-tool-page-content { + border-radius: 0.5rem; +} + +:host([side-collapsed][is-phone]) .ui5-tool-page-aside { transform: translateX(calc(-100% - 0.25rem)); +} + +::slotted([ui5-shellbar]) { + box-shadow: var(--_ui5_tool_page_box_shadow); + border-radius: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css index 75bad925821d..9b1c7e8f9d8d 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css @@ -8,6 +8,7 @@ @import "./ProductSwitchItem-parameters.css"; @import "./ShellBar-parameters.css"; @import "./TimelineItem-parameters.css"; +@import "../base/ToolPage-parameters.css"; @import "./SideNavigation-parameters.css"; @import "./UploadCollection-parameters.css"; @import "./Wizard-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_hcb/ToolPage-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/ToolPage-parameters.css new file mode 100644 index 000000000000..812f5abe007a --- /dev/null +++ b/packages/fiori/src/themes/sap_horizon_hcb/ToolPage-parameters.css @@ -0,0 +1,7 @@ +@import "../base/ToolPage-parameters.css"; + +:root { + --_ui5_tool_page_shadow_color1: var(--sapContent_ShadowColor); + --_ui5_tool_page_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_tool_page_box_shadow: 0 0 0 0.0625rem var(--_ui5_tool_page_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_tool_page_shadow_color2); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css index 27c258f610c6..9fda9db983fc 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css @@ -8,6 +8,7 @@ @import "./ShellBar-parameters.css"; @import "./SideNavigation-parameters.css"; @import "./TimelineItem-parameters.css"; +@import "./ToolPage-parameters.css"; @import "./UploadCollection-parameters.css"; @import "../base/ViewSettingsDialog-parameters.css"; @import "./Wizard-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_hcw/ToolPage-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/ToolPage-parameters.css new file mode 100644 index 000000000000..812f5abe007a --- /dev/null +++ b/packages/fiori/src/themes/sap_horizon_hcw/ToolPage-parameters.css @@ -0,0 +1,7 @@ +@import "../base/ToolPage-parameters.css"; + +:root { + --_ui5_tool_page_shadow_color1: var(--sapContent_ShadowColor); + --_ui5_tool_page_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_tool_page_box_shadow: 0 0 0 0.0625rem var(--_ui5_tool_page_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_tool_page_shadow_color2); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css index 627a7c145e0c..76112982fedd 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css @@ -8,6 +8,7 @@ @import "../sap_horizon_hcb/ShellBar-parameters.css"; @import "./SideNavigation-parameters.css"; @import "./TimelineItem-parameters.css"; +@import "./ToolPage-parameters.css"; @import "./UploadCollection-parameters.css"; @import "../base/ViewSettingsDialog-parameters.css"; @import "./Wizard-parameters.css"; From 9cf2882538164753264a2e3e159b8503cce0f6ba Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Fri, 19 Jul 2024 14:10:11 +0300 Subject: [PATCH 03/19] chore: reorganize code --- packages/fiori/src/ToolPage.ts | 6 ++++-- packages/fiori/src/themes/ToolPage.css | 6 ++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/fiori/src/ToolPage.ts b/packages/fiori/src/ToolPage.ts index 72d507a2e242..169dbe845d98 100644 --- a/packages/fiori/src/ToolPage.ts +++ b/packages/fiori/src/ToolPage.ts @@ -68,8 +68,10 @@ class ToolPage extends UI5Element { return; } - if (this.sideContent.length > 0) { - (this.sideContent[0] as SideNavigation).collapsed = value; + const sideNavigation = this.querySelector("[ui5-side-navigation]") as SideNavigation; + + if (sideNavigation) { + sideNavigation.collapsed = value; } } diff --git a/packages/fiori/src/themes/ToolPage.css b/packages/fiori/src/themes/ToolPage.css index 96093d7d715a..221dda351ce7 100644 --- a/packages/fiori/src/themes/ToolPage.css +++ b/packages/fiori/src/themes/ToolPage.css @@ -42,6 +42,10 @@ z-index: 1; } +:host([side-collapsed]) .ui5-tool-page-aside { + z-index: 3; +} + :host([is-phone]) .ui5-tool-page-aside { margin: 0.25rem 0.25rem 0 0; } @@ -58,6 +62,7 @@ flex: 1; min-width: 0; margin: 0.5rem 0 0 0; + z-index: 2; box-shadow: var(--_ui5_tool_page_box_shadow); border-radius: 0.5rem 0.5rem 0 0; @@ -77,6 +82,7 @@ transform: translateX(calc(-100% - 0.25rem)); } +::slotted([ui5-toolbar]), ::slotted([ui5-shellbar]) { box-shadow: var(--_ui5_tool_page_box_shadow); border-radius: 0.5rem; From 9524b94a1058cc4d45e6446bc386eda1a762f7a5 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Fri, 19 Jul 2024 14:49:17 +0300 Subject: [PATCH 04/19] chore: rename to ui5-navigation-layout --- packages/fiori/src/NavigationLayout.hbs | 14 ++++++++++ .../src/{ToolPage.ts => NavigationLayout.ts} | 18 ++++++------ packages/fiori/src/ToolPage.hbs | 14 ---------- packages/fiori/src/bundle.esm.ts | 2 +- .../{ToolPage.css => NavigationLayout.css} | 28 +++++++++---------- .../base/NavigationLayout-parameters.css | 5 ++++ .../src/themes/base/ToolPage-parameters.css | 5 ---- .../themes/sap_horizon/parameters-bundle.css | 2 +- .../sap_horizon_dark/parameters-bundle.css | 2 +- .../NavigationLayout-parameters.css | 7 +++++ .../sap_horizon_hcb/ToolPage-parameters.css | 7 ----- .../sap_horizon_hcb/parameters-bundle.css | 2 +- .../NavigationLayout-parameters.css | 7 +++++ .../sap_horizon_hcw/ToolPage-parameters.css | 7 ----- .../sap_horizon_hcw/parameters-bundle.css | 2 +- .../{ToolPage.html => NavigationLayout.html} | 8 +++--- 16 files changed, 65 insertions(+), 65 deletions(-) create mode 100644 packages/fiori/src/NavigationLayout.hbs rename packages/fiori/src/{ToolPage.ts => NavigationLayout.ts} (81%) delete mode 100644 packages/fiori/src/ToolPage.hbs rename packages/fiori/src/themes/{ToolPage.css => NavigationLayout.css} (65%) create mode 100644 packages/fiori/src/themes/base/NavigationLayout-parameters.css delete mode 100644 packages/fiori/src/themes/base/ToolPage-parameters.css create mode 100644 packages/fiori/src/themes/sap_horizon_hcb/NavigationLayout-parameters.css delete mode 100644 packages/fiori/src/themes/sap_horizon_hcb/ToolPage-parameters.css create mode 100644 packages/fiori/src/themes/sap_horizon_hcw/NavigationLayout-parameters.css delete mode 100644 packages/fiori/src/themes/sap_horizon_hcw/ToolPage-parameters.css rename packages/fiori/test/pages/{ToolPage.html => NavigationLayout.html} (97%) diff --git a/packages/fiori/src/NavigationLayout.hbs b/packages/fiori/src/NavigationLayout.hbs new file mode 100644 index 000000000000..e3ca19c856d5 --- /dev/null +++ b/packages/fiori/src/NavigationLayout.hbs @@ -0,0 +1,14 @@ +
+
+ +
+
+ +
+ +
+
+
diff --git a/packages/fiori/src/ToolPage.ts b/packages/fiori/src/NavigationLayout.ts similarity index 81% rename from packages/fiori/src/ToolPage.ts rename to packages/fiori/src/NavigationLayout.ts index 169dbe845d98..24c89deae38d 100644 --- a/packages/fiori/src/ToolPage.ts +++ b/packages/fiori/src/NavigationLayout.ts @@ -12,10 +12,10 @@ import { import type SideNavigation from "./SideNavigation.js"; // Template -import ToolPageTemplate from "./generated/templates/ToolPageTemplate.lit.js"; +import NavigationLayoutTemplate from "./generated/templates/NavigationLayoutTemplate.lit.js"; // Styles -import ToolPageCss from "./generated/themes/ToolPage.css.js"; +import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js"; /** * @class @@ -25,23 +25,23 @@ import ToolPageCss from "./generated/themes/ToolPage.css.js"; * The `ui5-tool-page` is a container ... * ### ES6 Module Import * - * `import "@ui5/webcomponents-fiori/dist/ToolPage.js";` + * `import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";` * @constructor * @extends UI5Element * @since 2.1.0 * @public */ @customElement({ - tag: "ui5-tool-page", + tag: "ui5-navigation-layout", languageAware: true, renderer: litRender, styles: [ browserScrollbarCSS, - ToolPageCss, + NavigationLayoutCss, ], - template: ToolPageTemplate, + template: NavigationLayoutTemplate, }) -class ToolPage extends UI5Element { +class NavigationLayout extends UI5Element { _sideCollapsed = isPhone() || (isTablet() && !isCombi()); /** @@ -101,6 +101,6 @@ class ToolPage extends UI5Element { content!: Array; } -ToolPage.define(); +NavigationLayout.define(); -export default ToolPage; +export default NavigationLayout; diff --git a/packages/fiori/src/ToolPage.hbs b/packages/fiori/src/ToolPage.hbs deleted file mode 100644 index 53cf7e5e4cc4..000000000000 --- a/packages/fiori/src/ToolPage.hbs +++ /dev/null @@ -1,14 +0,0 @@ -
-
- -
-
- -
- -
-
-
diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts index 28c0978f9a39..0b1a4f0f3e7b 100644 --- a/packages/fiori/src/bundle.esm.ts +++ b/packages/fiori/src/bundle.esm.ts @@ -34,7 +34,7 @@ import SideNavigationItem from "./SideNavigationItem.js"; import SideNavigationSubItem from "./SideNavigationSubItem.js"; import SortItem from "./SortItem.js"; import Timeline from "./Timeline.js"; -import ToolPage from "./ToolPage.js"; +import NavigationLayout from "./NavigationLayout.js"; import UploadCollection from "./UploadCollection.js"; import UploadCollectionItem from "./UploadCollectionItem.js"; import ViewSettingsDialog from "./ViewSettingsDialog.js"; diff --git a/packages/fiori/src/themes/ToolPage.css b/packages/fiori/src/themes/NavigationLayout.css similarity index 65% rename from packages/fiori/src/themes/ToolPage.css rename to packages/fiori/src/themes/NavigationLayout.css index 221dda351ce7..ba1315488961 100644 --- a/packages/fiori/src/themes/ToolPage.css +++ b/packages/fiori/src/themes/NavigationLayout.css @@ -17,7 +17,7 @@ padding: 0.25rem; } -.ui5-tool-page-root { +.ui5-nl-root { width: 100%; height: 100%; display: flex; @@ -25,32 +25,32 @@ box-sizing: border-box; } -.ui5-tool-page-header { +.ui5-nl-header { } -.ui5-tool-page-section { +.ui5-nl-section { display: flex; flex: 1; min-height: 0; position: relative; } -.ui5-tool-page-aside { +.ui5-nl-aside { margin: 0.5rem 0.5rem 0 0; transition: transform 0.3s; z-index: 1; } -:host([side-collapsed]) .ui5-tool-page-aside { +:host([side-collapsed]) .ui5-nl-aside { z-index: 3; } -:host([is-phone]) .ui5-tool-page-aside { +:host([is-phone]) .ui5-nl-aside { margin: 0.25rem 0.25rem 0 0; } -:host([is-phone]) .ui5-tool-page-aside { +:host([is-phone]) .ui5-nl-aside { position: absolute; top: 0; left: 0; @@ -58,32 +58,32 @@ width: 100%; } -.ui5-tool-page-content { +.ui5-nl-content { flex: 1; min-width: 0; margin: 0.5rem 0 0 0; z-index: 2; - box-shadow: var(--_ui5_tool_page_box_shadow); + box-shadow: var(--_ui5_nl_box_shadow); border-radius: 0.5rem 0.5rem 0 0; background: var(--sapBackgroundColor); } -:host([is-phone]) .ui5-tool-page-content { +:host([is-phone]) .ui5-nl-content { margin: 0.25rem 0 0 0; } -:host([is-phone]) .ui5-tool-page-content, -:host([is-tablet]) .ui5-tool-page-content { +:host([is-phone]) .ui5-nl-content, +:host([is-tablet]) .ui5-nl-content { border-radius: 0.5rem; } -:host([side-collapsed][is-phone]) .ui5-tool-page-aside { +:host([side-collapsed][is-phone]) .ui5-nl-aside { transform: translateX(calc(-100% - 0.25rem)); } ::slotted([ui5-toolbar]), ::slotted([ui5-shellbar]) { - box-shadow: var(--_ui5_tool_page_box_shadow); + box-shadow: var(--_ui5_nl_box_shadow); border-radius: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/base/NavigationLayout-parameters.css b/packages/fiori/src/themes/base/NavigationLayout-parameters.css new file mode 100644 index 000000000000..d4201b7e7291 --- /dev/null +++ b/packages/fiori/src/themes/base/NavigationLayout-parameters.css @@ -0,0 +1,5 @@ +:root { + --_ui5_nl_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_nl_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_nl_box_shadow: 0 0 0.125rem 0 var(--_ui5_nl_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_nl_shadow_color2); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/base/ToolPage-parameters.css b/packages/fiori/src/themes/base/ToolPage-parameters.css deleted file mode 100644 index 49b9dbfaa5e6..000000000000 --- a/packages/fiori/src/themes/base/ToolPage-parameters.css +++ /dev/null @@ -1,5 +0,0 @@ -:root { - --_ui5_tool_page_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_tool_page_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_tool_page_box_shadow: 0 0 0.125rem 0 var(--_ui5_tool_page_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_tool_page_shadow_color2); -} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css index cb3c56eb778d..60ddcbb94a5e 100644 --- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css @@ -8,7 +8,7 @@ @import "./ProductSwitchItem-parameters.css"; @import "./ShellBar-parameters.css"; @import "./TimelineItem-parameters.css"; -@import "../base/ToolPage-parameters.css"; +@import "../base/NavigationLayout-parameters.css"; @import "./SideNavigation-parameters.css"; @import "./UploadCollection-parameters.css"; @import "./Wizard-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css index 9b1c7e8f9d8d..37d318debaff 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css @@ -8,7 +8,7 @@ @import "./ProductSwitchItem-parameters.css"; @import "./ShellBar-parameters.css"; @import "./TimelineItem-parameters.css"; -@import "../base/ToolPage-parameters.css"; +@import "../base/NavigationLayout-parameters.css"; @import "./SideNavigation-parameters.css"; @import "./UploadCollection-parameters.css"; @import "./Wizard-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_hcb/NavigationLayout-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/NavigationLayout-parameters.css new file mode 100644 index 000000000000..c84978320e17 --- /dev/null +++ b/packages/fiori/src/themes/sap_horizon_hcb/NavigationLayout-parameters.css @@ -0,0 +1,7 @@ +@import "../base/NavigationLayout-parameters.css"; + +:root { + --_ui5_nl_shadow_color1: var(--sapContent_ShadowColor); + --_ui5_nl_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_nl_box_shadow: 0 0 0 0.0625rem var(--_ui5_nl_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_nl_shadow_color2); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/ToolPage-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/ToolPage-parameters.css deleted file mode 100644 index 812f5abe007a..000000000000 --- a/packages/fiori/src/themes/sap_horizon_hcb/ToolPage-parameters.css +++ /dev/null @@ -1,7 +0,0 @@ -@import "../base/ToolPage-parameters.css"; - -:root { - --_ui5_tool_page_shadow_color1: var(--sapContent_ShadowColor); - --_ui5_tool_page_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_tool_page_box_shadow: 0 0 0 0.0625rem var(--_ui5_tool_page_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_tool_page_shadow_color2); -} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css index 9fda9db983fc..ed92a9f40392 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css @@ -8,7 +8,7 @@ @import "./ShellBar-parameters.css"; @import "./SideNavigation-parameters.css"; @import "./TimelineItem-parameters.css"; -@import "./ToolPage-parameters.css"; +@import "./NavigationLayout-parameters.css"; @import "./UploadCollection-parameters.css"; @import "../base/ViewSettingsDialog-parameters.css"; @import "./Wizard-parameters.css"; diff --git a/packages/fiori/src/themes/sap_horizon_hcw/NavigationLayout-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/NavigationLayout-parameters.css new file mode 100644 index 000000000000..c84978320e17 --- /dev/null +++ b/packages/fiori/src/themes/sap_horizon_hcw/NavigationLayout-parameters.css @@ -0,0 +1,7 @@ +@import "../base/NavigationLayout-parameters.css"; + +:root { + --_ui5_nl_shadow_color1: var(--sapContent_ShadowColor); + --_ui5_nl_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_nl_box_shadow: 0 0 0 0.0625rem var(--_ui5_nl_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_nl_shadow_color2); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/ToolPage-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/ToolPage-parameters.css deleted file mode 100644 index 812f5abe007a..000000000000 --- a/packages/fiori/src/themes/sap_horizon_hcw/ToolPage-parameters.css +++ /dev/null @@ -1,7 +0,0 @@ -@import "../base/ToolPage-parameters.css"; - -:root { - --_ui5_tool_page_shadow_color1: var(--sapContent_ShadowColor); - --_ui5_tool_page_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_tool_page_box_shadow: 0 0 0 0.0625rem var(--_ui5_tool_page_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_tool_page_shadow_color2); -} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css index 76112982fedd..beaef8743fdd 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css @@ -8,7 +8,7 @@ @import "../sap_horizon_hcb/ShellBar-parameters.css"; @import "./SideNavigation-parameters.css"; @import "./TimelineItem-parameters.css"; -@import "./ToolPage-parameters.css"; +@import "./NavigationLayout-parameters.css"; @import "./UploadCollection-parameters.css"; @import "../base/ViewSettingsDialog-parameters.css"; @import "./Wizard-parameters.css"; diff --git a/packages/fiori/test/pages/ToolPage.html b/packages/fiori/test/pages/NavigationLayout.html similarity index 97% rename from packages/fiori/test/pages/ToolPage.html rename to packages/fiori/test/pages/NavigationLayout.html index 1d28771a86b3..4a702d5da433 100644 --- a/packages/fiori/test/pages/ToolPage.html +++ b/packages/fiori/test/pages/NavigationLayout.html @@ -2,7 +2,7 @@ - Tool Page + Navigation Layout diff --git a/packages/website/docs/_components_pages/fiori/NavigationLayout/NavigationLayout.mdx b/packages/website/docs/_components_pages/fiori/NavigationLayout/NavigationLayout.mdx new file mode 100644 index 000000000000..1de4d9dac80c --- /dev/null +++ b/packages/website/docs/_components_pages/fiori/NavigationLayout/NavigationLayout.mdx @@ -0,0 +1,8 @@ +import Basic from "../../../_samples/fiori/NavigationLayout/Basic/Basic.md"; + +<%COMPONENT_OVERVIEW%> + +## Basic Sample + + +<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx b/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx index a24d7d19b17b..86ad0cdd4895 100644 --- a/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx +++ b/packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx @@ -1,17 +1,8 @@ import Basic from "../../../_samples/fiori/SideNavigation/Basic/Basic.md"; -import ToolLayout from "../../../_samples/fiori/SideNavigation/ToolLayout/ToolLayout.md"; <%COMPONENT_OVERVIEW%> ## Basic Sample -<%COMPONENT_METADATA%> - -## More Samples - -### SideNavigation in Tool Layout -One of the patterns that the SideNavigation is used for is the so called Tool Layout. -The sample demonstrates how one can achieve that layout. It consists of bar on the top (re-styled ShellBar in this case), menu on the side (SideNavigation) and main content area. - - \ No newline at end of file +<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/ToolLayout.md b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/Basic.md similarity index 100% rename from packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/ToolLayout.md rename to packages/website/docs/_samples/fiori/NavigationLayout/Basic/Basic.md diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/main.js b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js similarity index 76% rename from packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/main.js rename to packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js index 7d48d30d5d70..2edf39d62bdb 100644 --- a/packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/main.js +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js @@ -1,11 +1,14 @@ import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents/dist/ToggleButton.js"; +import "@ui5/webcomponents-fiori/dist/NavigationLayout.js"; import "@ui5/webcomponents-fiori/dist/SideNavigation.js"; import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js"; import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js"; import "@ui5/webcomponents-fiori/dist/ShellBar.js"; import "@ui5/webcomponents-fiori/dist/ShellBarItem.js"; +import "@ui5/webcomponents-icons/dist/da.js"; import "@ui5/webcomponents-icons/dist/home.js"; import "@ui5/webcomponents-icons/dist/group.js"; import "@ui5/webcomponents-icons/dist/menu.js"; @@ -18,7 +21,6 @@ import "@ui5/webcomponents-icons/dist/activity-assigned-to-goal.js"; import "@ui5/webcomponents-icons/dist/action-settings.js"; import "@ui5/webcomponents-icons/dist/chain-link.js"; -var sidenav = document.querySelector("ui5-side-navigation"); -document.getElementById("toggle").addEventListener("click", () => { - sidenav.toggleAttribute("collapsed"); +document.querySelector("#startButton").addEventListener("click", function (event) { + nl1.sideCollapsed = !nl1.sideCollapsed; }); \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html new file mode 100644 index 000000000000..35e2e19527c3 --- /dev/null +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html @@ -0,0 +1,59 @@ + + + + + + + + Sample + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Content area +
+ + + + + + + diff --git a/packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/main.css b/packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/main.css deleted file mode 100644 index e43bcfbad7ca..000000000000 --- a/packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/main.css +++ /dev/null @@ -1,35 +0,0 @@ -ui5-side-navigation { - height: 600px; -} - -ui5-shellbar::part(root) { - padding-inline-start: 0.75rem; - padding-inline-end: 1.25rem; - border-radius: 0.5rem; - box-shadow: - 0 0 0.125rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent), - 0 0.5rem 1rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); -} - -.tool-layout { - padding: 0.5rem 0.5rem 0 0.5rem; - background: color-mix(in srgb, black 4%, var(--sapBackgroundColor)); - display: grid; - gap: 0.5rem; - grid-template-rows: auto 1fr; - grid-template-columns: auto 1fr; -} - -ui5-shellbar { - grid-column: 1 / span 2; - grid-row: 1 / 2; -} - -.content { - position: relative; - background: var(--sapBackgroundColor); - border-radius: 0.5rem 0.5rem 0 0; - box-shadow: - 0 0 0.125rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent), - 0 0.5rem 1rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); -} \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/sample.html b/packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/sample.html deleted file mode 100644 index a6c0d7c2187a..000000000000 --- a/packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/sample.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - - Sample - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - From 9cdff676b496f0ac8079d94387e941c774f32611 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Fri, 18 Oct 2024 13:56:10 +0300 Subject: [PATCH 10/19] chore: update example --- .../fiori/src/themes/NavigationLayout.css | 4 ++ .../fiori/NavigationLayout/Basic/main.css | 3 ++ .../fiori/NavigationLayout/Basic/main.js | 5 +- .../fiori/NavigationLayout/Basic/sample.html | 50 ++++++++++--------- 4 files changed, 37 insertions(+), 25 deletions(-) diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css index 78ddb2ec5592..0de94984fbdd 100644 --- a/packages/fiori/src/themes/NavigationLayout.css +++ b/packages/fiori/src/themes/NavigationLayout.css @@ -53,4 +53,8 @@ :host([side-collapsed][is-phone]) .ui5-nl-aside { transform: translateX(-100%); +} + +::slotted([ui5-shellbar])::part(header) { + padding-inline: 0.5rem; } \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css index e69de29bb2d1..33da0d26e195 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css @@ -0,0 +1,3 @@ +.content { + padding: 1rem; +} \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js index 2edf39d62bdb..08ab6bb0d38c 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js @@ -3,12 +3,12 @@ import "@ui5/webcomponents/dist/ToggleButton.js"; import "@ui5/webcomponents-fiori/dist/NavigationLayout.js"; import "@ui5/webcomponents-fiori/dist/SideNavigation.js"; +import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js"; import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js"; import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js"; import "@ui5/webcomponents-fiori/dist/ShellBar.js"; import "@ui5/webcomponents-fiori/dist/ShellBarItem.js"; -import "@ui5/webcomponents-icons/dist/da.js"; import "@ui5/webcomponents-icons/dist/home.js"; import "@ui5/webcomponents-icons/dist/group.js"; import "@ui5/webcomponents-icons/dist/menu.js"; @@ -20,6 +20,9 @@ import "@ui5/webcomponents-icons/dist/background.js"; import "@ui5/webcomponents-icons/dist/activity-assigned-to-goal.js"; import "@ui5/webcomponents-icons/dist/action-settings.js"; import "@ui5/webcomponents-icons/dist/chain-link.js"; +import "@ui5/webcomponents-icons/dist/document-text.js"; +import "@ui5/webcomponents-icons/dist/compare.js"; +import "@ui5/webcomponents-icons/dist/locked.js"; document.querySelector("#startButton").addEventListener("click", function (event) { nl1.sideCollapsed = !nl1.sideCollapsed; diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html index 35e2e19527c3..fa51f50f6d95 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html @@ -17,35 +17,37 @@ primary-title="UI5 Web Components" secondary-title="The Best Run SAP" > - - - - - - - - - - - - - - - - - + + + + + + + + + + + - - - - - - - + + +
Content area From 4b5d67c0514074bf60a5c170f4fb674bab00ce03 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Fri, 18 Oct 2024 14:59:32 +0300 Subject: [PATCH 11/19] chore: improve layout and sample --- .../fiori/src/themes/NavigationLayout.css | 9 ++---- .../fiori/test/pages/NavigationLayout.html | 14 ++++++--- .../test/pages/styles/NavigationLayout.css | 3 ++ .../fiori/NavigationLayout/Basic/main.css | 4 +++ .../fiori/NavigationLayout/Basic/sample.html | 31 +++++++++++++++++-- 5 files changed, 49 insertions(+), 12 deletions(-) create mode 100644 packages/fiori/test/pages/styles/NavigationLayout.css diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css index 0de94984fbdd..ea513f1d1d39 100644 --- a/packages/fiori/src/themes/NavigationLayout.css +++ b/packages/fiori/src/themes/NavigationLayout.css @@ -1,7 +1,7 @@ :host(:not([hidden])) { - width: 100%; - height: 100%; + position: absolute; + inset: 0; display: block; background: var(--sapBackgroundColor); box-sizing: border-box; @@ -49,12 +49,9 @@ flex: 1; min-width: 0; z-index: 2; + overflow: auto; } :host([side-collapsed][is-phone]) .ui5-nl-aside { transform: translateX(-100%); -} - -::slotted([ui5-shellbar])::part(header) { - padding-inline: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/test/pages/NavigationLayout.html b/packages/fiori/test/pages/NavigationLayout.html index 03be67a37630..36eb02d53c87 100644 --- a/packages/fiori/test/pages/NavigationLayout.html +++ b/packages/fiori/test/pages/NavigationLayout.html @@ -10,7 +10,7 @@ } - + @@ -26,8 +26,8 @@ - - + + @@ -52,7 +52,13 @@
- Content area +
+ Home content +
+
+ People content +
+
diff --git a/packages/fiori/test/pages/styles/NavigationLayout.css b/packages/fiori/test/pages/styles/NavigationLayout.css new file mode 100644 index 000000000000..3ddf38c86791 --- /dev/null +++ b/packages/fiori/test/pages/styles/NavigationLayout.css @@ -0,0 +1,3 @@ +ui5-shellbar::part(root) { + padding-inline: .5rem; +} \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css index 33da0d26e195..504f9da2d782 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css @@ -1,3 +1,7 @@ .content { padding: 1rem; +} + +ui5-shellbar::part(root) { + padding-inline: .5rem; } \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html index fa51f50f6d95..bd584275bc56 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html @@ -9,7 +9,7 @@ - +
- Content area +

Home

+

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

+

Item 1

+

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

+

Item 2

+

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

+

Item 3

+

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

+

Item 4

+

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

+

Item 5

+

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

+

Item 6

+

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

From 15dc805f68f1eb11a135c050b00b624596fee590 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Fri, 18 Oct 2024 15:43:40 +0300 Subject: [PATCH 12/19] chore: improve sample --- .../fiori/test/pages/NavigationLayout.html | 108 +++++++++++++----- .../test/pages/styles/NavigationLayout.css | 8 ++ .../fiori/NavigationLayout/Basic/main.css | 8 ++ .../fiori/NavigationLayout/Basic/main.js | 12 ++ .../fiori/NavigationLayout/Basic/sample.html | 70 +++++++----- 5 files changed, 148 insertions(+), 58 deletions(-) diff --git a/packages/fiori/test/pages/NavigationLayout.html b/packages/fiori/test/pages/NavigationLayout.html index 36eb02d53c87..9cf8eedbba84 100644 --- a/packages/fiori/test/pages/NavigationLayout.html +++ b/packages/fiori/test/pages/NavigationLayout.html @@ -14,51 +14,87 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + - - - - - - - + + +
-
- Home content +
+

Home

+

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

-
- People content +
+

Item 1

+

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

+
+
+

Item 2

+

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

+
+
+

Item 3

+

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

+
+
+

Item 4

+

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

+
+
+

Item 5

+

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

+
+
+

Item 6

+

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

-
@@ -66,6 +102,18 @@ document.querySelector("#startButton").addEventListener("click", function (event) { nl1.sideCollapsed = !nl1.sideCollapsed; }); + + document.querySelector("#sn1").addEventListener("selection-change", function (event) { + if (event.detail.item.getAttribute("target")) { + return; + } + + const contentItems = document.querySelectorAll(".contentItem"); + contentItems.forEach(item => { + item.classList.remove("contentItemVisible"); + }); + document.getElementById(event.detail.item.getAttribute("href").replace("#", "")).classList.add("contentItemVisible"); + }); diff --git a/packages/fiori/test/pages/styles/NavigationLayout.css b/packages/fiori/test/pages/styles/NavigationLayout.css index 3ddf38c86791..80d7bde2fa6d 100644 --- a/packages/fiori/test/pages/styles/NavigationLayout.css +++ b/packages/fiori/test/pages/styles/NavigationLayout.css @@ -1,3 +1,11 @@ ui5-shellbar::part(root) { padding-inline: .5rem; +} + +.contentItem { + display: none; +} + +.contentItemVisible { + display: block; } \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css index 504f9da2d782..a070a4bd3fc9 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css @@ -4,4 +4,12 @@ ui5-shellbar::part(root) { padding-inline: .5rem; +} + +.contentItem { + display: none; +} + +.contentItemVisible { + display: block; } \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js index 08ab6bb0d38c..0a2bd10c76e6 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js @@ -26,4 +26,16 @@ import "@ui5/webcomponents-icons/dist/locked.js"; document.querySelector("#startButton").addEventListener("click", function (event) { nl1.sideCollapsed = !nl1.sideCollapsed; +}); + +document.querySelector("#sn1").addEventListener("selection-change", function (event) { + if (event.detail.item.getAttribute("target")) { + return; + } + + const contentItems = document.querySelectorAll(".contentItem"); + contentItems.forEach(item => { + item.classList.remove("contentItemVisible"); + }); + document.getElementById(event.detail.item.getAttribute("href").replace("#", "")).classList.add("contentItemVisible"); }); \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html index bd584275bc56..d1780ff4886f 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html @@ -50,34 +50,48 @@ icon="document-text">
-

Home

-

- 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. -

-

Item 1

-

- 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. -

-

Item 2

-

- 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. -

-

Item 3

-

- 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. -

-

Item 4

-

- 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. -

-

Item 5

-

- 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. -

-

Item 6

-

- 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. -

+
+

Home

+

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

+
+
+

Item 1

+

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

+
+
+

Item 2

+

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

+
+
+

Item 3

+

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

+
+
+

Item 4

+

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

+
+
+

Item 5

+

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

+
+
+

Item 6

+

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

+
From 55e97e5bd762d6f044680dfbcd5d5b99ea2f65c7 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Mon, 21 Oct 2024 15:27:52 +0300 Subject: [PATCH 13/19] chore: add tests --- .../cypress/specs/NavigationLayout.cy.ts | 128 ++++++++++++++++++ packages/fiori/src/NavigationLayout.ts | 4 + 2 files changed, 132 insertions(+) create mode 100644 packages/fiori/cypress/specs/NavigationLayout.cy.ts diff --git a/packages/fiori/cypress/specs/NavigationLayout.cy.ts b/packages/fiori/cypress/specs/NavigationLayout.cy.ts new file mode 100644 index 000000000000..6ff02702aefa --- /dev/null +++ b/packages/fiori/cypress/specs/NavigationLayout.cy.ts @@ -0,0 +1,128 @@ +import { html } from "lit"; +import "../../src/NavigationLayout.js"; +import "../../src/SideNavigation.js"; +import "../../src/SideNavigationGroup.js"; +import "../../src/SideNavigationItem.js"; +import "../../src/ShellBar.js"; +import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents-icons/dist/home.js"; +import "@ui5/webcomponents-icons/dist/menu.js"; + +const sampleCode = html` + + + + + + + + + + + + + + + +
+ Content +
+`; + +describe("Rendering and interaction", () => { + beforeEach(() => { + cy.mount(sampleCode); + }); + + it("tests initial rendering", () => { + cy.get("[ui5-navigation-layout]") + .shadow() + .find(".ui5-nl-root") + .should("exist"); + + cy.get("[ui5-navigation-layout]") + .shadow() + .find(".ui5-nl-header") + .should("exist"); + + cy.get("[ui5-navigation-layout]") + .shadow() + .find(".ui5-nl-section") + .should("exist"); + + cy.get("[ui5-navigation-layout]") + .shadow() + .find(".ui5-nl-aside") + .should("exist"); + + cy.get("[ui5-navigation-layout]") + .shadow() + .find(".ui5-nl-content") + .should("exist"); + }); + + it("tests collapsing", () => { + cy.get("[ui5-side-navigation]") + .should("have.prop", "collapsed", false); + + cy.get("[ui5-navigation-layout]") + .invoke("prop", "sideCollapsed", true); + + cy.get("[ui5-side-navigation]") + .should("have.prop", "collapsed", true); + + cy.get("[ui5-navigation-layout]") + .invoke("prop", "sideCollapsed", false); + + cy.get("[ui5-side-navigation]") + .should("have.prop", "collapsed", false); + }); +}); + +describe("Navigation Layout on Phone", () => { + beforeEach(() => { + cy.ui5SimulateDevice("phone"); + cy.mount(sampleCode); + }); + + it("tests initial rendering", () => { + cy.get("[ui5-navigation-layout]") + .should("have.prop", "sideCollapsed", true); + + cy.get("[ui5-side-navigation]") + .should("have.prop", "collapsed", false); + + cy.get("[ui5-navigation-layout]") + .shadow() + .find(".ui5-nl-aside") + .should("not.be.visible"); + }); + + it("tests collapsing", () => { + cy.get("[ui5-navigation-layout]") + .invoke("prop", "sideCollapsed", false); + + cy.get("[ui5-navigation-layout]") + .shadow() + .find(".ui5-nl-aside") + .should("be.visible"); + + cy.get("[ui5-navigation-layout]") + .invoke("prop", "sideCollapsed", true); + + cy.get("[ui5-navigation-layout]") + .shadow() + .find(".ui5-nl-aside") + .should("not.be.visible"); + }); +}); diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts index 3622fff35720..8aa2b39053bd 100644 --- a/packages/fiori/src/NavigationLayout.ts +++ b/packages/fiori/src/NavigationLayout.ts @@ -103,6 +103,10 @@ class NavigationLayout extends UI5Element { content!: Array; onBeforeRendering() { + if (isPhone()) { + return; + } + const sideNavigation = this.sideContent[0] as SideNavigation; if (sideNavigation) { From 0bd0eceaa861bb5e333573493b89dc35d187e01a Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Mon, 21 Oct 2024 15:47:57 +0300 Subject: [PATCH 14/19] chore: improve sample --- packages/fiori/test/pages/styles/NavigationLayout.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/fiori/test/pages/styles/NavigationLayout.css b/packages/fiori/test/pages/styles/NavigationLayout.css index 80d7bde2fa6d..178a8a3061c2 100644 --- a/packages/fiori/test/pages/styles/NavigationLayout.css +++ b/packages/fiori/test/pages/styles/NavigationLayout.css @@ -2,6 +2,10 @@ ui5-shellbar::part(root) { padding-inline: .5rem; } +.content { + padding: 1rem; +} + .contentItem { display: none; } From 3580e35da46776e69dee82911c4f61f946fdcbea Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Mon, 21 Oct 2024 17:03:50 +0300 Subject: [PATCH 15/19] chore: remove unnecessary code --- packages/fiori/src/themes/ShellBar.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css index 742f401ae9c0..56dfc9d2d4ac 100644 --- a/packages/fiori/src/themes/ShellBar.css +++ b/packages/fiori/src/themes/ShellBar.css @@ -25,7 +25,6 @@ font-size: var(--sapFontSize); font-weight: normal; box-sizing: border-box; - border-radius: inherit; } .ui5-shellbar-menu-button, From 09401fd894ac55af18179aae91303c7eceb616bf Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Wed, 23 Oct 2024 15:42:45 +0300 Subject: [PATCH 16/19] chore: improve styles --- packages/fiori/src/themes/NavigationLayout.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css index ea513f1d1d39..9f24f383ac0c 100644 --- a/packages/fiori/src/themes/NavigationLayout.css +++ b/packages/fiori/src/themes/NavigationLayout.css @@ -18,6 +18,7 @@ .ui5-nl-header { box-shadow: var(--sapShell_Shadow); + z-index: 2; } .ui5-nl-section { @@ -32,11 +33,6 @@ z-index: 1; } -:host([is-phone]) .ui5-nl-aside, -:host([side-collapsed]) .ui5-nl-aside { - z-index: 3; -} - :host([is-phone]) .ui5-nl-aside { position: absolute; top: 0; @@ -45,10 +41,14 @@ width: 100%; } +:host([is-phone]) ::slotted([ui5-side-navigation]) { + width: 100%; + box-shadow: none; +} + .ui5-nl-content { flex: 1; min-width: 0; - z-index: 2; overflow: auto; } From f63b3c35c6eaede53e45ec102cdfe112b084617d Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Tue, 29 Oct 2024 13:12:52 +0200 Subject: [PATCH 17/19] chore: address code review comments --- packages/fiori/src/NavigationLayout.hbs | 3 +- packages/fiori/src/NavigationLayout.ts | 23 ++++-- .../fiori/src/themes/NavigationLayout.css | 12 +++- .../themes/base/SideNavigation-parameters.css | 1 + .../sap_horizon/SideNavigation-parameters.css | 4 +- .../SideNavigation-parameters.css | 4 +- .../SideNavigation-parameters.css | 4 +- .../SideNavigation-parameters.css | 4 +- .../SideNavigation-parameters.css | 4 +- .../SideNavigation-parameters.css | 4 +- .../SideNavigation-parameters.css | 5 +- .../SideNavigation-parameters.css | 4 +- .../fiori/test/pages/NavigationLayout.html | 71 +++++++++++++++++-- .../test/pages/styles/NavigationLayout.css | 4 -- .../fiori/NavigationLayout/Basic/main.css | 4 -- .../fiori/NavigationLayout/Basic/main.js | 3 +- .../fiori/NavigationLayout/Basic/sample.html | 42 +++++------ 17 files changed, 126 insertions(+), 70 deletions(-) diff --git a/packages/fiori/src/NavigationLayout.hbs b/packages/fiori/src/NavigationLayout.hbs index e3ca19c856d5..5fba26fb31ae 100644 --- a/packages/fiori/src/NavigationLayout.hbs +++ b/packages/fiori/src/NavigationLayout.hbs @@ -1,6 +1,5 @@
-
+
diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts index 8aa2b39053bd..b96502f4bd22 100644 --- a/packages/fiori/src/NavigationLayout.ts +++ b/packages/fiori/src/NavigationLayout.ts @@ -22,8 +22,19 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js"; * * ### Overview * - * The `ui5-navigation-layout` is a container, used to create a navigation - * layout that includes a header, side navigation, and content area. + * The `ui5-navigation-layout` is a container component that can be used to + * create a layout with a header, a side navigation and a content area. + * + * ### Usage + * + * Use the `ui5-navigation-layout` to create whole screen of an application with vertical navigation. + * + * ### Responsive Behavior + * + * On desktop and tablet devices, the side navigation remains visible and can + * be expanded or collapsed using the `sideCollapsed` property. On phone devices, the side navigation + * is hidden by default but can be displayed using the same `sideCollapsed` property. + * * ### ES6 Module Import * * `import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";` @@ -58,7 +69,7 @@ class NavigationLayout extends UI5Element { isTablet = isTablet() && !isCombi(); /** - * Indicates whether the side menu is collapsed. + * Indicates whether the side navigation is collapsed. * @default false * @public */ @@ -70,7 +81,7 @@ class NavigationLayout extends UI5Element { return; } - const sideNavigation = this.sideContent[0] as SideNavigation; + const sideNavigation = this.sideContent[0]; if (sideNavigation) { sideNavigation.collapsed = value; @@ -93,7 +104,7 @@ class NavigationLayout extends UI5Element { * @public */ @slot() - sideContent!: Array; + sideContent!: Array; /** * Defines the content. @@ -107,7 +118,7 @@ class NavigationLayout extends UI5Element { return; } - const sideNavigation = this.sideContent[0] as SideNavigation; + const sideNavigation = this.sideContent[0]; if (sideNavigation) { sideNavigation.collapsed = this.sideCollapsed; diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css index 9f24f383ac0c..544ef6c4d39f 100644 --- a/packages/fiori/src/themes/NavigationLayout.css +++ b/packages/fiori/src/themes/NavigationLayout.css @@ -41,7 +41,7 @@ width: 100%; } -:host([is-phone]) ::slotted([ui5-side-navigation]) { +:host([is-phone]) ::slotted([ui5-side-navigation][slot="sideContent"]) { width: 100%; box-shadow: none; } @@ -54,4 +54,12 @@ :host([side-collapsed][is-phone]) .ui5-nl-aside { transform: translateX(-100%); -} \ No newline at end of file +} + +:host([side-collapsed][is-phone]) :dir(rtl) .ui5-nl-aside { + transform: translateX(100%); +} + +::slotted([ui5-shellbar][slot="header"]) { + padding-inline: .5rem; +} diff --git a/packages/fiori/src/themes/base/SideNavigation-parameters.css b/packages/fiori/src/themes/base/SideNavigation-parameters.css index 910def860954..03bce90e53b0 100644 --- a/packages/fiori/src/themes/base/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/base/SideNavigation-parameters.css @@ -11,6 +11,7 @@ --_ui5_side_navigation_navigation_separator_height: calc(2 * var(--sapList_BorderWidth)); --_ui5_side_navigation_triangle_color: var(--sapContent_IconColor); --_ui5_side_navigation_border_right: 1px solid var(--sapGroup_ContentBorderColor); + --_ui5_side_navigation_box_shadow: none; --_ui5_side_navigation_triangle_display: block; --_ui5_side_navigation_phone_width: var(--_ui5_side_navigation_width); diff --git a/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css index 63a6e12102da..043d2cfc021e 100644 --- a/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css @@ -11,9 +11,7 @@ --_ui5_side_navigation_navigation_separator_height: 0.0625rem; --_ui5_side_navigation_triangle_color: var(--sapContent_NonInteractiveIconColor); --_ui5_side_navigation_border_right: 0; - --_ui5_side_navigation_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); + --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0); --_ui5_side_navigation_triangle_display: none; --_ui5_side_navigation_phone_width: 100%; diff --git a/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css index 91208bbdbc3d..6498bb0bb4d3 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css @@ -11,9 +11,7 @@ --_ui5_side_navigation_navigation_separator_height: 0.0625rem; --_ui5_side_navigation_triangle_color: var(--sapContent_NonInteractiveIconColor); --_ui5_side_navigation_border_right: 0; - --_ui5_side_navigation_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 32%, transparent); - --_ui5_side_navigation_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); + --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0); --_ui5_side_navigation_triangle_display: none; --_ui5_side_navigation_phone_width: 100%; diff --git a/packages/fiori/src/themes/sap_horizon_dark_exp/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_dark_exp/SideNavigation-parameters.css index 80901163eb7b..b8db4fb07e49 100644 --- a/packages/fiori/src/themes/sap_horizon_dark_exp/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_dark_exp/SideNavigation-parameters.css @@ -2,9 +2,7 @@ :root { --_ui5_side_navigation_width: 16rem; - --_ui5_side_navigation_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 32%, transparent); - --_ui5_side_navigation_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); + --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0); --_ui5_side_navigation_popover_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 48%, transparent); --_ui5_side_navigation_popover_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 64%, transparent); --_ui5_side_navigation_popover_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_popover_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popover_shadow_color2); diff --git a/packages/fiori/src/themes/sap_horizon_exp/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_exp/SideNavigation-parameters.css index bdf87cadb558..8be9beeedaaa 100644 --- a/packages/fiori/src/themes/sap_horizon_exp/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_exp/SideNavigation-parameters.css @@ -2,9 +2,7 @@ :root { --_ui5_side_navigation_width: 16rem; - --_ui5_side_navigation_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); + --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0); --_ui5_side_navigation_popover_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 48%, transparent); --_ui5_side_navigation_popover_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); --_ui5_side_navigation_popover_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_popover_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popover_shadow_color2); diff --git a/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css index 25329f232a8a..846cf7a96624 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css @@ -6,9 +6,7 @@ --_ui5_side_navigation_navigation_separator_height: 0.0625rem; --_ui5_side_navigation_border_right: 0; - --_ui5_side_navigation_shadow_color1: var(--sapContent_ShadowColor); - --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_box_shadow: 0 0 0 0.0625rem var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); + --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0); --_ui5_side_navigation_triangle_display: none; --_ui5_side_navigation_phone_width: 100% !important; diff --git a/packages/fiori/src/themes/sap_horizon_hcb_exp/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb_exp/SideNavigation-parameters.css index e01d3315031f..042dd68fed63 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb_exp/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb_exp/SideNavigation-parameters.css @@ -2,9 +2,7 @@ :root { --_ui5_side_navigation_width: 16rem; - --_ui5_side_navigation_shadow_color1: var(--sapContent_ShadowColor); - --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_box_shadow: 0 0 0 0.0625rem var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); + --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0); --_ui5_side_navigation_popover_shadow_color1: var(--sapContent_ShadowColor); --_ui5_side_navigation_popover_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); --_ui5_side_navigation_popover_box_shadow:0 0 0 0.0625rem var(--_ui5_side_navigation_popover_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popover_shadow_color2); diff --git a/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css index 25329f232a8a..b47861e8fee4 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css @@ -6,13 +6,10 @@ --_ui5_side_navigation_navigation_separator_height: 0.0625rem; --_ui5_side_navigation_border_right: 0; - --_ui5_side_navigation_shadow_color1: var(--sapContent_ShadowColor); - --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_box_shadow: 0 0 0 0.0625rem var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); + --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0); --_ui5_side_navigation_triangle_display: none; --_ui5_side_navigation_phone_width: 100% !important; - --_ui5_side_navigation_icon_font_size: 1.125rem; --_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor); --_ui5_side_navigation_external_link_icon_color: var(--sapContent_LabelColor); diff --git a/packages/fiori/src/themes/sap_horizon_hcw_exp/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw_exp/SideNavigation-parameters.css index e01d3315031f..042dd68fed63 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw_exp/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw_exp/SideNavigation-parameters.css @@ -2,9 +2,7 @@ :root { --_ui5_side_navigation_width: 16rem; - --_ui5_side_navigation_shadow_color1: var(--sapContent_ShadowColor); - --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_box_shadow: 0 0 0 0.0625rem var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); + --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0); --_ui5_side_navigation_popover_shadow_color1: var(--sapContent_ShadowColor); --_ui5_side_navigation_popover_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); --_ui5_side_navigation_popover_box_shadow:0 0 0 0.0625rem var(--_ui5_side_navigation_popover_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popover_shadow_color2); diff --git a/packages/fiori/test/pages/NavigationLayout.html b/packages/fiori/test/pages/NavigationLayout.html index 9cf8eedbba84..b14b5f9487ce 100644 --- a/packages/fiori/test/pages/NavigationLayout.html +++ b/packages/fiori/test/pages/NavigationLayout.html @@ -26,14 +26,33 @@ - - + + + + + + + + - - - + + + + + + + + + + + + + + + + Home

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

Item 1

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

@@ -95,6 +138,24 @@

Item 6

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.

+
+

Item 7

+

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

+
+
+

Sub Item 1

+

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

+
+
+

Sub Item 2

+

+ 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/styles/NavigationLayout.css b/packages/fiori/test/pages/styles/NavigationLayout.css index 178a8a3061c2..53a720b7457d 100644 --- a/packages/fiori/test/pages/styles/NavigationLayout.css +++ b/packages/fiori/test/pages/styles/NavigationLayout.css @@ -1,7 +1,3 @@ -ui5-shellbar::part(root) { - padding-inline: .5rem; -} - .content { padding: 1rem; } diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css index a070a4bd3fc9..53a720b7457d 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.css @@ -2,10 +2,6 @@ padding: 1rem; } -ui5-shellbar::part(root) { - padding-inline: .5rem; -} - .contentItem { display: none; } diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js index 0a2bd10c76e6..79f992749791 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js @@ -1,5 +1,6 @@ import "@ui5/webcomponents/dist/Button.js"; -import "@ui5/webcomponents/dist/ToggleButton.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Title.js"; import "@ui5/webcomponents-fiori/dist/NavigationLayout.js"; import "@ui5/webcomponents-fiori/dist/SideNavigation.js"; diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html index d1780ff4886f..a01dd6719a36 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html @@ -51,46 +51,46 @@
-

Home

-

+ Home + 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. -

+
-

Item 1

-

+ Item 1 + 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. -

+
-

Item 2

-

+ Item 2 + 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. -

+
-

Item 3

-

+ Item 3 + 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. -

+
-

Item 4

-

+ Item 4 + 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. -

+
-

Item 5

-

+ Item 5 + 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. -

+
-

Item 6

-

+ Item 6 + 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. -

+
From 3699c294b6f9f029441ff6f03a10e84879c1ca7c Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Tue, 29 Oct 2024 13:30:41 +0200 Subject: [PATCH 18/19] chore: improve the public example --- .../fiori/NavigationLayout/Basic/sample.html | 64 ++++++++++++++++++- 1 file changed, 61 insertions(+), 3 deletions(-) diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html index a01dd6719a36..6dfd75bacb70 100644 --- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html +++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/sample.html @@ -23,9 +23,18 @@ - - - + + + + + + + + + + + + @@ -52,42 +61,91 @@
Home +
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.
Item 1 +
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.
Item 2 +
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.
Item 3 +
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.
Item 4 +
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.
Item 5 +
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.
Item 6 +
+ + 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. + +
+
+ Sub Item 1 +
+ + 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. + +
+
+ Sub Item 2 +
+ + 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. + +
+
+ Sub Item 3 +
+ + 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. + +
+
+ Sub Item 4 +
+ + 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. + +
+
+ Sub Item 5 +
+ + 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. + +
+
+ Sub Item 6 +
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. From 92288869161c37f87ee73f5e0a0631b62ec53018 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Wed, 30 Oct 2024 10:48:56 +0200 Subject: [PATCH 19/19] chore: fix internal sample --- packages/fiori/test/pages/NavigationLayout.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/test/pages/NavigationLayout.html b/packages/fiori/test/pages/NavigationLayout.html index b14b5f9487ce..eea92e3d6b14 100644 --- a/packages/fiori/test/pages/NavigationLayout.html +++ b/packages/fiori/test/pages/NavigationLayout.html @@ -173,7 +173,7 @@

Sub Item 2

contentItems.forEach(item => { item.classList.remove("contentItemVisible"); }); - document.getElementById(event.detail.item.getAttribute("href").replace("#", "")).classList.add("contentItemVisible"); + document.getElementById(event.detail.item.getAttribute("href").replace("#", ""))?.classList.add("contentItemVisible"); });