UBER-538: update ListView layout. Subissues, related issues. (#3467)

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

plugins/task-resources/src/components/state/StateEditor.svelte

@@ -29,6 +29,7 @@
   export let size: ButtonSize = 'small'
   export let width: string = 'min-content'
   export let justify: 'left' | 'center' = 'center'
+  export let shouldShowName: boolean = true
 
   let state: State
   let opened: boolean = false
@@ -56,12 +57,16 @@
   }
 </script>
 
-<Button {kind} {size} {width} {justify} on:click={handleClick}>
-  <svelte:fragment slot="content">
-    {#if state}
-      <div class="pointer-events-none clear-mins">
-        <StatePresenter value={state} />
-      </div>
-    {/if}
-  </svelte:fragment>
-</Button>
+{#if kind === 'list' || kind === 'list-header'}
+  <StatePresenter value={state} {shouldShowName} shouldShowTooltip on:click={handleClick} />
+{:else}
+  <Button {kind} {size} {width} {justify} on:click={handleClick}>
+    <svelte:fragment slot="content">
+      {#if state}
+        <div class="pointer-events-none clear-mins">
+          <StatePresenter value={state} {shouldShowName} />
+        </div>
+      {/if}
+    </svelte:fragment>
+  </Button>
+{/if}

plugins/task-resources/src/components/state/StatePresenter.svelte

@@ -29,6 +29,8 @@
   export let inline: boolean = false
   export let disabled: boolean = false
   export let oneLine: boolean = false
+  export let shouldShowName: boolean = true
+  export let shouldShowTooltip: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -43,22 +45,26 @@
 </script>
 
 {#if value}
-  <div class="flex-presenter" class:inline-presenter={inline}>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class="flex-presenter" class:inline-presenter={inline} on:click>
     {#if shouldShowAvatar}
       <div
         class="state-container"
         class:inline
+        class:mr-2={shouldShowName}
         style="background-color: {color?.color ?? defaultBackground($themeStore.dark)}"
+        title={shouldShowTooltip ? value.name : undefined}
       />
     {/if}
-    <span class="overflow-label label" class:nowrap={oneLine} class:no-underline={disabled}>{value.name}</span>
+    {#if shouldShowName}
+      <span class="overflow-label label" class:nowrap={oneLine} class:no-underline={disabled}>{value.name}</span>
+    {/if}
   </div>
 {/if}
 
 <style lang="scss">
   .state-container {
     flex-shrink: 0;
-    margin-right: 0.5rem;
     width: 0.875rem;
     height: 0.875rem;
     border: 1px solid rgba(0, 0, 0, 0.1);

plugins/task-resources/src/components/state/StateRefPresenter.svelte

@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import { Ref, Status, StatusValue } from '@hcengineering/core'
-  import type { ButtonSize } from '@hcengineering/ui'
+  import type { ButtonKind, ButtonSize } from '@hcengineering/ui'
   import { State } from '@hcengineering/task'
   import { statusStore } from '@hcengineering/view-resources'
   import StateEditor from './StateEditor.svelte'
@@ -23,14 +23,17 @@
 
   export let value: Ref<State> | StatusValue
   export let onChange: ((value: Ref<State>) => void) | undefined = undefined
+  export let kind: ButtonKind = 'link'
   export let size: ButtonSize = 'medium'
+  export let shouldShowName: boolean = true
+
   $: state = $statusStore.get(typeof value === 'string' ? value : (value?.values?.[0]?._id as Ref<Status>))
 </script>
 
 {#if value}
   {#if onChange !== undefined && state !== undefined}
-    <StateEditor value={state._id} space={state.space} {onChange} kind="link" {size} />
+    <StateEditor value={state._id} space={state.space} {onChange} {kind} {size} {shouldShowName} />
   {:else}
-    <StatePresenter value={state} on:accent-color />
+    <StatePresenter value={state} {shouldShowName} on:accent-color />
   {/if}
 {/if}

plugins/task-resources/src/components/state/StatesPopup.svelte

@@ -39,6 +39,7 @@
 </script>
 
 <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
+  <div class="menu-space" />
   <div class="scroll">
     <div class="box">
       {#each states as state}
@@ -55,6 +56,7 @@
       {/each}
     </div>
   </div>
+  <div class="menu-space" />
 </div>
 
 <style lang="scss">