wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-22 00:10:37 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Highlighted weekends in the planning calendar (#4465)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2024-01-29 08:22:20 +03:00 committed by GitHub
parent af3c88b000
commit fce467ff2d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
plugins/calendar-resources/src/components/DayCalendar.svelte
View File

@ -34,7 +34,8 @@
getWeekDayName, getWeekDayName,
resizeObserver, resizeObserver,
showPopup, showPopup,
ticker ticker,
isWeekend
} from '@hcengineering/ui' } from '@hcengineering/ui'
import { Menu } from '@hcengineering/view-resources' import { Menu } from '@hcengineering/view-resources'
import { createEventDispatcher, onDestroy, onMount } from 'svelte' import { createEventDispatcher, onDestroy, onMount } from 'svelte'
@ -767,7 +768,7 @@
<div <div
bind:this={container} bind:this={container}
on:dragleave on:dragleave
class="calendar-container" class="calendar-container timeline-grid-bg"
class:clearCells={clearCells || resizeId !== null || dragId !== null} class:clearCells={clearCells || resizeId !== null || dragId !== null}
class:cursor-row-resize={resizeId !== null && directionResize !== null} class:cursor-row-resize={resizeId !== null && directionResize !== null}
style:--calendar-ad-height={styleAD + 'px'} style:--calendar-ad-height={styleAD + 'px'}
@ -920,9 +921,11 @@
{/if} {/if}
{#each [...Array(displayedDaysCount).keys()] as dayOfWeek} {#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
{@const day = getDay(weekMonday, dayOfWeek)} {@const day = getDay(weekMonday, dayOfWeek)}
{@const weekend = isWeekend(day)}
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div <div
class="empty-cell" class="empty-cell"
class:weekend
style:width={`${colWidth}px`} style:width={`${colWidth}px`}
style:grid-column={`col-start ${dayOfWeek + 1} / ${dayOfWeek + 2}`} style:grid-column={`col-start ${dayOfWeek + 1} / ${dayOfWeek + 2}`}
style:grid-row={`row-start ${hourOfDay * 2 + 1} / row-start ${hourOfDay * 2 + 3}`} style:grid-row={`row-start ${hourOfDay * 2 + 1} / row-start ${hourOfDay * 2 + 3}`}
@ -1026,6 +1029,22 @@
</Scroller> </Scroller>
<style lang="scss"> <style lang="scss">
$timeline-bg-color: var(--theme-comp-header-color);
$timeline-weekend-stroke-color: var(--theme-calendar-weekend-stroke-color);
.timeline-grid-bg {
background-image: linear-gradient(
135deg,
$timeline-weekend-stroke-color 10%,
$timeline-bg-color 10%,
$timeline-bg-color 50%,
$timeline-weekend-stroke-color 50%,
$timeline-weekend-stroke-color 60%,
$timeline-bg-color 60%,
$timeline-bg-color 100%
);
background-size: 7px 7px;
}
.calendar-container { .calendar-container {
will-change: transform; will-change: transform;
position: relative; position: relative;
@ -1090,6 +1109,10 @@
.empty-cell { .empty-cell {
border-left: 1px solid var(--theme-divider-color); border-left: 1px solid var(--theme-divider-color);
border-bottom: 1px solid var(--theme-divider-color); border-bottom: 1px solid var(--theme-divider-color);
&:not(.weekend) {
background-color: $timeline-bg-color;
}
} }
.time-cell { .time-cell {
display: inline-flex; display: inline-flex;
@ -1097,6 +1120,10 @@
align-items: center; align-items: center;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--theme-dark-color); color: var(--theme-dark-color);
background-color: $timeline-bg-color;
}
.clear-cell {
background-color: $timeline-bg-color;
} }
.calendar-element { .calendar-element {
position: absolute; position: absolute;