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

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/text-editor/src/components/StyledTextBox.svelte

@@ -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}

packages/text-editor/src/components/StyledTextEditor.svelte

@@ -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;

packages/text-editor/src/components/extension/inlineStyleToolbar.ts

@@ -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
   },

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 @@
       </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;
+    transform-origin: center;
-    opacity: 0;
-    box-shadow: 0 0 1px 1px var(--theme-overlay-color);
-    cursor: pointer;
-    z-index: 1;
     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 {
+    &::after {
-        visibility: visible;
+      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 {

plugins/calendar-resources/src/components/CreateEvent.svelte

@@ -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">
-      <Icon icon={calendar.icon.Description} size={'small'} />
+      <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>