From 26d998a2dd4665193e87761529e95088efe14470 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Mon, 4 Jul 2022 21:16:04 +0300
Subject: [PATCH] HR: update schedule layout (#2202)
---
packages/theme/styles/components.scss | 12 +--
.../src/components/Schedule.svelte | 4 +-
.../src/components/ScheduleView.svelte | 92 +++++++++++++++----
3 files changed, 80 insertions(+), 28 deletions(-)
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 436ad6b190..7ca4a82c79 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -434,13 +434,13 @@
&:hover { background-color: var(--highlight-select-hover); }
}
}
+}
- .scroller-thead {
- position: sticky;
- top: 0;
- z-index: 2;
- background-color: var(--body-color);
- }
+.scroller-thead {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ background-color: var(--body-color);
}
// THead background-color in Tooltip and Popups
diff --git a/plugins/hr-resources/src/components/Schedule.svelte b/plugins/hr-resources/src/components/Schedule.svelte
index 6a8c4dd7e0..2d110ee649 100644
--- a/plugins/hr-resources/src/components/Schedule.svelte
+++ b/plugins/hr-resources/src/components/Schedule.svelte
@@ -119,6 +119,4 @@
<SpaceSelector _class={hr.class.Department} label={hr.string.Department} bind:space={department} />
</div>
-<div class="mr-6 h-full">
- <ScheduleMonthView {department} {descendants} departmentById={departments} {currentDate} {mode} />
-</div>
+<ScheduleMonthView {department} {descendants} departmentById={departments} {currentDate} {mode} />
diff --git a/plugins/hr-resources/src/components/ScheduleView.svelte b/plugins/hr-resources/src/components/ScheduleView.svelte
index 4662604b6b..a0a7fae28e 100644
--- a/plugins/hr-resources/src/components/ScheduleView.svelte
+++ b/plugins/hr-resources/src/components/ScheduleView.svelte
@@ -189,47 +189,60 @@
}
return total
}
+
+ let hoveredIndex: number = -1
</script>
{#if departmentStaff.length}
- <Scroller>
+ <Scroller tableFade>
<table>
<thead class="scroller-thead">
<tr class="scroller-thead__tr">
<th>
<Label label={contact.string.Employee} />
</th>
- {#each values as value}
+ {#each values as value, i}
{#if mode === CalendarMode.Year}
{@const month = getMonth(currentDate, value)}
<th
class="fixed"
class:today={month.getFullYear() === todayDate.getFullYear() &&
month.getMonth() === todayDate.getMonth()}
+ on:mousemove={() => {
+ hoveredIndex = i
+ }}
+ on:mouseleave={() => {
+ hoveredIndex = -1
+ }}
>
- <div class="cursor-pointer uppercase flex-col-center">
- <div class="flex-center">{getMonthName(month)}</div>
- </div>
+ {getMonthName(month)}
</th>
{:else}
{@const day = getDay(new Date(startDate), value)}
- <th class:today={areDatesEqual(todayDate, day)} class:weekend={isWeekend(day)}>
- <div class="cursor-pointer uppercase flex-col-center">
- <div class="flex-center">{getWeekDayName(day, 'short')}</div>
- <div class="flex-center">{day.getDate()}</div>
- </div>
+ <th
+ class:today={areDatesEqual(todayDate, day)}
+ class:weekend={isWeekend(day)}
+ on:mousemove={() => {
+ hoveredIndex = i
+ }}
+ on:mouseleave={() => {
+ hoveredIndex = -1
+ }}
+ >
+ {getWeekDayName(day, 'short')}
+ <span>{day.getDate()}</span>
</th>
{/if}
{/each}
</tr>
</thead>
<tbody>
- {#each departmentStaff as employee}
+ {#each departmentStaff as employee, row}
<tr>
<td>
<EmployeePresenter value={employee} />
</td>
- {#each values as value}
+ {#each values as value, i}
{#if mode === CalendarMode.Year}
{@const month = getMonth(currentDate, value)}
{@const requests = getRequests(employee._id, month)}
@@ -256,6 +269,9 @@
class:today={areDatesEqual(todayDate, date)}
class:weekend={isWeekend(date)}
class:cursor-pointer={editable}
+ class:hovered={i === hoveredIndex}
+ class:firstLine={row === 0}
+ class:lastLine={row === departmentStaff.length - 1}
use:tooltip={tooltipValue}
on:click={(e) => createRequest(e, date, employee)}
>
@@ -272,24 +288,26 @@
</table>
</Scroller>
{:else}
- <div class="flex-center h-full flex-grow fs-title">
+ <div class="flex-center h-full w-full flex-grow fs-title">
<Label label={hr.string.NoEmployeesInDepartment} />
</div>
{/if}
<style lang="scss">
table {
- border-collapse: collapse;
- table-layout: fixed;
- width: auto;
position: relative;
+ width: 100%;
td,
th {
width: auto;
- min-width: 1rem;
+ width: 2rem;
+ min-width: 1.5rem;
+ border: none;
&.fixed {
width: 5rem;
+ padding: 0 0.125rem;
+ hyphens: auto;
}
&:first-child {
width: 15rem;
@@ -297,13 +315,25 @@
}
}
th {
- padding: 0.5rem;
+ flex-shrink: 0;
+ padding: 0;
height: 2.5rem;
+ min-height: 2.5rem;
+ max-height: 2.5rem;
+ text-transform: uppercase;
font-weight: 500;
font-size: 0.75rem;
+ line-height: 105%;
color: var(--dark-color);
box-shadow: inset 0 -1px 0 0 var(--divider-color);
user-select: none;
+ cursor: pointer;
+
+ span {
+ display: block;
+ font-weight: 600;
+ font-size: 1rem;
+ }
&.today {
color: var(--caption-color);
}
@@ -313,7 +343,7 @@
}
td {
height: 3.5rem;
- border: 1px solid var(--divider-color);
+ border: none;
color: var(--caption-color);
&.today {
background-color: var(--theme-bg-accent-hover);
@@ -322,5 +352,29 @@
background-color: var(--theme-bg-accent-color);
}
}
+ td:not(:last-child) {
+ border-right: 1px solid var(--divider-color);
+ }
+ tr:not(.scroller-thead__tr) {
+ border-bottom: 1px solid var(--divider-color);
+ }
+ tr.scroller-thead__tr:not(:last-child) {
+ border-right: 1px solid var(--divider-color);
+ }
+
+ .hovered {
+ position: relative;
+
+ &::after {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: var(--caption-color);
+ opacity: 0.15;
+ }
+ }
}
</style>