HR: Update Schedule layout. Fix tooltip and popup. (#2388)

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

packages/theme/styles/_layouts.scss

@@ -120,6 +120,10 @@ p:last-child { margin-block-end: 0; }
   }
 }
 
+.text-center { text-align: center; }
+
+.firstLetter span::first-letter { text-transform: uppercase; }
+
 .inline-height2 {
   line-height: 200%;
 }
@@ -198,6 +202,12 @@ input.search {
   flex-wrap: nowrap;
   min-height: 0;
 }
+.flex-col-reverse {
+  display: flex;
+  flex-direction: column-reverse;
+  flex-wrap: nowrap;
+  min-height: 0;
+}
 .flex-col-center {
   display: flex;
   flex-direction: column;
@@ -516,6 +526,7 @@ input.search {
 .min-h-2 { min-height: .5rem; }
 .min-h-7 { min-height: 1.75rem; }
 .min-h-60 { min-height: 15rem; }
+.max-w-9 { max-width: 2.25rem; }
 .max-w-30 { max-width: 7.5rem; }
 .max-w-60 { max-width: 15rem; }
 .max-w-80 { max-width: 20rem; }

packages/ui/src/components/Panel.svelte

@@ -36,7 +36,6 @@
   let asideFloat: boolean = false
   let asideShown: boolean = false
   let fullSize: boolean = false
-  let twoRows: boolean = false
   $: twoRows = $deviceInfo.minWidth
 
   const checkPanel = (): void => {

packages/ui/src/types.ts

@@ -225,6 +225,7 @@ export interface FadeOptions {
 }
 export const defaultSP: FadeOptions = { multipler: { top: 0, bottom: 0 } }
 export const tableSP: FadeOptions = { offset: { top: true }, multipler: { top: 2.5, bottom: 0 } }
+export const tableHRscheduleY: FadeOptions = { offset: { top: true }, multipler: { top: 5, bottom: 0 } }
 export const issueSP: FadeOptions = { offset: { top: true }, multipler: { top: 3, bottom: 0 } }
 
 export interface DeviceOptions {

plugins/hr-resources/src/components/Schedule.svelte

@@ -18,7 +18,15 @@
   import { Ref } from '@hcengineering/core'
   import { Department } from '@hcengineering/hr'
   import { createQuery, SpaceSelector } from '@hcengineering/presentation'
-  import { Button, Icon, IconBack, IconForward, Label } from '@hcengineering/ui'
+  import {
+    Button,
+    Icon,
+    IconBack,
+    IconForward,
+    Label,
+    deviceOptionsStore as deviceInfo,
+    TabList
+  } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import hr from '../plugin'
   import ScheduleMonthView from './ScheduleView.svelte'
@@ -66,31 +74,45 @@
       month: 'long'
     }).format(date)
   }
+
+  $: twoRows = $deviceInfo.twoRows
+  const handleSelect = (result: any) => {
+    if (result.type === 'select') {
+      const res = result.detail
+      if (res.id === 'ModeMonth') mode = CalendarMode.Month
+      else if (res.id === 'ModeYear') mode = CalendarMode.Year
+    }
+  }
 </script>
 
-<div class="ac-header full divide">
-  <div class="ac-header__wrap-title">
+<div class="ac-header divide {twoRows ? 'flex-col-reverse' : 'full'} withSettings">
+  <div class="ac-header__wrap-title" class:mt-2={twoRows}>
+    {#if !twoRows}
       <div class="ac-header__icon"><Icon icon={calendar.icon.Calendar} size={'small'} /></div>
       <span class="ac-header__title"><Label label={hr.string.Schedule} /></span>
-    <div class="flex gap-2 ml-6">
-      <Button
+    {:else}
+      <div class="fs-title mr-4 flex-row-center flex-grow firstLetter">
+        {#if mode === CalendarMode.Month}
+          <span class="mr-2 overflow-label">{getMonthName(currentDate)}</span>
+        {/if}
+        {currentDate.getFullYear()}
+      </div>
+    {/if}
+    <div class="flex-row-center gap-2 flex-no-shrink" class:ml-6={!twoRows}>
+      <TabList
+        items={[
+          { id: 'ModeMonth', labelIntl: calendar.string.ModeMonth },
+          { id: 'ModeYear', labelIntl: calendar.string.ModeYear }
+        ]}
+        multiselect={false}
         size={'small'}
-        label={calendar.string.ModeMonth}
-        on:click={() => {
-          mode = CalendarMode.Month
-        }}
+        on:select={handleSelect}
       />
-      <Button
-        size={'small'}
-        label={calendar.string.ModeYear}
-        on:click={() => {
-          mode = CalendarMode.Year
-        }}
-      />
-      <div class="flex ml-4 gap-2">
+      <div class="buttons-divider" />
       <Button
         icon={IconBack}
         size={'small'}
+        kind={'link-bordered'}
         on:click={() => {
           inc(-1)
         }}
@@ -98,6 +120,7 @@
       <Button
         size={'small'}
         label={calendar.string.Today}
+        kind={'link-bordered'}
         on:click={() => {
           currentDate = new Date()
         }}
@@ -105,22 +128,29 @@
       <Button
         icon={IconForward}
         size={'small'}
+        kind={'link-bordered'}
         on:click={() => {
           inc(1)
         }}
       />
     </div>
-    </div>
-    <div class="fs-title ml-4 flex-row-center">
+    {#if !twoRows}
+      <div class="fs-title ml-4 flex-row-center firstLetter">
         {#if mode === CalendarMode.Month}
-        {getMonthName(currentDate)}
+          <span class="overflow-label mr-2">{getMonthName(currentDate)}</span>
         {/if}
         {currentDate.getFullYear()}
       </div>
+    {/if}
   </div>
 
+  <div class="ac-header__wrap-title {twoRows ? 'mt-1' : 'ml-4'}">
+    {#if twoRows}
+      <div class="ac-header__icon flex-center"><Icon icon={calendar.icon.Calendar} size={'small'} /></div>
+      <span class="ac-header__title" class:flex-grow={twoRows}><Label label={hr.string.Schedule} /></span>
+    {/if}
+    <div class="flex-row-center gap-2">
       {#if mode === CalendarMode.Month}
-    <div class="flex ml-4 gap-2">
         <Button
           icon={view.icon.Views}
           selected={display === 'chart'}
@@ -137,10 +167,15 @@
             display = 'stats'
           }}
         />
-    </div>
       {/if}
-
-  <SpaceSelector _class={hr.class.Department} label={hr.string.Department} bind:space={department} />
+      <SpaceSelector
+        _class={hr.class.Department}
+        label={hr.string.Department}
+        bind:space={department}
+        kind={'secondary'}
+      />
+    </div>
+  </div>
 </div>
 
 <ScheduleMonthView {department} {descendants} departmentById={departments} {currentDate} {mode} {display} />

plugins/hr-resources/src/components/ScheduleRequests.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import hr, { Request, RequestType } from '@hcengineering/hr'
   import { getClient } from '@hcengineering/presentation'
-  import { getPlatformColor, Icon, showPopup } from '@hcengineering/ui'
+  import { closeTooltip, getPlatformColor, Icon, showPopup } from '@hcengineering/ui'
   import { ContextMenu } from '@hcengineering/view-resources'
 
   export let requests: Request[]
@@ -42,6 +42,7 @@
     if (!editable) return
     e.stopPropagation()
     e.preventDefault()
+    closeTooltip()
     showPopup(ContextMenu, { object: request }, e.target as HTMLElement)
   }
 </script>

plugins/hr-resources/src/components/schedule/MonthView.svelte

@@ -112,7 +112,7 @@
 </script>
 
 {#if departmentStaff.length}
-  <Scroller fade={tableSP}>
+  <Scroller fade={tableSP} horizontal>
     <table>
       <thead class="scroller-thead">
         <tr class="scroller-thead__tr">
@@ -149,13 +149,13 @@
               <EmployeePresenter value={employee} />
             </td>
             <td
-              class="flex-center p-1 whitespace-nowrap"
+              class="flex-center p-1 whitespace-nowrap text-center"
               class:firstLine={row === 0}
               class:lastLine={row === departmentStaff.length - 1}
             >
               {getTotal(requests, startDate.getMonth(), types)}
             </td>
-            <td class="p-1">
+            <td class="p-1 text-center">
               {#if rTime !== undefined}
                 {rTime.value}
               {:else}
@@ -170,6 +170,7 @@
               {@const ww = findReports(employee, date, timeReports)}
               {#key [tooltipValue, editable]}
                 <td
+                  class="w-9 max-w-9 min-w-9"
                   class:today={areDatesEqual(todayDate, date)}
                   class:weekend={isWeekend(date)}
                   class:cursor-pointer={editable}
@@ -211,7 +212,6 @@
 
     td,
     th {
-      width: auto;
       width: 2rem;
       min-width: 1.5rem;
       border: none;

plugins/hr-resources/src/components/schedule/YearView.svelte

@@ -17,7 +17,7 @@
   import contact from '@hcengineering/contact-resources/src/plugin'
   import { Ref } from '@hcengineering/core'
   import type { Request, RequestType, Staff } from '@hcengineering/hr'
-  import { Label, LabelAndProps, Scroller, tableSP, tooltip } from '@hcengineering/ui'
+  import { Label, LabelAndProps, Scroller, tableHRscheduleY, tooltip } from '@hcengineering/ui'
   import hr from '../../plugin'
   import { fromTzDate, getMonth, getTotal, weekDays } from '../../utils'
   import RequestsPopup from '../RequestsPopup.svelte'
@@ -67,7 +67,7 @@
 </script>
 
 {#if departmentStaff.length}
-  <Scroller fade={tableSP}>
+  <Scroller fade={tableHRscheduleY} horizontal>
     <table>
       <thead class="scroller-thead">
         <tr class="scroller-thead__tr">
@@ -77,7 +77,7 @@
           {#each values as value, i}
             {@const month = getMonth(currentDate, value)}
             <th
-              class="fixed"
+              class="fixed first-row"
               class:today={month.getFullYear() === todayDate.getFullYear() && month.getMonth() === todayDate.getMonth()}
               on:mousemove={() => {
                 hoveredIndex = i
@@ -91,7 +91,7 @@
           {/each}
         </tr>
         <tr>
-          <th class="fixed">
+          <th class="fixed last-row">
             <span class="flex-center">
               {departmentStaff.length}
             </span>
@@ -99,7 +99,7 @@
           {#each values as value, i}
             {@const month = getMonth(currentDate, value)}
             <th
-              class="fixed"
+              class="fixed last-row"
               class:today={month.getFullYear() === todayDate.getFullYear() && month.getMonth() === todayDate.getMonth()}
             >
               <span class="flex-center">
@@ -111,8 +111,8 @@
       </thead>
       <tbody>
         {#each departmentStaff as employee, row}
-          <tr>
-            <td>
+          <tr class="tr-body">
+            <td class="td-body">
               <EmployeePresenter value={employee} />
             </td>
             {#each values as value, i}
@@ -123,7 +123,7 @@
                 <td
                   class:today={month.getFullYear() === todayDate.getFullYear() &&
                     month.getMonth() === todayDate.getMonth()}
-                  class="fixed"
+                  class="fixed td-body"
                   use:tooltip={tooltipValue}
                 >
                   <div class="flex-center">
@@ -146,14 +146,15 @@
 <style lang="scss">
   table {
     position: relative;
+    border-collapse: separate;
     width: 100%;
 
     td,
     th {
-      width: auto;
-      width: 2rem;
-      min-width: 1.5rem;
-      border: none;
+      padding: 0 0.5rem;
+      width: 2.25rem;
+      min-width: 2.25rem;
+      border: 1px solid var(--accent-bg-color);
       &.fixed {
         width: 5rem;
         padding: 0 0.125rem;
@@ -175,7 +176,7 @@
       font-size: 0.75rem;
       line-height: 105%;
       color: var(--dark-color);
-      box-shadow: inset 0 -1px 0 0 var(--divider-color);
+      border: none;
       user-select: none;
       cursor: pointer;
 
@@ -195,15 +196,15 @@
       &.today {
         background-color: var(--theme-bg-accent-hover);
       }
-    }
-    td:not(:last-child) {
-      border-right: 1px solid var(--divider-color);
-    }
-    tr:not(.scroller-thead__tr) {
+      &.td-body {
         border-bottom: 1px solid var(--divider-color);
-    }
-    tr.scroller-thead__tr:not(:last-child) {
+        &:not(:last-child) {
           border-right: 1px solid var(--divider-color);
         }
       }
+    }
+    th.last-row {
+      border-bottom: 1px solid var(--divider-color);
+    }
+  }
 </style>