Cleaning the Editbox (#5012)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com> Signed-off-by: Alex Velichko <alex@hardcoreeng.com> Co-authored-by: Alex Velichko <alex@hardcoreeng.com>
2024-12-22 11:01:54 +03:00 · 2024-03-19 18:38:32 +03:00 · 2024-03-19 18:38:32 +03:00 · 23a3c8e94f
commit 23a3c8e94f
parent 5b1fd6a9b7
13 changed files with 60 additions and 121 deletions
--- a/packages/theme/styles/editors.scss
+++ b/packages/theme/styles/editors.scss
@ -27,14 +27,20 @@
      &:focus { box-shadow: 0 0 0 1px var(--theme-editbox-focus-border); }
    }
  }
-  .focusable:not(.default, .default-large, .ghost, .ghost-large, .modern-ghost-large) {
-    margin: 0 -0.75rem;
-    padding: 0.625rem 0.75rem;
-    width: calc(100% + 1.5rem);
-    border-radius: 0.25rem;
-    transition: border-color 0.15s ease-in-out;
+  .focusable:not(.underline, .default, .default-large, .ghost, .ghost-large, .modern-ghost-large) {
+    position: relative;
+    padding: 0.625rem 0;

-    &:focus-within { box-shadow: 0 0 0 1px var(--theme-editbox-focus-border); }
+    &::after {
+      position: absolute;
+      top: 0;
+      left: -0.75rem;
+      width: calc(100% + 1.5rem);
+      height: 100%;
+      border: 1px solid var(--theme-editbox-focus-border);
+      border-radius: 0.25rem;
+    }
+    &:focus-within::after { content: ''; }
  }

  input {
@ -128,4 +134,9 @@
      }
    }
  }
+
+  .required::after {
+    content: ' *';
+    color: var(--theme-error-color);
+  }
 }
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@ -13,21 +13,18 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { Asset, IntlString } from '@hcengineering/platform'
+  import type { IntlString } from '@hcengineering/platform'
  import { translate } from '@hcengineering/platform'
-  import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
+  import { createEventDispatcher, onMount } from 'svelte'
  import { registerFocus } from '../focus'
  import plugin from '../plugin'
-  import type { AnySvelteComponent, EditStyle } from '../types'
-  import Icon from './Icon.svelte'
+  import type { EditStyle } from '../types'
  import Label from './Label.svelte'
-  import { resizeObserver } from '../resize'
  import { floorFractionDigits } from '../utils'
  import { themeStore } from '@hcengineering/theme'

  export let label: IntlString | undefined = undefined
-  export let icon: Asset | AnySvelteComponent | undefined = undefined
-  export let maxWidth: string | undefined = undefined
+  export let maxWidth: string = '100%'
  export let value: string | number | undefined = undefined
  export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
  export let placeholderParam: any | undefined = undefined
@ -45,11 +42,8 @@

  const dispatch = createEventDispatcher()

-  let text: HTMLElement
  let input: HTMLInputElement
-  let style: string
  let phTraslate: string = ''
-  let parentWidth: number | undefined

  $: {
    if (
@ -61,38 +55,11 @@
      value = floorFractionDigits(Number(value), maxDigitsAfterPoint)
    }
  }
-  $: style = `max-width: ${
-    maxWidth || (parentWidth ? (icon ? `calc(${parentWidth}px - 1.25rem)` : `${parentWidth}px`) : 'max-content')
-  };`
  $: void translate(placeholder, placeholderParam ?? {}, $themeStore.language).then((res) => {
    phTraslate = res
  })

-  function computeSize (t: HTMLInputElement | EventTarget | null): void {
-    if (t == null) {
-      return
-    }
-    const target = t as HTMLInputElement
-    const value = target.value
-    text.innerHTML = (value === '' ? phTraslate : value)
-      .replaceAll(' ', '&nbsp;')
-      .replaceAll('<', '&lt;')
-      .replaceAll('>', '&gt;')
-    if (format === 'number') {
-      target.style.width = maxWidth ?? '5rem'
-    } else if (kind === 'underline') {
-      target.style.width = `calc(${text.clientWidth}px + 1.125rem)`
-    } else {
-      target.style.width = Math.max(text.clientWidth, 50) + 'px'
-    }
-  }
-
-  function handleInput (ev: Event): void {
-    const t: HTMLInputElement | EventTarget | null = ev.target
-    if (t !== null && t !== undefined) {
-      computeSize(t)
-    }
-
+  function handleInput (): void {
    dispatch('input')
    dispatch('value', value)
  }
@ -106,11 +73,6 @@
      input.select()
      select = false
    }
-    computeSize(input)
-  })
-
-  afterUpdate(() => {
-    computeSize(input)
  })

  export function focusInput (): void {
@ -148,6 +110,7 @@
  class:flex-grow={fullSize}
  class:w-full={focusable || fullSize}
  class:uppercase
+  style:width={maxWidth}
  on:click={(event) => {
    if (!propagateClick) {
      event.stopPropagation()
@ -155,33 +118,29 @@

    input.focus()
  }}
-  use:resizeObserver={(element) => {
-    parentWidth = element.parentElement?.getBoundingClientRect().width
-  }}
 >
  <!-- {focusIndex} -->
-  <div class="hidden-text {kind}" bind:this={text} />
  {#if label}
-    <div class="mb-1 text-sm font-medium caption-color select-text">
+    <div class="mb-1 text-sm font-medium caption-color select-text" class:required>
      <Label {label} />
-      {#if required}<span class="error-color">&ast;</span>{/if}
    </div>
  {/if}
-  <div class="{kind} flex-row-center clear-mins" class:focusable class:disabled class:w-full={fullSize}>
-    {#if icon}
-      <div class="dark-color mr-1">
-        <Icon {icon} size={'small'} />
-      </div>
-    {/if}
+  <div
+    class="{kind} flex-row-center clear-mins"
+    class:focusable
+    class:disabled
+    class:w-full={fullSize}
+    style:width={maxWidth}
+  >
    {#if format === 'password'}
      <input
        {disabled}
+        style:width={maxWidth}
        id="userPassword"
        bind:this={input}
        type="Password"
        bind:value
        placeholder={phTraslate}
-        {style}
        on:input={handleInput}
        on:change
        on:keydown
@ -193,12 +152,12 @@
    {:else if format === 'number'}
      <input
        {disabled}
+        style:width={maxWidth}
        bind:this={input}
        type="number"
        class="number"
        bind:value
        placeholder={phTraslate}
-        {style}
        on:input={handleInput}
        on:change
        on:keydown
@ -210,11 +169,11 @@
    {:else}
      <input
        {disabled}
+        style:width={maxWidth}
        bind:this={input}
        type="text"
        bind:value
        placeholder={phTraslate}
-        {style}
        on:input={handleInput}
        on:change
        on:keydown
--- a/plugins/board-resources/src/components/CreateBoard.svelte
+++ b/plugins/board-resources/src/components/CreateBoard.svelte
@ -17,7 +17,7 @@
  import { Ref } from '@hcengineering/core'
  import { getClient, SpaceCreateCard } from '@hcengineering/presentation'
  import task, { ProjectType } from '@hcengineering/task'
-  import { Component, EditBox, Grid, IconFolder } from '@hcengineering/ui'
+  import { Component, EditBox, Grid } from '@hcengineering/ui'
  import { createEventDispatcher } from 'svelte'
  import board from '../plugin'
  import { createBoard } from '../utils/BoardUtils'
@ -51,13 +51,7 @@
  }}
 >
  <Grid column={1} rowGap={1.5}>
-    <EditBox
-      label={board.string.BoardName}
-      icon={IconFolder}
-      bind:value={name}
-      placeholder={board.string.Board}
-      autoFocus
-    />
+    <EditBox label={board.string.BoardName} bind:value={name} placeholder={board.string.Board} autoFocus />
    <!-- <ToggleWithLabel label={board.string.MakePrivate} description={board.string.MakePrivateDescription} /> -->

    <Component
--- a/plugins/board-resources/src/components/CreateCard.svelte
+++ b/plugins/board-resources/src/components/CreateCard.svelte
@ -110,12 +110,6 @@
  </svelte:fragment>
  <StatusControl slot="error" {status} />
  <Grid column={1} rowGap={1.5}>
-    <EditBox
-      label={board.string.CardName}
-      bind:value={title}
-      icon={board.icon.Card}
-      placeholder={board.string.CardPlaceholder}
-      autoFocus
-    />
+    <EditBox label={board.string.CardName} bind:value={title} placeholder={board.string.CardPlaceholder} autoFocus />
  </Grid>
 </Card>
--- a/plugins/chunter-resources/src/components/ConvertDmToPrivateChannel.svelte
+++ b/plugins/chunter-resources/src/components/ConvertDmToPrivateChannel.svelte
@ -19,7 +19,7 @@
  import { DirectMessage } from '@hcengineering/chunter'
  import workbench from '@hcengineering/workbench'
  import { getResource } from '@hcengineering/platform'
-  import { EditBox, IconFolder } from '@hcengineering/ui'
+  import { EditBox } from '@hcengineering/ui'

  import chunter from '../plugin'

@ -63,7 +63,6 @@
 >
  <EditBox
    label={chunter.string.ChannelName}
-    icon={IconFolder}
    bind:value={name}
    placeholder={chunter.string.ChannelNamePlaceholder}
    autoFocus
--- a/plugins/hr-resources/src/components/sidebar/Sidebar.svelte
+++ b/plugins/hr-resources/src/components/sidebar/Sidebar.svelte
@ -15,7 +15,7 @@
 <script lang="ts">
  import { Ref } from '@hcengineering/core'
  import { Department } from '@hcengineering/hr'
-  import { Scroller, Separator } from '@hcengineering/ui'
+  import { Scroller, Separator, EditBox } from '@hcengineering/ui'
  import { TreeNode } from '@hcengineering/view-resources'
  import { NavFooter, NavHeader } from '@hcengineering/workbench-resources'

--- a/plugins/lead-resources/src/components/CreateFunnel.svelte
+++ b/plugins/lead-resources/src/components/CreateFunnel.svelte
@ -19,7 +19,7 @@
  import { Funnel } from '@hcengineering/lead'
  import presentation, { getClient, SpaceCreateCard } from '@hcengineering/presentation'
  import task, { ProjectType } from '@hcengineering/task'
-  import ui, { Component, EditBox, Grid, IconFolder, Label, ToggleWithLabel } from '@hcengineering/ui'
+  import ui, { Component, EditBox, Grid, Label, ToggleWithLabel } from '@hcengineering/ui'
  import { createEventDispatcher } from 'svelte'
  import lead from '../plugin'

@ -73,13 +73,7 @@
  }}
 >
  <Grid column={1} rowGap={1.5}>
-    <EditBox
-      label={lead.string.FunnelName}
-      icon={IconFolder}
-      bind:value={name}
-      placeholder={lead.string.FunnelName}
-      autoFocus
-    />
+    <EditBox label={lead.string.FunnelName} bind:value={name} placeholder={lead.string.FunnelName} autoFocus />
    <ToggleWithLabel
      label={presentation.string.MakePrivate}
      description={presentation.string.MakePrivateDescription}
--- a/plugins/recruit-resources/src/components/CreateVacancy.svelte
+++ b/plugins/recruit-resources/src/components/CreateVacancy.svelte
@ -241,20 +241,18 @@
  }}
  on:changeContent
 >
-  {typeType?.name}
+  <span>{typeType?.name}</span>
  <div class="flex-row-center clear-mins">
    <div class="mr-3">
      <Button focusIndex={1} icon={Vacancy} size={'medium'} kind={'link-bordered'} noFocus />
    </div>
-    <div class="clear-mins flex-grow">
-      <EditBox
-        focusIndex={2}
-        bind:value={name}
-        placeholder={recruit.string.VacancyPlaceholder}
-        kind={'large-style'}
-        autoFocus
-      />
-    </div>
+    <EditBox
+      focusIndex={2}
+      bind:value={name}
+      placeholder={recruit.string.VacancyPlaceholder}
+      kind={'large-style'}
+      autoFocus
+    />
  </div>
  {#key appliedTemplateId}
    <AttachmentStyledBox
--- a/plugins/recruit-resources/src/components/EditVacancy.svelte
+++ b/plugins/recruit-resources/src/components/EditVacancy.svelte
@ -141,16 +141,14 @@
      {/if}
    </svelte:fragment>

-    <span class="fs-title flex-grow">
-      <EditBox
-        bind:value={rawName}
-        placeholder={recruit.string.VacancyPlaceholder}
-        kind={'large-style'}
-        focusable
-        autoFocus={!embedded}
-        on:blur={save}
-      />
-    </span>
+    <EditBox
+      bind:value={rawName}
+      placeholder={recruit.string.VacancyPlaceholder}
+      kind={'large-style'}
+      focusable
+      autoFocus={!embedded}
+      on:blur={save}
+    />

    <svelte:fragment slot="pre-utils">
      {#if saved}
--- a/plugins/recruit-resources/src/components/review/EditOpinion.svelte
+++ b/plugins/recruit-resources/src/components/review/EditOpinion.svelte
@ -69,12 +69,6 @@
  okLabel={recruit.string.OpinionSave}
  on:changeContent
 >
-  <EditBox
-    label={recruit.string.OpinionValue}
-    bind:value
-    icon={recruit.icon.Application}
-    placeholder={recruit.string.OpinionValue}
-    autoFocus
-  />
+  <EditBox label={recruit.string.OpinionValue} bind:value placeholder={recruit.string.OpinionValue} autoFocus />
  <StyledTextArea placeholder={recruit.string.Description} bind:content={description} kind={'emphasized'} />
 </Card>
--- a/plugins/templates-resources/src/components/CreateTemplateCategory.svelte
+++ b/plugins/templates-resources/src/components/CreateTemplateCategory.svelte
@ -54,7 +54,6 @@
  <Grid column={1} rowGap={1.5}>
    <EditBox
      label={templates.string.TemplateCategory}
-      icon={IconFolder}
      bind:value={name}
      placeholder={templates.string.TemplateCategory}
      autoFocus
--- a/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte
+++ b/plugins/workbench-resources/src/components/navigator/SpacePanel.svelte
@ -71,7 +71,6 @@
      {#if space}
        <EditBox
          label={clazz.label}
-          icon={clazz.icon}
          bind:value={space.name}
          placeholder={clazz.label}
          autoFocus
--- a/tests/sanity/tests/tracker/tracker.utils.ts
+++ b/tests/sanity/tests/tracker/tracker.utils.ts
@ -178,7 +178,7 @@ export async function checkIssue (page: Page, props: IssueProps): Promise<void>
 }

 export async function checkIssueDraft (page: Page, props: IssueProps): Promise<void> {
-  await expect(page.locator('#issue-name')).toHaveText(props.name)
+  await expect(page.locator('#issue-name input')).toHaveValue(props.name)

  if (props.description !== undefined) {
    await expect(page.locator('#issue-description')).toHaveText(props.description)