From f6cb336d4dd5f9042fb83d1e8220b05aa58c2c29 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Sun, 22 May 2022 07:30:59 +0300
Subject: [PATCH] Fix number and string editors. Update attributes header.
 (#1823)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/panel/src/components/Panel.svelte    |  28 ++--
 .../src/components/AttributesBar.svelte       |   3 +-
 packages/theme/styles/global.scss             |   2 +
 packages/ui/src/components/EditBox.svelte     |   9 +-
 packages/ui/src/types.ts                      |   1 +
 .../src/components/ClassAttributeBar.svelte   | 122 +++++++++++++++---
 .../src/components/DocAttributeBar.svelte     |   2 +-
 ...EditorPopup.svelte => EditBoxPopup.svelte} |  13 +-
 .../src/components/NumberEditor.svelte        |   6 +-
 .../src/components/StringEditor.svelte        |   6 +-
 10 files changed, 150 insertions(+), 42 deletions(-)
 rename plugins/view-resources/src/components/{StringEditorPopup.svelte => EditBoxPopup.svelte} (80%)

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 30d5537a4d..7c67f62758 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -89,20 +89,22 @@
   </svelte:fragment>
 
   <svelte:fragment slot="aside">
-    <div style="padding: .75rem 1.5rem">
-      {#if $$slots.actions}
-        <div class="flex-row-center pb-3 bottom-divider">
-          <span class="fs-bold w-24 mr-6"><slot name="actions-label" /></span>
-          <div class="buttons-group xsmall-gap">
-            <slot name="actions" />
+    <Scroller>
+      <div style="padding: .75rem 1.5rem">
+        {#if $$slots.actions}
+          <div class="flex-row-center pb-3 bottom-divider">
+            <span class="fs-bold w-24 mr-6"><slot name="actions-label" /></span>
+            <div class="buttons-group xsmall-gap">
+              <slot name="actions" />
+            </div>
           </div>
-        </div>
-      {/if}
-      {#if $$slots['custom-attributes'] && isCustomAttr}
-        <slot name="custom-attributes" direction="column" />
-      {:else if $$slots.attributes}<slot name="attributes" direction="column" />{/if}
-      {#if $$slots.aside}<slot name="aside" />{/if}
-    </div>
+        {/if}
+        {#if $$slots['custom-attributes'] && isCustomAttr}
+          <slot name="custom-attributes" direction="column" />
+        {:else if $$slots.attributes}<slot name="attributes" direction="column" />{/if}
+        {#if $$slots.aside}<slot name="aside" />{/if}
+      </div>
+    </Scroller>
   </svelte:fragment>
 
   {#if withoutActivity}
diff --git a/packages/presentation/src/components/AttributesBar.svelte b/packages/presentation/src/components/AttributesBar.svelte
index 6ac852b0bf..13cff74eee 100644
--- a/packages/presentation/src/components/AttributesBar.svelte
+++ b/packages/presentation/src/components/AttributesBar.svelte
@@ -72,7 +72,8 @@
       grid-auto-flow: row;
       justify-content: start;
       align-items: center;
-      gap: 1rem;
+      gap: 0.5rem;
+      padding-bottom: 0.5rem;
       width: 100%;
       height: min-content;
 
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index d2449cdb9d..6a340aac96 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -65,6 +65,8 @@
   scrollbar-width: thin;
   --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
   --timing-shadow: cubic-bezier(0,.65,.35,1);
+  --timing-main: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  // transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 ::-webkit-scrollbar {
diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index ced1178b48..040a1fb52f 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -18,7 +18,7 @@
   import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
   import { registerFocus } from '../focus'
   import plugin from '../plugin'
-  import type { AnySvelteComponent } from '../types'
+  import type { AnySvelteComponent, EditStyle } from '../types'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
 
@@ -29,7 +29,7 @@
   export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
   export let placeholderParam: any | undefined = undefined
   export let format: 'text' | 'password' | 'number' = 'text'
-  export let kind: 'editbox' | 'large-style' | 'small-style' | 'search-style' = 'editbox'
+  export let kind: EditStyle = 'editbox'
   export let focus: boolean = false
 
   const dispatch = createEventDispatcher()
@@ -116,6 +116,7 @@
       <input
         bind:this={input}
         type="number"
+        class="number"
         bind:value
         placeholder={phTraslate}
         {style}
@@ -185,6 +186,10 @@
         width: 0;
         margin: 0;
       }
+      &.number::-webkit-outer-spin-button,
+      &.number::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+      }
     }
   }
 </style>
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index e408202ed3..f232e30121 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -66,6 +66,7 @@ export type TabModel = Tab[]
 export type ButtonKind = 'primary' | 'secondary' | 'no-border' | 'transparent' | 'link' | 'link-bordered' | 'dangerous'
 export type ButtonSize = 'small' | 'medium' | 'large' | 'x-large'
 export type ButtonShape = 'rectangle' | 'rectangle-left' | 'rectangle-right' | 'circle' | 'round' | undefined
+export type EditStyle = 'editbox' | 'large-style' | 'small-style' | 'search-style'
 export interface PopupPositionElement {
   getBoundingClientRect: () => DOMRect
   position?: {
diff --git a/plugins/view-resources/src/components/ClassAttributeBar.svelte b/plugins/view-resources/src/components/ClassAttributeBar.svelte
index bf5ccd4abd..deecd902df 100644
--- a/plugins/view-resources/src/components/ClassAttributeBar.svelte
+++ b/plugins/view-resources/src/components/ClassAttributeBar.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Class, Doc, Ref } from '@anticrm/core'
   import presentation, { AttributesBar, getClient, KeyedAttribute } from '@anticrm/presentation'
-  import { ActionIcon, IconAdd, Label, showPopup } from '@anticrm/ui'
+  import { Button, IconAdd, Label, showPopup, Tooltip } from '@anticrm/ui'
   import view from '@anticrm/view'
   import { createEventDispatcher } from 'svelte'
   import { collectionsFilter, getFiltredKeys } from '../utils'
@@ -29,6 +29,7 @@
   const hierarchy = client.getHierarchy()
 
   let keys: KeyedAttribute[] = []
+  let collapsed: boolean = false
 
   function updateKeys (ignoreKeys: string[]): void {
     const filtredKeys = getFiltredKeys(hierarchy, objectClass._id, ignoreKeys, to)
@@ -41,21 +42,112 @@
 </script>
 
 {#if vertical}
-  <div class="flex-between text-sm mb-4">
-    <Label label={objectClass.label} />
-    <ActionIcon
-      label={presentation.string.Create}
-      icon={IconAdd}
-      size="small"
-      action={() => {
-        showPopup(view.component.CreateAttribute, { _class: objectClass._id }, 'top', () => {
-          updateKeys(ignoreKeys)
-          dispatch('update')
-        })
-      }}
-    />
+  <div
+    class="attrbar-header"
+    class:collapsed
+    on:click={() => {
+      collapsed = !collapsed
+    }}
+  >
+    <div class="flex-row-center">
+      <span class="overflow-label">
+        <Label label={objectClass.label} />
+      </span>
+      <div class="icon-arrow">
+        <svg fill="var(--dark-color)" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0,0L6,3L0,6Z" />
+        </svg>
+      </div>
+    </div>
+    <div class="tool">
+      <Tooltip label={presentation.string.Create}>
+        <Button
+          icon={IconAdd}
+          kind={'transparent'}
+          on:click={(ev) => {
+            ev.stopPropagation()
+            showPopup(view.component.CreateAttribute, { _class: objectClass._id }, 'top', () => {
+              updateKeys(ignoreKeys)
+              dispatch('update')
+            })
+          }}
+        />
+      </Tooltip>
+    </div>
   </div>
 {/if}
 {#if keys.length || !vertical}
-  <AttributesBar {object} {keys} {vertical} />
+  <div class="collapsed-container" class:collapsed>
+    <AttributesBar {object} {keys} {vertical} />
+  </div>
 {/if}
+
+<style lang="scss">
+  .attrbar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0.25rem -0.5rem 0.75rem;
+    padding: 0 0 0 0.5rem;
+    font-weight: 600;
+    color: var(--dark-color);
+    border: 1px solid var(--divider-color);
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition-property: color, background-color, border-color;
+    transition-duration: 0.15s;
+    transition-timing-function: var(--timing-main);
+
+    .icon-arrow {
+      margin-left: 0.5rem;
+      width: 0.325rem;
+      height: 0.325rem;
+      opacity: 0;
+      transform-origin: 35% center;
+      transform: rotate(90deg);
+      transition-property: transform, opacity;
+      transition-duration: 0.15s;
+      transition-timing-function: var(--timing-main);
+    }
+
+    .tool {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      transition: opacity 0.15s var(--timing-main);
+    }
+    &.collapsed {
+      background-color: var(--divider-color);
+      border-color: transparent;
+
+      .icon-arrow {
+        opacity: 1;
+        transform: rotate(0deg);
+      }
+    }
+    &:hover {
+      color: var(--caption-color);
+      background-color: var(--menu-bg-select);
+      border-color: transparent;
+
+      .icon-arrow {
+        opacity: 1;
+      }
+      .tool {
+        opacity: 1;
+      }
+    }
+  }
+  .collapsed-container {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    max-height: 1000px;
+    transition: max-height 0.2s var(--timing-main);
+
+    &.collapsed {
+      max-height: 0;
+    }
+  }
+</style>
diff --git a/plugins/view-resources/src/components/DocAttributeBar.svelte b/plugins/view-resources/src/components/DocAttributeBar.svelte
index 074817b33c..d9c9cdc23c 100644
--- a/plugins/view-resources/src/components/DocAttributeBar.svelte
+++ b/plugins/view-resources/src/components/DocAttributeBar.svelte
@@ -28,6 +28,6 @@
 
 <ClassAttributeBar {objectClass} {object} {ignoreKeys} to={undefined} vertical on:update />
 {#each mixins as mixin}
-  <div class="bottom-divider mt-4 mb-2" />
+  <!-- <div class="bottom-divider mt-4 mb-2" /> -->
   <ClassAttributeBar objectClass={mixin} {object} {ignoreKeys} to={objectClass._id} vertical on:update />
 {/each}
diff --git a/plugins/view-resources/src/components/StringEditorPopup.svelte b/plugins/view-resources/src/components/EditBoxPopup.svelte
similarity index 80%
rename from plugins/view-resources/src/components/StringEditorPopup.svelte
rename to plugins/view-resources/src/components/EditBoxPopup.svelte
index 6a5a3bfb19..1fcee40da6 100644
--- a/plugins/view-resources/src/components/StringEditorPopup.svelte
+++ b/plugins/view-resources/src/components/EditBoxPopup.svelte
@@ -17,13 +17,17 @@
   import type { IntlString } from '@anticrm/platform'
   import { createEventDispatcher } from 'svelte'
   import { EditBox } from '@anticrm/ui'
+  import type { EditStyle } from '@anticrm/ui'
 
-  export let value: string
+  export let value: string | number | undefined
+  export let format: 'text' | 'password' | 'number'
   export let placeholder: IntlString
+  export let kind: EditStyle = 'search-style'
+  export let maxWidth: string = '10rem'
 
   const dispatch = createEventDispatcher()
 
-  function _onchange (ev: Event) {
+  function _onchange () {
     dispatch('update', value)
   }
   function _onkeypress (ev: KeyboardEvent) {
@@ -36,8 +40,9 @@
     <EditBox
       bind:value
       {placeholder}
-      kind={'search-style'}
-      maxWidth={'10rem'}
+      {format}
+      {kind}
+      {maxWidth}
       focus
       on:change={_onchange}
       on:keypress={_onkeypress}
diff --git a/plugins/view-resources/src/components/NumberEditor.svelte b/plugins/view-resources/src/components/NumberEditor.svelte
index 5274d20745..c7e2aa2b8b 100644
--- a/plugins/view-resources/src/components/NumberEditor.svelte
+++ b/plugins/view-resources/src/components/NumberEditor.svelte
@@ -16,11 +16,11 @@
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
   import { EditBox, Label, showPopup, eventToHTMLElement } from '@anticrm/ui'
-  import StringEditorPopup from './StringEditorPopup.svelte'
+  import EditBoxPopup from './EditBoxPopup.svelte'
 
   // export let label: IntlString
   export let placeholder: IntlString
-  export let value: any
+  export let value: number
   export let focus: boolean
   export let maxWidth: string = '10rem'
   export let onChange: (value: number) => void
@@ -39,7 +39,7 @@
     on:click={(ev) => {
       if (!shown) {
         showPopup(
-          StringEditorPopup,
+          EditBoxPopup,
           { value, format: 'number' },
           eventToHTMLElement(ev),
           (res) => {
diff --git a/plugins/view-resources/src/components/StringEditor.svelte b/plugins/view-resources/src/components/StringEditor.svelte
index 31b28339a4..15c0a5df48 100644
--- a/plugins/view-resources/src/components/StringEditor.svelte
+++ b/plugins/view-resources/src/components/StringEditor.svelte
@@ -16,11 +16,11 @@
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
   import { EditBox, Label, showPopup, eventToHTMLElement } from '@anticrm/ui'
-  import StringEditorPopup from './StringEditorPopup.svelte'
+  import EditBoxPopup from './EditBoxPopup.svelte'
 
   // export let label: IntlString
   export let placeholder: IntlString
-  export let value: any
+  export let value: string
   export let focus: boolean
   export let maxWidth: string = '10rem'
   export let onChange: (value: string) => void
@@ -39,7 +39,7 @@
     on:click={(ev) => {
       if (!shown) {
         showPopup(
-          StringEditorPopup,
+          EditBoxPopup,
           { value },
           eventToHTMLElement(ev),
           (res) => {