UBER-274,-287,-288,-294: fixed tooltip, ActionsPopup, ListHeader, act…

…ivity. (#3282)
hcengineering · May 30, 2023 · 101d766 · 101d766
1 parent 3910f2d
commit 101d766
Show file tree

Hide file tree

Showing 84 changed files with 262 additions and 159 deletions.
diff --git a/packages/presentation/src/components/DocPopup.svelte b/packages/presentation/src/components/DocPopup.svelte
@@ -206,7 +206,7 @@
       icon={IconSearch}
       size={'large'}
       width={'100%'}
-      focus={!$deviceOptionsStore.isMobile}
+      autoFocus={!$deviceOptionsStore.isMobile}
       bind:value={search}
       on:change={() => dispatch('search', search)}
       on:input={() => dispatch('search', search)}

diff --git a/packages/presentation/src/components/IndexedDocumentCompare.svelte b/packages/presentation/src/components/IndexedDocumentCompare.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <Panel on:changeContent on:close>
-  <EditBox focus bind:value={search} kind="search-style" />
+  <EditBox autoFocus bind:value={search} kind="search-style" />
   <div class="indexed-background">
     <div class="indexed-doc text-base max-h-125">
       <div class="flex">

diff --git a/packages/presentation/src/components/IndexedDocumentPreview.svelte b/packages/presentation/src/components/IndexedDocumentPreview.svelte
@@ -25,7 +25,7 @@
 {#if noPanel}
   <div class="p-1 flex-col">
     <Label label={presentation.string.DocumentPreview} />
-    <EditBox focus bind:value={search} kind="search-style" />
+    <EditBox autoFocus bind:value={search} kind="search-style" />
   </div>
   <div class="indexed-background">
     <div class="indexed-doc text-base max-h-125">
@@ -36,7 +36,7 @@
   </div>
 {:else}
   <Panel on:changeContent on:close>
-    <EditBox focus bind:value={search} kind="search-style" />
+    <EditBox autoFocus bind:value={search} kind="search-style" />
     <div class="indexed-background">
       <div class="indexed-doc text-base max-h-125">
         {#if indexDoc}

diff --git a/packages/presentation/src/components/ObjectSearchPopup.svelte b/packages/presentation/src/components/ObjectSearchPopup.svelte
@@ -178,7 +178,7 @@
       {/each}
     </div>
     <EditBox
-      focus={!$deviceOptionsStore.isMobile}
+      autoFocus={!$deviceOptionsStore.isMobile}
       icon={IconSearch}
       kind={'search-style'}
       focusIndex={0}

diff --git a/packages/presentation/src/components/SpacesMultiPopup.svelte b/packages/presentation/src/components/SpacesMultiPopup.svelte
@@ -78,7 +78,7 @@
       icon={IconSearch}
       size={'large'}
       width={'100%'}
-      focus={!$deviceOptionsStore.isMobile}
+      autoFocus={!$deviceOptionsStore.isMobile}
       bind:value={searchQuery}
       {placeholder}
       {placeholderParam}

diff --git a/packages/text-editor/src/components/LinkPopup.svelte b/packages/text-editor/src/components/LinkPopup.svelte
@@ -41,5 +41,5 @@
   }}
   on:changeContent
 >
-  <EditBox placeholder={linkPlaceholder} bind:value={link} focus />
+  <EditBox placeholder={linkPlaceholder} bind:value={link} autoFocus />
 </Card>
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
@@ -197,6 +197,12 @@ input.search {
   display: flex;
   align-items: stretch;
 }
+.flex-row-baseline {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
 .flex-row-center {
   display: flex;
   align-items: center;
@@ -659,6 +665,7 @@ input.search {
 .max-w-40 { max-width: 10rem; }
 .max-w-60 { max-width: 15rem; }
 .max-w-80 { max-width: 20rem; }
+.max-w-120 { max-width: 30rem; }
 .max-w-240 { max-width: 60rem; }
 .max-h-0 { max-height: 0; }
 .max-h-2 { max-height: .5rem; }

diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
@@ -355,6 +355,18 @@
   &.noMargin { margin: 0; }
 }
 
+.antiHSpacer {
+  flex-shrink: 0;
+  width: .25rem;
+
+  &:not(.withMargins) { margin: 0 !important; }
+
+  &.x1-5 { width: .375rem; }
+  &.x2 { width: .5rem; }
+  &.x3 { width: .75rem; }
+  &.x4 { width: 1rem; }
+}
+
 .antiSection {
   display: flex;
   flex-direction: column;

diff --git a/packages/ui/src/components/ColorPopup.svelte b/packages/ui/src/components/ColorPopup.svelte
@@ -75,7 +75,7 @@
         icon={IconSearch}
         size={'large'}
         width={'100%'}
-        focus={!$deviceOptionsStore.isMobile}
+        autoFocus={!$deviceOptionsStore.isMobile}
         bind:value={search}
         {placeholder}
         {placeholderParam}

diff --git a/packages/ui/src/components/Component.svelte b/packages/ui/src/components/Component.svelte
@@ -28,6 +28,7 @@
   export let shrink: boolean = false
   export let showLoading = true
   export let inline: boolean = false
+  export let disabled: boolean = false
 
   $: component = is != null ? getResource(is) : Promise.reject(new Error('is not defined'))
 </script>
@@ -40,11 +41,33 @@
   {:then Ctor}
     <ErrorBoundary>
       {#if $$slots.default !== undefined}
-        <Ctor bind:this={innerRef} {...props} {inline} on:change on:close on:open on:click on:delete on:action>
+        <Ctor
+          bind:this={innerRef}
+          {...props}
+          {inline}
+          {disabled}
+          on:change
+          on:close
+          on:open
+          on:click
+          on:delete
+          on:action
+        >
           <slot />
         </Ctor>
       {:else}
-        <Ctor bind:this={innerRef} {...props} {inline} on:change on:close on:open on:click on:delete on:action />
+        <Ctor
+          bind:this={innerRef}
+          {...props}
+          {inline}
+          {disabled}
+          on:change
+          on:close
+          on:open
+          on:click
+          on:delete
+          on:action
+        />
       {/if}
     </ErrorBoundary>
   {:catch err}

diff --git a/packages/ui/src/components/DropdownLabelsPopup.svelte b/packages/ui/src/components/DropdownLabelsPopup.svelte
@@ -98,7 +98,7 @@
         icon={IconSearch}
         size={'large'}
         width={'100%'}
-        focus={!$deviceOptionsStore.isMobile}
+        autoFocus={!$deviceOptionsStore.isMobile}
         bind:value={search}
         {placeholder}
         {placeholderParam}

diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
@@ -33,7 +33,7 @@
   export let format: 'text' | 'password' | 'number' = 'text'
   export let maxDigitsAfterPoint: number | undefined = undefined
   export let kind: EditStyle = 'editbox'
-  export let focus: boolean = false
+  export let autoFocus: boolean = false
   export let select: boolean = false
   export let focusable: boolean = false
   export let disabled: boolean = false
@@ -87,9 +87,9 @@
   }
 
   onMount(() => {
-    if (focus) {
+    if (autoFocus) {
       input.focus()
-      focus = false
+      autoFocus = false
     }
     if (select) {
       input.select()
@@ -125,7 +125,7 @@
     input.addEventListener('focus', updateFocus, { once: true })
   }
 
-  export function focused (): void {
+  export function focus (): void {
     input.focus()
   }
 </script>

diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte
@@ -27,21 +27,23 @@
   export let value: string | undefined = undefined
   export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
   export let placeholderParam: any | undefined = undefined
-  export let focus: boolean = false
+  export let autoFocus: boolean = false
   export let size: 'small' | 'medium' | 'large' = 'medium'
 
   const dispatch = createEventDispatcher()
   let textHTML: HTMLInputElement
   let phTraslate: string = ''
 
+  export function focus () {
+    textHTML.focus()
+    autoFocus = false
+  }
+
   $: translate(placeholder, placeholderParam ?? {}).then((res) => {
     phTraslate = res
   })
   $: if (textHTML !== undefined) {
-    if (focus) {
-      textHTML.focus()
-      focus = false
-    }
+    if (autoFocus) focus()
   }
 </script>
 

diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte
@@ -130,7 +130,7 @@
         icon={IconSearch}
         size={'large'}
         width={'100%'}
-        focus={!$deviceOptionsStore.isMobile}
+        autoFocus={!$deviceOptionsStore.isMobile}
         bind:value={search}
         {placeholder}
         {placeholderParam}

diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte
@@ -191,6 +191,8 @@
     class:doublePadding={$tooltip.label}
     use:resizeObserver={(element) => {
       clWidth = element.clientWidth
+      if (kind === 'submenu') fitSubmenu()
+      else fitTooltip(tooltipHTML)
     }}
     bind:this={tooltipHTML}
   >

diff --git a/plugins/activity-resources/src/components/TxViewTx.svelte b/plugins/activity-resources/src/components/TxViewTx.svelte
@@ -27,18 +27,20 @@
     <IconAdd size={'x-small'} fill={'var(--theme-trans-color)'} />
   {/if}
   {#if typeof viewlet?.component === 'string'}
-    <Component is={viewlet?.component} props={getProps(ctx, edit)} inline on:close={onCancelEdit} />
+    <Component is={viewlet?.component} props={getProps(ctx, edit)} disabled inline on:close={onCancelEdit} />
   {:else}
-    <svelte:component this={viewlet?.component} {...getProps(ctx, edit)} inline on:close={onCancelEdit} />
+    <svelte:component this={viewlet?.component} {...getProps(ctx, edit)} disabled inline on:close={onCancelEdit} />
   {/if}
+  <div class="antiHSpacer" />
 {/each}
 {#each filterTx([...tx.txes, tx], core.class.TxRemoveDoc) as ctx, i}
   {#if i === 0 && !presentersOnly}
     <IconDelete size={'x-small'} fill={'var(--theme-trans-color)'} />
   {/if}
   {#if typeof viewlet?.component === 'string'}
-    <Component is={viewlet?.component} props={getProps(ctx, edit)} inline on:close={onCancelEdit} />
+    <Component is={viewlet?.component} props={getProps(ctx, edit)} disabled inline on:close={onCancelEdit} />
   {:else}
-    <svelte:component this={viewlet?.component} {...getProps(ctx, edit)} inline on:close={onCancelEdit} />
+    <svelte:component this={viewlet?.component} {...getProps(ctx, edit)} disabled inline on:close={onCancelEdit} />
   {/if}
+  <div class="antiHSpacer" />
 {/each}
diff --git a/plugins/automation-resources/src/components/actions/ContentActionCreate.svelte b/plugins/automation-resources/src/components/actions/ContentActionCreate.svelte
@@ -46,7 +46,7 @@
         {#if typeClass === core.class.TypeString || typeClass === core.class.TypeMarkup}
           <EditBox bind:value />
         {:else if typeClass === core.class.TypeNumber}
-          <NumberEditor value={Number(value)} {onChange} focus={true} placeholder={ui.string.EditBoxPlaceholder} />
+          <NumberEditor value={Number(value)} {onChange} autoFocus placeholder={ui.string.EditBoxPlaceholder} />
         {:else if typeClass === core.class.TypeBoolean}
           <BooleanEditor {value} {onChange} />
         {/if}

diff --git a/plugins/bitrix-resources/src/components/FieldMappingSynchronizer.svelte b/plugins/bitrix-resources/src/components/FieldMappingSynchronizer.svelte
@@ -153,7 +153,7 @@
     <NumberEditor
       kind={'button'}
       value={syncPeriod}
-      focus={false}
+      autoFocus={false}
       placeholder={getEmbeddedLabel('Period')}
       onChange={(val) => {
         if (val) {
@@ -165,7 +165,7 @@
       <NumberEditor
         kind={'button'}
         value={limit}
-        focus={false}
+        autoFocus={false}
         placeholder={getEmbeddedLabel('Limit')}
         onChange={(val) => {
           if (val) {

diff --git a/plugins/board-resources/src/components/CreateBoard.svelte b/plugins/board-resources/src/components/CreateBoard.svelte
@@ -60,7 +60,7 @@
       icon={IconFolder}
       bind:value={name}
       placeholder={board.string.Board}
-      focus
+      autoFocus
     />
     <!-- <ToggleWithLabel label={board.string.MakePrivate} description={board.string.MakePrivateDescription} /> -->
 

diff --git a/plugins/board-resources/src/components/CreateCard.svelte b/plugins/board-resources/src/components/CreateCard.svelte
@@ -89,7 +89,7 @@
       bind:value={title}
       icon={board.icon.Card}
       placeholder={board.string.CardPlaceholder}
-      focus
+      autoFocus
     />
   </Grid>
 </Card>
diff --git a/plugins/board-resources/src/components/EditCard.svelte b/plugins/board-resources/src/components/EditCard.svelte
@@ -146,7 +146,12 @@
         }}
       />
     </svelte:fragment>
-    <EditBox bind:value={object.title} kind={'large-style'} focus on:change={() => change('title', object?.title)} />
+    <EditBox
+      bind:value={object.title}
+      kind={'large-style'}
+      autoFocus
+      on:change={() => change('title', object?.title)}
+    />
     <div class="background-accent-bg-color border-divider-color border-radius-3 p-4 mt-4 w-full">
       <StyledTextBox
         alwaysEdit={true}

diff --git a/plugins/board-resources/src/components/KanbanCard.svelte b/plugins/board-resources/src/components/KanbanCard.svelte
@@ -110,7 +110,7 @@
             <div class="fs-title text-lg">
               <EditBox
                 bind:value={object.title}
-                focus
+                autoFocus
                 on:change={() => updateCard(client, object, 'title', object?.title)}
               />
             </div>
@@ -158,7 +158,7 @@
           <div class="fs-title text-lg">
             <EditBox
               bind:value={object.title}
-              focus
+              autoFocus
               on:change={() => updateCard(client, object, 'title', object?.title)}
             />
           </div>

diff --git a/plugins/board-resources/src/components/popups/AddChecklist.svelte b/plugins/board-resources/src/components/popups/AddChecklist.svelte
@@ -118,7 +118,7 @@
   <div class="flex-col flex-gap-1">
     <Label label={board.string.Title} />
     <div class="p-2 mt-1 mb-1 border-divider-color border-radius-1">
-      <EditBox bind:value={name} focus={true} />
+      <EditBox bind:value={name} autoFocus />
     </div>
   </div>
 

diff --git a/plugins/calendar-resources/src/components/CreateEvent.svelte b/plugins/calendar-resources/src/components/CreateEvent.svelte
@@ -97,7 +97,7 @@
   }}
   on:changeContent
 >
-  <EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} focus />
+  <EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} autoFocus />
   <svelte:fragment slot="pool">
     <DateRangePresenter
       value={startDate}

diff --git a/plugins/calendar-resources/src/components/CreateReminder.svelte b/plugins/calendar-resources/src/components/CreateReminder.svelte
@@ -69,7 +69,7 @@
   }}
   on:changeContent
 >
-  <EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} focus />
+  <EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} autoFocus />
   <svelte:fragment slot="pool">
     <!-- <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" /> -->
     <DateRangePresenter

diff --git a/plugins/chunter-resources/src/components/CommentPopup.svelte b/plugins/chunter-resources/src/components/CommentPopup.svelte
@@ -71,7 +71,7 @@
   {/if}
 </div>
 {#if withInput}
-  <div class="mt-2">
+  <div class="mt-2 max-w-120">
     <CommentInput {object} />
   </div>
 {/if}

diff --git a/plugins/chunter-resources/src/components/ConvertDmToPrivateChannel.svelte b/plugins/chunter-resources/src/components/ConvertDmToPrivateChannel.svelte
@@ -66,6 +66,6 @@
     icon={IconFolder}
     bind:value={name}
     placeholder={chunter.string.ChannelNamePlaceholder}
-    focus
+    autoFocus
   />
 </Card>
diff --git a/plugins/chunter-resources/src/components/CreateChannel.svelte b/plugins/chunter-resources/src/components/CreateChannel.svelte
@@ -62,7 +62,7 @@
       icon={IconFolder}
       bind:value={name}
       placeholder={chunter.string.ChannelNamePlaceholder}
-      focus
+      autoFocus
     />
     <ToggleWithLabel
       label={presentation.string.MakePrivate}