Adjust reference input styles (#3816)

Signed-off-by: Anna No <anna.no@xored.com>

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

@@ -17,14 +17,13 @@
   import { getClient } from '@hcengineering/presentation'
   import {
     AnySvelteComponent,
+    Button,
+    ButtonKind,
     EmojiPopup,
-    Icon,
     IconEmoji,
-    Spinner,
     handler,
     registerFocus,
     showPopup,
-    tooltip,
     deviceOptionsStore as deviceInfo,
     checkAdaptiveMatching
   } from '@hcengineering/ui'
@@ -40,18 +39,22 @@
   import RIMention from './icons/RIMention.svelte'
   import Send from './icons/Send.svelte'
 
-  const dispatch = createEventDispatcher()
   export let content: string = ''
+  export let showHeader = false
+  export let showActions = true
   export let showSend = true
   export let iconSend: Asset | AnySvelteComponent | undefined = undefined
   export let labelSend: IntlString | undefined = undefined
+  export let kindSend: ButtonKind = 'ghost'
   export let haveAttachment = false
-  export let withoutTopBorder = false
   export let placeholder: IntlString | undefined = undefined
   export let extraActions: RefAction[] | undefined = undefined
   export let loading: boolean = false
+  export let focusable: boolean = false
 
   const client = getClient()
+  const dispatch = createEventDispatcher()
+  const buttonSize = 'medium'
 
   let textEditor: TextEditor
 
@@ -156,9 +159,13 @@
   })
 </script>
 
-<div class="ref-container">
+<div class="ref-container" class:focusable>
-  <div class="textInput" class:withoutTopBorder>
+  {#if showHeader && $$slots.header}
-    <div class="inputMsg">
+    <div class="header">
+      <slot name="header" />
+    </div>
+  {/if}
+  <div class="text-input">
     <TextEditor
       bind:content
       bind:this={textEditor}
@@ -171,12 +178,12 @@
       }}
       on:blur={() => {
         focused = false
-          dispatch('blur', focused)
+        dispatch('blur')
       }}
       on:focus={() => {
         focused = true
         updateFocus()
-          dispatch('focus', focused)
+        dispatch('focus')
       }}
       extensions={[
         completionPlugin,
@@ -194,157 +201,89 @@
       ]}
     />
   </div>
-    {#if showSend}
+  {#if showActions || showSend}
-      <button
+    <div class="buttons-panel flex-between clear-mins">
-        class="sendButton"
+      {#if showActions}
-        on:click={submit}
+        <div class="buttons-group xsmall-gap">
-        use:tooltip={{ label: labelSend ?? textEditorPlugin.string.Send }}
-        disabled={(isEmpty && !haveAttachment) || loading}
-      >
-        <div class="icon">
-          {#if loading}
-            <div class="pointer-events-none spinner">
-              <Spinner size={'medium'} />
-            </div>
-          {:else}
-            <Icon icon={iconSend ?? Send} size={'medium'} />
-          {/if}
-        </div>
-      </button>
-    {/if}
-  </div>
-  <div class="flex-between clear-mins" style:margin={'.75rem .75rem 0'}>
-    <div class="buttons-group medium-gap">
           {#each actions as a}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <Button
-        <div
+              icon={a.icon}
-          class="icon-button"
+              iconProps={{ size: buttonSize }}
-          use:tooltip={{ label: a.label }}
+              kind="ghost"
+              showTooltip={{ label: a.label }}
+              size={buttonSize}
               on:click={handler(a, (a, evt) => handleAction(a, evt))}
-        >
+            />
-          <Icon icon={a.icon} size={'medium'} />
-        </div>
             {#if a.order % 10 === 1}
               <div class="buttons-divider" />
             {/if}
           {/each}
         </div>
         {#if extraActions && extraActions.length > 0}
-      <div class="buttons-group {shrinkButtons ? 'medium-gap' : 'large-gap'}">
+          <div class="buttons-group {shrinkButtons ? 'xsmall-gap' : 'small-gap'}">
             {#each extraActions as a}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <Button
-          <div
+                disabled={a.disabled}
-            class="icon-button"
+                icon={a.icon}
-            class:disabled={a.disabled}
+                iconProps={{ size: buttonSize }}
-            use:tooltip={{ label: a.label }}
+                kind="ghost"
+                showTooltip={{ label: a.label }}
+                size={buttonSize}
                 on:click={handler(a, (a, evt) => {
                   if (!a.disabled) {
                     handleAction(a, evt)
                   }
                 })}
-          >
+              />
-            <Icon icon={a.icon} size={'medium'} fill={a.fill} />
-          </div>
             {/each}
           </div>
         {/if}
+      {/if}
+
+      {#if showSend}
+        <Button
+          {loading}
+          disabled={(isEmpty && !haveAttachment) || loading}
+          icon={iconSend ?? Send}
+          iconProps={{ size: buttonSize }}
+          kind={kindSend}
+          size={buttonSize}
+          showTooltip={{
+            label: labelSend ?? textEditorPlugin.string.Send
+          }}
+          on:click={submit}
+        />
+      {/if}
     </div>
+  {/if}
 </div>
 
 <style lang="scss">
-  .icon-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 1.25rem;
-    height: 1.25rem;
-    color: var(--theme-darker-color);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--theme-content-color);
-    }
-    &.disabled {
-      color: var(--theme-trans-color);
-      &:hover {
-        color: var(--theme-trans-color);
-        cursor: not-allowed;
-      }
-    }
-  }
   .ref-container {
     display: flex;
     flex-direction: column;
     min-height: 4.5rem;
+    border: 0.0625rem solid var(--theme-refinput-border);
+    border-radius: 0.375rem;
 
-    .textInput {
+    &.focusable {
-      display: flex;
+      &:focus-within {
-      justify-content: space-between;
+        border-color: var(--primary-edit-border-color);
-      align-items: flex-end;
+      }
+    }
+  }
+
+  .header {
+    padding: 0.325rem 0.75rem;
+    border-bottom: 0.0625rem solid var(--theme-refinput-border);
+  }
+
+  .text-input {
     min-height: 2.75rem;
-      padding: 0.75rem 1rem;
+    padding: 0.625rem 0.75rem;
-      background-color: var(--theme-refinput-color);
-      border: 1px solid var(--theme-refinput-border);
-      border-radius: 0.25rem;
-
-      &.withoutTopBorder {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
   }
 
-      .inputMsg {
+  .buttons-panel {
-        display: flex;
+    padding: 0.325rem 0.75rem;
-        align-self: center;
-        align-items: center;
-        width: calc(100% - 1.75rem);
-        height: 100%;
-        color: var(--theme-content-color);
-        background-color: transparent;
-        border: none;
-        outline: none;
-      }
-      .sendButton {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-shrink: 0;
-        margin-left: 0.5rem;
-        padding: 0;
-        width: 1.25rem;
-        height: 1.25rem;
-        background-color: transparent;
-        border: 1px solid transparent;
-        border-radius: 0.25rem;
-        outline: none;
-        cursor: pointer;
-
-        .icon {
-          width: 1.25rem;
-          height: 1.25rem;
-          color: var(--theme-content-color);
-          cursor: pointer;
-
-          &:hover {
-            color: var(--theme-caption-color);
-          }
-        }
-        &:focus {
-          box-shadow: 0 0 0 2px var(--accented-button-outline);
-
-          & > .icon {
-            color: var(--theme-caption-color);
-          }
-        }
-
-        &:disabled {
-          pointer-events: none;
-
-          .icon {
-            color: var(--theme-trans-color);
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
   }
 </style>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { IntlString } from '@hcengineering/platform'
-  import { IconSize, Label } from '@hcengineering/ui'
+  import { ButtonSize, Label } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import textEditorPlugin from '../plugin'
   import StyledTextEditor from './StyledTextEditor.svelte'
@@ -10,7 +10,7 @@
   export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
 
   export let showButtons = true
-  export let buttonSize: IconSize = 'small'
+  export let buttonSize: ButtonSize = 'small'
   export let focus = false
   export let kind: 'normal' | 'emphasized' | 'indented' = 'normal'
   export let isScrollable: boolean = false

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

@@ -3,6 +3,7 @@
   import presentation, { MessageViewer } from '@hcengineering/presentation'
   import {
     ActionIcon,
+    ButtonSize,
     IconCheck,
     IconClose,
     IconEdit,
@@ -33,7 +34,7 @@
   export let alwaysEdit: boolean = false
   export let showButtons: boolean = true
   export let hideAttachments: boolean = false
-  export let buttonSize: IconSize = 'medium'
+  export let buttonSize: ButtonSize = 'medium'
   export let formatButtonSize: IconSize = 'small'
   export let hideExtraButtons: boolean = false
   export let maxHeight: 'max' | 'card' | 'limited' | string = 'max'

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

@@ -13,17 +13,26 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { AnyExtension, mergeAttributes } from '@tiptap/core'
+  import { Node as ProseMirrorNode } from '@tiptap/pm/model'
   import { Asset, getResource, IntlString } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
-  import { AnySvelteComponent, EmojiPopup, IconEmoji, IconSize, Scroller, showPopup } from '@hcengineering/ui'
+  import {
-  import { createEventDispatcher } from 'svelte'
+    AnySvelteComponent,
+    Button,
+    ButtonSize,
+    EmojiPopup,
+    IconEmoji,
+    IconSize,
+    Scroller,
+    showPopup
+  } from '@hcengineering/ui'
+
   import textEditorPlugin from '../plugin'
   import { RefInputAction, RefInputActionItem, TextEditorHandler, TextFormatCategory } from '../types'
   import Attach from './icons/Attach.svelte'
-  import { AnyExtension, mergeAttributes } from '@tiptap/core'
-  import StyleButton from './StyleButton.svelte'
   import TextEditor from './TextEditor.svelte'
-  import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 
   const dispatch = createEventDispatcher()
 
@@ -31,7 +40,7 @@
   export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
   export let showButtons: boolean = true
   export let hideAttachments: boolean = false
-  export let buttonSize: IconSize = 'medium'
+  export let buttonSize: ButtonSize = 'medium'
   export let formatButtonSize: IconSize = 'small'
   export let isScrollable: boolean = true
   export let focusable: boolean = false
@@ -173,7 +182,7 @@
   const buttonsGap = 'small-gap'
 
   $: buttonsHeight =
-    buttonSize === 'large' || buttonSize === 'x-large' || buttonSize === 'full'
+    buttonSize === 'large' || buttonSize === 'x-large'
       ? 'h-6 max-h-6'
       : buttonSize === 'medium'
         ? 'h-5 max-h-5'
@@ -191,10 +200,11 @@
 <div
   class="ref-container clear-mins"
   class:h-full={full}
+  class:focusable
   tabindex="-1"
   on:click|preventDefault|stopPropagation={() => (needFocus = true)}
 >
-  <div class="textInput" class:focusable>
+  <div class="textInput">
     <div
       bind:clientHeight={contentHeight}
       class="inputMsg"
@@ -247,7 +257,14 @@
     <div class="flex-between">
       <div class="buttons-group {buttonsGap} mt-3">
         {#each actions.filter((it) => it.hidden !== true) as a}
-          <StyleButton icon={a.icon} size={buttonSize} on:click={(evt) => handleAction(a, evt)} />
+          <Button
+            icon={a.icon}
+            iconProps={{ size: buttonSize }}
+            kind="ghost"
+            showTooltip={{ label: a.label }}
+            size={buttonSize}
+            on:click={(evt) => handleAction(a, evt)}
+          />
           {#if a.order % 10 === 1}
             <div class="buttons-divider {buttonsHeight}" />
           {/if}
@@ -268,7 +285,6 @@
     flex-grow: 1;
     display: flex;
     flex-direction: column;
-    min-height: 1.25rem;
 
     .textInput {
       flex-grow: 1;
@@ -282,7 +298,6 @@
         align-self: stretch;
         width: 100%;
         min-height: 0;
-        color: var(--theme-caption-color);
         background-color: transparent;
 
         &.scrollable {
@@ -300,17 +315,17 @@
           }
         }
       }
+    }
 
     &.focusable {
+      border: 0.0625rem solid transparent;
+      border-radius: 0.375rem;
       margin: -0.25rem -0.5rem;
       padding: 0.25rem 0.5rem;
-        border: 1px solid transparent;
-        border-radius: 0.25rem;
 
       &:focus-within {
         border-color: var(--primary-edit-border-color);
       }
     }
   }
-  }
 </style>

packages/text-editor/src/components/icons/Send.svelte

@@ -3,8 +3,12 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+<svg class="svg-{size}" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="Send">
     <path
-    d="M18,2.8C18,2.8,18,2.8,18,2.8c0-0.1-0.1-0.2-0.1-0.3c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0-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,0l-14.8,5C2.4,7.5,2.2,7.7,2.2,7.9c0,0.2,0.1,0.4,0.3,0.5l6.3,3.4l4.6,6.1c0.1,0.1,0.2,0.2,0.4,0.2c0,0,0.1,0,0.1,0c0.2,0,0.3-0.2,0.4-0.4L18,3c0,0,0,0,0,0C18,2.9,18,2.9,18,2.8z M15.6,4.1L9,10.7L4,8L15.6,4.1z M13.5,16.4l-3.8-5l6.8-6.8L13.5,16.4z"
+      id="Vector"
+      d="M17.1564 9.44394L3.40636 2.56894C3.29859 2.51504 3.17754 2.49345 3.05778 2.50675C2.93803 2.52006 2.82467 2.5677 2.73136 2.64394C2.64225 2.71862 2.57574 2.81668 2.5393 2.92709C2.50287 3.0375 2.49795 3.15589 2.52511 3.26894L4.37511 10.0002L2.50011 16.7127C2.47463 16.8071 2.47165 16.9062 2.49143 17.0019C2.5112 17.0977 2.55317 17.1875 2.61396 17.2641C2.67475 17.3407 2.75267 17.402 2.84144 17.443C2.93022 17.484 3.02738 17.5036 3.12511 17.5002C3.22295 17.4996 3.31928 17.476 3.40636 17.4314L17.1564 10.5564C17.2587 10.504 17.3447 10.4243 17.4046 10.3262C17.4646 10.228 17.4964 10.1152 17.4964 10.0002C17.4964 9.88516 17.4646 9.77236 17.4046 9.67421C17.3447 9.57607 17.2587 9.49639 17.1564 9.44394ZM4.09386 15.6939L5.47511 10.6252H10.6251C10.9703 10.6252 11.2501 10.3454 11.2501 10.0002C11.2501 9.65501 10.9703 9.37519 10.6251 9.37519H5.47511L4.09386 4.30644L15.4751 10.0002L4.09386 15.6939Z"
+      {fill}
     />
+  </g>
 </svg>

packages/theme/styles/_colors.scss

@@ -87,6 +87,9 @@
 
 /* Dark Theme */
 .theme-dark {
+  --theme-text-primary-color: rgba(255, 255, 255, .8);
+  --theme-text-placeholder-color: rgba(255, 255, 255, .4);
+
   --accented-button-disabled: rgba(255, 255, 255, .12);
   --accented-button-disabled-color: rgba(255, 255, 255, .4);
   --brand-button-disabled: rgba(255, 255, 255, .12);
@@ -112,9 +115,8 @@
   --theme-button-contrast-disabled-color: rgba(0, 0, 0, .5);
   --theme-button-contrast-border: rgba(255, 255, 255, .2);
 
-  --theme-refinput-color: rgba(255, 255, 255, .03);
   --theme-refinput-divider: rgba(255, 255, 255, .07);
-  --theme-refinput-border: rgba(255, 255, 255, .03);
+  --theme-refinput-border: rgba(255, 255, 255, .1);
 
   // Be aware to update defineAlpha() function in colors.ts
   --theme-bg-color: #1A1A28;
@@ -291,6 +293,9 @@
 
 /* Light Theme */
 .theme-light {
+  --theme-text-primary-color: rgba(0, 0, 0, .8);
+  --theme-text-placeholder-color: rgba(0, 0, 0, .4);
+
   --accented-button-disabled: rgba(0, 0, 0, .12);
   --accented-button-disabled-color: rgba(0, 0, 0, .4);
   --brand-button-disabled: rgba(0, 0, 0, .12);
@@ -316,9 +321,8 @@
   --theme-button-contrast-disabled-color: rgba(255, 255, 255, .5);
   --theme-button-contrast-border: rgba(0, 0, 0, .2);
 
-  --theme-refinput-color: rgba(0, 0, 0, .03);
   --theme-refinput-divider: rgba(0, 0, 0, .07);
-  --theme-refinput-border: rgba(0, 0, 0, .03);
+  --theme-refinput-border: rgba(0, 0, 0, .1);
 
   // Be aware to update defineAlpha() function in colors.ts
   --theme-bg-color: #F1F1F4;

packages/theme/styles/_text-editor.scss

@@ -9,7 +9,7 @@
 
 .text-editor-view {
   overflow-y: auto;
-  color: var(--theme-caption-color);
+  color: var(--theme-text-primary-color);
 
   p:not(:last-child) {
     margin-block-end: 1em;
@@ -23,7 +23,7 @@
   p.is-editor-empty:first-child::before {
     content: attr(data-placeholder);
     float: left;
-    color: var(--theme-halfcontent-color);
+    color: var(--theme-text-placeholder-color);
     pointer-events: none;
     height: 0;
   }

plugins/attachment-resources/src/components/AttachmentRefInput.svelte

@@ -276,6 +276,28 @@
     on:dragleave={() => {}}
     on:drop|preventDefault|stopPropagation={fileDrop}
   >
+    <ReferenceInput
+      {focusIndex}
+      bind:this={refInput}
+      {content}
+      {iconSend}
+      {labelSend}
+      {showSend}
+      showHeader={attachments.size > 0 || progress}
+      {loading}
+      on:focus
+      on:blur
+      on:message={onMessage}
+      haveAttachment={attachments.size > 0}
+      on:attach={() => {
+        dispatch('focus')
+        inputFile.click()
+      }}
+      on:update={onUpdate}
+      {placeholder}
+      {extraActions}
+    >
+      <div slot="header">
         {#if attachments.size || progress}
           <div class="flex-row-center list scroll-divider-color">
             {#if progress}
@@ -296,40 +318,16 @@
             {/each}
           </div>
         {/if}
-    <ReferenceInput
+      </div>
-      {focusIndex}
+    </ReferenceInput>
-      bind:this={refInput}
-      {content}
-      {iconSend}
-      {labelSend}
-      {showSend}
-      {loading}
-      on:focus
-      on:blur
-      on:message={onMessage}
-      haveAttachment={attachments.size > 0}
-      withoutTopBorder={attachments.size > 0}
-      on:attach={() => {
-        dispatch('focus')
-        inputFile.click()
-      }}
-      on:update={onUpdate}
-      {placeholder}
-      {extraActions}
-    />
   </div>
 </div>
 
 <style lang="scss">
   .list {
     padding: 0.5rem;
-    color: var(--theme-caption-color);
     overflow-x: auto;
     overflow-y: hidden;
-    background-color: var(--theme-refinput-color);
-    border: 1px solid var(--theme-divider-color);
-    border-radius: 0.5rem 0.5rem 0 0;
-    border-bottom: none;
 
     .item + .item {
       padding-left: 1rem;

plugins/attachment-resources/src/components/AttachmentStyledBox.svelte

@@ -18,7 +18,7 @@
   import { IntlString, setPlatformStatus, unknownError } from '@hcengineering/platform'
   import { createQuery, DraftController, draftsStore, getClient } from '@hcengineering/presentation'
   import { StyledTextBox } from '@hcengineering/text-editor'
-  import { IconSize, updatePopup } from '@hcengineering/ui'
+  import { ButtonSize, IconSize, updatePopup } from '@hcengineering/ui'
   import { createEventDispatcher, onDestroy } from 'svelte'
   import attachment from '../plugin'
   import { deleteFile, uploadFile } from '../utils'
@@ -35,7 +35,7 @@
   export let alwaysEdit = false
   export let showButtons = false
   export let kind: 'normal' | 'emphasized' | 'indented' = 'normal'
-  export let buttonSize: IconSize = 'medium'
+  export let buttonSize: ButtonSize = 'medium'
   export let formatButtonSize: IconSize = 'small'
   export let maxHeight: 'max' | 'card' | 'limited' | string = 'max'
   export let focusable: boolean = false

plugins/chunter-resources/src/components/CommentPopup.svelte

@@ -90,7 +90,7 @@
     <div class="max-w-120 input">
       <CommentInput
         {object}
-        on:focus={(evt) => {
+        on:focus={() => {
           commentMode = true
         }}
       />

tests/sanity/tests/workbench.spec.ts

@@ -43,8 +43,8 @@ test.describe('workbench tests', () => {
 
     await page.click('text=general')
 
-    // Click .textInput
+    // Click .text-input
-    await expect(page.locator('.textInput')).toBeVisible()
+    await expect(page.locator('.text-input')).toBeVisible()
 
     await page.click('[id="app-contact\\:string\\:Contacts"]')
     await page.click('.antiNav-element:has-text("Employee")')