UBER-504: fix presenters on ListItem. Add DeviceSizes. (#3463)

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

plugins/view-resources/src/components/list/List.svelte

@@ -38,6 +38,7 @@
   export let disableHeader = false
   export let props: Record<string, any> = {}
   export let selection: number | undefined = undefined
+  export let compactMode: boolean = false
 
   export let documents: Doc[] | undefined = undefined
 
@@ -138,6 +139,7 @@
     {disableHeader}
     {props}
     {listDiv}
+    {compactMode}
     bind:dragItem
     on:select={(evt) => {
       select(0, evt.detail)

plugins/view-resources/src/components/list/ListCategories.svelte

@@ -58,6 +58,7 @@
   export let listDiv: HTMLDivElement
   export let selection: number | undefined = undefined
   export let groupPersistKey: string
+  export let compactMode: boolean = false
 
   $: groupByKey = viewOptions.groupBy[level] ?? noCategory
   let categories: CategoryType[] = []
@@ -310,6 +311,7 @@
     {createItemDialogProps}
     {createItemLabel}
     {viewOptionsConfig}
+    {compactMode}
     on:check
     on:uncheckAll
     on:row-focus

plugins/view-resources/src/components/list/ListCategory.svelte

@@ -66,6 +66,7 @@
   export let listDiv: HTMLDivElement
   export let index: number
   export let groupPersistKey: string
+  export let compactMode: boolean = false
 
   $: lastLevel = level + 1 >= viewOptions.groupBy.length
 
@@ -448,6 +449,7 @@
             on:mouseover={mouseAttractor(() => handleRowFocused(docObject))}
             on:mouseenter={mouseAttractor(() => handleRowFocused(docObject))}
             {props}
+            {compactMode}
             on:on-mount={() => {
               wasLoaded = true
             }}

plugins/view-resources/src/components/list/ListItem.svelte

@@ -16,7 +16,7 @@
   import { AnyAttribute, Doc, getObjectValue } from '@hcengineering/core'
   import notification from '@hcengineering/notification'
   import { getClient, updateAttribute } from '@hcengineering/presentation'
-  import { CheckBox, Component, deviceOptionsStore as deviceInfo, IconCircles, tooltip } from '@hcengineering/ui'
+  import { CheckBox, Component, IconCircles, tooltip } from '@hcengineering/ui'
   import { AttributeModel } from '@hcengineering/view'
   import { createEventDispatcher, onMount } from 'svelte'
   import view from '../../plugin'
@@ -31,6 +31,7 @@
   export let last: boolean = false
   export let lastCat: boolean = false
   export let props: Record<string, any> = {}
+  export let compactMode: boolean = false
 
   export function scroll () {
     elem?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
@@ -48,8 +49,6 @@
     return elem
   }
 
-  $: compactMode = $deviceInfo.twoRows
-
   const client = getClient()
 
   function onChange (value: any, doc: Doc, key: string, attribute: AnyAttribute) {
@@ -64,13 +63,6 @@
     return (value: any) => onChange(value, docObject, attribute.key, attr)
   }
 
-  let noCompressed: number
-  $: if (model) {
-    noCompressed = -1
-    model.forEach((m, i) => {
-      if (m.displayProps?.compression) noCompressed = i
-    })
-  }
   onMount(() => {
     dispatch('on-mount')
   })
@@ -120,32 +112,55 @@
       />
     </div>
   </div>
-  {#each model.filter((p) => !(p.displayProps?.optional === true)) as attributeModel, i}
+  {#each model.filter((p) => !(p.displayProps?.optional === true || p.displayProps?.suffix === true)) as attributeModel, i}
     {@const displayProps = attributeModel.displayProps}
     {#if !groupByKey || displayProps?.excludeByKey !== groupByKey}
       {#if displayProps?.grow}
-        <GrowPresenter />
         {#if !compactMode}
-          {#each model.filter((p) => p.displayProps?.optional === true) as attrModel, j}
+          {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
             <ListPresenter
               {docObject}
               attributeModel={attrModel}
               {props}
-              compression={j !== noCompressed}
               value={getObjectValue(attrModel.key, docObject)}
               onChange={getOnChange(docObject, attrModel)}
             />
           {/each}
         {/if}
+        <GrowPresenter />
+        {#if !compactMode}
+          <div class="optional-bar">
+            {#each model.filter((p) => p.displayProps?.optional === true) as attrModel}
+              <ListPresenter
+                {docObject}
+                attributeModel={attrModel}
+                {props}
+                value={getObjectValue(attrModel.key, docObject)}
+                onChange={getOnChange(docObject, attrModel)}
+              />
+            {/each}
+          </div>
+        {:else}
+          {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
+            <ListPresenter
+              {docObject}
+              attributeModel={attrModel}
+              {props}
+              value={getObjectValue(attrModel.key, docObject)}
+              onChange={getOnChange(docObject, attrModel)}
+              compactMode
+            />
+          {/each}
+        {/if}
       {:else}
         <ListPresenter
           {docObject}
           {attributeModel}
           {props}
-          compression={i !== noCompressed}
           value={getObjectValue(attributeModel.key, docObject)}
           onChange={getOnChange(docObject, attributeModel)}
           hideDivider={i === 0}
+          {compactMode}
         />
       {/if}
     {/if}
@@ -164,7 +179,7 @@
         <IconCircles />
       </div>
       <div class="scroll-box gap-2">
-        {#each model.filter((m) => m.displayProps?.optional || m.displayProps?.compression) as attributeModel, j}
+        {#each model.filter((m) => m.displayProps?.optional) as attributeModel, j}
           {@const displayProps = attributeModel.displayProps}
           {@const value = getObjectValue(attributeModel.key, docObject)}
           {#if displayProps?.excludeByKey !== groupByKey && value !== undefined}

plugins/view-resources/src/components/list/ListPresenter.svelte

@@ -25,6 +25,7 @@
   export let props: Record<string, any>
   export let compression: boolean = false
   export let hideDivider: boolean = false
+  export let compactMode: boolean = false
 
   $: dp = attributeModel?.displayProps
 
@@ -47,6 +48,7 @@
       {value}
       {onChange}
       kind={'list'}
+      {compactMode}
       {...joinProps(attributeModel, docObject, props)}
     />
   </FixedColumn>
@@ -56,7 +58,7 @@
     {value}
     {onChange}
     kind={'list'}
-    compression={dp?.compression && compression}
+    {compactMode}
     {...joinProps(attributeModel, docObject, props)}
   />
 {/if}

plugins/view-resources/src/components/list/ListView.svelte

@@ -24,6 +24,7 @@
   let list: List
   let scroll: Scroller
   let divScroll: HTMLDivElement
+  let listWidth: number
 
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
     if (dir === 'vertical') {
@@ -43,7 +44,7 @@
   }}
 />
 
-<div class="w-full h-full py-4 clear-mins">
+<div bind:clientWidth={listWidth} class="w-full h-full py-4 clear-mins">
   <Scroller
     bind:this={scroll}
     bind:divScroll
@@ -64,6 +65,7 @@
       {createItemLabel}
       {viewOptions}
       {props}
+      compactMode={listWidth <= 800}
       viewOptionsConfig={viewlet.viewOptions?.other}
       selectedObjectIds={$selectionStore ?? []}
       selection={listProvider.current($focusStore)}