TSK-786. Fixed styles for Attributes (#2814)

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

packages/presentation/src/components/AttributeBarEditor.svelte

@@ -15,7 +15,8 @@
 -->
 <script lang="ts">
   import type { Class, Doc, Ref } from '@hcengineering/core'
-  import { AnySvelteComponent, Label, tooltip } from '@hcengineering/ui'
+  import { Label, tooltip } from '@hcengineering/ui'
+  import type { AnySvelteComponent, ButtonKind, ButtonSize } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import { getAttribute, KeyedAttribute, updateAttribute } from '../attributes'
   import { getAttributeEditor, getClient } from '../utils'
@@ -29,6 +30,11 @@
   export let readonly = false
   export let draft = false
 
+  export let kind: ButtonKind = 'link'
+  export let size: ButtonSize = 'large'
+  export let width: string | undefined = '100%'
+  export let justify: 'left' | 'center' = 'left'
+
   const client = getClient()
   const hierarchy = client.getHierarchy()
   const dispatch = createEventDispatcher()
@@ -56,7 +62,7 @@
     {#if instance}
       {#if showHeader}
         <span
-          class="fs-bold overflow-label"
+          class="overflow-label"
           use:tooltip={{
             component: Label,
             props: { label: attribute.label }
@@ -68,10 +74,10 @@
             readonly={isReadonly}
             label={attribute?.label}
             placeholder={attribute?.label}
-            kind={'link'}
-            size={'large'}
-            width={'100%'}
-            justify={'left'}
+            {kind}
+            {size}
+            {width}
+            {justify}
             type={attribute?.type}
             {maxWidth}
             {attributeKey}

packages/presentation/src/components/AttributesBar.svelte

@@ -15,6 +15,7 @@
 -->
 <script lang="ts">
   import type { Class, Doc, Ref } from '@hcengineering/core'
+  import type { ButtonKind, ButtonSize } from '@hcengineering/ui'
   import { KeyedAttribute } from '../attributes'
   import AttributeBarEditor from './AttributeBarEditor.svelte'
 
@@ -24,6 +25,11 @@
   export let showHeader: boolean = true
   export let readonly = false
   export let draft = false
+
+  export let kind: ButtonKind = 'link'
+  export let size: ButtonSize = 'large'
+  export let width: string | undefined = '100%'
+  export let justify: 'left' | 'center' = 'left'
 </script>
 
 <div class="attributes-bar-container vertical">
@@ -34,14 +40,12 @@
 
 <style lang="scss">
   .attributes-bar-container {
-    flex-shrink: 0;
     display: grid;
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: 1fr 1.5fr;
     grid-auto-flow: row;
-    justify-content: flex-start;
+    justify-content: start;
     align-items: center;
-    gap: 0.5rem;
-    padding-bottom: 0.5rem;
+    gap: 1rem;
     width: 100%;
     height: min-content;
   }

packages/ui/src/components/DropdownLabels.svelte

@@ -90,7 +90,7 @@
       {#if Array.isArray(selectedItem)}
         {#if selectedItem.length > 0}
           {#each selectedItem as seleceted, i}
-            <span class:ml-1={i !== 0}>{seleceted.label}</span>
+            <span class="step-row">{seleceted.label}</span>
           {/each}
         {:else}
           <Label label={label ?? ui.string.NotSelected} />
@@ -103,3 +103,22 @@
     </span>
   </Button>
 </div>
+
+<style lang="scss">
+  .step-row + .step-row {
+    position: relative;
+    margin-left: 0.75rem;
+
+    &::before {
+      position: absolute;
+      content: '';
+      top: 50%;
+      left: -0.5rem;
+      width: 0.25rem;
+      height: 0.25rem;
+      background-color: var(--dark-color);
+      border-radius: 50%;
+      transform: translateY(-50%);
+    }
+  }
+</style>

packages/ui/src/components/calendar/DateRangePresenter.svelte

@@ -319,7 +319,8 @@
   class:editable
   class:edit
   on:click={() => {
-    if (editable && !opened) openPopup()
+    if (editable && !opened && withDate) openPopup()
+    else if (editable && !opened && mode === DateRangeMode.TIME) edit = true
   }}
 >
   {#if edit}

plugins/contact-resources/src/components/EmployeeArrayEditor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Employee } from '@hcengineering/contact'
   import { Ref } from '@hcengineering/core'
+  import type { ButtonKind, ButtonSize } from '@hcengineering/ui'
   import { IntlString } from '@hcengineering/platform'
   import UserBoxList from './UserBoxList.svelte'
 
@@ -9,6 +10,11 @@
   export let onChange: (refs: Ref<Employee>[]) => void
   export let readonly = false
 
+  export let kind: ButtonKind = 'link'
+  export let size: ButtonSize = 'medium'
+  export let width: string | undefined = '100%'
+  export let justify: 'left' | 'center' = 'left'
+
   let timer: any
 
   function onUpdate (evt: CustomEvent<Ref<Employee>[]>): void {
@@ -19,13 +25,4 @@
   }
 </script>
 
-<UserBoxList
-  items={value}
-  {label}
-  on:update={onUpdate}
-  kind={'link'}
-  size={'medium'}
-  justify={'left'}
-  width={'100%'}
-  {readonly}
-/>
+<UserBoxList items={value} {label} on:update={onUpdate} {kind} {size} {justify} {width} {readonly} />

plugins/document-resources/src/components/EditDoc.svelte

@@ -526,9 +526,8 @@
         {readonly}
       />
 
-      <div class="divider" />
-
       <div class="tab-content">
+        <div class="divider" />
         <span class="label labelTop">
           <Label label={document.string.Labels} />
         </span>
@@ -539,7 +538,6 @@
           />
         </div>
         <div class="divider" />
-
         <span class="label">
           <Label label={document.string.LastRevision} />
         </span>
@@ -566,16 +564,17 @@
     margin-top: 1rem;
     width: 100%;
     height: min-content;
+
+    .divider {
+      grid-column: 1 / 3;
+      height: 1px;
+      background-color: var(--divider-color);
+    }
+    .labelTop {
+      align-self: start;
+    }
   }
 
-  .divider {
-    grid-column: 1 / 3;
-    height: 1px;
-    background-color: var(--divider-color);
-  }
-  .labelTop {
-    align-self: start;
-  }
   .emphasized {
     padding: 1rem;
     background-color: var(--body-color);

plugins/setting-assets/lang/en.json

@@ -70,6 +70,10 @@
     "Hidden": "Hidden",
     "Configure": "Configure",
     "InviteSettings": "Workspace invite settings",
-    "DefaultValue": "Default value"
+    "DefaultValue": "Default value",
+    "SelectAValue": "Select a value",
+    "DateOnly": "Date only",
+    "OnlyTime": "Only time",
+    "DateAndTime": "Date and time"
   }
 }

plugins/setting-assets/lang/ru.json

@@ -71,6 +71,10 @@
     "Hidden": "Спрятанный",
     "Configure": "Настроить",
     "InviteSettings": "Настройки приглашений в пространство",
-    "DefaultValue": "Значение по умолчанию"
+    "DefaultValue": "Значение по умолчанию",
+    "SelectAValue": "Выбрать значение",
+    "DateOnly": "Только дата",
+    "OnlyTime": "Только время",
+    "DateAndTime": "Дата и время"
   }
 }

plugins/setting-resources/src/components/EditEnum.svelte

@@ -140,7 +140,7 @@
         message: view.string.DeleteObjectConfirm,
         params: { count: filtered.length }
       },
-      undefined,
+      'top',
       (result?: boolean) => {
         if (result === true) {
           values = values.filter((it) => !filtered.includes(it))
@@ -176,7 +176,7 @@
     <div class="mb-2">
       <EditBox bind:value={name} placeholder={core.string.Name} />
     </div>
-    <div class="flex-between mb-4">
+    <div class="flex-between mb-2">
       <EditBox placeholder={presentation.string.Search} kind="large-style" bind:value={newValue} />
       <div class="flex gap-2">
         <ActionIcon icon={IconAdd} label={presentation.string.Add} action={add} size={'small'} />
@@ -198,7 +198,7 @@
         />
       </div>
     </div>
-    <div class="scroll">
+    <div class="scroll" style:margin={'0 -.5rem'}>
       <div class="box flex max-h-125">
         <EnumValuesList bind:values bind:filtered on:remove={(e) => remove(e.detail)} />
       </div>

plugins/setting-resources/src/components/EnumSetting.svelte

@@ -43,7 +43,7 @@
   })
 
   function create () {
-    showPopup(setting.component.EditEnum, 'top')
+    showPopup(setting.component.EditEnum, {}, 'top')
   }
 
   async function update (value: Enum): Promise<void> {

plugins/setting-resources/src/components/typeEditors/DateTypeEditor.svelte

@@ -15,8 +15,8 @@
 <script lang="ts">
   import { DateRangeMode, TypeDate as DateType } from '@hcengineering/core'
   import { TypeDate } from '@hcengineering/model'
-  import { Dropdown, Label, ListItem } from '@hcengineering/ui'
-  import { StringPresenter } from '@hcengineering/view-resources'
+  import { IntlString } from '@hcengineering/platform'
+  import { DropdownLabelsIntl, Label, DropdownIntlItem } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import setting from '../../plugin'
 
@@ -24,22 +24,23 @@
   export let editable: boolean = true
 
   const dispatch = createEventDispatcher()
-  const items: ListItem[] = [
+  const items: DropdownIntlItem[] = [
     {
-      _id: DateRangeMode.DATE,
-      label: DateRangeMode.DATE
+      id: DateRangeMode.DATE,
+      label: setting.string.DateOnly
     },
     {
-      _id: DateRangeMode.TIME,
-      label: DateRangeMode.TIME
+      id: DateRangeMode.TIME,
+      label: setting.string.OnlyTime
     },
     {
-      _id: DateRangeMode.DATETIME,
-      label: DateRangeMode.DATETIME
+      id: DateRangeMode.DATETIME,
+      label: setting.string.DateAndTime
     }
   ]
 
-  let selected = items.find((item) => item._id === type?.mode)
+  let selected = items.find((item) => item.id === type?.mode)?.id
+  const label = items.find((item) => item.id === type?.mode)?.label ?? ('' as IntlString)
 
   onMount(() => {
     if (type === undefined) {
@@ -52,18 +53,18 @@
   <Label label={setting.string.DateMode} />
   <div class="ml-2">
     {#if editable}
-      <Dropdown
+      <DropdownLabelsIntl
         {selected}
         {items}
         size="medium"
-        placeholder={setting.string.DateMode}
+        label={setting.string.DateMode}
         on:selected={(res) => {
           selected = res.detail
           dispatch('change', { type: TypeDate(res.detail._id) })
         }}
       />
     {:else}
-      <StringPresenter value={selected?.label ?? ''} />
+      <Label {label} />
     {/if}
   </div>
 </div>

plugins/setting-resources/src/components/typeEditors/EnumTypeEditor.svelte

@@ -82,7 +82,9 @@
       <Label label={setting.string.DefaultValue} />
       <div class="ml-2">
         <EnumEditor
-          label={setting.string.DefaultValue}
+          label={setting.string.SelectAValue}
+          kind={'no-border'}
+          size={'small'}
           {type}
           value={defaultValue ?? ''}
           onChange={(e) => {

plugins/setting-resources/src/plugin.ts

@@ -63,6 +63,10 @@ export default mergeIds(settingId, setting, {
     Visibility: '' as IntlString,
     Hidden: '' as IntlString,
     InviteSettings: '' as IntlString,
-    DefaultValue: '' as IntlString
+    DefaultValue: '' as IntlString,
+    SelectAValue: '' as IntlString,
+    DateOnly: '' as IntlString,
+    OnlyTime: '' as IntlString,
+    DateAndTime: '' as IntlString
   }
 })

plugins/view-resources/src/components/ClassAttributeBar.svelte

@@ -75,7 +75,8 @@
     <div class="tool">
       <Button
         icon={setting.icon.Setting}
-        kind={'transparent'}
+        kind={'link'}
+        size={'large'}
         showTooltip={{ label: setting.string.ClassSetting }}
         on:click={(ev) => {
           ev.stopPropagation()

plugins/view-resources/src/components/EnumEditor.svelte

@@ -16,13 +16,15 @@
   import core, { EnumOf } from '@hcengineering/core'
   import type { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
-  import { DropdownLabels, DropdownTextItem } from '@hcengineering/ui'
+  import { DropdownLabels, DropdownTextItem, ButtonKind, ButtonSize } from '@hcengineering/ui'
 
   export let label: IntlString
   export let value: string
   export let type: EnumOf
   // export let focus: boolean
   export let onChange: (value: string) => void
+  export let kind: ButtonKind = 'link'
+  export let size: ButtonSize = 'large'
 
   let items: DropdownTextItem[] = []
 
@@ -49,8 +51,8 @@
   {label}
   useFlexGrow={true}
   justify={'left'}
-  size={'large'}
-  kind={'link'}
+  {size}
+  {kind}
   width={'100%'}
   autoSelect={false}
   on:selected={(e) => {