UBER-64,-231,-229: updated CreateProject and SelectAvatar layouts, fixed bugs (#3253)

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

plugins/tracker-resources/src/components/CreateIssue.svelte

@@ -587,7 +587,6 @@
         alwaysEdit
         showButtons={false}
         kind={'indented'}
-        fakeAttach={'hidden'}
         enableBackReferences={true}
         bind:content={object.description}
         placeholder={tracker.string.IssueDescriptionPlaceholder}
@@ -708,8 +707,7 @@
     <div id="duedate-editor" class="new-line">
       <DatePresenter
         bind:value={object.dueDate}
-        labelNull={tracker.string.NoDueDate}
-        icon={tracker.icon.DueDate}
+        labelNull={tracker.string.DueDate}
         kind={'secondary'}
         size={'large'}
         editable

plugins/tracker-resources/src/components/milestones/MilestoneSelector.svelte

@@ -59,7 +59,7 @@
 
   $: handleSelectedMilestoneIdUpdated(value, rawMilestones)
 
-  $: translate(tracker.string.NoMilestone, {}).then((result) => (defaultMilestoneLabel = result))
+  $: translate(tracker.string.Milestone, {}).then((result) => (defaultMilestoneLabel = result))
   const milestoneIcon = tracker.icon.Milestone
   $: milestoneText = shouldShowLabel ? selectedMilestone?.label ?? defaultMilestoneLabel : undefined
 
@@ -81,7 +81,7 @@
       {
         id: null,
         icon: tracker.icon.Milestone,
-        label: tracker.string.NoMilestone,
+        label: tracker.string.Milestone,
         isSelected: sp === undefined
       },
       ...rawMilestones.map((p) => ({

plugins/tracker-resources/src/components/projects/ChangeIdentity.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <Card
-  label={projects.has(identifier) ? tracker.string.IdentifierExists : tracker.string.Identifier}
+  label={projects.has(identifier) ? tracker.string.IdentifierExists : tracker.string.ProjectIdentifier}
   okLabel={presentation.string.Save}
   okAction={save}
   canSave={identifier !== project.identifier && !projects.has(identifier)}

plugins/tracker-resources/src/components/projects/CreateProject.svelte

@@ -26,7 +26,7 @@
     IconEdit,
     IconWithEmojii,
     Label,
-    ToggleWithLabel,
+    Toggle,
     eventToHTMLElement,
     getColorNumberByText,
     getPlatformColorDef,
@@ -184,92 +184,124 @@
   okLabel={isNew ? presentation.string.Create : presentation.string.Save}
   okAction={handleSave}
   canSave={name.length > 0 && !(members.length === 0 && isPrivate)}
-  gap={'gapV-4'}
+  accentHeader
+  width={'medium'}
+  gap={'gapV-6'}
   on:close={() => {
     dispatch('close')
   }}
   on:changeContent
 >
-  <div class="flex-row-center flex-between">
-    <EditBox
-      bind:value={name}
-      placeholder={tracker.string.ProjectTitlePlaceholder}
-      kind={'large-style'}
-      focus
-      on:input={() => {
-        if (isNew) {
-          identifier = name.toLocaleUpperCase().replaceAll(' ', '_').substring(0, 5)
-        }
-      }}
-    />
-    <div class="flex-row-center">
-      <EditBox
-        bind:value={identifier}
-        disabled={!isNew}
-        placeholder={tracker.string.ProjectIdentifierPlaceholder}
-        kind={'large-style'}
-      />
-      {#if !isNew}
-        <Button size={'small'} icon={IconEdit} on:click={changeIdentity} />
-      {/if}
-    </div>
-  </div>
-  <StyledTextBox
-    alwaysEdit
-    showButtons={false}
-    bind:content={description}
-    placeholder={tracker.string.IssueDescriptionPlaceholder}
-  />
-  <ToggleWithLabel
-    label={presentation.string.MakePrivate}
-    description={presentation.string.MakePrivateDescription}
-    bind:on={isPrivate}
-    disabled={!isPrivate && members.length === 0}
-  />
-  <div class="flex-between">
-    <div class="caption">
-      <Label label={tracker.string.ChooseIcon} />
-    </div>
-    <Button
-      icon={icon === tracker.component.IconWithEmojii ? IconWithEmojii : icon ?? tracker.icon.Home}
-      iconProps={icon === tracker.component.IconWithEmojii
-        ? { icon: color }
-        : {
-            fill:
-              color !== undefined
-                ? getPlatformColorDef(color, $themeStore.dark).icon
-                : getPlatformColorForTextDef(name, $themeStore.dark).icon
+  <div class="antiGrid">
+    <div class="antiGrid-row">
+      <div class="antiGrid-row__header">
+        <Label label={tracker.string.ProjectTitle} />
+      </div>
+      <div class="padding">
+        <EditBox
+          bind:value={name}
+          placeholder={tracker.string.ProjectTitlePlaceholder}
+          kind={'large-style'}
+          focus
+          on:input={() => {
+            if (isNew) {
+              identifier = name.toLocaleUpperCase().replaceAll(' ', '_').substring(0, 5)
+            }
           }}
-      kind="no-border"
-      size="medium"
-      on:click={chooseIcon}
-    />
+        />
+      </div>
+    </div>
+
+    <div class="antiGrid-row">
+      <div class="antiGrid-row__header withDesciption">
+        <Label label={tracker.string.Identifier} />
+        <span><Label label={tracker.string.UsedInIssueIDs} /></span>
+      </div>
+      <div class="padding flex-row-center">
+        <EditBox
+          bind:value={identifier}
+          disabled={!isNew}
+          placeholder={tracker.string.ProjectIdentifierPlaceholder}
+          kind={'large-style'}
+          uppercase
+        />
+        {#if !isNew}
+          <Button size={'small'} icon={IconEdit} on:click={changeIdentity} />
+        {/if}
+      </div>
+    </div>
+
+    <div class="antiGrid-row">
+      <div class="antiGrid-row__header topAlign">
+        <Label label={tracker.string.Description} />
+      </div>
+      <div class="padding clear-mins">
+        <StyledTextBox
+          alwaysEdit
+          showButtons={false}
+          bind:content={description}
+          placeholder={tracker.string.IssueDescriptionPlaceholder}
+        />
+      </div>
+    </div>
   </div>
 
-  <div class="flex-between">
-    <div class="caption">
-      <Label label={tracker.string.Members} />
+  <div class="antiGrid">
+    <div class="antiGrid-row">
+      <div class="antiGrid-row__header">
+        <Label label={tracker.string.ChooseIcon} />
+      </div>
+      <Button
+        icon={icon === tracker.component.IconWithEmojii ? IconWithEmojii : icon ?? tracker.icon.Home}
+        iconProps={icon === tracker.component.IconWithEmojii
+          ? { icon: color }
+          : {
+              fill:
+                color !== undefined
+                  ? getPlatformColorDef(color, $themeStore.dark).icon
+                  : getPlatformColorForTextDef(name, $themeStore.dark).icon
+            }}
+        size={'large'}
+        on:click={chooseIcon}
+      />
     </div>
-    <AccountArrayEditor
-      value={members}
-      label={tracker.string.Members}
-      onChange={(refs) => (members = refs)}
-      kind="link-bordered"
-    />
-  </div>
 
-  <div class="flex-between">
-    <div class="caption">
-      <Label label={tracker.string.DefaultAssignee} />
+    <div class="antiGrid-row">
+      <div class="antiGrid-row__header withDesciption">
+        <Label label={presentation.string.MakePrivate} />
+        <span><Label label={presentation.string.MakePrivateDescription} /></span>
+      </div>
+      <Toggle bind:on={isPrivate} disabled={!isPrivate && members.length === 0} />
+    </div>
+
+    <div class="antiGrid-row">
+      <div class="antiGrid-row__header">
+        <Label label={tracker.string.Members} />
+      </div>
+      <AccountArrayEditor
+        value={members}
+        label={tracker.string.Members}
+        onChange={(refs) => (members = refs)}
+        kind={'secondary'}
+        size={'large'}
+      />
+    </div>
+
+    <div class="antiGrid-row">
+      <div class="antiGrid-row__header">
+        <Label label={tracker.string.DefaultAssignee} />
+      </div>
+      <AssigneeBox
+        label={tracker.string.Assignee}
+        placeholder={tracker.string.Assignee}
+        kind={'secondary'}
+        size={'large'}
+        avatarSize={'card'}
+        bind:value={defaultAssignee}
+        titleDeselect={tracker.string.Unassigned}
+        showNavigate={false}
+        showTooltip={{ label: tracker.string.DefaultAssignee }}
+      />
     </div>
-    <AssigneeBox
-      label={tracker.string.Assignee}
-      placeholder={tracker.string.Assignee}
-      kind="link-bordered"
-      bind:value={defaultAssignee}
-      titleDeselect={tracker.string.Unassigned}
-      showNavigate={false}
-      showTooltip={{ label: tracker.string.DefaultAssignee }}
-    />
   </div>
 </Card>