From 70e00dbb5fed440bdcd60032dd8edec08ef7ec0e Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 26 Oct 2022 08:16:32 +0300
Subject: [PATCH] Refactor Button. Add icons. Fix EditDoc. (#2326)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 models/document/src/index.ts                  |  2 +-
 packages/theme/styles/popups.scss             |  2 +
 packages/ui/src/components/Button.svelte      | 74 +++++++++++--------
 packages/ui/src/components/Spinner.svelte     | 16 +++-
 plugins/document-assets/assets/icons.svg      | 36 +++++----
 plugins/document-assets/src/index.ts          |  4 +-
 .../src/components/EditDoc.svelte             | 21 ------
 .../src/components/NewDocumentHeader.svelte   |  2 +-
 plugins/document/src/index.ts                 |  4 +-
 .../src/components/EditApplication.svelte     | 19 ++---
 .../src/components/EditDoc.svelte             | 34 ++++-----
 .../src/components/filter/ObjectFilter.svelte |  4 +-
 12 files changed, 115 insertions(+), 103 deletions(-)

diff --git a/models/document/src/index.ts b/models/document/src/index.ts
index b93b063966..7d437fb824 100644
--- a/models/document/src/index.ts
+++ b/models/document/src/index.ts
@@ -134,7 +134,7 @@ export function createModel (builder: Builder): void {
             id: 'library',
             position: 'top',
             label: document.string.Library,
-            icon: document.icon.Document,
+            icon: document.icon.Library,
             component: document.component.Documents
           }
         ],
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index 823cbe3137..6c3dc6c9b9 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -148,6 +148,8 @@
 
       .icon { color: var(--accent-color); }
     }
+    &.no-focus:focus { background-color: transparent; }
+    &.no-focus:hover { background-color: var(--popup-bg-hover); }
   }
   .sticky-wrapper {
     display: flex;
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index 51398a592e..4efd58bbc1 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -41,9 +41,10 @@
   export let borderStyle: 'solid' | 'dashed' = 'solid'
   export let id: string | undefined = undefined
   export let input: HTMLButtonElement | undefined = undefined
-
   export let showTooltip: LabelAndProps | undefined = undefined
 
+  let iconSize: ButtonSize
+  $: iconSize = size === 'inline' ? 'inline' : 'small'
   $: iconOnly = label === undefined && $$slots.content === undefined
 
   onMount(() => {
@@ -85,20 +86,12 @@
 <button
   use:tooltip={showTooltip}
   bind:this={input}
-  class="button {kind} {size} jf-{justify}"
+  class="button {kind} {size} jf-{justify} sh-{shape ?? 'no-shape'} bs-{borderStyle}"
   class:only-icon={iconOnly}
-  class:border-radius-1={shape === undefined}
-  class:border-radius-2={shape === 'round'}
-  class:border-radius-4={shape === 'circle'}
-  class:border-radius-left-1={shape === 'rectangle-right'}
-  class:border-radius-right-1={shape === 'rectangle-left'}
-  class:border-solid={borderStyle === 'solid'}
-  class:border-dashed={borderStyle === 'dashed'}
   class:highlight
   class:selected
   disabled={disabled || loading}
   style:width
-  style:padding={shape === 'circle' && kind === 'link' ? '0 .5rem 0 .25rem' : '0 .5rem'}
   {title}
   type={kind === 'primary' ? 'submit' : 'button'}
   on:click|stopPropagation|preventDefault
@@ -109,22 +102,12 @@
   {id}
 >
   {#if icon && !loading}
-    <div
-      class="btn-icon pointer-events-none"
-      class:mr-1={!iconOnly &&
-        (kind === 'no-border' || kind === 'link-bordered' || kind === 'list' || shape === 'circle')}
-      class:mr-2={!iconOnly &&
-        kind !== 'no-border' &&
-        kind !== 'link-bordered' &&
-        kind !== 'list' &&
-        shape !== 'circle'}
-      class:resetIconSize
-    >
-      <Icon bind:icon size={size === 'inline' ? 'inline' : 'small'} />
+    <div class="btn-icon pointer-events-none" class:resetIconSize>
+      <Icon bind:icon size={iconSize} />
     </div>
   {/if}
   {#if loading}
-    <Spinner />
+    <Spinner size={iconSize} />
   {/if}
   {#if label}
     <span class="overflow-label disabled pointer-events-none" class:ml-2={loading}>
@@ -184,19 +167,48 @@
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
 
-    &.border-solid {
-      border-style: solid;
-    }
-
-    &.border-dashed {
-      border-style: dashed;
-    }
-
     .btn-icon {
       color: var(--content-color);
       transition: color 0.15s;
       pointer-events: none;
     }
+    &:not(.only-icon) .btn-icon {
+      margin-right: 0.5rem;
+    }
+    &.no-border:not(.only-icon) .btn-icon,
+    &.link-bordered:not(.only-icon) .btn-icon,
+    &.list:not(.only-icon) .btn-icon,
+    &.sh-circle:not(.only-icon) .btn-icon {
+      margin-right: 0.25rem;
+    }
+
+    &.sh-no-shape {
+      border-radius: 0.25rem;
+    }
+    &.sh-round {
+      border-radius: 0.5rem;
+    }
+    &.sh-circle {
+      border-radius: 1rem;
+      &.link {
+        padding: 0 0.5rem 0 0.25rem;
+      }
+    }
+    &.sh-rectangle-right {
+      border-top-left-radius: 0.25rem;
+      border-bottom-left-radius: 0.25rem;
+    }
+    &.sh-rectangle-left {
+      border-top-right-radius: 0.25rem;
+      border-bottom-right-radius: 0.25rem;
+    }
+    &.bs-solid {
+      border-style: solid;
+    }
+    &.bs-dashed {
+      border-style: dashed;
+    }
+
     &.highlight {
       box-shadow: inset 0 0 1px 1px var(--primary-bg-color);
 
diff --git a/packages/ui/src/components/Spinner.svelte b/packages/ui/src/components/Spinner.svelte
index 4f5d05765c..6fa2f6e94e 100644
--- a/packages/ui/src/components/Spinner.svelte
+++ b/packages/ui/src/components/Spinner.svelte
@@ -13,7 +13,9 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  export let size: 'small' | 'medium' = 'medium'
+  import type { ButtonSize } from '../types'
+
+  export let size: ButtonSize = 'medium'
 </script>
 
 <div class="spinner spinner-{size}">
@@ -32,6 +34,10 @@
     -webkit-animation: spinCircle 1s infinite linear;
     animation: spinCircle 1s infinite linear;
 
+    &-inline {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
     &-small {
       width: 1rem;
       height: 1rem;
@@ -40,6 +46,14 @@
       width: 1.5rem;
       height: 1.5rem;
     }
+    &-large {
+      width: 2rem;
+      height: 2rem;
+    }
+    &-x-large {
+      width: 3rem;
+      height: 3rem;
+    }
   }
   @-webkit-keyframes spinCircle {
     from {
diff --git a/plugins/document-assets/assets/icons.svg b/plugins/document-assets/assets/icons.svg
index ab547b0a11..b47e34bca2 100644
--- a/plugins/document-assets/assets/icons.svg
+++ b/plugins/document-assets/assets/icons.svg
@@ -1,18 +1,26 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="documentapplication" viewBox="0 0 237.783 237.783">
-    <!-- <path d="m42.735,50.071h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.934h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.935h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.935h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6z"/> -->
-    <path d="m42.735,62.071h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
-    <!-- <path d="m42.735,88.005h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/> -->
-    <path d="m42.735,113.94h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
-    <!-- <path d="m42.735,139.875h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/> -->
-    <path d="m237.783,98.361c0-1.591-0.632-3.117-1.757-4.243l-16.356-16.355c-1.125-1.125-2.651-1.757-4.243-1.757s-3.117,0.632-4.243,1.757l-28.756,28.756v-88.117c0-3.313-2.686-6-6-6h-170.428c-3.314,0-6,2.687-6,6v200.979c0,3.313 2.686,6 6,6h170.429c3.314,0 6-2.687 6-6v-63.18l53.597-53.597c1.125-1.125 1.757-2.651 1.757-4.243zm-225.783,115.02v-188.979h158.429v94.117l-35.291,35.291h-92.403c-3.313,0-6,2.687-6,6s2.687,6 6,6h80.403l-1.033,1.033c-0.777,0.777-1.326,1.753-1.586,2.821l-4.157,17.05h-25.148c-3.313,0-6,2.687-6,6s2.687,6 6,6c0,0 29.714,0 29.86,0 0.473,0 0.95-0.056 1.421-0.171l21.629-5.273c1.068-0.26 2.044-0.809 2.821-1.586l23.482-23.482v45.181h-158.427zm127.649-31.374l-10.408,2.538 2.538-10.408 83.648-83.648 7.871,7.871-83.649,83.647z"/>
+  <symbol id="documentapplication" viewBox="0 0 24 24">
+    <path d="M18.7,14.2l-3.5,3.5c-0.2,0.2-0.5,0.7-0.5,1l-0.2,1.3c-0.1,0.5,0.1,0.9,0.4,1.2c0.3,0.3,0.6,0.4,1,0.4c0.1,0,0.2,0,0.2,0l1.4-0.2c0.4-0.1,0.8-0.3,1-0.5l2.9-2.9c0.1-0.1,0.1-0.1,0.2-0.2l0.4-0.4c0.5-0.5,0.7-1,0.8-1.5c0.1-0.6-0.2-1.2-0.8-1.8C21.3,13.6,20.1,12.8,18.7,14.2z M20.9,15.3c0.2,0.2,0.4,0.4,0.4,0.6c0,0.1-0.1,0.3-0.4,0.5l-0.2,0.2c-0.5-0.2-0.9-0.6-1.1-1.2l0.2-0.2C20.2,14.9,20.4,14.8,20.9,15.3z M17.3,20c0,0-0.1,0.1-0.2,0.1l-1.2,0.2l0.2-1.2c0,0,0.1-0.1,0.1-0.2l2.3-2.3c0.3,0.5,0.7,0.9,1.1,1.2L17.3,20z"/>
+    <path d="M22.7,10c0-0.1,0-0.1,0-0.2c0,0,0,0,0-0.1c0-0.1-0.1-0.2-0.1-0.2l-8-8c-0.1-0.1-0.1-0.1-0.2-0.1c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0c0,0,0,0,0,0H9C3.6,1.2,1.2,3.6,1.2,9v6c0,5.4,2.3,7.8,7.8,7.8h3.2c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8H9c-4.6,0-6.2-1.6-6.2-6.2V9c0-4.6,1.6-6.2,6.2-6.2h4.2V6c0,3.4,1.3,4.8,4.8,4.8h3.2v0.8c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8L22.7,10C22.8,10,22.7,10,22.7,10z M18,9.2c-2.6,0-3.2-0.7-3.2-3.2V3.8l5.4,5.4H18z"/>
+    <path d="M13,12.3H7c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h6c0.4,0,0.8-0.3,0.8-0.8S13.4,12.3,13,12.3z"/>
+    <path d="M7,16.3c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h4c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8H7z"/>
   </symbol>
-  <symbol id="document" viewBox="0 0 237.783 237.783">
-    <path d="m42.735,50.071h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.934h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.935h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6zm0,25.935h96.959c3.313,0 6,2.687 6,6s-2.687,6-6,6h-96.959c-3.313,0-6-2.687-6-6s2.686-6 6-6z"/>
-    <path d="m42.735,62.071h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
-    <path d="m42.735,88.005h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
-    <path d="m42.735,113.94h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
-    <path d="m42.735,139.875h96.959c3.313,0 6-2.687 6-6s-2.687-6-6-6h-96.959c-3.313,0-6,2.687-6,6s2.686,6 6,6z"/>
-    <path d="m237.783,98.361c0-1.591-0.632-3.117-1.757-4.243l-16.356-16.355c-1.125-1.125-2.651-1.757-4.243-1.757s-3.117,0.632-4.243,1.757l-28.756,28.756v-88.117c0-3.313-2.686-6-6-6h-170.428c-3.314,0-6,2.687-6,6v200.979c0,3.313 2.686,6 6,6h170.429c3.314,0 6-2.687 6-6v-63.18l53.597-53.597c1.125-1.125 1.757-2.651 1.757-4.243zm-225.783,115.02v-188.979h158.429v94.117l-35.291,35.291h-92.403c-3.313,0-6,2.687-6,6s2.687,6 6,6h80.403l-1.033,1.033c-0.777,0.777-1.326,1.753-1.586,2.821l-4.157,17.05h-25.148c-3.313,0-6,2.687-6,6s2.687,6 6,6c0,0 29.714,0 29.86,0 0.473,0 0.95-0.056 1.421-0.171l21.629-5.273c1.068-0.26 2.044-0.809 2.821-1.586l23.482-23.482v45.181h-158.427zm127.649-31.374l-10.408,2.538 2.538-10.408 83.648-83.648 7.871,7.871-83.649,83.647z"/>
+  <symbol id="newdocument" viewBox="0 0 16 16">
+    <path d="M14.7826 3.26359C15.1313 2.69123 15.0606 1.93115 14.5705 1.43492C14.0757 0.933932 13.3153 0.865765 12.7483 1.23041C13.2123 2.09277 13.9198 2.79999 14.7826 3.26359Z"/>
+    <path d="M11.8171 2.11829L6.78472 7.18C7.77457 7.47517 8.57699 8.21908 8.95006 9.18198L13.9064 4.20208C13.0535 3.68436 12.3369 2.9696 11.8171 2.11829Z"/>
+    <path d="M7.91486 10.1761C7.80538 9.1186 6.91913 8.30487 5.8592 8.29183C5.53827 8.92804 5.21105 9.90848 5.01729 10.5311C4.93355 10.8002 5.16675 11.0527 5.44262 10.9905C6.16831 10.8268 7.36057 10.5217 7.91486 10.1761Z"/>
+    <path d="M4.75 2C2.67893 2 1 3.67893 1 5.75V11.25C1 13.3211 2.67893 15 4.75 15H10.2501C12.3212 15 14.0001 13.3211 14.0001 11.25V8C14.0001 7.58579 13.6643 7.25 13.2501 7.25C12.8359 7.25 12.5001 7.58579 12.5001 8V11.25C12.5001 12.4926 11.4927 13.5 10.2501 13.5H4.75C3.50736 13.5 2.5 12.4926 2.5 11.25V5.75C2.5 4.50736 3.50736 3.5 4.75 3.5H7C7.41421 3.5 7.75 3.16421 7.75 2.75C7.75 2.33579 7.41421 2 7 2H4.75Z"/>
+  </symbol>
+  <symbol id="document" viewBox="0 0 24 24">
+    <path d="M21.2,7.9c0-0.1,0-0.1,0-0.2c0-0.1-0.1-0.1-0.1-0.1c0,0,0-0.1-0.1-0.1l-5.5-6c0,0,0,0,0,0c0,0-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0c0,0,0,0,0,0H6.5C6.1,1.2,5.8,1.6,5.8,2v17c0,0.4,0.3,0.8,0.8,0.8h14c0.4,0,0.8-0.3,0.8-0.8V8C21.2,8,21.2,7.9,21.2,7.9z M15.8,3.9l3,3.3h-3V3.9z M19.8,18.2H7.2V2.8h7V8c0,0.4,0.3,0.8,0.8,0.8h4.8V18.2z"/>
+    <path d="M14,21.2H4.2V10c0-0.4-0.3-0.8-0.8-0.8S2.8,9.6,2.8,10v12c0,0.4,0.3,0.8,0.8,0.8H14c0.4,0,0.8-0.3,0.8-0.8C14.8,21.6,14.4,21.2,14,21.2z"/>
+    <path d="M9.5,10.8h2c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-2c-0.4,0-0.8,0.3-0.8,0.8C8.8,10.4,9.1,10.8,9.5,10.8z"/>
+    <path d="M8.8,14c0,0.4,0.3,0.8,0.8,0.8h6c0.4,0,0.8-0.3,0.8-0.8c0-0.4-0.3-0.8-0.8-0.8h-6C9.1,13.2,8.8,13.6,8.8,14z"/>
+  </symbol>
+  <symbol id="library" viewBox="0 0 24 24">
+    <path d="M21,2.2h-5h-5c-0.4,0-0.8,0.3-0.8,0.8v18c0,0.4,0.3,0.8,0.8,0.8h5h5c0.4,0,0.8-0.3,0.8-0.8V3C21.8,2.6,21.4,2.2,21,2.2z M11.8,3.8h3.5v16.5h-3.5V3.8z M20.2,20.2h-3.5V3.8h3.5V20.2z"/>
+    <path d="M9.1,2.8l-4-0.5c-0.2,0-0.4,0-0.6,0.2S4.3,2.7,4.3,2.9l-2,17.5c0,0.4,0.2,0.8,0.7,0.8l4.2,0.5c0.2,0,0.4,0,0.6-0.2C7.9,21.5,8,21.3,8,21.1L9.7,3.6C9.8,3.2,9.5,2.8,9.1,2.8z M6.6,20.2l-2.7-0.3l1.8-16l2.5,0.3L6.6,20.2z"/>
+    <path d="M18.5,9.8c0.4,0,0.8-0.3,0.8-0.8V7.5c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8V9C17.8,9.4,18.1,9.8,18.5,9.8z"/>
+    <path d="M13.5,6.8c-0.4,0-0.8,0.3-0.8,0.8V9c0,0.4,0.3,0.8,0.8,0.8s0.8-0.3,0.8-0.8V7.5C14.2,7.1,13.9,6.8,13.5,6.8z"/>
   </symbol>
 </svg>
diff --git a/plugins/document-assets/src/index.ts b/plugins/document-assets/src/index.ts
index 6b325a4bd5..0bb8286ce9 100644
--- a/plugins/document-assets/src/index.ts
+++ b/plugins/document-assets/src/index.ts
@@ -19,6 +19,8 @@ import { addStringsLoader, loadMetadata } from '@hcengineering/platform'
 const icons = require('../assets/icons.svg') as string // eslint-disable-line
 loadMetadata(document.icon, {
   DocumentApplication: `${icons}#documentapplication`,
-  Document: `${icons}#document`
+  NewDocument: `${icons}#newdocument`,
+  Document: `${icons}#document`,
+  Library: `${icons}#library`
 })
 addStringsLoader(documentId, async (lang: string) => await import(`../lang/${lang}.json`))
diff --git a/plugins/document-resources/src/components/EditDoc.svelte b/plugins/document-resources/src/components/EditDoc.svelte
index f2cce6a849..30c522e325 100644
--- a/plugins/document-resources/src/components/EditDoc.svelte
+++ b/plugins/document-resources/src/components/EditDoc.svelte
@@ -307,30 +307,9 @@
 {/if}
 
 <style lang="scss">
-  .title {
-    font-weight: 500;
-    font-size: 1.125rem;
-    color: var(--theme-caption-color);
-  }
-
   .description-preview {
     color: var(--theme-content-color);
     line-height: 150%;
-
-    .placeholder {
-      color: var(--theme-content-trans-color);
-    }
-  }
-
-  .tool {
-    align-self: start;
-    width: 20px;
-    height: 20px;
-    opacity: 0.3;
-    cursor: pointer;
-    &:hover {
-      opacity: 1;
-    }
   }
 
   .tab-content {
diff --git a/plugins/document-resources/src/components/NewDocumentHeader.svelte b/plugins/document-resources/src/components/NewDocumentHeader.svelte
index 208140c50e..367f1034a9 100644
--- a/plugins/document-resources/src/components/NewDocumentHeader.svelte
+++ b/plugins/document-resources/src/components/NewDocumentHeader.svelte
@@ -25,7 +25,7 @@
 <div class="antiNav-subheader gap-2">
   <div class="flex-grow text-md">
     <Button
-      icon={document.icon.Document}
+      icon={document.icon.NewDocument}
       label={document.string.CreateDocument}
       justify={'left'}
       width={'100%'}
diff --git a/plugins/document/src/index.ts b/plugins/document/src/index.ts
index ab5051b84c..2ffeb5d5a1 100644
--- a/plugins/document/src/index.ts
+++ b/plugins/document/src/index.ts
@@ -92,7 +92,9 @@ const documentPlugin = plugin(documentId, {
   },
   icon: {
     DocumentApplication: '' as Asset,
-    Document: '' as Asset
+    NewDocument: '' as Asset,
+    Document: '' as Asset,
+    Library: '' as Asset
   },
   space: {
     Documents: '' as Ref<Space>
diff --git a/plugins/recruit-resources/src/components/EditApplication.svelte b/plugins/recruit-resources/src/components/EditApplication.svelte
index 04cb38b3c6..a55b982afc 100644
--- a/plugins/recruit-resources/src/components/EditApplication.svelte
+++ b/plugins/recruit-resources/src/components/EditApplication.svelte
@@ -16,7 +16,6 @@
 <script lang="ts">
   import { createEventDispatcher, onMount } from 'svelte'
   import { createQuery } from '@hcengineering/presentation'
-  import { Scroller } from '@hcengineering/ui'
   import type { Candidate, Applicant, Vacancy } from '@hcengineering/recruit'
   import CandidateCard from './CandidateCard.svelte'
   import VacancyCard from './VacancyCard.svelte'
@@ -52,16 +51,14 @@
 </script>
 
 {#if object !== undefined && candidate !== undefined}
-  <Scroller horizontal>
-    <div class="flex-between">
-      <div class="card"><CandidateCard {candidate} on:click /></div>
-      <div class="arrows"><ExpandRightDouble /></div>
-      <div class="card"><VacancyCard {vacancy} /></div>
-    </div>
-    <div class="mt-6">
-      <Reviews objectId={candidate._id} reviews={candidate.reviews ?? 0} label={recruit.string.TalentReviews} />
-    </div>
-  </Scroller>
+  <div class="flex-between">
+    <div class="card"><CandidateCard {candidate} on:click /></div>
+    <div class="arrows"><ExpandRightDouble /></div>
+    <div class="card"><VacancyCard {vacancy} /></div>
+  </div>
+  <div class="mt-6">
+    <Reviews objectId={candidate._id} reviews={candidate.reviews ?? 0} label={recruit.string.TalentReviews} />
+  </div>
 {/if}
 
 <style lang="scss">
diff --git a/plugins/view-resources/src/components/EditDoc.svelte b/plugins/view-resources/src/components/EditDoc.svelte
index a483e25176..bc629cbdf4 100644
--- a/plugins/view-resources/src/components/EditDoc.svelte
+++ b/plugins/view-resources/src/components/EditDoc.svelte
@@ -252,7 +252,7 @@
     {icon}
     {title}
     {object}
-    isHeader={true}
+    isHeader={false}
     isAside={true}
     bind:panelWidth
     bind:innerWidth
@@ -265,24 +265,6 @@
       <UpDownNavigator element={object} />
     </svelte:fragment>
 
-    <svelte:fragment slot="header">
-      <span class="fs-title flex-grow">
-        {#if mainEditor}
-          <Component
-            is={mainEditor}
-            props={{ object }}
-            on:open={(ev) => {
-              ignoreKeys = ev.detail.ignoreKeys
-              ignoreMixins = new Set(ev.detail.ignoreMixins)
-              allowedCollections = ev.detail.allowedCollections ?? []
-              collectionArrays = ev.detail.collectionArrays ?? []
-              getMixins(parentClass, object, showAllMixins)
-              updateKeys(showAllMixins)
-            }}
-          />
-        {/if}
-      </span>
-    </svelte:fragment>
     <svelte:fragment slot="tools">
       <div class="p-1">
         <Button icon={IconMoreH} kind={'transparent'} size={'medium'} on:click={showMenu} />
@@ -335,6 +317,20 @@
       {/if}
     </svelte:fragment>
 
+    {#if mainEditor}
+      <Component
+        is={mainEditor}
+        props={{ object }}
+        on:open={(ev) => {
+          ignoreKeys = ev.detail.ignoreKeys
+          ignoreMixins = new Set(ev.detail.ignoreMixins)
+          allowedCollections = ev.detail.allowedCollections ?? []
+          collectionArrays = ev.detail.collectionArrays ?? []
+          getMixins(parentClass, object, showAllMixins)
+          updateKeys(showAllMixins)
+        }}
+      />
+    {/if}
     {#each fieldEditors as collection}
       {#if collection.editor}
         <div class="mt-6 clear-mins">
diff --git a/plugins/view-resources/src/components/filter/ObjectFilter.svelte b/plugins/view-resources/src/components/filter/ObjectFilter.svelte
index aaeba9f418..2942d0976e 100644
--- a/plugins/view-resources/src/components/filter/ObjectFilter.svelte
+++ b/plugins/view-resources/src/components/filter/ObjectFilter.svelte
@@ -156,7 +156,7 @@
         {:else}
           {#each values as value, i}
             <button
-              class="menu-item"
+              class="menu-item no-focus"
               on:click={() => {
                 toggle(value)
               }}
@@ -167,7 +167,7 @@
                     <CheckBox checked={isSelected(value, filter.value)} primary />
                   </div>
                   {#if value}
-                    <svelte:component this={attribute.presenter} {value} {...attribute.props} />
+                    <svelte:component this={attribute.presenter} {value} {...attribute.props} isInteractive={false} />
                   {:else}
                     <Label label={ui.string.NotSelected} />
                   {/if}