Update Panel. Fix editors. (#2450)

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

packages/panel/src/components/Panel.svelte

@@ -36,7 +36,7 @@
   export let isCustomAttr: boolean = true
   export let floatAside = false
   export let allowClose = true
-  export let useMaxWidth = false
+  export let useMaxWidth: boolean | undefined = undefined
   export let isFullSize = false
 </script>
 

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

@@ -467,9 +467,9 @@
 </script>
 
 <div class="ref-container" class:autoOverflow>
-  <div class="flex">
+  <div class="formatPanel flex-between clear-mins" class:focused>
     {#if isFormatting && !readonly}
-      <div class="formatPanel buttons-group xsmall-gap mb-4">
+      <div class="flex-row-center buttons-group xsmall-gap">
         <StyleButton
           icon={Header}
           size={buttonSize}
@@ -567,7 +567,7 @@
     {/if}
     <div class="flex-grow" />
     {#if comparedVersion !== undefined}
-      <div class="formatPanel buttons-group xsmall-gap mb-4">
+      <div class="flex-row-center buttons-group xsmall-gap">
         <StyleButton
           icon={Objects}
           size={buttonSize}
@@ -581,7 +581,7 @@
         <slot name="tools" />
       </div>
     {:else}
-      <div class="formatPanel buttons-group xsmall-gap mb-4">
+      <div class="formatPanel buttons-group xsmall-gap">
         <slot name="tools" />
       </div>
     {/if}
@@ -714,4 +714,18 @@
   .autoOverflow {
     overflow: auto;
   }
+
+  .ref-container .formatPanel {
+    margin: -0.5rem -0.25rem 0.5rem;
+    padding: 0.375rem;
+    background-color: var(--body-accent);
+    border-radius: 0.5rem;
+    box-shadow: var(--button-shadow);
+    z-index: 1;
+
+    &.focused {
+      position: sticky;
+      top: 1.25rem;
+    }
+  }
 </style>

packages/theme/styles/common.scss

@@ -306,6 +306,7 @@
       color: var(--caption-color);  
     }
   }
+  .invisible { display: none; }
   &-empty {
     display: flex;
     justify-content: center;
@@ -420,7 +421,7 @@
       }
       .rotated-icon {
         transform-origin: center;
-        transition: transform .3s var(--timing-rotate);
+        transition: transform .15s var(--timing-main);
 
         &.opened { transform: rotate(0deg); }
         &.closed { transform: rotate(90deg); }
@@ -448,11 +449,7 @@
         visibility: hidden;
         max-height: 0;
       }
-      &:hover .caption {
-        margin-bottom: 0rem;
-
-        &.hasAttachments { margin-bottom: .5rem; }
-      }
+      &:hover .caption.hasAttachments { margin-bottom: .5rem; }
     }
     
     &:first-child {
@@ -464,7 +461,6 @@
       border-top-right-radius: .65rem;
     }
     &:last-child {
-      border-top: none;
       border-bottom-left-radius: .75rem;
       border-bottom-right-radius: .75rem;
     }
@@ -472,6 +468,7 @@
       border-bottom-left-radius: .65rem;
       border-bottom-right-radius: .65rem;
     }
+    &:last-child:not(:first-child),
     &:not(:first-child):not(:last-child) { border-top: none; }
 
     &:hover,

packages/ui/src/components/Panel.svelte

@@ -20,6 +20,8 @@
   import IconDetails from './icons/Details.svelte'
   import IconScale from './icons/Scale.svelte'
   import IconScaleFull from './icons/ScaleFull.svelte'
+  import IconMinWidth from './icons/MinWidth.svelte'
+  import IconMaxWidth from './icons/MaxWidth.svelte'
   import Scroller from './Scroller.svelte'
   import { deviceOptionsStore as deviceInfo } from '../../'
 
@@ -31,12 +33,13 @@
   export let withoutTitle: boolean = false
   export let floatAside = false
   export let allowClose = true
-  export let useMaxWidth = false
+  export let useMaxWidth: boolean | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
   let asideFloat: boolean = false
   let asideShown: boolean = true
+  let fullSize: boolean = false
   $: twoRows = $deviceInfo.minWidth
 
   let oldWidth = ''
@@ -99,7 +102,9 @@
       </div>
       <div class="buttons-group xsmall-gap">
         <slot name="utils" />
-        {#if isFullSize || (asideFloat && $$slots.aside && isAside)}<div class="buttons-divider" />{/if}
+        {#if isFullSize || useMaxWidth !== undefined || ($$slots.aside && isAside)}
+          <div class="buttons-divider" />
+        {/if}
         {#if $$slots.aside && isAside}
           <Button
             icon={IconDetails}
@@ -111,14 +116,26 @@
             }}
           />
         {/if}
-        {#if isFullSize}
+        {#if useMaxWidth !== undefined}
           <Button
-            icon={useMaxWidth ? IconScale : IconScaleFull}
+            icon={useMaxWidth ? IconMaxWidth : IconMinWidth}
             kind={'transparent'}
             size={'medium'}
             selected={useMaxWidth}
             on:click={() => {
               useMaxWidth = !useMaxWidth
+              dispatch('maxWidth', useMaxWidth)
+            }}
+          />
+        {/if}
+        {#if isFullSize}
+          <Button
+            icon={fullSize ? IconScale : IconScaleFull}
+            kind={'transparent'}
+            size={'medium'}
+            selected={fullSize}
+            on:click={() => {
+              fullSize = !fullSize
               dispatch('fullsize')
             }}
           />

packages/ui/src/components/icons/MaxWidth.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.6,7.5c0.5,0,0.8-0.4,0.8-0.8V3.5h17v3.3c0,0.5,0.3,0.8,0.8,0.8S22,7.2,22,6.8v-4C22,2.3,21.7,2,21.3,2H2.8C2.3,2,2,2.3,2,2.8v4C2,7.2,2.3,7.5,2.6,7.5z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M21.4,16.5c-0.5,0-0.8,0.4-0.8,0.8v3.2h-17v-3.2c0-0.5-0.4-0.8-0.8-0.8c-0.5,0-0.8,0.3-0.8,0.7v4c0,0.5,0.3,0.8,0.8,0.9h18.6c0.5,0,0.8-0.4,0.8-0.8v-4C22.2,16.8,21.9,16.5,21.4,16.5z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M18.2,15.1c0.3,0.3,0.8,0.3,1.1,0l2.5-2.5c0-0.1,0.1-0.2,0.1-0.3S22,12.1,22,12c0-0.1,0-0.2-0.1-0.3c0-0.1-0.1-0.2-0.2-0.2L19.3,9c-0.3-0.3-0.8-0.3-1.1,0s-0.3,0.8,0,1.1l1.2,1.2h-5.2c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h5.2L18.2,14C17.9,14.3,17.9,14.8,18.2,15.1z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.3,12.5L4.7,15c0.3,0.3,0.8,0.3,1.1,0s0.3-0.8,0-1.1l-1.2-1.2h5.2c0.4,0,0.8-0.3,0.8-0.8s-0.4-0.7-0.8-0.7H4.6L5.8,10c0.3-0.3,0.3-0.8,0-1.1C5.5,8.6,5,8.7,4.7,9l-2.5,2.5c-0.1,0.1-0.1,0.2-0.2,0.2c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0.1,0.3C2.1,12.4,2.2,12.5,2.3,12.5z"
+  />
+</svg>

packages/ui/src/components/icons/MinWidth.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8,7.5c0.5,0,0.8-0.4,0.8-0.8V3.5h6.4v3.3c0,0.5,0.3,0.8,0.8,0.8s0.8-0.4,0.8-0.8v-4C16.8,2.3,16.4,2,16,2H8C7.6,2,7.2,2.3,7.2,2.8v3.9C7.2,7.2,7.6,7.5,8,7.5z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M16.1,16.5c-0.5,0-0.8,0.4-0.8,0.8v3.2H8.8v-3.2c0-0.5-0.4-0.8-0.8-0.8s-0.8,0.3-0.8,0.8v4c0,0.5,0.4,0.8,0.8,0.8h8.1c0.5,0,0.8-0.4,0.8-0.8v-4C16.9,16.8,16.6,16.5,16.1,16.5z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M21.3,11.3h-5.2l1.2-1.2c0.3-0.3,0.3-0.8,0-1.1s-0.8-0.3-1.1,0l-2.4,2.5c-0.1,0-0.2,0.1-0.2,0.2c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.1,0.1,0.2,0.1,0.3s0.1,0.2,0.1,0.4l2.5,2.5c0.3,0.3,0.8,0.3,1.1,0s0.3-0.8,0-1.1l-1.2-1.2h5.2c0.5,0,0.8-0.3,0.8-0.8S21.7,11.3,21.3,11.3z"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.8,15l2.5-2.5c0.1,0,0.2-0.1,0.2-0.2c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1-0.1-0.2-0.1-0.3c-0.1,0-0.1-0.1-0.2-0.2L7.8,9C7.5,8.7,7,8.7,6.7,9s-0.3,0.7,0,1L8,11.2H2.8C2.3,11.2,2,11.6,2,12c0,0.4,0.3,0.8,0.8,0.7h5.1l-1.2,1.2c-0.3,0.3-0.3,0.8,0,1.1S7.5,15.3,7.8,15z"
+  />
+</svg>

packages/ui/src/index.ts

@@ -138,6 +138,8 @@ export { default as IconScaleFull } from './components/icons/ScaleFull.svelte'
 export { default as IconOpen } from './components/icons/Open.svelte'
 export { default as IconCheckCircle } from './components/icons/CheckCircle.svelte'
 export { default as IconColStar } from './components/icons/ColStar.svelte'
+export { default as IconMinWidth } from './components/icons/MinWidth.svelte'
+export { default as IconMaxWidth } from './components/icons/MaxWidth.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'

plugins/attachment-resources/src/index.ts

@@ -33,6 +33,8 @@ import FileDownload from './components/icons/FileDownload.svelte'
 import Photos from './components/Photos.svelte'
 import AttachmentStyledBox from './components/AttachmentStyledBox.svelte'
 import AccordionEditor from './components/AccordionEditor.svelte'
+import IconUploadDuo from './components/icons/UploadDuo.svelte'
+import IconAttachment from './components/icons/Attachment.svelte'
 import { deleteFile, uploadFile } from './utils'
 import { DisplayTx } from '@hcengineering/activity'
 
@@ -49,7 +51,9 @@ export {
   FileDownload,
   FileBrowser,
   AttachmentStyledBox,
-  AccordionEditor
+  AccordionEditor,
+  IconUploadDuo,
+  IconAttachment
 }
 
 export enum FileBrowserSortMode {

plugins/document-resources/src/components/EditDoc.svelte

@@ -382,7 +382,6 @@
     bind:innerWidth
     floatAside={false}
     useMaxWidth={true}
-    isFullSize={true}
     on:close={() => dispatch('close')}
   >
     <svelte:fragment slot="navigator">

plugins/view-resources/src/components/NumberEditor.svelte

@@ -15,6 +15,7 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
+  import type { ButtonSize } from '@hcengineering/ui'
   import { EditBox, Label, showPopup, eventToHTMLElement, Button } from '@hcengineering/ui'
   import EditBoxPopup from './EditBoxPopup.svelte'
 
@@ -26,6 +27,9 @@
   export let onChange: (value: number | undefined) => void
   export let kind: 'no-border' | 'link' | 'button' = 'no-border'
   export let readonly = false
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'fit-content'
 
   let shown: boolean = false
 
@@ -37,32 +41,12 @@
   }
 </script>
 
-{#if kind === 'link'}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div
-    class="link-container"
-    on:click={(ev) => {
-      if (!shown && !readonly) {
-        showPopup(EditBoxPopup, { value, format: 'number' }, eventToHTMLElement(ev), (res) => {
-          if (Number.isFinite(res)) {
-            value = res
-            onChange(value)
-          }
-          shown = false
-        })
-      }
-    }}
-  >
-    {#if value !== undefined}
-      <span class="overflow-label">{value}</span>
-    {:else}
-      <span class="dark-color"><Label label={placeholder} /></span>
-    {/if}
-  </div>
-{:else if kind === 'button'}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if kind === 'button' || kind === 'link'}
   <Button
-    size={'small'}
+    kind={kind === 'button' ? 'secondary' : kind}
+    {size}
+    {justify}
+    {width}
     on:click={(ev) => {
       if (!shown && !readonly) {
         showPopup(EditBoxPopup, { value, format: 'number' }, eventToHTMLElement(ev), (res) => {
@@ -92,22 +76,3 @@
 {:else}
   <EditBox {placeholder} bind:value format={'number'} {focus} on:change={_onchange} />
 {/if}
-
-<style lang="scss">
-  .link-container {
-    display: flex;
-    align-items: center;
-    padding: 0 0.875rem;
-    width: 100%;
-    height: 2rem;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    cursor: pointer;
-
-    &:hover {
-      color: var(--caption-color);
-      background-color: var(--body-color);
-      border-color: var(--divider-color);
-    }
-  }
-</style>

plugins/view-resources/src/components/StringEditor.svelte

@@ -15,7 +15,8 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
-  import { EditBox, Label, showPopup, eventToHTMLElement } from '@hcengineering/ui'
+  import type { ButtonSize } from '@hcengineering/ui'
+  import { EditBox, Label, showPopup, eventToHTMLElement, Button } from '@hcengineering/ui'
   import EditBoxPopup from './EditBoxPopup.svelte'
 
   // export let label: IntlString
@@ -25,6 +26,9 @@
   export let onChange: (value: string) => void
   export let kind: 'no-border' | 'link' = 'no-border'
   export let readonly = false
+  export let size: ButtonSize = 'small'
+  export let justify: 'left' | 'center' = 'center'
+  export let width: string | undefined = 'fit-content'
 
   let shown: boolean = false
 
@@ -33,10 +37,12 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if kind === 'link'}
-  <div
-    class="link-container"
+  <Button
+    {kind}
+    {size}
+    {justify}
+    {width}
     on:click={(ev) => {
       if (!shown && !readonly) {
         showPopup(EditBoxPopup, { value }, eventToHTMLElement(ev), (res) => {
@@ -49,12 +55,14 @@
       }
     }}
   >
-    {#if value}
-      <span class="overflow-label">{value}</span>
-    {:else}
-      <span class="dark-color"><Label label={placeholder} /></span>
-    {/if}
-  </div>
+    <svelte:fragment slot="content">
+      {#if value}
+        <span class="overflow-label">{value}</span>
+      {:else}
+        <span class="dark-color"><Label label={placeholder} /></span>
+      {/if}
+    </svelte:fragment>
+  </Button>
 {:else if readonly}
   {#if value}
     <span class="overflow-label">{value}</span>
@@ -64,22 +72,3 @@
 {:else}
   <EditBox {placeholder} bind:value {focus} on:change={_onchange} />
 {/if}
-
-<style lang="scss">
-  .link-container {
-    display: flex;
-    align-items: center;
-    padding: 0 0.875rem;
-    width: 100%;
-    height: 2rem;
-    border: 1px solid transparent;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    color: var(--caption-color);
-
-    &:hover {
-      background-color: var(--body-color);
-      border-color: var(--divider-color);
-    }
-  }
-</style>