Updated scroll bars in the Scroller, fixed StyledTextEditor with tippy cropping (#3761)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-09-29 09:25:14 +03:00 committed by GitHub
parent 0154d7567e
commit ca6f8426b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 125 additions and 58 deletions

View File

@ -167,7 +167,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="antiComponent styled-box clear-mins"
class="flex-col styled-box"
class:antiEmphasized={kind === 'emphasized'}
class:antiIndented={kind === 'indented'}
class:focusable={(mode === Mode.Edit || alwaysEdit) && focused}

View File

@ -196,7 +196,8 @@
<div class="textInput" class:focusable>
<div
bind:clientHeight={contentHeight}
class="inputMsg showScroll"
class="inputMsg"
class:showScroll={contentHeight > 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;

View File

@ -11,7 +11,8 @@ export const InlineStyleToolbar = Extension.create<InlineStyleToolbarOptions>({
pluginKey: 'inline-style-toolbar',
element: null,
tippyOptions: {
maxWidth: '38rem'
maxWidth: '38rem',
appendTo: () => document.body
},
getEditorElement: () => null
},

View File

@ -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 @@
</button>
</div>
{/if}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="track" class:hovered={isScrolling === 'vertical'} on:click|stopPropagation={(ev) => clickOnTrack(ev)} />
<div
class="bar"
class:hovered={isScrolling === 'vertical'}
@ -554,8 +594,13 @@
on:mousedown={(ev) => onScrollStart(ev, 'vertical')}
on:mouseleave={checkFade}
/>
<div class="track" class:hovered={isScrolling === 'vertical'} />
{#if horizontal}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="track-horizontal"
class:hovered={isScrolling === 'horizontal'}
on:click|stopPropagation={(ev) => clickOnTrack(ev, true)}
/>
<div
class="bar-horizontal"
class:hovered={isScrolling === 'horizontal'}
@ -563,7 +608,6 @@
on:mousedown={(ev) => onScrollStart(ev, 'horizontal')}
on:mouseleave={checkFade}
/>
<div class="track-horizontal" class:hovered={isScrolling === 'horizontal'} />
{/if}
</div>
@ -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 {

View File

@ -152,8 +152,10 @@
<EventParticipants bind:participants bind:externalParticipants />
</div>
<div class="block flex-no-shrink">
<div class="flex-row-center gap-1-5">
<Icon icon={calendar.icon.Description} size={'small'} />
<div class="flex-row-top gap-1-5">
<div class="top-icon">
<Icon icon={calendar.icon.Description} size={'small'} />
</div>
<StyledTextBox
alwaysEdit={true}
kind={'indented'}
@ -206,5 +208,9 @@
padding: 0.75rem 1rem 0.75rem 1.25rem;
}
}
.top-icon {
flex-shrink: 0;
margin-top: 0.875rem;
}
}
</style>