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

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

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="header flex-bletween">
-    <div class="flex-grow">
     <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
-    </div>
-
     {#if create !== undefined}
-      <Tooltip label={create.label}>
+      <Button
-        <Button focusIndex={2} kind={'transparent'} icon={IconAdd} on:click={onCreate} />
+        focusIndex={2}
-      </Tooltip>
+        kind={'transparent'}
+        icon={IconAdd}
+        showTooltip={{ label: create.label }}
+        on:click={onCreate}
+      />
     {/if}
   </div>
   <div class="scroll">

packages/presentation/src/components/UserBox.svelte

@@ -26,8 +26,7 @@
     getFocusManager,
     Label,
     showPopup,
-    Tooltip,
+    LabelAndProps
-    TooltipAlignment
   } 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,7 +112,6 @@
 
 <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}
@@ -121,6 +119,7 @@
       {size}
       {kind}
       {justify}
+      {showTooltip}
       on:click={_click}
     >
       <span slot="content" class="overflow-label disabled">
@@ -135,7 +134,6 @@
         {/if}
       </span>
     </Button>
-    </Tooltip>
   {:else}
     <Button
       {focusIndex}
@@ -144,6 +142,7 @@
       {size}
       {kind}
       {justify}
+      {showTooltip}
       on:click={_click}
     >
       <span slot="content" class="overflow-label disabled">

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">

packages/ui/src/components/PopupInstance.svelte

@@ -123,6 +123,7 @@
     on:fullsize={() => {
       fullSize = !fullSize
     }}
+    on:changeContent={fitPopup}
   />
 </div>
 <div

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={() => {
+          on:click={() => dispatch('close', item.id)}
-            dispatch('close', item.id)
-          }}
           on:focus={() => dispatch('update', item)}
           on:mouseover={() => dispatch('update', item)}
         >

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>

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>

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

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,7 +44,6 @@
 </script>
 
 {#if value}
-  <Tooltip label={tracker.string.AssignTo} direction={tooltipAlignment} fill={tooltipFill}>
   <UserBox
     _class={contact.class.Employee}
     label={tracker.string.Assignee}
@@ -55,9 +53,9 @@
     titleDeselect={tracker.string.Unassigned}
     {size}
     {kind}
-      width="100%"
+    width={'100%'}
-      justify="left"
+    justify={'left'}
+    showTooltip={{ label: tracker.string.AssignTo, direction: tooltipAlignment }}
     on:change={({ detail }) => handleAssigneeChanged(detail)}
   />
-  </Tooltip>
 {/if}

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}

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} />

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

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

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}

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}