mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 11:31:57 +03:00
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
GitHub
parent
0154d7567e
commit
ca6f8426b2
@ -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}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
},
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -152,8 +152,10 @@
|
||||
<EventParticipants bind:participants bind:externalParticipants />
|
||||
</div>
|
||||
<div class="block flex-no-shrink">
|
||||
<div class="flex-row-center gap-1-5">
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user