From 231f04f6a542bbec436399770f2868fe6a559f99 Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@users.noreply.github.com>
Date: Wed, 7 Dec 2022 14:21:39 +0700
Subject: [PATCH] Fix minor issues (#2426)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 packages/panel/src/components/Panel.svelte    |  4 +-
 packages/theme/styles/_layouts.scss           |  5 ++
 packages/theme/styles/dialogs.scss            |  1 +
 packages/ui/src/components/Panel.svelte       | 44 +++++++++++-----
 .../ui/src/components/PopupInstance.svelte    |  1 +
 .../src/components/EditDoc.svelte             |  4 +-
 .../src/components/CreateCandidate.svelte     | 51 ++++++++++---------
 .../src/components/TagsEditor.svelte          | 28 ++++------
 .../src/components/CreateIssue.svelte         | 26 +++++-----
 .../issues/edit/CreateSubIssue.svelte         | 31 ++++++-----
 .../src/components/workflow/Statuses.svelte   |  2 +-
 .../src/components/EditDoc.svelte             |  4 +-
 12 files changed, 114 insertions(+), 87 deletions(-)

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index c20054ab29..5538dcd8fe 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -37,6 +37,7 @@
   export let floatAside = false
   export let allowClose = true
   export let useMaxWidth = false
+  export let isFullSize = false
 </script>
 
 <Panel
@@ -48,7 +49,8 @@
   on:close
   {allowClose}
   {floatAside}
-  {useMaxWidth}
+  bind:useMaxWidth
+  {isFullSize}
 >
   <svelte:fragment slot="navigator">
     {#if $$slots.navigator}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index a5b8cbbaa1..824f2df528 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -231,6 +231,11 @@ input.search {
 .flex-gap-2 { gap: .5rem; }
 .flex-gap-1 { gap: .25rem; }
 
+.flex-break {  
+  flex-basis: 100%;
+  height: 0;
+}
+
 .flex-presenter, .inline-presenter {
   flex-wrap: nowrap;
   cursor: pointer;
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
index e6ce90718e..c80fcadf81 100644
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@@ -84,6 +84,7 @@
     flex-direction: column;
     margin: 0 1rem .75rem;
     color: var(--theme-caption-color);
+    flex-wrap: wrap;
 
     &__separator {
       margin: 1rem 0;
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index 58482d8792..6fff0b7548 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -36,21 +36,41 @@
   const dispatch = createEventDispatcher()
 
   let asideFloat: boolean = false
-  let asideShown: boolean = false
-  let fullSize: boolean = false
+  let asideShown: boolean = true
   $: twoRows = $deviceInfo.minWidth
 
+  let oldWidth = ''
+  let hideTimer: number | undefined
+
   const checkPanel = (): void => {
+    const k = `${panelWidth}-${asideFloat}`
+    if (oldWidth === k) {
+      return
+    }
+    oldWidth = k
     if (floatAside) {
       asideFloat = true
-    } else if (panelWidth <= 900 && !asideFloat) asideFloat = true
-    else if (panelWidth > 900 && asideFloat) {
-      asideFloat = false
-      asideShown = false
+    } else if (panelWidth <= 900 && !asideFloat) {
+      asideFloat = true
+      if (asideShown) {
+        asideShown = false
+      }
+    } else if (panelWidth > 900) {
+      if (asideFloat) {
+        asideFloat = false
+      }
+      if (!asideShown) {
+        asideShown = true
+      }
     }
   }
   afterUpdate(() => {
-    checkPanel()
+    if (hideTimer) {
+      clearTimeout(hideTimer)
+    }
+    hideTimer = setTimeout(() => {
+      checkPanel()
+    }, 500)
   })
 </script>
 
@@ -80,7 +100,7 @@
       <div class="buttons-group xsmall-gap">
         <slot name="utils" />
         {#if isFullSize || (asideFloat && $$slots.aside && isAside)}<div class="buttons-divider" />{/if}
-        {#if asideFloat && $$slots.aside && isAside}
+        {#if $$slots.aside && isAside}
           <Button
             icon={IconDetails}
             kind={'transparent'}
@@ -93,12 +113,12 @@
         {/if}
         {#if isFullSize}
           <Button
-            icon={fullSize ? IconScale : IconScaleFull}
+            icon={useMaxWidth ? IconScale : IconScaleFull}
             kind={'transparent'}
             size={'medium'}
-            selected={fullSize}
+            selected={useMaxWidth}
             on:click={() => {
-              fullSize = !fullSize
+              useMaxWidth = !useMaxWidth
               dispatch('fullsize')
             }}
           />
@@ -141,7 +161,7 @@
         <slot />
       </div>
     {/if}
-    {#if $$slots.aside && isAside}
+    {#if $$slots.aside && isAside && asideShown}
       <div class="popupPanel-body__aside" class:float={asideFloat} class:shown={asideShown}>
         <slot name="aside" />
       </div>
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index 3a612670f0..18d3f53792 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -135,6 +135,7 @@
     on:close={(ev) => _close(ev?.detail)}
     on:fullsize={() => {
       fullSize = !fullSize
+      fitPopup()
     }}
     on:changeContent={() => {
       fitPopup()
diff --git a/plugins/document-resources/src/components/EditDoc.svelte b/plugins/document-resources/src/components/EditDoc.svelte
index a94dda24cd..4a5046f2fb 100644
--- a/plugins/document-resources/src/components/EditDoc.svelte
+++ b/plugins/document-resources/src/components/EditDoc.svelte
@@ -380,7 +380,9 @@
     isAside={true}
     isSub={false}
     bind:innerWidth
-    floatAside={true}
+    floatAside={false}
+    useMaxWidth={true}
+    isFullSize={true}
     on:close={() => dispatch('close')}
   >
     <svelte:fragment slot="navigator">
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index fe672500af..78ec62f760 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -512,30 +512,33 @@
       }}
     />
     {#if skills.length > 0}
-      <Component
-        is={tags.component.TagsEditor}
-        props={{
-          disabled: loading,
-          focusIndex: 102,
-          items: skills,
-          key,
-          targetClass: recruit.mixin.Candidate,
-          showTitle: false,
-          elements,
-          newElements,
-          countLabel: recruit.string.NumberSkills
-        }}
-        on:open={(evt) => {
-          addTagRef(evt.detail)
-        }}
-        on:delete={(evt) => {
-          skills = skills.filter((it) => it._id !== evt.detail)
-        }}
-        on:change={(evt) => {
-          evt.detail.tag.weight = evt.detail.weight
-          skills = skills
-        }}
-      />
+      <div class="flex-break" />
+      <div class="antiComponent antiEmphasized flex-grow mt-2">
+        <Component
+          is={tags.component.TagsEditor}
+          props={{
+            disabled: loading,
+            focusIndex: 102,
+            items: skills,
+            key,
+            targetClass: recruit.mixin.Candidate,
+            showTitle: false,
+            elements,
+            newElements,
+            countLabel: recruit.string.NumberSkills
+          }}
+          on:open={(evt) => {
+            addTagRef(evt.detail)
+          }}
+          on:delete={(evt) => {
+            skills = skills.filter((it) => it._id !== evt.detail)
+          }}
+          on:change={(evt) => {
+            evt.detail.tag.weight = evt.detail.weight
+            skills = skills
+          }}
+        />
+      </div>
     {/if}
   </svelte:fragment>
 
diff --git a/plugins/tags-resources/src/components/TagsEditor.svelte b/plugins/tags-resources/src/components/TagsEditor.svelte
index 0c1c58e99a..99af3617d3 100644
--- a/plugins/tags-resources/src/components/TagsEditor.svelte
+++ b/plugins/tags-resources/src/components/TagsEditor.svelte
@@ -105,8 +105,14 @@
     </div>
   {/if}
   <ShowMore ignore={!showTitle}>
-    <div class:tags-container={showTitle} class:mt-3={showTitle} class:empty={items.length === 0}>
-      <div class="tag-items-container" class:tag-items-scroll={!showTitle}>
+    <div
+      class:tags-container={showTitle}
+      class:antiComponent={showTitle}
+      class:antiEmphasized={showTitle}
+      class:mt-3={showTitle}
+      class:empty={items.length === 0}
+    >
+      <div class="flex flex-grow flex-col" class:tag-items-scroll={!showTitle}>
         {#if items.length === 0}
           {#if keyLabel}
             <div class="text-sm dark-color w-full flex-center">
@@ -120,7 +126,7 @@
               <Label label={cat.label} />
             </div>
           {/if}
-          <div class="tag-items">
+          <div class="flex flex-grow flex-wrap">
             {#each cat.items as tag}
               <TagItem
                 {tag}
@@ -154,26 +160,10 @@
 
 <style lang="scss">
   .tags-container {
-    padding: 0.5rem;
-    color: var(--accent-color);
-    background-color: var(--board-bg-color);
-    border: 1px solid var(--divider-color);
-    border-radius: 0.75rem;
-
     &.empty {
       background-color: transparent;
     }
   }
-  .tag-items-container {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-  }
-  .tag-items {
-    flex-grow: 1;
-    display: flex;
-    flex-wrap: wrap;
-  }
   .tag-items-scroll {
     overflow-y: scroll;
     max-height: 20rem;
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index fe4a295663..3ddd5671f3 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -692,18 +692,20 @@
     <ParentIssue issue={parentIssue} on:close={clearParentIssue} />
   {/if}
   <EditBox bind:value={object.title} placeholder={tracker.string.IssueTitlePlaceholder} kind={'large-style'} focus />
-  <AttachmentStyledBox
-    bind:this={descriptionBox}
-    {objectId}
-    _class={tracker.class.Issue}
-    space={_space}
-    alwaysEdit
-    showButtons={false}
-    emphasized
-    bind:content={object.description}
-    placeholder={tracker.string.IssueDescriptionPlaceholder}
-    on:changeSize={() => dispatch('changeContent')}
-  />
+  {#key objectId}
+    <AttachmentStyledBox
+      bind:this={descriptionBox}
+      {objectId}
+      _class={tracker.class.Issue}
+      space={_space}
+      alwaysEdit
+      showButtons={false}
+      emphasized
+      bind:content={object.description}
+      placeholder={tracker.string.IssueDescriptionPlaceholder}
+      on:changeSize={() => dispatch('changeContent')}
+    />
+  {/key}
   <IssueTemplateChilds bind:children={subIssues} sprint={object.sprint} project={object.project} isScrollable />
   <svelte:fragment slot="pool">
     {#if issueStatuses}
diff --git a/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
index 6ef224845e..9be011b827 100644
--- a/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
@@ -41,7 +41,7 @@
   let labels: TagReference[] = []
   let descriptionBox: AttachmentStyledBox
 
-  const objectId: Ref<Issue> = generateId()
+  let objectId: Ref<Issue> = generateId()
   const key: KeyedAttribute = {
     key: 'labels',
     attr: client.getHierarchy().getAttribute(tracker.class.Issue, 'labels')
@@ -73,6 +73,7 @@
     newIssue = getIssueDefaults()
     labels = []
     focusIssueTitle?.()
+    objectId = generateId()
   }
 
   function getTitle (value: string) {
@@ -191,19 +192,21 @@
         focus
       />
       <div class="mt-4">
-        <AttachmentStyledBox
-          bind:this={descriptionBox}
-          {objectId}
-          refContainer={thisRef}
-          _class={tracker.class.Issue}
-          space={currentTeam._id}
-          alwaysEdit
-          showButtons
-          maxHeight={'20vh'}
-          bind:content={newIssue.description}
-          placeholder={tracker.string.IssueDescriptionPlaceholder}
-          on:changeSize={() => dispatch('changeContent')}
-        />
+        {#key objectId}
+          <AttachmentStyledBox
+            bind:this={descriptionBox}
+            {objectId}
+            refContainer={thisRef}
+            _class={tracker.class.Issue}
+            space={currentTeam._id}
+            alwaysEdit
+            showButtons
+            maxHeight={'20vh'}
+            bind:content={newIssue.description}
+            placeholder={tracker.string.IssueDescriptionPlaceholder}
+            on:changeSize={() => dispatch('changeContent')}
+          />
+        {/key}
       </div>
     </div>
   </div>
diff --git a/plugins/tracker-resources/src/components/workflow/Statuses.svelte b/plugins/tracker-resources/src/components/workflow/Statuses.svelte
index a9e2ee1438..7a3b163bb9 100644
--- a/plugins/tracker-resources/src/components/workflow/Statuses.svelte
+++ b/plugins/tracker-resources/src/components/workflow/Statuses.svelte
@@ -220,7 +220,7 @@
   $: updateStatusCategories()
 </script>
 
-<Panel isHeader={false} isAside={false} isFullSize on:fullsize on:close={() => dispatch('close')}>
+<Panel isHeader={false} isAside={false} on:fullsize on:close={() => dispatch('close')}>
   <svelte:fragment slot="title">
     <div class="antiTitle icon-wrapper">
       <div class="wrapped-icon">
diff --git a/plugins/view-resources/src/components/EditDoc.svelte b/plugins/view-resources/src/components/EditDoc.svelte
index 158774a5b8..977dadc509 100644
--- a/plugins/view-resources/src/components/EditDoc.svelte
+++ b/plugins/view-resources/src/components/EditDoc.svelte
@@ -94,9 +94,7 @@
         m.kind === ClassifierKind.MIXIN &&
         !ignoreMixins.has(m._id) &&
         (hierarchy.hasMixin(object, m._id) ||
-          (showAllMixins &&
-            // hierarchy.isDerived(hierarchy.getBaseClass(m._id), realObjectClass)
-            hierarchy.isDerived(realObjectClass, hierarchy.getBaseClass(m._id))))
+          (showAllMixins && hierarchy.isDerived(realObjectClass, hierarchy.getBaseClass(m._id))))
     )
   }