From cf22a5a82f3f03121c08bfb735ec37e11f50220f Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 19 Apr 2022 13:16:33 +0300
Subject: [PATCH] Fix UI bugs (#1447)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/TextEditor.svelte          |  2 +-
 packages/theme/styles/common.scss             |  7 +-
 packages/theme/styles/popups.scss             |  4 +
 .../src/components/Thread.svelte              |  3 +-
 .../src/components/CreateCandidate.svelte     |  2 +-
 .../src/components/TagsDropdownEditor.svelte  |  2 +
 .../src/components/TagsPopup.svelte           |  3 +-
 .../src/components/AccountPopup.svelte        |  2 +-
 .../src/components/Workbench.svelte           | 83 ++++++++++++++++++-
 9 files changed, 100 insertions(+), 8 deletions(-)

diff --git a/packages/text-editor/src/components/TextEditor.svelte b/packages/text-editor/src/components/TextEditor.svelte
index be82ee54c5..8fbdc061ee 100644
--- a/packages/text-editor/src/components/TextEditor.svelte
+++ b/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) {
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index db9033f87b..4be173da74 100644
--- a/packages/theme/styles/common.scss
+++ b/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 {
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index a84574f797..bb44f6e7a8 100644
--- a/packages/theme/styles/popups.scss
+++ b/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);
 
diff --git a/plugins/chunter-resources/src/components/Thread.svelte b/plugins/chunter-resources/src/components/Thread.svelte
index 05622b4e9b..00c05192d2 100644
--- a/plugins/chunter-resources/src/components/Thread.svelte
+++ b/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);
   }
 
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index dce213ff0a..43e4b7a5bc 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/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) => {
diff --git a/plugins/tags-resources/src/components/TagsDropdownEditor.svelte b/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
index 4af77055b4..5a8fae8c20 100644
--- a/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
+++ b/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
diff --git a/plugins/tags-resources/src/components/TagsPopup.svelte b/plugins/tags-resources/src/components/TagsPopup.svelte
index 48b5a1a3af..a98b6deaeb 100644
--- a/plugins/tags-resources/src/components/TagsPopup.svelte
+++ b/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 }
   )
diff --git a/plugins/workbench-resources/src/components/AccountPopup.svelte b/plugins/workbench-resources/src/components/AccountPopup.svelte
index 9b26717aec..fb0c0d0a38 100644
--- a/plugins/workbench-resources/src/components/AccountPopup.svelte
+++ b/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) }}>
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 6cc510d30e..28fee9acf2 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/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>