UBERF-4205: updated Panel header layout, custom aside (#3974)

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

plugins/tracker-resources/src/components/issues/IssuePresenter.svelte

@@ -24,10 +24,11 @@
   import { activeProjects } from '../../utils'
 
   export let value: WithLookup<Issue>
-  export let disabled = false
+  export let disabled: boolean = false
   export let onClick: (() => void) | undefined = undefined
   export let shouldShowAvatar: boolean = false
-  export let noUnderline = disabled
+  export let noUnderline: boolean = disabled
+  export let noSelect: boolean = false
   export let inline = false
   export let kind: 'list' | undefined = undefined
   export let icon: Asset | AnySvelteComponent | undefined = undefined
@@ -64,7 +65,7 @@
               <Icon icon={icon ?? tracker.icon.Issues} size={'small'} />
             </div>
           {/if}
-          <span class="overflow-label select-text" title={value?.title}>
+          <span class="overflow-label" class:select-text={!noSelect} title={value?.title}>
             {title}
             <slot name="details" />
           </span>

plugins/tracker-resources/src/components/issues/edit/CopyToClipboardButton.svelte

@@ -24,7 +24,8 @@
 
 <Button
   {icon}
-  kind={'ghost'}
+  iconProps={{ size: 'medium' }}
+  kind={'icon'}
   showTooltip={{ label: title, direction: 'bottom' }}
   on:click={() => copyTextToClipboard(text)}
 />

plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte

@@ -40,9 +40,10 @@
     createFocusManager,
     getCurrentResolvedLocation,
     navigate,
-    showPopup
+    showPopup,
+    deviceOptionsStore as deviceInfo
   } from '@hcengineering/ui'
-  import { ContextMenu, DocNavLink, ParentsNavigator, UpDownNavigator } from '@hcengineering/view-resources'
+  import { ContextMenu, DocNavLink, ParentsNavigator } from '@hcengineering/view-resources'
   import view from '@hcengineering/view'
   import { createEventDispatcher, onDestroy } from 'svelte'
   import { generateIssueShortLink, getIssueId } from '../../../issues'
@@ -55,7 +56,6 @@
 
   export let _id: Ref<Issue>
   export let _class: Ref<Class<Issue>>
-  export let embedded = false
 
   let lastId: Ref<Doc> = _id
   const queryClient = createQuery()
@@ -165,14 +165,12 @@
   let content: HTMLElement
 </script>
 
-{#if !embedded}
-  <FocusHandler {manager} isEnabled={isContextEnabled} />
-  <ActionContext
-    context={{
-      mode: 'editor'
-    }}
-  />
-{/if}
+<FocusHandler {manager} isEnabled={isContextEnabled} />
+<ActionContext
+  context={{
+    mode: 'editor'
+  }}
+/>
 
 {#if issue !== undefined}
   <Panel
@@ -181,26 +179,19 @@
     isAside={true}
     isSub={false}
     withoutActivity={false}
-    withoutTitle
     bind:content
-    {embedded}
     bind:innerWidth
     on:open
     on:close={() => dispatch('close')}
+    on:select
   >
-    <svelte:fragment slot="navigator">
-      {#if !embedded}
-        <UpDownNavigator element={issue} />
-        <ParentsNavigator element={issue} />
+    <svelte:fragment slot="title">
+      <ParentsNavigator element={issue} />
+      {#if issueId}
+        <DocNavLink noUnderline object={issue}>
+          <div class="title">{issueId}</div>
+        </DocNavLink>
       {/if}
-
-      <span class="ml-4 fs-title select-text-i overflow-label">
-        {#if embedded}
-          <DocNavLink object={issue}>
-            {#if issueId}{issueId}{/if}
-          </DocNavLink>
-        {:else if issueId}{issueId}{/if}
-      </span>
     </svelte:fragment>
     <svelte:fragment slot="pre-utils">
       <ComponentExtensions
@@ -212,6 +203,39 @@
       {/if}
     </svelte:fragment>
 
+    <svelte:fragment slot="utils">
+      <Button icon={IconMoreH} iconProps={{ size: 'medium' }} kind={'icon'} on:click={showMenu} />
+      {#if issueId}
+        <CopyToClipboard issueUrl={generateIssueShortLink(issueId)} />
+      {/if}
+      <Button
+        icon={setting.icon.Setting}
+        kind={'icon'}
+        iconProps={{ size: 'medium' }}
+        showTooltip={{ label: setting.string.ClassSetting }}
+        on:click={(ev) => {
+          ev.stopPropagation()
+          const loc = getCurrentResolvedLocation()
+          loc.path[2] = settingId
+          loc.path[3] = 'setting'
+          loc.path[4] = 'classes'
+          loc.path.length = 5
+          loc.query = { _class }
+          loc.fragment = undefined
+          navigate(loc)
+        }}
+      />
+      <Button
+        icon={IconMixin}
+        iconProps={{ size: 'medium' }}
+        kind={'icon'}
+        selected={showAllMixins}
+        on:click={() => {
+          showAllMixins = !showAllMixins
+        }}
+      />
+    </svelte:fragment>
+
     {#if parentIssue}
       <div class="mb-6">
         {#if currentProject}
@@ -227,7 +251,7 @@
       placeholder={tracker.string.IssueTitlePlaceholder}
       kind="large-style"
       on:blur={save}
-      autoFocus={!embedded}
+      autoFocus={!$deviceInfo.isMobile}
     />
     <div class="w-full mt-6">
       <AttachmentStyleBoxEditor
@@ -260,36 +284,6 @@
     <span slot="actions-label" class="select-text">
       {#if issueId}{issueId}{/if}
     </span>
-    <svelte:fragment slot="utils">
-      <Button icon={IconMoreH} kind={'ghost'} size={'medium'} on:click={showMenu} />
-      {#if issueId}
-        <CopyToClipboard issueUrl={generateIssueShortLink(issueId)} {issueId} />
-      {/if}
-      <Button
-        icon={setting.icon.Setting}
-        kind={'ghost'}
-        showTooltip={{ label: setting.string.ClassSetting }}
-        on:click={(ev) => {
-          ev.stopPropagation()
-          const loc = getCurrentResolvedLocation()
-          loc.path[2] = settingId
-          loc.path[3] = 'setting'
-          loc.path[4] = 'classes'
-          loc.path.length = 5
-          loc.query = { _class }
-          loc.fragment = undefined
-          navigate(loc)
-        }}
-      />
-      <Button
-        kind={'ghost'}
-        icon={IconMixin}
-        selected={showAllMixins}
-        on:click={() => {
-          showAllMixins = !showAllMixins
-        }}
-      />
-    </svelte:fragment>
 
     <svelte:fragment slot="custom-attributes">
       {#if issue && currentProject}

plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte

@@ -22,17 +22,8 @@
   import setting, { settingId } from '@hcengineering/setting'
   import tags from '@hcengineering/tags'
   import { IssueTemplate, IssueTemplateChild, Project } from '@hcengineering/tracker'
-  import {
-    Button,
-    EditBox,
-    Icon,
-    IconMoreH,
-    Label,
-    getCurrentResolvedLocation,
-    navigate,
-    showPopup
-  } from '@hcengineering/ui'
-  import { ContextMenu, ParentsNavigator, UpDownNavigator } from '@hcengineering/view-resources'
+  import { Button, EditBox, IconMoreH, Label, getCurrentResolvedLocation, navigate, showPopup } from '@hcengineering/ui'
+  import { ContextMenu } from '@hcengineering/view-resources'
   import view from '@hcengineering/view'
   import { createEventDispatcher, onDestroy, onMount } from 'svelte'
   import tracker from '../../plugin'
@@ -42,7 +33,6 @@
 
   export let _id: Ref<IssueTemplate>
   export let _class: Ref<Class<IssueTemplate>>
-  export let embedded = false
 
   let lastId: Ref<Doc> = _id
   const query = createQuery()
@@ -52,7 +42,6 @@
   let template: WithLookup<IssueTemplate> | undefined
   let currentProject: Project | undefined
   let title = ''
-  let description = ''
   let innerWidth: number
 
   let descriptionBox: AttachmentStyleBoxEditor
@@ -80,7 +69,6 @@
       async (result) => {
         ;[template] = result
         title = template.title
-        description = template.description
         currentProject = template.$lookup?.space
       },
       { lookup: { space: tracker.class.Project, labels: tags.class.TagElement } }
@@ -149,30 +137,16 @@
 
 {#if template !== undefined}
   <Panel
+    title={template.title}
     object={template}
     isHeader={false}
     isAside={true}
     isSub={false}
     withoutActivity={false}
-    {embedded}
     bind:innerWidth
     on:open
     on:close={() => dispatch('close')}
   >
-    <svelte:fragment slot="navigator">
-      {#if !embedded}
-        <UpDownNavigator element={template} />
-        <ParentsNavigator element={template} />
-      {/if}
-
-      <div class="ml-2">
-        <Icon icon={tracker.icon.IssueTemplates} size={'small'} />
-      </div>
-      <span class="fs-title flex-row-center">
-        {template.title}
-      </span>
-    </svelte:fragment>
-
     <EditBox bind:value={title} placeholder={tracker.string.IssueTitlePlaceholder} kind="large-style" on:blur={save} />
     <div class="w-full mt-6">
       <AttachmentStyleBoxEditor
@@ -207,10 +181,11 @@
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="utils">
-      <Button icon={IconMoreH} kind={'ghost'} size={'medium'} on:click={showMenu} />
+      <Button icon={IconMoreH} iconProps={{ size: 'medium' }} kind={'icon'} on:click={showMenu} />
       <Button
         icon={setting.icon.Setting}
-        kind={'ghost'}
+        iconProps={{ size: 'medium' }}
+        kind={'icon'}
         showTooltip={{ label: setting.string.ClassSetting }}
         on:click={(ev) => {
           ev.stopPropagation()