From ae312b7acb4930cc7b6e645ba82d1da49f282fb5 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Wed, 28 Aug 2024 14:28:08 +0300 Subject: [PATCH 1/3] feat(ui5-color-palette*): add mobile focus for external input devices --- packages/main/src/ColorPaletteItem.ts | 6 +++ packages/main/src/ColorPalettePopover.ts | 7 +++ packages/main/src/themes/ColorPaletteItem.css | 44 ++++++++++++++++++- .../themes/base/ColorPalette-parameters.css | 3 ++ .../sap_horizon/ColorPalette-parameters.css | 3 ++ .../ColorPalette-parameters.css | 3 ++ .../ColorPalette-parameters.css | 3 ++ .../ColorPalette-parameters.css | 3 ++ 8 files changed, 71 insertions(+), 1 deletion(-) diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts index 1159d0d0a7c9..1d790c21ebe2 100644 --- a/packages/main/src/ColorPaletteItem.ts +++ b/packages/main/src/ColorPaletteItem.ts @@ -5,6 +5,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; +import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js"; import type { IColorPaletteItem } from "./ColorPalette.js"; import ColorPaletteItemTemplate from "./generated/templates/ColorPaletteItemTemplate.lit.js"; import { @@ -31,6 +32,7 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js"; renderer: litRender, styles: ColorPaletteItemCss, template: ColorPaletteItemTemplate, + shadowRootOptions: { delegatesFocus: true }, }) class ColorPaletteItem extends UI5Element implements IColorPaletteItem { /** @@ -98,6 +100,10 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem { this._disabled = !this.value; this.onPhone = isPhone(); this.setAttribute("style", `background-color: ${this.value}`); + + // since height is dynamically determined by padding-block-start + const itemHeight = this.offsetHeight + 4; // adding 4px for the offsets on top and bottom + this.style.setProperty(getScopedVarName("--_ui5_color_palette_item_height"), `${itemHeight}px`); } get colorLabel() { diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts index d477321e69d9..adc32ec6ac0a 100644 --- a/packages/main/src/ColorPalettePopover.ts +++ b/packages/main/src/ColorPalettePopover.ts @@ -7,6 +7,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js"; +import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js"; import ColorPalettePopoverTemplate from "./generated/templates/ColorPalettePopoverTemplate.lit.js"; // Styles @@ -185,6 +186,12 @@ class ColorPalettePopover extends UI5Element { } else if (colorPalette.showDefaultColor) { colorPalette.colorPaletteNavigationElements[0].focus(); } + + // since height is dynamically determined by padding-block-start + colorPalette.allColorsInPalette.forEach((item: IColorPaletteItem) => { + const itemHeight = item.offsetHeight + 4; // adding 4px for the offsets on top and bottom + item.style.setProperty(getScopedVarName("--_ui5_color_palette_item_height"), `${itemHeight}px`); + }); } onSelectedColor(e: CustomEvent) { diff --git a/packages/main/src/themes/ColorPaletteItem.css b/packages/main/src/themes/ColorPaletteItem.css index d786713e15cd..74e81c99776e 100644 --- a/packages/main/src/themes/ColorPaletteItem.css +++ b/packages/main/src/themes/ColorPaletteItem.css @@ -112,7 +112,7 @@ :host([selected]:not([_disabled]):not([on-phone]):not(:focus):not(:hover)) .ui5-cp-item::after, :host([selected]:not([_disabled]):not([on-phone]):not(:focus):hover) .ui5-cp-item::after, -:host(:not([selected]):hover) .ui5-cp-item::after { +:host(:not([selected]):not([on-phone]):hover) .ui5-cp-item::after { content: ""; box-sizing: border-box; position: absolute; @@ -135,4 +135,46 @@ border: var(--_ui5_color-palette-item-before-focus-color); border-radius: var(--_ui5_color-palette-item-before-focus-border-radius); pointer-events: none; +} + +/* Focus on mobile ONLY with external keyboard/mouse */ +:host(:not([disabled])) .ui5-cp-item:focus-visible::before { + content: ""; + box-sizing: border-box; + position: absolute; + inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset)) var(--_ui5_color-palette-item-mobile-focus-sides-inset); + border: var(--_ui5_color-palette-item-before-focus-color); + border-radius: var(--_ui5_color-palette-item-before-focus-border-radius); + pointer-events: none; +} + +:host([selected]:not([disabled])[on-phone]) .ui5-cp-item:focus-visible:not(:hover)::before { + content: ""; + box-sizing: border-box; + position: absolute; + inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset)) var(--_ui5_color-palette-item-mobile-focus-sides-inset); + border: var(--_ui5_color-palette-item-before-focus-color); + border-radius: var(--_ui5_color-palette-item-before-focus-border-radius); + pointer-events: none; +} + +:host([selected]:not([disabled])[on-phone]) .ui5-cp-item:focus-visible:not(:hover)::after { + content: ""; + box-sizing: border-box; + position: absolute; + inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset, 0)) var(--_ui5_color-palette-item-mobile-focus-sides-inset); + border: var(--_ui5_color-palette-item-after-mobile-focus-border); + border-radius: var(--_ui5_color-palette-item-after-focus-border-radius); + pointer-events: none; +} + +:host(:not([disabled])) .ui5-cp-item:focus-visible::after { + content: ""; + box-sizing: border-box; + position: absolute; + inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset)) + var(--_ui5_color-palette-item-mobile-focus-sides-inset); + border: var(--_ui5_color-palette-item-after-mobile-focus-border); + border-radius: var(--_ui5_color-palette-item-after-focus-border-radius); + pointer-events: none; } \ No newline at end of file diff --git a/packages/main/src/themes/base/ColorPalette-parameters.css b/packages/main/src/themes/base/ColorPalette-parameters.css index 297d0b2e1ec0..9eaa1dce4c32 100644 --- a/packages/main/src/themes/base/ColorPalette-parameters.css +++ b/packages/main/src/themes/base/ColorPalette-parameters.css @@ -24,4 +24,7 @@ --_ui5_color-palette-item-after-focus-not-selected-border: 0.0625rem dotted black; --_ui5_color-palette-item-after-not-focus-color: 0.0625rem solid var(--sapGroup_ContentBackground); --_ui5_color-palette-item-selected-focused-border: 0.0625rem solid var(--sapGroup_ContentBackground); + --_ui5-color-palette-item-mobile-focus-inset: 0.625rem; + --_ui5_color-palette-item-mobile-focus-sides-inset: 0.25rem 0.25rem; + --_ui5_color-palette-item-after-mobile-focus-border: var(--_ui5_color-palette-item-after-focus-color); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css b/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css index 5b0e8f45bcc1..8da2952af4e3 100644 --- a/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css +++ b/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css @@ -21,4 +21,7 @@ --_ui5_color-palette-item-selected-focused-border-before: -0.0625rem; --_ui5_color-palette-item-after-focus-not-selected-border: none; --_ui5_color-palette-item-selected-focused-border: none; + --_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem; + --_ui5-color-palette-item-mobile-focus-inset: 0px; + --_ui5_color-palette-item-after-mobile-focus-border: none; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css b/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css index 5b0e8f45bcc1..9fd8e1855202 100644 --- a/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css @@ -21,4 +21,7 @@ --_ui5_color-palette-item-selected-focused-border-before: -0.0625rem; --_ui5_color-palette-item-after-focus-not-selected-border: none; --_ui5_color-palette-item-selected-focused-border: none; + --_ui5_color-palette-item-after-mobile-focus-border: none; + --_ui5-color-palette-item-mobile-focus-inset: 0px; + --_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark_exp/ColorPalette-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/ColorPalette-parameters.css index 7a43cae14bdf..430a93e6dd8c 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/ColorPalette-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/ColorPalette-parameters.css @@ -19,4 +19,7 @@ --_ui5_color-palette-item-hover-inner-border-radius: 0.375rem; --_ui5_color-palette-item-after-focus-not-selected-border: none; --_ui5_color-palette-item-selected-focused-border: none; + --_ui5_color-palette-item-after-mobile-focus-border: none; + --_ui5-color-palette-item-mobile-focus-inset: 0px; + --_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/ColorPalette-parameters.css b/packages/main/src/themes/sap_horizon_exp/ColorPalette-parameters.css index 7a43cae14bdf..430a93e6dd8c 100644 --- a/packages/main/src/themes/sap_horizon_exp/ColorPalette-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/ColorPalette-parameters.css @@ -19,4 +19,7 @@ --_ui5_color-palette-item-hover-inner-border-radius: 0.375rem; --_ui5_color-palette-item-after-focus-not-selected-border: none; --_ui5_color-palette-item-selected-focused-border: none; + --_ui5_color-palette-item-after-mobile-focus-border: none; + --_ui5-color-palette-item-mobile-focus-inset: 0px; + --_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem; } \ No newline at end of file From 2050fca83002443e0de0234707f48a306d6c56d6 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Thu, 29 Aug 2024 16:30:04 +0300 Subject: [PATCH 2/3] fix: optimise css code --- packages/main/src/themes/ColorPaletteItem.css | 27 +++---------------- 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/packages/main/src/themes/ColorPaletteItem.css b/packages/main/src/themes/ColorPaletteItem.css index 74e81c99776e..4d6f8dede97d 100644 --- a/packages/main/src/themes/ColorPaletteItem.css +++ b/packages/main/src/themes/ColorPaletteItem.css @@ -138,43 +138,22 @@ } /* Focus on mobile ONLY with external keyboard/mouse */ -:host(:not([disabled])) .ui5-cp-item:focus-visible::before { +:host(:not([disabled])) .ui5-cp-item:focus-visible::before, +:host(:not([disabled])) .ui5-cp-item:focus-visible::after { content: ""; box-sizing: border-box; position: absolute; - inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset)) var(--_ui5_color-palette-item-mobile-focus-sides-inset); - border: var(--_ui5_color-palette-item-before-focus-color); - border-radius: var(--_ui5_color-palette-item-before-focus-border-radius); pointer-events: none; } -:host([selected]:not([disabled])[on-phone]) .ui5-cp-item:focus-visible:not(:hover)::before { - content: ""; - box-sizing: border-box; - position: absolute; +:host(:not([disabled])) .ui5-cp-item:focus-visible::before { inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset)) var(--_ui5_color-palette-item-mobile-focus-sides-inset); border: var(--_ui5_color-palette-item-before-focus-color); - border-radius: var(--_ui5_color-palette-item-before-focus-border-radius); - pointer-events: none; -} - -:host([selected]:not([disabled])[on-phone]) .ui5-cp-item:focus-visible:not(:hover)::after { - content: ""; - box-sizing: border-box; - position: absolute; - inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset, 0)) var(--_ui5_color-palette-item-mobile-focus-sides-inset); - border: var(--_ui5_color-palette-item-after-mobile-focus-border); border-radius: var(--_ui5_color-palette-item-after-focus-border-radius); - pointer-events: none; } :host(:not([disabled])) .ui5-cp-item:focus-visible::after { - content: ""; - box-sizing: border-box; - position: absolute; inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset)) var(--_ui5_color-palette-item-mobile-focus-sides-inset); border: var(--_ui5_color-palette-item-after-mobile-focus-border); - border-radius: var(--_ui5_color-palette-item-after-focus-border-radius); - pointer-events: none; } \ No newline at end of file From 7821f0ae2e074385dba1b75496ea11cfb7fb3488 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Thu, 29 Aug 2024 16:33:25 +0300 Subject: [PATCH 3/3] fix: identation --- packages/main/src/themes/ColorPaletteItem.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/main/src/themes/ColorPaletteItem.css b/packages/main/src/themes/ColorPaletteItem.css index 4d6f8dede97d..aa130a2791e0 100644 --- a/packages/main/src/themes/ColorPaletteItem.css +++ b/packages/main/src/themes/ColorPaletteItem.css @@ -147,7 +147,8 @@ } :host(:not([disabled])) .ui5-cp-item:focus-visible::before { - inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset)) var(--_ui5_color-palette-item-mobile-focus-sides-inset); + inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset)) + var(--_ui5_color-palette-item-mobile-focus-sides-inset); border: var(--_ui5_color-palette-item-before-focus-color); border-radius: var(--_ui5_color-palette-item-after-focus-border-radius); }