Fixed navigation in ProjectEditor. Updated layout CreateTaskType. UI fixes. (#4457)

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

packages/ui/src/components/internal/Root.svelte

@@ -201,6 +201,7 @@
     flex-direction: column;
     // height: 100vh;
     height: 100%;
+    height: 100dvh;
     // height: var(--app-height);
 
     .antiStatusBar {

plugins/calendar-resources/src/components/DayCalendar.svelte

@@ -1027,7 +1027,7 @@
 
 <style lang="scss">
   .calendar-container {
-    will-change: transform;
+    will-change: scroll-position;
     position: relative;
     display: grid;
 
@@ -1165,7 +1165,7 @@
   .sticky-header {
     position: sticky;
     background-color: var(--theme-comp-header-color);
-    z-index: 10;
+    z-index: 15;
 
     &:not(.head) {
       top: 3.5rem;

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

@@ -126,7 +126,7 @@
     <div class="hulyChip-item font-medium-12">
       <Label label={setting.string.Custom} />
     </div>
-    <ModernEditbox bind:value={name} label={core.string.Name} size={'large'} kind={'ghost'} />
+    <ModernEditbox bind:value={name} label={core.string.Name} size={'large'} kind={'ghost'} autoFocus />
   </div>
   <div class="hulyModal-content__settingsSet">
     <div class="hulyModal-content__settingsSet-line">

plugins/task-resources/src/components/projectTypes/ProjectEditor.svelte

@@ -53,7 +53,7 @@
   import { ContextMenu } from '@hcengineering/view-resources'
   import plugin from '../../plugin'
   import setting from '@hcengineering/setting'
-  import { ClassAttributes, clearSettingsStore } from '@hcengineering/setting-resources'
+  import { ClassAttributes, clearSettingsStore, settingsStore } from '@hcengineering/setting-resources'
   import CreateTaskType from '../taskTypes/CreateTaskType.svelte'
   import TaskTypeEditor from '../taskTypes/TaskTypeEditor.svelte'
   import TaskTypeIcon from '../taskTypes/TaskTypeIcon.svelte'
@@ -161,9 +161,11 @@
         ]
       : [{ label: plugin.string.ProjectType, icon: descriptor?.icon }]
 
+  let scroller: Scroller
   const navigator: {
     id: string
     label: IntlString
+    element?: HTMLElement
   }[] = [
     { id: 'properties', label: setting.string.Properties },
     { id: 'tasktypes', label: setting.string.TaskTypes },
@@ -228,14 +230,21 @@
             <ButtonIcon kind={'tertiary'} icon={IconDescription} size={'small'} inheritColor />
           </div>
         </div>
-        {#each navigator as navItem (navItem.id)}
-          <NavItem type={'type-anchor-link'} label={navItem.label} />
+        {#each navigator as navItem, i (navItem.id)}
+          <NavItem
+            type={'type-anchor-link'}
+            label={navItem.label}
+            on:click={() => {
+              if (i === 0) scroller.scroll(0)
+              else navItem.element?.scrollIntoView()
+            }}
+          />
         {/each}
       </div>
       <Separator name={'typeSettings'} index={0} color={'transparent'} />
     {/if}
     <div class="hulyComponent-content__column content">
-      <Scroller align={'center'} padding={'var(--spacing-3)'} bottomPadding={'var(--spacing-3)'}>
+      <Scroller bind:this={scroller} align={'center'} padding={'var(--spacing-3)'} bottomPadding={'var(--spacing-3)'}>
         <div class="hulyComponent-content gap">
           {#if selectedTaskType === undefined}
             <div class="hulyComponent-content__column-group">
@@ -278,7 +287,7 @@
 
             <ClassAttributes ofClass={descriptor.baseClass} _class={type.targetClass} showHierarchy />
 
-            <div class="hulyTableAttr-container">
+            <div bind:this={navigator[1].element} class="hulyTableAttr-container">
               <div class="hulyTableAttr-header font-medium-12">
                 <IconLayers size={'small'} />
                 <span><Label label={setting.string.TaskTypes} /></span>
@@ -287,7 +296,8 @@
                   icon={IconAdd}
                   size={'small'}
                   on:click={(ev) => {
-                    showPopup(CreateTaskType, { type, descriptor }, 'top')
+                    $settingsStore = { id: 'createTaskType', component: CreateTaskType, props: { type, descriptor } }
+                    // showPopup(CreateTaskType, { type, descriptor }, 'top')
                   }}
                 />
               </div>
@@ -317,9 +327,11 @@
               {/if}
             </div>
 
-            <ComponentExtensions extension={task.extensions.ProjectEditorExtension} props={{ type }} />
+            <div bind:this={navigator[2].element} class="flex-col">
+              <ComponentExtensions extension={task.extensions.ProjectEditorExtension} props={{ type }} />
+            </div>
 
-            <div class="hulyTableAttr-container">
+            <div bind:this={navigator[3].element} class="hulyTableAttr-container">
               <div class="hulyTableAttr-header font-medium-12">
                 <IconFolder size={'small'} />
                 <span><Label label={setting.string.Collections} /></span>

plugins/task-resources/src/components/taskTypes/CreateTaskType.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import core, { Class, ClassifierKind, Data, Ref, RefTo, Status, generateId, toIdMap } from '@hcengineering/core'
   import { Resource, getEmbeddedLabel, getResource } from '@hcengineering/platform'
-  import presentation, { Card, getClient, hasResource } from '@hcengineering/presentation'
+  import presentation, { getClient, hasResource } from '@hcengineering/presentation'
   import {
     ProjectType,
     ProjectTypeDescriptor,
@@ -25,12 +25,11 @@
     createState,
     findStatusAttr
   } from '@hcengineering/task'
-  import { DropdownIntlItem, DropdownLabelsIntl, EditBox, getColorNumberByText } from '@hcengineering/ui'
-  import { createEventDispatcher } from 'svelte'
+  import { DropdownIntlItem, Modal, ModernEditbox, Label, ButtonMenu } from '@hcengineering/ui'
   import task from '../../plugin'
   import TaskTypeKindEditor from './TaskTypeKindEditor.svelte'
+  import { clearSettingsStore } from '@hcengineering/setting-resources'
 
-  const dispatch = createEventDispatcher()
   const client = getClient()
   export let type: ProjectType
   export let descriptor: ProjectTypeDescriptor
@@ -74,12 +73,12 @@
     }
   }
 
-  let taskTypeDescriptor: Ref<TaskTypeDescriptor> = taskTypeDescriptors[0]._id
+  let taskTypeDescriptor: TaskTypeDescriptor = taskTypeDescriptors[0]
 
   async function save (): Promise<void> {
     if (type === undefined) return
 
-    const descr = taskTypeDescriptors.find((it) => it._id === taskTypeDescriptor)
+    const descr = taskTypeDescriptors.find((it) => it._id === taskTypeDescriptor._id)
     if (descr === undefined) return
 
     const ofClass = descr.baseClass
@@ -87,7 +86,7 @@
       kind,
       name,
       ofClass,
-      descriptor: taskTypeDescriptor,
+      descriptor: taskTypeDescriptor._id,
       targetClass,
       statusCategories,
       statuses,
@@ -146,31 +145,55 @@
       await client.update(type, { $push: { tasks: taskTypeId } })
     }
 
-    dispatch('close')
+    clearSettingsStore()
   }
 
-  const descriptorItems: DropdownIntlItem[] = taskTypeDescriptors.map((it) => ({ id: it._id, label: it.name }))
+  const descriptorItems: DropdownIntlItem[] = taskTypeDescriptors.map((it) => ({
+    id: it._id,
+    icon: it.icon,
+    label: it.name
+  }))
 </script>
 
-<Card
+<Modal
   label={task.string.TaskType}
+  type={'type-aside'}
   okAction={save}
   canSave
   okLabel={taskType !== undefined ? presentation.string.Save : presentation.string.Create}
   on:changeContent
-  onCancel={() => dispatch('close')}
+  onCancel={() => {
+    clearSettingsStore()
+  }}
 >
-  <EditBox
-    focusIndex={1}
-    bind:value={name}
-    placeholder={task.string.TaskName}
-    kind={'large-style'}
-    autoFocus
-    fullSize
-  />
-  <div class="p-1 flex-row-center mt-4">
-    <TaskTypeKindEditor bind:kind />
-
-    <DropdownLabelsIntl kind={'regular'} size={'large'} items={descriptorItems} bind:selected={taskTypeDescriptor} />
+  <div class="hulyModal-content__titleGroup">
+    <ModernEditbox bind:value={name} label={task.string.TaskName} size={'large'} kind={'ghost'} autoFocus />
   </div>
-</Card>
+  <div class="hulyModal-content__settingsSet">
+    <div class="hulyModal-content__settingsSet-line">
+      <span class="label">
+        <Label label={task.string.TaskType} />
+      </span>
+      <TaskTypeKindEditor bind:kind />
+    </div>
+    <div class="hulyModal-content__settingsSet-line">
+      <span class="label">
+        <Label label={task.string.Type} />
+      </span>
+      <ButtonMenu
+        selected={taskTypeDescriptor._id}
+        items={descriptorItems}
+        icon={taskTypeDescriptor.icon}
+        label={taskTypeDescriptor.name}
+        kind={'secondary'}
+        size={'large'}
+        on:selected={(evt) => {
+          if (evt.detail != null) {
+            const tt = taskTypeDescriptors.find((tt) => tt._id === evt.detail)
+            if (tt) taskTypeDescriptor = tt
+          }
+        }}
+      />
+    </div>
+  </div>
+</Modal>