Update EstimationPopup layout (#2513)

plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte

@@ -120,9 +120,6 @@
     <IssuePresenter value={object} disableClick />
   </svelte:fragment>
 
-  <div class="header no-border flex-col p-1">
-    <div class="flex-row-center flex-between" />
-  </div>
   {#if currentTeam && issueStatuses}
     <SubIssuesEstimations
       issue={object}
@@ -143,13 +140,17 @@
       icon={IconAdd}
       size={'small'}
       on:click={(event) => {
-        showPopup(TimeSpendReportPopup, {
-          issueId: object._id,
-          issueClass: object._class,
-          space: object.space,
-          assignee: object.assignee,
-          defaultTimeReportDay
-        })
+        showPopup(
+          TimeSpendReportPopup,
+          {
+            issueId: object._id,
+            issueClass: object._class,
+            space: object.space,
+            assignee: object.assignee,
+            defaultTimeReportDay
+          },
+          'top'
+        )
       }}
       label={tracker.string.TimeSpendReportAdd}
     />

plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte

@@ -17,7 +17,7 @@
   import { Doc, Ref } from '@hcengineering/core'
   import { UserBox } from '@hcengineering/presentation'
   import { Issue, Team } from '@hcengineering/tracker'
-  import { getEventPositionElement, ListView, showPopup } from '@hcengineering/ui'
+  import { getEventPositionElement, ListView, showPopup, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import { ContextMenu, FixedColumn, ListSelectionProvider, SelectDirection } from '@hcengineering/view-resources'
   import { getIssueId } from '../../../issues'
   import tracker from '../../../plugin'
@@ -28,18 +28,19 @@
   export let teams: Map<Ref<Team>, Team>
 
   function showContextMenu (ev: MouseEvent, object: Issue) {
-    showPopup(ContextMenu, { object }, getEventPositionElement(ev))
+    showPopup(ContextMenu, { object }, $deviceInfo.isMobile ? 'top' : getEventPositionElement(ev))
   }
 
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {})
+  $: twoRows = $deviceInfo.twoRows
 </script>
 
-<ListView count={issues.length}>
+<ListView count={issues.length} addClass={'step-tb-2-accent'}>
   <svelte:fragment slot="item" let:item>
     {@const issue = issues[item]}
     {@const currentTeam = teams.get(issue.space)}
     <div
-      class="flex-between row"
+      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, issue)}
       on:mouseover={() => {
         listProvider.updateFocus(issue)
@@ -48,55 +49,32 @@
         listProvider.updateFocus(issue)
       }}
     >
-      <div class="flex-row-center clear-mins gap-2 p-2 flex-grow">
-        <span class="issuePresenter">
-          <FixedColumn key={'estimation_issue'} justify={'left'}>
-            {#if currentTeam}
-              {getIssueId(currentTeam, issue)}
-            {/if}
-          </FixedColumn>
-        </span>
-        <span class="text name" title={issue.title}>
+      <div class="flex-row-center clear-mins gap-2 flex-grow mr-4" class:p-text={twoRows}>
+        <FixedColumn key={'estimation_issue'} justify={'left'} addClass={'fs-bold'}>
+          {#if currentTeam}
+            {getIssueId(currentTeam, issue)}
+          {/if}
+        </FixedColumn>
+        <span class="overflow-label fs-bold caption-color" title={issue.title}>
           {issue.title}
         </span>
       </div>
 
-      <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
-        <UserBox
-          width={'100%'}
-          label={tracker.string.Assignee}
-          _class={contact.class.Employee}
-          value={issue.assignee}
-          readonly
-          showNavigate={false}
-        />
-      </FixedColumn>
-      <FixedColumn key={'estimation'} justify={'left'}>
-        <EstimationEditor value={issue} kind={'list'} />
-      </FixedColumn>
+      <div class="flex-row-center clear-mins gap-2 self-end" class:p-text={twoRows}>
+        <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
+          <UserBox
+            width={'100%'}
+            label={tracker.string.Assignee}
+            _class={contact.class.Employee}
+            value={issue.assignee}
+            readonly
+            showNavigate={false}
+          />
+        </FixedColumn>
+        <FixedColumn key={'estimation'} justify={'left'}>
+          <EstimationEditor value={issue} kind={'list'} />
+        </FixedColumn>
+      </div>
     </div>
   </svelte:fragment>
 </ListView>
-
-<style lang="scss">
-  .row {
-    .text {
-      font-weight: 500;
-      color: var(--caption-color);
-    }
-
-    .issuePresenter {
-      flex-shrink: 0;
-      min-width: 0;
-      min-height: 0;
-      font-weight: 500;
-      color: var(--content-color);
-    }
-
-    .name {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-</style>

plugins/tracker-resources/src/components/issues/timereport/SubIssuesEstimations.svelte

@@ -16,7 +16,7 @@
   import { Ref, SortingOrder, WithLookup } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { Issue, IssueStatus, Team } from '@hcengineering/tracker'
-  import { Scroller, Spinner } from '@hcengineering/ui'
+  import { Spinner } from '@hcengineering/ui'
   import Expandable from '@hcengineering/ui/src/components/Expandable.svelte'
   import tracker from '../../../plugin'
   import EstimationSubIssueList from './EstimationSubIssueList.svelte'
@@ -38,15 +38,9 @@
 
 {#if subIssues && issueStatuses}
   {#if hasSubIssues}
-    <Expandable label={tracker.string.ChildEstimation}>
-      <svelte:fragment slot="title">
-        : {total}
-      </svelte:fragment>
-      <div class="h-50">
-        <Scroller>
-          <EstimationSubIssueList issues={subIssues} {teams} />
-        </Scroller>
-      </div>
+    <Expandable label={tracker.string.ChildEstimation} contentColor bordered>
+      <svelte:fragment slot="title">: <span class="caption-color">{total}</span></svelte:fragment>
+      <EstimationSubIssueList issues={subIssues} {teams} />
     </Expandable>
   {/if}
 {:else}

plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte

@@ -15,11 +15,13 @@
 <script lang="ts">
   import { TimeReportDayType } from '@hcengineering/tracker'
   import { DropdownIntlItem, DropdownLabelsIntl } from '@hcengineering/ui'
+  import type { ButtonKind } from '@hcengineering/ui'
   import tracker from '../../../plugin'
   import TimeReportDayIcon from './TimeReportDayIcon.svelte'
 
   export let label = tracker.string.TimeReportDayTypeLabel
   export let selected: TimeReportDayType | undefined
+  export let kind: ButtonKind = 'link-bordered'
 
   const workDaysDropdownItems: DropdownIntlItem[] = [
     {
@@ -34,7 +36,7 @@
 </script>
 
 <DropdownLabelsIntl
-  kind="link-bordered"
+  {kind}
   icon={TimeReportDayIcon}
   shouldUpdateUndefined={false}
   {label}

plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte

@@ -18,7 +18,7 @@
   import type { IntlString } from '@hcengineering/platform'
   import presentation, { Card, getClient, UserBox } from '@hcengineering/presentation'
   import { Issue, TimeReportDayType, TimeSpendReport } from '@hcengineering/tracker'
-  import { DatePresenter, EditBox } from '@hcengineering/ui'
+  import { DatePresenter, EditBox, Button } from '@hcengineering/ui'
   import tracker from '../../../plugin'
   import { getTimeReportDate, getTimeReportDayType } from '../../../utils'
   import TimeReportDayDropdown from './TimeReportDayDropdown.svelte'
@@ -85,23 +85,31 @@
 >
   <div class="flex-row-center gap-2">
     <EditBox focus bind:value={data.value} {placeholder} format={'number'} maxDigitsAfterPoint={3} kind={'editbox'} />
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.125)}><span slot="content">1/8</span></Button>
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.25)}><span slot="content">1/4</span></Button>
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.5)}><span slot="content">1/2</span></Button>
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.75)}><span slot="content">3/4</span></Button>
+    <div class="buttons-divider" />
+    <Button kind={'link-bordered'} on:click={() => (data.value = 1)}><span slot="content">1</span></Button>
+  </div>
+  <EditBox bind:value={data.description} placeholder={tracker.string.TimeSpendReportDescription} kind={'editbox'} />
+  <svelte:fragment slot="pool">
     <UserBox
       _class={contact.class.Employee}
       label={contact.string.Employee}
-      kind={'link-bordered'}
+      kind={'no-border'}
       bind:value={data.employee}
       showNavigate={false}
     />
     <TimeReportDayDropdown
+      kind={'no-border'}
       bind:selected={selectedTimeReportDay}
       on:selected={({ detail }) => (data.date = getTimeReportDate(detail))}
     />
     <DatePresenter
-      kind={'link'}
       bind:value={data.date}
       editable
       on:change={({ detail }) => (selectedTimeReportDay = getTimeReportDayType(detail))}
     />
-  </div>
-  <EditBox bind:value={data.description} placeholder={tracker.string.TimeSpendReportDescription} kind={'editbox'} />
+  </svelte:fragment>
 </Card>

plugins/tracker-resources/src/components/issues/timereport/TimeSpendReports.svelte

@@ -16,7 +16,7 @@
   import { DocumentQuery, Ref, SortingOrder } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { Issue, Team, TimeSpendReport } from '@hcengineering/tracker'
-  import { Expandable, floorFractionDigits, Label, Scroller, Spinner } from '@hcengineering/ui'
+  import { Expandable, floorFractionDigits, Label, Spinner } from '@hcengineering/ui'
   import tracker from '../../../plugin'
   import TimePresenter from './TimePresenter.svelte'
   import TimeSpendReportsList from './TimeSpendReportsList.svelte'
@@ -42,21 +42,19 @@
 </script>
 
 {#if reports}
-  <Expandable expanded={true}>
+  <Expandable expanded={true} contentColor bordered>
     <svelte:fragment slot="title">
       <span class="overflow-label flex-nowrap">
-        <Label label={tracker.string.ReportedTime} />: <TimePresenter value={reportedTime} {workDayLength} />
-        <Label label={tracker.string.TimeSpendReports} />: <TimePresenter value={total} {workDayLength} />
+        <Label label={tracker.string.ReportedTime} />:
+        <span class="caption-color"><TimePresenter value={reportedTime} {workDayLength} /></span>.
+        <Label label={tracker.string.TimeSpendReports} />:
+        <span class="caption-color"><TimePresenter value={total} {workDayLength} /></span>
       </span>
     </svelte:fragment>
-    <div class="h-50">
-      <Scroller>
-        <TimeSpendReportsList {reports} {teams} />
-      </Scroller>
-    </div>
+    <TimeSpendReportsList {reports} {teams} />
   </Expandable>
 {:else}
-  <div class="flex-center pt-3">
+  <div class="flex-center">
     <Spinner />
   </div>
 {/if}

plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte

@@ -18,6 +18,7 @@
   import UserBox from '@hcengineering/presentation/src/components/UserBox.svelte'
   import { Team, TimeReportDayType, TimeSpendReport } from '@hcengineering/tracker'
   import { eventToHTMLElement, getEventPositionElement, ListView, showPopup } from '@hcengineering/ui'
+  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import DatePresenter from '@hcengineering/ui/src/components/calendar/DatePresenter.svelte'
   import { ContextMenu, FixedColumn, ListSelectionProvider, SelectDirection } from '@hcengineering/view-resources'
   import { getIssueId } from '../../../issues'
@@ -51,18 +52,19 @@
         assignee: value.employee,
         defaultTimeReportDay
       },
-      eventToHTMLElement(event)
+      $deviceInfo.isMobile ? 'top' : eventToHTMLElement(event)
     )
   }
+  $: twoRows = $deviceInfo.twoRows
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<ListView count={reports.length}>
+<ListView count={reports.length} addClass={'step-tb-2-accent'}>
   <svelte:fragment slot="item" let:item>
     {@const report = reports[item]}
     {@const currentTeam = teams.get(toTeamId(report.space))}
     <div
-      class="flex-between row"
+      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, report)}
       on:mouseover={() => {
         listProvider.updateFocus(report)
@@ -72,62 +74,36 @@
       }}
       on:click={(evt) => editSpendReport(evt, report, currentTeam?.defaultTimeReportDay)}
     >
-      <div class="flex-row-center clear-mins gap-2 p-2 flex-grow">
-        <span class="issuePresenter">
-          <FixedColumn key={'tmiespend_issue'} justify={'left'}>
-            {#if currentTeam && report.$lookup?.attachedTo}
-              {getIssueId(currentTeam, report.$lookup?.attachedTo)}
-            {/if}
-          </FixedColumn>
-        </span>
+      <div class="flex-row-center clear-mins gap-2 flex-grow mr-4" class:p-text={twoRows}>
+        <FixedColumn key={'tmiespend_issue'} justify={'left'} addClass={'fs-bold'}>
+          {#if currentTeam && report.$lookup?.attachedTo}
+            {getIssueId(currentTeam, report.$lookup?.attachedTo)}
+          {/if}
+        </FixedColumn>
         {#if report.$lookup?.attachedTo?.title}
-          <span class="text name" title={report.$lookup?.attachedTo?.title}>
+          <span class="overflow-label fs-bold caption-color" title={report.$lookup?.attachedTo?.title}>
             {report.$lookup?.attachedTo?.title}
           </span>
         {/if}
       </div>
-      <FixedColumn key={'timespend_assignee'} justify={'left'}>
-        <UserBox
-          width={'100%'}
-          label={tracker.string.Assignee}
-          _class={contact.class.Employee}
-          value={report.employee}
-          readonly
-          showNavigate={false}
-        />
-      </FixedColumn>
-
-      <FixedColumn key={'timespend_reported'} justify={'center'}>
-        <div class="p-1">
+      <div class="flex-row-center clear-mins gap-2 self-end" class:p-text={twoRows}>
+        <FixedColumn key={'timespend_assignee'} justify={'left'}>
+          <UserBox
+            width={'100%'}
+            label={tracker.string.Assignee}
+            _class={contact.class.Employee}
+            value={report.employee}
+            readonly
+            showNavigate={false}
+          />
+        </FixedColumn>
+        <FixedColumn key={'timespend_reported'} justify={'center'}>
           <TimePresenter value={report.value} workDayLength={currentTeam?.workDayLength} />
-        </div>
-      </FixedColumn>
-      <FixedColumn key={'timespend_date'} justify={'left'}>
-        <DatePresenter value={report.date} />
-      </FixedColumn>
-    </div>
-  </svelte:fragment>
+        </FixedColumn>
+        <FixedColumn key={'timespend_date'} justify={'left'}>
+          <DatePresenter value={report.date} />
+        </FixedColumn>
+      </div>
+    </div></svelte:fragment
+  >
 </ListView>
-
-<style lang="scss">
-  .row {
-    .text {
-      font-weight: 500;
-      color: var(--caption-color);
-    }
-
-    .issuePresenter {
-      flex-shrink: 0;
-      min-width: 0;
-      min-height: 0;
-      font-weight: 500;
-      color: var(--content-color);
-    }
-
-    .name {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-</style>