Fix UI bugs (#1447)

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

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

@@ -130,7 +130,7 @@
 <style lang="scss" global>
   .ProseMirror {
     overflow-y: auto;
-    max-height: 5.5rem;
+    max-height: 40vh;
     outline: none;
     line-height: 150%;
     p:not(:last-child) {

packages/theme/styles/common.scss

@@ -40,7 +40,12 @@
   max-width: 18rem;
   width: 18rem;
 }
-.antiPanel-component { flex-grow: 1; }
+.antiPanel-component:not(.aside) { flex-grow: 1; }
+.antiPanel-component.aside {
+  min-width: 30rem;
+  width: 30rem;
+  max-width: 30rem;
+}
 
 /* Navigation */
 .antiNav-header {

packages/theme/styles/popups.scss

@@ -28,6 +28,10 @@
   will-change: transform;
   
   &.maxHeight { height: 22rem; }
+  &.autoHeight {
+    max-height: calc(100vh - 2rem);
+    height: auto;
+  }
   .header {
     border-bottom: 1px solid var(--popup-divider);
 

plugins/chunter-resources/src/components/Thread.svelte

@@ -205,9 +205,10 @@
 
 <style lang="scss">
   .content {
+    overflow: hidden;
     margin: 1rem 1rem 0px;
     background-color: var(--theme-border-modal);
-    border-radius: 0.75rem;
+    border-radius: .75rem;
     border: 1px solid var(--theme-zone-border);
   }
 

plugins/recruit-resources/src/components/CreateCandidate.svelte

@@ -264,7 +264,6 @@
       // Create skills
       await elementsPromise
 
-
       const categories = await client.findAll(tags.class.TagCategory, { targetClass: recruit.mixin.Candidate })
       const categoriesMap = new Map(Array.from(categories.map((it) => [it._id, it])))
 
@@ -433,6 +432,7 @@
         targetClass: recruit.mixin.Candidate,
         showTitle: false,
         elements,
+        newElements,
         countLabel: recruit.string.NumberSkills
       }}
       on:open={(evt) => {

plugins/tags-resources/src/components/TagsDropdownEditor.svelte

@@ -27,6 +27,7 @@
   export let targetClass: Ref<Class<Doc>>
   export let key: KeyedAttribute
   export let elements: Map<Ref<TagElement>, TagElement>
+  export let newElements: TagElement[] = []
   export let countLabel: IntlString
 
   export let kind: ButtonKind = 'no-border'
@@ -52,6 +53,7 @@
     showPopup(
       TagsPopup,
       {
+        newElements,
         targetClass,
         selected: items.map((it) => it.tag),
         keyLabel

plugins/tags-resources/src/components/TagsPopup.svelte

@@ -25,6 +25,7 @@
   import IconView from './icons/View.svelte'
   import IconViewHide from './icons/ViewHide.svelte'
 
+  export let newElements: TagElement[] = []
   export let targetClass: Ref<Class<Doc>>
   export let placeholder: IntlString = presentation.string.Search
   export let selected: Ref<TagElement>[] = []
@@ -51,7 +52,7 @@
     tags.class.TagElement,
     { title: { $like: '%' + search + '%' }, targetClass },
     (result) => {
-      objects = result
+      objects = newElements.concat(result)
     },
     { limit: 200 }
   )

plugins/workbench-resources/src/components/AccountPopup.svelte

@@ -69,7 +69,7 @@
   }
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup autoHeight">
   <div class="scroll"><div class="box">
     {#await getItems() then items}
       <div class="menu-item high flex-row-center" on:click={() => { editProfile(items) }}>

plugins/workbench-resources/src/components/Workbench.svelte

@@ -251,6 +251,43 @@
       }
     }
   }
+
+  let aside: HTMLElement
+  let cover: HTMLElement
+  let isResizing: boolean = false
+  let asideWidth: number
+  let componentWidth: number
+  let dX: number
+  let oldX: number
+
+  const resizing = (event: MouseEvent): void => {
+    if (isResizing && aside) {
+      let X = event.clientX - dX
+      const newWidth = asideWidth + oldX - X
+      if (newWidth > 320 && componentWidth - (oldX - X) > 320) {
+        aside.style.width = aside.style.maxWidth = aside.style.minWidth = newWidth + 'px'
+        oldX = X
+      }
+    }
+  }
+  const endResize = (event: MouseEvent): void => {
+    const el: HTMLElement = event.currentTarget as HTMLElement
+    if (el && isResizing) document.removeEventListener('mousemove', resizing)
+    document.removeEventListener('mouseup', endResize)
+    cover.style.display = 'none'
+    isResizing = false
+  }
+  const startResize = (event: MouseEvent): void => {
+    const el: HTMLElement = event.currentTarget as HTMLElement
+    if (el && !isResizing) {
+      oldX = el.getBoundingClientRect().y
+      dX = event.clientX - oldX
+      document.addEventListener('mouseup', endResize)
+      document.addEventListener('mousemove', resizing)
+      cover.style.display = 'block'
+      isResizing = true
+    }
+  }
 </script>
 
 {#if client}
@@ -354,7 +391,7 @@
         {/if}
       </div>
     {/if}
-    <div class="antiPanel-component antiComponent border-left" bind:this={contentPanel}>
+    <div class="antiPanel-component antiComponent border-left" bind:this={contentPanel} bind:clientWidth={componentWidth}>
       {#if currentApplication && currentApplication.component}
         <Component is={currentApplication.component} props={{ currentSpace }} />
       {:else if specialComponent}
@@ -369,11 +406,13 @@
       {/if}
     </div>
     {#if asideId && navigatorModel?.aside !== undefined}
-      <div class="antiPanel-component antiComponent border-left">
+      <div class="splitter" class:hovered={isResizing} on:mousedown={startResize} />
+      <div class="antiPanel-component antiComponent aside" bind:clientWidth={asideWidth} bind:this={aside}>
         <Component is={navigatorModel.aside} props={{ currentSpace, _id: asideId }} on:close={closeAside} />
       </div>
     {/if}
   </div>
+  <div bind:this={cover} class="cover" />
   <PanelInstance {contentPanel} >
     <svelte:fragment slot='panel-header'>
       <ActionContext
@@ -399,4 +438,44 @@
     display: flex;
     height: 100%;
   }
+
+  .cover {
+    position: fixed;
+    display: none;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 10;
+  }
+  .splitter {
+    position: relative;
+    width: 1px;
+    min-width: 1px;
+    max-width: 1px;
+    height: 100%;
+    background-color: var(--divider-color);
+    transition: background-color .15s ease-in-out;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: .5rem;
+      height: 100%;
+      border-left: 2px solid transparent;
+      cursor: col-resize;
+      z-index: 1;
+      transition: border-color .15s ease-in-out;
+    }
+    &:hover, &.hovered {
+      transition-duration: 0;
+      background-color: var(--primary-bg-color);
+      &::before {
+        transition-duration: 0;
+        border-left: 2px solid var(--primary-bg-color);
+      }
+    }
+  }
 </style>