Fix popups. Increased image size of the assignee. (#2117)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-12-23 03:22:19 +03:00 · 2022-06-21 06:53:48 +03:00 · 2022-06-21 06:53:48 +03:00 · f6d931cd34
commit f6d931cd34
parent af0b0f3ec2
15 changed files with 75 additions and 68 deletions
--- a/packages/presentation/src/components/ObjectPopup.svelte
+++ b/packages/presentation/src/components/ObjectPopup.svelte
@ -27,7 +27,7 @@
    showPopup,
    Tooltip
  } from '@anticrm/ui'
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher, afterUpdate } from 'svelte'
  import presentation from '..'
  import { createQuery, getClient } from '../utils'

@ -156,20 +156,23 @@
  function toAny (obj: any): any {
    return obj
  }
+
+  afterUpdate(() => dispatch('changeContent'))
 </script>

 <FocusHandler {manager} />

 <div class="selectPopup" class:plainContainer={!shadows} class:width-40={width === 'large'} on:keydown={onKeydown}>
-  <div class="header flex-row-center flex-bletween p-1">
-    <div class="flex-grow">
-      <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
-    </div>
-
+  <div class="header flex-bletween">
+    <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
    {#if create !== undefined}
-      <Tooltip label={create.label}>
-        <Button focusIndex={2} kind={'transparent'} icon={IconAdd} on:click={onCreate} />
-      </Tooltip>
+      <Button
+        focusIndex={2}
+        kind={'transparent'}
+        icon={IconAdd}
+        showTooltip={{ label: create.label }}
+        on:click={onCreate}
+      />
    {/if}
  </div>
  <div class="scroll">
--- a/packages/presentation/src/components/UserBox.svelte
+++ b/packages/presentation/src/components/UserBox.svelte
@ -26,8 +26,7 @@
    getFocusManager,
    Label,
    showPopup,
-    Tooltip,
-    TooltipAlignment
+    LabelAndProps
  } from '@anticrm/ui'
  import { createEventDispatcher } from 'svelte'
  import presentation from '..'
@ -50,8 +49,8 @@
  export let size: ButtonSize = 'small'
  export let justify: 'left' | 'center' = 'center'
  export let width: string | undefined = undefined
-  export let labelDirection: TooltipAlignment | undefined = undefined
  export let focusIndex = -1
+  export let showTooltip: LabelAndProps | undefined = undefined

  export let create:
    | {
@ -113,29 +112,28 @@

 <div bind:this={container} class="min-w-0" class:w-full={width === '100%'}>
  {#if kind !== 'link'}
-    <Tooltip {label} fill={width === '100%'} direction={labelDirection}>
-      <Button
-        {focusIndex}
-        icon={size === 'x-large' && selected ? undefined : icon}
-        width={width ?? 'min-content'}
-        {size}
-        {kind}
-        {justify}
-        on:click={_click}
-      >
-        <span slot="content" class="overflow-label disabled">
-          {#if selected}
-            {#if size === 'x-large'}
-              <UserInfo value={selected} size={'medium'} {icon} />
-            {:else}
-              {getName(selected)}
-            {/if}
+    <Button
+      {focusIndex}
+      icon={size === 'x-large' && selected ? undefined : icon}
+      width={width ?? 'min-content'}
+      {size}
+      {kind}
+      {justify}
+      {showTooltip}
+      on:click={_click}
+    >
+      <span slot="content" class="overflow-label disabled">
+        {#if selected}
+          {#if size === 'x-large'}
+            <UserInfo value={selected} size={'medium'} {icon} />
          {:else}
-            <Label {label} />
+            {getName(selected)}
          {/if}
-        </span>
-      </Button>
-    </Tooltip>
+        {:else}
+          <Label {label} />
+        {/if}
+      </span>
+    </Button>
  {:else}
    <Button
      {focusIndex}
@ -144,6 +142,7 @@
      {size}
      {kind}
      {justify}
+      {showTooltip}
      on:click={_click}
    >
      <span slot="content" class="overflow-label disabled">
--- a/packages/presentation/src/components/UsersPopup.svelte
+++ b/packages/presentation/src/components/UsersPopup.svelte
@ -13,6 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher, afterUpdate } from 'svelte'
  import { Contact, getFirstName, Person } from '@anticrm/contact'
  import type { Class, Doc, FindOptions, Ref } from '@anticrm/core'
  import type { Asset, IntlString } from '@anticrm/platform'
@ -53,6 +54,10 @@
          }
        }
      : undefined
+
+  const dispatch = createEventDispatcher()
+
+  afterUpdate(() => dispatch('changeContent'))
 </script>

 <ObjectPopup
@ -70,6 +75,7 @@
  create={_create}
  on:update
  on:close
+  on:changeContent={() => dispatch('changeContent')}
 >
  <svelte:fragment slot="item" let:item={person}>
    <div class="flex flex-grow overflow-label">
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@ -123,6 +123,7 @@
    on:fullsize={() => {
      fullSize = !fullSize
    }}
+    on:changeContent={fitPopup}
  />
 </div>
 <div
--- a/packages/ui/src/components/SelectPopup.svelte
+++ b/packages/ui/src/components/SelectPopup.svelte
@ -49,9 +49,7 @@
      {#each value.filter((el) => (el.label ?? el.text ?? '').toLowerCase().includes(search.toLowerCase())) as item}
        <button
          class="menu-item"
-          on:click={() => {
-            dispatch('close', item.id)
-          }}
+          on:click={() => dispatch('close', item.id)}
          on:focus={() => dispatch('update', item)}
          on:mouseover={() => dispatch('update', item)}
        >
--- a/plugins/hr-resources/src/components/DepartmentCard.svelte
+++ b/plugins/hr-resources/src/components/DepartmentCard.svelte
@ -19,7 +19,7 @@
  import CreateDepartment from './CreateDepartment.svelte'
  import DepartmentCard from './DepartmentCard.svelte'
  import hr from '../plugin'
-  import { IconAdd, IconMoreV, Button, eventToHTMLElement, Label, showPopup, ActionIcon, showPanel } from '@anticrm/ui'
+  import { IconAdd, IconMoreV, Button, eventToHTMLElement, Label, showPopup, showPanel } from '@anticrm/ui'
  import contact, { Employee } from '@anticrm/contact'
  import { EmployeePresenter } from '@anticrm/contact-resources'
  import { Menu } from '@anticrm/view-resources'
@ -113,7 +113,7 @@
            onEmployeeEdit={openLeadEditor}
          />
        </div>
-        <ActionIcon icon={IconMoreV} size={'medium'} action={showMenu} />
+        <Button icon={IconMoreV} kind={'transparent'} on:click={showMenu} />
      </div>
    </div>
  </div>
@ -130,10 +130,4 @@
    border: 1px solid var(--theme-zone-border);
    background-color: var(--board-card-bg-color);
  }
-
-  .verticalDivider {
-    width: 1px;
-    margin-left: 0.125rem;
-    background-color: var(--theme-zone-border);
-  }
 </style>
--- a/plugins/hr-resources/src/components/Structure.svelte
+++ b/plugins/hr-resources/src/components/Structure.svelte
@ -75,7 +75,13 @@
      updateResultQuery(search)
    }}
  />
-  <Button label={hr.string.CreateDepartmentLabel} icon={IconAdd} kind={'primary'} on:click={showCreateDialog} />
+  <Button
+    label={hr.string.CreateDepartmentLabel}
+    icon={IconAdd}
+    kind={'primary'}
+    size={'small'}
+    on:click={showCreateDialog}
+  />
 </div>

 <Scroller>
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@ -303,7 +303,6 @@
        value={object}
        size="small"
        kind="no-border"
-        tooltipFill={false}
        on:change={({ detail }) => (currentAssignee = detail)}
      />
      <Component
--- a/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/AssigneeEditor.svelte
@ -18,7 +18,7 @@
  import { AttachedData, Ref } from '@anticrm/core'
  import { getClient, UserBox } from '@anticrm/presentation'
  import { Issue } from '@anticrm/tracker'
-  import { ButtonKind, ButtonSize, Tooltip, TooltipAlignment } from '@anticrm/ui'
+  import { ButtonKind, ButtonSize, TooltipAlignment } from '@anticrm/ui'
  import contact from '@anticrm/contact'
  import tracker from '../../plugin'

@ -26,7 +26,6 @@
  export let size: ButtonSize = 'large'
  export let kind: ButtonKind = 'link'
  export let tooltipAlignment: TooltipAlignment | undefined = undefined
-  export let tooltipFill = true

  const client = getClient()
  const dispatch = createEventDispatcher()
@ -45,19 +44,18 @@
 </script>

 {#if value}
-  <Tooltip label={tracker.string.AssignTo} direction={tooltipAlignment} fill={tooltipFill}>
-    <UserBox
-      _class={contact.class.Employee}
-      label={tracker.string.Assignee}
-      placeholder={tracker.string.Assignee}
-      value={value.assignee}
-      allowDeselect
-      titleDeselect={tracker.string.Unassigned}
-      {size}
-      {kind}
-      width="100%"
-      justify="left"
-      on:change={({ detail }) => handleAssigneeChanged(detail)}
-    />
-  </Tooltip>
+  <UserBox
+    _class={contact.class.Employee}
+    label={tracker.string.Assignee}
+    placeholder={tracker.string.Assignee}
+    value={value.assignee}
+    allowDeselect
+    titleDeselect={tracker.string.Unassigned}
+    {size}
+    {kind}
+    width={'100%'}
+    justify={'left'}
+    showTooltip={{ label: tracker.string.AssignTo, direction: tooltipAlignment }}
+    on:change={({ detail }) => handleAssigneeChanged(detail)}
+  />
 {/if}
--- a/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
@ -97,7 +97,7 @@
    this={presenter.presenter}
    {value}
    {defaultName}
-    avatarSize={'tiny'}
+    avatarSize={'x-small'}
    isInteractive={true}
    shouldShowPlaceholder={true}
    shouldShowName={shouldShowLabel}
--- a/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePreview.svelte
@ -85,7 +85,7 @@
      <StatusEditor value={issue} {statuses} shouldShowLabel kind={'transparent'} />
      <PriorityEditor value={issue} shouldShowLabel />
      {#if issue.assignee}
-        <AssigneeEditor value={issue} tooltipFill={false} />
+        <AssigneeEditor value={issue} />
      {/if}
    </div>
    <IssueStatusActivity {issue} />
--- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
@ -168,7 +168,7 @@
              defaultName={tracker.string.NoAssignee}
              shouldShowPlaceholder={true}
              isInteractive={false}
-              avatarSize={'tiny'}
+              avatarSize={'x-small'}
            />
          {:else if headerComponent}
            <Component
--- a/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
@ -187,7 +187,6 @@
        value={newIssue}
        size="small"
        kind="no-border"
-        tooltipFill={false}
        on:change={({ detail }) => (newIssue.assignee = detail)}
      />
      <Component
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
@ -134,7 +134,7 @@
      {#if issue.dueDate !== null}
        <DueDateEditor value={issue} />
      {/if}
-      <AssigneeEditor value={issue} tooltipFill={false} />
+      <AssigneeEditor value={issue} />
    </div>
  </div>
 {/each}
--- a/plugins/view-resources/src/components/Menu.svelte
+++ b/plugins/view-resources/src/components/Menu.svelte
@ -13,6 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher, afterUpdate } from 'svelte'
  import type { Class, Doc, Ref } from '@anticrm/core'
  import type { Asset } from '@anticrm/platform'
  import { getClient } from '@anticrm/presentation'
@ -26,6 +27,7 @@
  export let mode: ViewContextType | undefined = undefined

  const client = getClient()
+  const dispatch = createEventDispatcher()

  let loaded = 0

@ -40,6 +42,8 @@
    }))
    loaded = 1
  })
+
+  afterUpdate(() => dispatch('changeContent'))
 </script>

 {#if loaded}