From ca6f8426b2377aeafd3504ce97a3d7973e26f713 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Fri, 29 Sep 2023 09:25:14 +0300 Subject: [PATCH] Updated scroll bars in the Scroller, fixed StyledTextEditor with tippy cropping (#3761) Signed-off-by: Alexander Platov --- .../src/components/StyledTextBox.svelte | 2 +- .../src/components/StyledTextEditor.svelte | 13 +- .../extension/inlineStyleToolbar.ts | 3 +- packages/ui/src/components/Scroller.svelte | 155 +++++++++++++----- .../src/components/CreateEvent.svelte | 10 +- 5 files changed, 125 insertions(+), 58 deletions(-) diff --git a/packages/text-editor/src/components/StyledTextBox.svelte b/packages/text-editor/src/components/StyledTextBox.svelte index 0c97bbfd39..21d9c3e7b8 100644 --- a/packages/text-editor/src/components/StyledTextBox.svelte +++ b/packages/text-editor/src/components/StyledTextBox.svelte @@ -167,7 +167,7 @@
32} class:scrollable={isScrollable} style="--texteditor-maxheight: {varsStyle};" > @@ -297,16 +298,6 @@ } &:not(.showScroll) { overflow-y: hidden; - /* - showScroll was set only when contentHeight > 32 - But this gave a bad behaviour for editor toolbar - in the bubble when there is only one line of text. - - I did the testing and figured out that now - we can use showScroll always. - - Please refer UBER-555 - */ &::-webkit-scrollbar-thumb { background-color: transparent; diff --git a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts index ae4d647940..042985644a 100644 --- a/packages/text-editor/src/components/extension/inlineStyleToolbar.ts +++ b/packages/text-editor/src/components/extension/inlineStyleToolbar.ts @@ -11,7 +11,8 @@ export const InlineStyleToolbar = Extension.create({ pluginKey: 'inline-style-toolbar', element: null, tippyOptions: { - maxWidth: '38rem' + maxWidth: '38rem', + appendTo: () => document.body }, getEditorElement: () => null }, diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index e28e12f265..2c7ba0be15 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -442,6 +442,44 @@ } } + const clickOnTrack = ( + ev: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }, + horizontal: boolean = false + ) => { + if (!isScrolling && divBar && divScroll) { + const rectScroll = divScroll.getBoundingClientRect() + if (horizontal) { + const x = ev.offsetX + const trackWidth = ev.currentTarget.clientWidth + const barWidth = divBarH.clientWidth + const leftBar = + x - barWidth / 2 <= 0 + ? rectScroll.left + shiftLeft + 2 + : x + barWidth / 2 >= trackWidth + ? rectScroll.right - barWidth - shiftRight - (mask !== 'none' ? 12 : 2) + : ev.clientX - barWidth / 2 + divBarH.style.left = `${leftBar}px` + const widthScroll = rectScroll.width - 2 - (mask !== 'none' ? 12 : 2) - barWidth - shiftLeft - shiftRight + const procBar = (leftBar - rectScroll.left - shiftLeft - 2) / widthScroll + divScroll.scrollLeft = (divScroll.scrollWidth - divScroll.clientWidth) * procBar + } else { + const y = ev.offsetY + const trackHeight = ev.currentTarget.clientHeight + const barHeight = divBar.clientHeight + const topBar = + y - barHeight / 2 <= 0 + ? rectScroll.top + shiftTop + 2 + : y + barHeight / 2 >= trackHeight + ? rectScroll.bottom - barHeight - shiftBottom - 2 + : ev.clientY - barHeight / 2 + divBar.style.top = `${topBar}px` + const heightScroll = rectScroll.height - 4 - barHeight - shiftTop - shiftBottom + const procBar = (topBar - rectScroll.top - shiftTop - 2) / heightScroll + divScroll.scrollTop = (divScroll.scrollHeight - divScroll.clientHeight) * procBar + } + } + } + $: topButton = (orientir === 'vertical' && (mask === 'top' || mask === 'both')) || (orientir === 'horizontal' && (maskH === 'right' || maskH === 'both')) @@ -547,6 +585,8 @@
{/if} + +
clickOnTrack(ev)} />
onScrollStart(ev, 'vertical')} on:mouseleave={checkFade} /> -
{#if horizontal} + +
clickOnTrack(ev, true)} + />
onScrollStart(ev, 'horizontal')} on:mouseleave={checkFade} /> -
{/if}
@@ -745,47 +789,19 @@ justify-content: flex-start; } - .track, - .track-horizontal { - visibility: hidden; - position: absolute; - transform-origin: center; - transform: scaleX(0); - transition: all 0.1s ease-in-out; - background-color: var(--scrollbar-track-color); - border-radius: 0.5rem; - } - .track { - top: var(--scroller-header-height, 2px); - bottom: var(--scroller-footer-height, 2px); - width: 8px; - } - .track-horizontal { - bottom: var(--scroller-footer-height, 2px); - left: var(--scroller-left-offset, 2px); - right: var(--scroller-right-offset, 2px); - height: 8px; - } .bar, .bar-horizontal { visibility: hidden; position: absolute; - transform-origin: center; background-color: var(--scrollbar-bar-color); - border-radius: 0.125rem; - opacity: 0; - box-shadow: 0 0 1px 1px var(--theme-overlay-color); - cursor: pointer; - z-index: 1; + transform-origin: center; transition: all 0.15s; + border-radius: 0.125rem; + box-shadow: 0 0 1px 1px var(--theme-overlay-color); + opacity: 0; + z-index: 1; + cursor: pointer; - &:hover, - &.hovered { - background-color: var(--scrollbar-bar-hover); - border-radius: 0.25rem; - opacity: 1 !important; - box-shadow: 0 0 1px black; - } &.hovered { transition: none; } @@ -801,11 +817,6 @@ &:hover, &.hovered { transform: scaleX(1); - - & + .track { - visibility: visible; - transform: scaleX(1); - } } } .bar-horizontal { @@ -819,13 +830,71 @@ &:hover, &.hovered { transform: scaleY(1); + } + } + .track, + .track-horizontal { + position: absolute; + transform-origin: center; + transition: all 0.1s ease-in-out; + background-color: var(--scrollbar-track-color); + border-radius: 0.5rem; + opacity: 0; - & + .track-horizontal { - visibility: visible; + &::after { + position: absolute; + content: ''; + inset: 0; + transform-origin: center; + transition: all 0.1s ease-in-out; + } + } + .track { + top: var(--scroller-header-height, 2px); + bottom: var(--scroller-footer-height, 2px); + width: 8px; + transform: scaleX(0.1); + &::after { + transform: scaleX(10); + } + &:hover { + transform: scaleX(1); + opacity: 1; + &::after, + & + .bar { + transform: scaleX(1); + } + } + } + .track-horizontal { + bottom: var(--scroller-footer-height, 2px); + left: var(--scroller-left-offset, 2px); + right: var(--scroller-right-offset, 2px); + height: 8px; + transform: scaleY(0.1); + &::after { + transform: scaleY(10); + } + &:hover { + transform: scaleY(1); + opacity: 1; + &::after, + & + .bar-horizontal { transform: scaleY(1); } } } + .track:hover + .bar, + .track-horizontal:hover + .bar-horizontal, + .bar:hover, + .bar-horizontal:hover, + .bar.hovered, + .bar-horizontal.hovered { + background-color: var(--scrollbar-bar-hover); + border-radius: 0.25rem; + opacity: 1 !important; + box-shadow: 0 0 1px black; + } .scroller-container.sticked, .scroller-container.thin { diff --git a/plugins/calendar-resources/src/components/CreateEvent.svelte b/plugins/calendar-resources/src/components/CreateEvent.svelte index 0aa9db6d37..c2d8bd32c7 100644 --- a/plugins/calendar-resources/src/components/CreateEvent.svelte +++ b/plugins/calendar-resources/src/components/CreateEvent.svelte @@ -152,8 +152,10 @@
-
- +
+
+ +