extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-21 23:43:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

tab border now dynamically changes depending on scrollbar existence. Only works in Chrome, Opera and Edge

Browse Source 
--regarding ticket #99621
This commit is contained in:
milan 2024-10-30 13:48:39 +01:00
parent a9b6be448a
commit 445df7dcad
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
api/js/etemplate/Layout/Et2Tabs/Et2Tabs.ts
View File

@ -26,7 +26,12 @@ export class Et2Tabs extends Et2InputWidget(SlTabGroup) implements et2_IResizeab
...super.styles, ...super.styles,
colorsDefStyles, colorsDefStyles,
...shoelace, ...shoelace,
//keyframes definition can't get into shadow root from css files, so we declare it here
css` 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 { .tab-group--top {
height: 100%; height: 100%;
min-height: fit-content; min-height: fit-content;

7
pixelegg/css/fancy.css
View File

@ -7160,6 +7160,7 @@ img.et2_button_icon[src*="svg"]:hover {
--sl-border-radius-small: 1rem; --sl-border-radius-small: 1rem;
--sl-input-border-radius-medium: var(--sl-border-radius-medium); --sl-input-border-radius-medium: var(--sl-border-radius-medium);
--et2-button-image-padding-left: 0.6rem; --et2-button-image-padding-left: 0.6rem;
--can-scroll: 1;
} }
:root et2-button:not(imageOnly) > et2-image[class*="circle"], :root et2-button:not(imageOnly) > et2-image[class*="circle"],
:host 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), :host et2-tabbox::part(body),
.sl-theme-light et2-tabbox::part(body), .sl-theme-light et2-tabbox::part(body),
.sl-theme-dark 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: 1px solid var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-medium); border-radius: var(--sl-border-radius-medium);
border-bottom-right-radius: 0; border-bottom-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium));
border-top-right-radius: 0; border-top-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium));
padding: var(--sl-spacing-medium); padding: var(--sl-spacing-medium);
} }
:root et2-tabbox et2-tab::part(base), :root et2-tabbox et2-tab::part(base),

9
pixelegg/css/fancy.less
View File

@ -13,6 +13,7 @@
--sl-border-radius-small: 1rem; --sl-border-radius-small: 1rem;
--sl-input-border-radius-medium: var(--sl-border-radius-medium); --sl-input-border-radius-medium: var(--sl-border-radius-medium);
--et2-button-image-padding-left: .6rem; --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:not(imageOnly) > et2-image[class*="circle"], et2-button:not(imageOnly) > et2-image[class*="clock"]{
--et2-button-image-padding-left: .2rem; --et2-button-image-padding-left: .2rem;
@ -28,11 +29,15 @@
} }
// left rounded box around the tab content to visually group it // 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){ &::part(body){
animation: detect-scroll linear;
animation-timeline: scroll(self);
border: 1px solid var(--sl-color-neutral-300); border: 1px solid var(--sl-color-neutral-300);
border-radius: var(--sl-border-radius-medium); border-radius: var(--sl-border-radius-medium);
border-bottom-right-radius: 0; border-bottom-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium));
border-top-right-radius: 0; border-top-right-radius: calc(var(--can-scroll)*var(--sl-border-radius-medium));
padding: var(--sl-spacing-medium); padding: var(--sl-spacing-medium);
} }