From 344b284e79f8b448bd8c14c9bea403f91723498b Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 12 Dec 2023 11:59:48 +0200 Subject: [PATCH] feat(ui5-dynamic-page): add focus span --- packages/fiori/src/DynamicPage.ts | 9 +----- packages/fiori/src/DynamicPageHeader.ts | 10 ------ .../fiori/src/DynamicPageHeaderActions.hbs | 10 ++---- packages/fiori/src/DynamicPageTitle.hbs | 10 ++++-- packages/fiori/src/DynamicPageTitle.ts | 31 ++++++++++--------- packages/fiori/src/themes/DynamicPage.css | 18 +++++++++-- .../fiori/src/themes/DynamicPageHeader.css | 15 --------- .../fiori/src/themes/DynamicPageTitle.css | 19 +++++------- 8 files changed, 49 insertions(+), 73 deletions(-) diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 4cc2f3ee49f8..cd88b6300893 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -215,14 +215,7 @@ class DynamicPage extends UI5Element { } updateMediaRange() { - const mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth); - this.mediaRange = mediaRange; - if (this.dynamicPageTitle) { - this.dynamicPageTitle.mediaRange = mediaRange; - } - if (this.dynamicPageHeader) { - this.dynamicPageHeader.mediaRange = mediaRange; - } + this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth); } } diff --git a/packages/fiori/src/DynamicPageHeader.ts b/packages/fiori/src/DynamicPageHeader.ts index 9c37ffd69220..f69ee6056484 100644 --- a/packages/fiori/src/DynamicPageHeader.ts +++ b/packages/fiori/src/DynamicPageHeader.ts @@ -1,6 +1,5 @@ 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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; @@ -37,15 +36,6 @@ class DynamicPageHeader extends UI5Element { DynamicPageHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori"); } - /** - * Defines the current media query size. - * - * @type {string} - * @protected - */ - @property() - mediaRange!: string; - @slot({ "default": true, type: HTMLElement }) content!: HTMLElement[]; get classes() { diff --git a/packages/fiori/src/DynamicPageHeaderActions.hbs b/packages/fiori/src/DynamicPageHeaderActions.hbs index 8e9bc634c809..c4afbc7262b7 100644 --- a/packages/fiori/src/DynamicPageHeaderActions.hbs +++ b/packages/fiori/src/DynamicPageHeaderActions.hbs @@ -1,14 +1,8 @@
- + {{#unless snapped}} - + {{/unless}}
\ No newline at end of file diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs index 2260932a6847..e4f54f50b0ba 100644 --- a/packages/fiori/src/DynamicPageTitle.hbs +++ b/packages/fiori/src/DynamicPageTitle.hbs @@ -1,8 +1,12 @@
+ +
{{#if hasBreadcrumb}}
diff --git a/packages/fiori/src/DynamicPageTitle.ts b/packages/fiori/src/DynamicPageTitle.ts index 63e0a33a60a4..12cba2539b10 100644 --- a/packages/fiori/src/DynamicPageTitle.ts +++ b/packages/fiori/src/DynamicPageTitle.ts @@ -73,19 +73,17 @@ class DynamicPageTitle extends UI5Element { @property({ type: Boolean }) snapped!: boolean; - /** - * Defines the current media query size. - * - * @type {string} - * @protected - */ - @property() - mediaRange!: string; - // private properties @property({ type: Boolean }) mobileNavigationActions!: boolean; + /** + * Indicates if the elements is on focus + * @private + */ + @property({ type: Boolean }) + focused!: boolean; + _handleResize: ResizeObserverCallback; minContentWidth?: number; minActionsWidth?: number; @@ -126,6 +124,9 @@ class DynamicPageTitle extends UI5Element { root: { "ui5-dynamic-page-title-root": true, }, + focusArea: { + "ui5-dynamic-page-title-focus-area": true, + }, topArea: { "ui5-dynamic-page-title--top-area": true, }, @@ -197,14 +198,16 @@ class DynamicPageTitle extends UI5Element { } } - _onclick(e: PointerEvent) { - if (e.target === this.getDomRef()) { - this.fireEvent("_toggle-title"); - } + _onfocusout() { + this.focused = false; + } + + _onfocusin() { + this.focused = true; } _onkeydown(e: KeyboardEvent) { - if (e.target === this.getDomRef() && (isEnter(e) || isSpace(e))) { + if (isEnter(e) || isSpace(e)) { e.preventDefault(); this.fireEvent("_toggle-title"); } diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css index e239260d46b8..60bce09f5c24 100644 --- a/packages/fiori/src/themes/DynamicPage.css +++ b/packages/fiori/src/themes/DynamicPage.css @@ -82,15 +82,27 @@ /* Responsive paddings */ -:host([media-range="S"]) .ui5-dynamic-page-content { +:host([media-range="S"]) .ui5-dynamic-page-content, +:host([media-range="S"]) ::slotted([slot="titleArea"]), +:host([media-range="S"]) ::slotted([slot="headerArea"]) { padding: 0 1rem; } +:host([media-range="S"]) ::slotted([slot="headerArea"]) { + padding-top: 0.5rem; +} + :host([media-range="M"]) .ui5-dynamic-page-content, -:host([media-range="L"]) .ui5-dynamic-page-content { +:host([media-range="M"]) ::slotted([slot="titleArea"]), +:host([media-range="M"]) ::slotted([slot="headerArea"]), +:host([media-range="L"]) .ui5-dynamic-page-content, +:host([media-range="L"]) ::slotted([slot="titleArea"]), +:host([media-range="L"]) ::slotted([slot="headerArea"]) { padding: 0 2rem; } -:host([media-range="XL"]) .ui5-dynamic-page-content { +:host([media-range="XL"]) .ui5-dynamic-page-content, +:host([media-range="XL"]) ::slotted([slot="titleArea"]), +:host([media-range="XL"]) ::slotted([slot="headerArea"]) { padding: 0 3rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/DynamicPageHeader.css b/packages/fiori/src/themes/DynamicPageHeader.css index d0e1034980b7..fbd4d846e593 100644 --- a/packages/fiori/src/themes/DynamicPageHeader.css +++ b/packages/fiori/src/themes/DynamicPageHeader.css @@ -7,19 +7,4 @@ background: inherit; padding-top: var(--_ui5_dynamic_page_header_padding_top); padding-bottom: var(--_ui5_dynamic_page_header_padding_bottom); -} - -/* Responsive paddings */ - -:host([media-range="S"]) .ui5-dynamic-page-header-root { - padding: 0.5rem 1rem 0 1rem; -} - -:host([media-range="M"]) .ui5-dynamic-page-header-root, -:host([media-range="L"]) .ui5-dynamic-page-header-root { - padding: 0 2rem; -} - -:host([media-range="XL"]) .ui5-dynamic-page-header-root { - padding: 0 3rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/DynamicPageTitle.css b/packages/fiori/src/themes/DynamicPageTitle.css index 856d4fff2ceb..aae833a00e84 100644 --- a/packages/fiori/src/themes/DynamicPageTitle.css +++ b/packages/fiori/src/themes/DynamicPageTitle.css @@ -7,7 +7,6 @@ word-wrap: break-word; padding-top: var(--_ui5_dynamic_page_title_padding_top); padding-bottom: var(--_ui5_dynamic_page_title_padding_bottom); - box-sizing: border-box; } :host .ui5-dynamic-page-title-root { @@ -122,17 +121,13 @@ width: 100%; } -/* Responsive paddings */ - -:host([media-range="S"]) .ui5-dynamic-page-title-root { - padding: 0 1rem; -} - -:host([media-range="M"]) .ui5-dynamic-page-title-root, -:host([media-range="L"]) .ui5-dynamic-page-title-root { - padding: 0 2rem; +/* focus */ +:host([focused]) { + /* separate change adds proper parameters */ + outline: 0.0625rem dotted black; + outline-offset: -0.0625rem; } -:host([media-range="XL"]) .ui5-dynamic-page-title-root { - padding: 0 3rem; +.ui5-dynamic-page-title-focus-area { + outline: none; }