Fix UI for adding attributes (#1660)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

plugins/view-assets/lang/en.json

@@ -36,6 +36,6 @@
     "Type": "Type",
     "WithTime": "WithTime",
     "CreatingAttribute": "Creating an attribute",
-    "CreatingAttributeConfirm": "Do you want to create an attribute? It will not be possible to change or delete it."
+    "CreatingAttributeConfirm": "Warning: It will not be possible for now to change or delete created attribute."
   }
 }

plugins/view-assets/lang/ru.json

@@ -24,7 +24,7 @@
     "Type": "Тип",
     "WithTime": "Со временем",
     "CreatingAttribute": "Создание атрибута",
-    "CreatingAttributeConfirm": "Вы хотите создать атрибут? Изменить или удалить его будет невозможно",
+    "CreatingAttributeConfirm": "Предупреждение: Изменить или удалить аттрибут в текущей версии невозможно.",
     "MoveLeft": "Переместить влево",
     "MoveRight": "Переместить вправо",
     "MoveUp": "Переместить вверх",

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

@@ -48,7 +48,7 @@
       icon={IconAdd}
       size="small"
       action={() => {
-        showPopup(view.component.CreateAttribute, { _class: objectClass._id }, undefined, () => {
+        showPopup(view.component.CreateAttribute, { _class: objectClass._id }, 'top', () => {
           updateKeys(ignoreKeys)
           dispatch('update')
         })

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

@@ -14,12 +14,12 @@
 -->
 <script lang="ts">
   import core, { AnyAttribute, Class, Data, generateId, IndexKind, PropertyType, Ref, Space, Type } from '@anticrm/core'
-  import presentation, { getClient, MessageBox } from '@anticrm/presentation'
+  import { getEmbeddedLabel } from '@anticrm/platform'
-  import { AnyComponent, EditBox, DropdownLabelsIntl, Label, Component, Button, showPopup } from '@anticrm/ui'
+  import { Card, getClient } from '@anticrm/presentation'
+  import { AnyComponent, Component, DropdownLabelsIntl, EditBox, Label } from '@anticrm/ui'
   import { DropdownIntlItem } from '@anticrm/ui/src/types'
   import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
-  import { getEmbeddedLabel } from '@anticrm/platform'
 
   export let _class: Ref<Class<Space>>
   let name: string
@@ -32,15 +32,7 @@
 
   async function save (): Promise<void> {
     if (type === undefined) return
-    showPopup(
+
-      MessageBox,
-      {
-        label: view.string.CreatingAttribute,
-        message: view.string.CreatingAttributeConfirm
-      },
-      undefined,
-      async (result) => {
-        if (result && type !== undefined) {
     const data: Data<AnyAttribute> = {
       attributeOf: _class,
       name: name + generateId(),
@@ -54,9 +46,6 @@
     await client.createDoc(core.class.Attribute, core.space.Model, data)
     dispatch('close')
   }
-      }
-    )
-  }
 
   function getTypes (): DropdownIntlItem[] {
     const descendants = hierarchy.getDescendants(core.class.Type)
@@ -87,10 +76,19 @@
   }
 </script>
 
-<div class="antiPopup w-60 p-4 flex-col">
+<Card
+  label={view.string.CreatingAttribute}
+  okAction={save}
+  canSave={!(type === undefined || name === undefined || name.trim().length === 0)}
+  on:close={() => {
+    dispatch('close')
+  }}
+>
   <div class="mb-2"><EditBox bind:value={name} placeholder={core.string.Name} maxWidth="13rem" /></div>
-  <div class="flex-between mb-2">
+  <div class="flex-col mb-2">
+    <div class="flex-row-center flex-grow">
       <Label label={view.string.Type} />
+      <div class="ml-4">
         <DropdownLabelsIntl
           label={view.string.Type}
           {items}
@@ -99,7 +97,9 @@
           on:selected={(e) => selectType(e.detail)}
         />
       </div>
+    </div>
     {#if is}
+      <div class="flex mt-4">
         <Component
           {is}
           on:change={(e) => {
@@ -107,18 +107,11 @@
             index = e.detail?.index
           }}
         />
+      </div>
     {/if}
-  <div class="mt-2">
+    <Label label={view.string.CreatingAttributeConfirm} />
-    <Button
-      width="100%"
-      disabled={type === undefined || name === undefined || name.trim().length === 0}
-      label={presentation.string.Create}
-      on:click={() => {
-        save()
-      }}
-    />
-  </div>
   </div>
+</Card>
 
 <style lang="scss">
 </style>

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

@@ -28,8 +28,9 @@
   })
 </script>
 
-<div class="flex-between">
+<div class="flex-row-center">
   <Label label={view.string.WithTime} />
+  <div class="ml-2">
     <BooleanEditor
       bind:value={withTime}
       onChange={(e) => {
@@ -37,3 +38,4 @@
       }}
     />
   </div>
+</div>