From 445df7dcad73683390a53877a33da9741232de97 Mon Sep 17 00:00:00 2001 From: milan Date: Wed, 30 Oct 2024 13:48:39 +0100 Subject: [PATCH] tab border now dynamically changes depending on scrollbar existence. Only works in Chrome, Opera and Edge --regarding ticket #99621 --- api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts | 5 +++++ pixelegg/css/fancy.css | 7 +++++-- pixelegg/css/fancy.less | 9 +++++++-- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts b/api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts index 122727c240..46b1be0240 100644 --- a/api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts +++ b/api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts @@ -26,7 +26,12 @@ export class Et2Tabs extends Et2InputWidget(SlTabGroup) implements et2_IResizeab ...super.styles, colorsDefStyles, ...shoelace, + //keyframes definition can't get into shadow root from css files, so we declare it here css` + /*scroll detection detect if scrollbar is available scroll detection only works in chromium not in Firefox or Safari*/ + @keyframes detect-scroll { + from, to { --can-scroll:0;} + } .tab-group--top { height: 100%; min-height: fit-content; diff --git a/pixelegg/css/fancy.css b/pixelegg/css/fancy.css index 2727b44997..38cf81ae0f 100644 --- a/pixelegg/css/fancy.css +++ b/pixelegg/css/fancy.css @@ -7160,6 +7160,7 @@ img.et2_button_icon[src*="svg"]:hover { --sl-border-radius-small: 1rem; --sl-input-border-radius-medium: var(--sl-border-radius-medium); --et2-button-image-padding-left: 0.6rem; + --can-scroll: 1; } :root et2-button:not(imageOnly) > et2-image[class*="circle"], :host et2-button:not(imageOnly) > et2-image[class*="circle"], @@ -7189,10 +7190,12 @@ img.et2_button_icon[src*="svg"]:hover { :host et2-tabbox::part(body), .sl-theme-light et2-tabbox::part(body), .sl-theme-dark et2-tabbox::part(body) { + animation: detect-scroll 1s linear; + animation-timeline: scroll(self); border: 1px solid var(--sl-color-neutral-300); border-radius: var(--sl-border-radius-medium); - border-bottom-right-radius: 0; - border-top-right-radius: 0; + border-bottom-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium)); + border-top-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium)); padding: var(--sl-spacing-medium); } :root et2-tabbox et2-tab::part(base), diff --git a/pixelegg/css/fancy.less b/pixelegg/css/fancy.less index 6b1fec220d..53c2de8b89 100644 --- a/pixelegg/css/fancy.less +++ b/pixelegg/css/fancy.less @@ -13,6 +13,7 @@ --sl-border-radius-small: 1rem; --sl-input-border-radius-medium: var(--sl-border-radius-medium); --et2-button-image-padding-left: .6rem; + --can-scroll: 1; et2-button:not(imageOnly) > et2-image[class*="circle"], et2-button:not(imageOnly) > et2-image[class*="clock"]{ --et2-button-image-padding-left: .2rem; @@ -28,11 +29,15 @@ } // left rounded box around the tab content to visually group it + //scroll detection detect if scrollbar is available scroll detection only works in chromium not in Firefox or Safari + // see https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility &::part(body){ + animation: detect-scroll linear; + animation-timeline: scroll(self); border: 1px solid var(--sl-color-neutral-300); border-radius: var(--sl-border-radius-medium); - border-bottom-right-radius: 0; - border-top-right-radius: 0; + border-bottom-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium)); + border-top-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium)); padding: var(--sl-spacing-medium); }