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

Uber 792 (#3624)

Browse Source 
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov 2023-08-24 11:36:08 +06:00 committed by GitHub
parent 5ddddd060a
commit 2235310f91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 185 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/calendar-resources/src/components/CalendarEventPresenter.svelte
View File

@ -21,7 +21,6 @@
export let hideDetails: boolean = false export let hideDetails: boolean = false
export let oneRow: boolean = false export let oneRow: boolean = false
export let narrow: boolean = false export let narrow: boolean = false
export let size: { width: number; height: number }
$: startDate = new Date(event.date) $: startDate = new Date(event.date)
$: endDate = new Date(event.dueDate) $: endDate = new Date(event.dueDate)

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

@ -454,77 +454,49 @@
bind:divScroll={scroller} bind:divScroll={scroller}
fade={{ multipler: { top: (showHeader ? 3.5 : 0) + styleAD / fontSize, bottom: 0 } }} fade={{ multipler: { top: (showHeader ? 3.5 : 0) + styleAD / fontSize, bottom: 0 } }}
> >
{#key newEvents} <div
<div bind:this={container}
bind:this={container} class="calendar-container"
class="calendar-container" style:--calendar-ad-height={styleAD + 'px'}
style:--calendar-ad-height={styleAD + 'px'} style:grid={`${showHeader ? '[header] 3.5rem ' : ''}[all-day] ${styleAD}px repeat(${
style:grid={`${showHeader ? '[header] 3.5rem ' : ''}[all-day] ${styleAD}px repeat(${ (displayedHours - startHour) * 2
(displayedHours - startHour) * 2 }, [row-start] 2rem) / [time-col] 3.5rem repeat(${displayedDaysCount}, [col-start] 1fr)`}
}, [row-start] 2rem) / [time-col] 3.5rem repeat(${displayedDaysCount}, [col-start] 1fr)`} use:resizeObserver={(element) => checkSizes(element)}
use:resizeObserver={(element) => checkSizes(element)} >
> {#if showHeader}
{#if showHeader} <div class="sticky-header head center"><span class="zone">{getTimeZone()}</span></div>
<div class="sticky-header head center"><span class="zone">{getTimeZone()}</span></div> {#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
{#each [...Array(displayedDaysCount).keys()] as dayOfWeek} {@const day = getDay(weekMonday, dayOfWeek)}
{@const day = getDay(weekMonday, dayOfWeek)} <div class="sticky-header head title" class:center={displayedDaysCount > 1}>
<div class="sticky-header head title" class:center={displayedDaysCount > 1}> <span class="day" class:today={areDatesEqual(todayDate, day)}>{day.getDate()}</span>
<span class="day" class:today={areDatesEqual(todayDate, day)}>{day.getDate()}</span> <span class="weekday">{getWeekDayName(day, weekFormat)}</span>
<span class="weekday">{getWeekDayName(day, weekFormat)}</span>
</div>
{/each}
{/if}
<div class="sticky-header allday-header content-dark-color" class:top={!showHeader} class:opened={showArrowAD}>
<div class="flex-center text-sm leading-3 text-center" style:height={`${heightAD + 0.25}rem`}>
<Label label={calendar.string.AllDay} />
</div> </div>
{#if showArrowAD} {/each}
<ActionIcon {/if}
icon={shownAD ? IconUpOutline : IconDownOutline}
size={'small'} <div class="sticky-header allday-header content-dark-color" class:top={!showHeader} class:opened={showArrowAD}>
action={() => { <div class="flex-center text-sm leading-3 text-center" style:height={`${heightAD + 0.25}rem`}>
shownAD = !shownAD <Label label={calendar.string.AllDay} />
}}
/>
{/if}
</div> </div>
<div {#if showArrowAD}
class="sticky-header allday-container" <ActionIcon
class:top={!showHeader} icon={shownAD ? IconUpOutline : IconDownOutline}
style:grid-column={`col-start 1 / span ${displayedDaysCount}`} size={'small'}
> action={() => {
{#if shownHeightAD > maxHeightAD && shownAD} shownAD = !shownAD
<Scroller noFade={false}> }}
{#key [styleAD, calendarWidth, displayedDaysCount, showHeader]} />
<div style:min-height={`${shownHeightAD - cellBorder * 2}px`} /> {/if}
{#each alldays as event, i} </div>
{@const rect = getADRect(event._id)} <div
{@const ev = events.find((p) => p._id === event._id)} class="sticky-header allday-container"
{#if ev} class:top={!showHeader}
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> style:grid-column={`col-start 1 / span ${displayedDaysCount}`}
<div >
class="calendar-element" {#if shownHeightAD > maxHeightAD && shownAD}
style:top={`${rect.top}px`} <Scroller noFade={false}>
style:height={`${rect.height}px`}
style:left={`${rect.left}px`}
style:width={`${rect.width}px`}
style:opacity={rect.visibility === 0 ? 0.4 : 1}
style:--mask-image={getMask(rect.visibility)}
tabindex={500 + i}
>
<EventElement
hourHeight={cellHeight}
event={ev}
size={{ width: rect.width, height: rect.height }}
/>
</div>
{/if}
{/each}
{/key}
</Scroller>
{:else if shownAD}
{#key [styleAD, calendarWidth, displayedDaysCount, showHeader]} {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
<div style:min-height={`${shownHeightAD - cellBorder * 2}px`} />
{#each alldays as event, i} {#each alldays as event, i}
{@const rect = getADRect(event._id)} {@const rect = getADRect(event._id)}
{@const ev = events.find((p) => p._id === event._id)} {@const ev = events.find((p) => p._id === event._id)}
@ -545,135 +517,157 @@
{/if} {/if}
{/each} {/each}
{/key} {/key}
{:else} </Scroller>
{#key [styleAD, calendarWidth, displayedDaysCount, showHeader]} {:else if shownAD}
{#each shortAlldays as event, i} {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
{@const rect = getADRect(event.id, event.day, event.fixRow)} {#each alldays as event, i}
{@const ev = events.find((p) => p._id === event.id)} {@const rect = getADRect(event._id)}
{#if ev} {@const ev = events.find((p) => p._id === event._id)}
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> {#if ev}
<div <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
class="calendar-element" <div
style:top={`${rect.top}px`} class="calendar-element"
style:height={`${rect.height}px`} style:top={`${rect.top}px`}
style:left={`${rect.left}px`} style:height={`${rect.height}px`}
style:width={`${rect.width}px`} style:left={`${rect.left}px`}
style:opacity={rect.visibility === 0 ? 0.4 : 1} style:width={`${rect.width}px`}
style:--mask-image={getMask(rect.visibility)} style:opacity={rect.visibility === 0 ? 0.4 : 1}
tabindex={500 + i} style:--mask-image={getMask(rect.visibility)}
> tabindex={500 + i}
<EventElement hourHeight={cellHeight} event={ev} size={{ width: rect.width, height: rect.height }} /> >
</div> <EventElement hourHeight={cellHeight} event={ev} size={{ width: rect.width, height: rect.height }} />
{/if} </div>
{/each} {/if}
{#each moreCounts as more, day} {/each}
{@const addon = shortAlldays.length} {/key}
{#if more !== 0} {:else}
{@const rect = getMore(day)} {#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> {#each shortAlldays as event, i}
<!-- svelte-ignore a11y-click-events-have-key-events --> {@const rect = getADRect(event.id, event.day, event.fixRow)}
<div {@const ev = events.find((p) => p._id === event.id)}
class="calendar-element withPointer antiButton ghost medium accent cursor-pointer" {#if ev}
style:top={`${rect.top}px`} <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
style:height={`${heightAD}rem`} <div
style:left={`${rect.left}px`} class="calendar-element"
style:width={`${rect.width}px`} style:top={`${rect.top}px`}
style:padding={'0 .5rem 0 1.25rem'} style:height={`${rect.height}px`}
style:--mask-image={'none'} style:left={`${rect.left}px`}
tabindex={500 + addon + day} style:width={`${rect.width}px`}
on:click={() => (shownAD = true)} style:opacity={rect.visibility === 0 ? 0.4 : 1}
> style:--mask-image={getMask(rect.visibility)}
<Label label={ui.string.MoreCount} params={{ count: more }} /> tabindex={500 + i}
</div> >
{/if} <EventElement hourHeight={cellHeight} event={ev} size={{ width: rect.width, height: rect.height }} />
{/each} </div>
{/key} {/if}
{/if} {/each}
</div> {#each moreCounts as more, day}
{@const addon = shortAlldays.length}
{#if more !== 0}
{@const rect = getMore(day)}
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="calendar-element withPointer antiButton ghost medium accent cursor-pointer"
style:top={`${rect.top}px`}
style:height={`${heightAD}rem`}
style:left={`${rect.left}px`}
style:width={`${rect.width}px`}
style:padding={'0 .5rem 0 1.25rem'}
style:--mask-image={'none'}
tabindex={500 + addon + day}
on:click={() => (shownAD = true)}
>
<Label label={ui.string.MoreCount} params={{ count: more }} />
</div>
{/if}
{/each}
{/key}
{/if}
</div>
{#each [...Array(displayedHours - startHour).keys()] as hourOfDay} {#each [...Array(displayedHours - startHour).keys()] as hourOfDay}
{#if hourOfDay === 0} {#if hourOfDay === 0}
{#if showHeader} {#if showHeader}
<div class="clear-cell" /> <div class="clear-cell" />
{:else} {:else}
<div class="sticky-header head center zm"><span class="zone mini">{getTimeZone()}</span></div> <div class="sticky-header head center zm"><span class="zone mini">{getTimeZone()}</span></div>
{/if} {/if}
{:else if hourOfDay < displayedHours - startHour} {:else if hourOfDay < displayedHours - startHour}
<div
class="time-cell"
style:grid-column={'time-col 1 / col-start 1'}
style:grid-row={`row-start ${hourOfDay * 2} / row-start ${hourOfDay * 2 + 2}`}
>
{getTimeFormat(hourOfDay + startHour)}
</div>
{/if}
{#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
{@const day = getDay(weekMonday, dayOfWeek)}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="empty-cell"
style:width={`${colWidth}px`}
style:grid-column={`col-start ${dayOfWeek + 1} / ${dayOfWeek + 2}`}
style:grid-row={`row-start ${hourOfDay * 2 + 1} / row-start ${hourOfDay * 2 + 3}`}
on:dragenter={(e) => {
dispatch('dragenter', {
date: new Date(day.setHours(hourOfDay + startHour, 0, 0, 0))
})
}}
on:drop|preventDefault={(e) => {
dispatch('drop', {
day,
hour: hourOfDay + startHour,
date: new Date(day.setHours(hourOfDay + startHour, 0, 0, 0))
})
}}
on:click|stopPropagation={() => {
dispatch('create', {
date: new Date(day.setHours(hourOfDay + startHour, 0, 0, 0)),
withTime: true
})
}}
/>
{/each}
{#if hourOfDay === displayedHours - startHour - 1}<div class="clear-cell" />{/if}
{/each}
{#key [styleAD, calendarWidth, displayedDaysCount, showHeader]}
{#each newEvents.filter((ev) => !ev.allDay) as event, i}
{@const rect = getRect(event)}
{@const ev = events.find((p) => p._id === event._id)}
{#if ev}
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div <div
class="time-cell" class="calendar-element"
style:grid-column={'time-col 1 / col-start 1'} style:top={`${rect.top}px`}
style:grid-row={`row-start ${hourOfDay * 2} / row-start ${hourOfDay * 2 + 2}`} style:bottom={`${rect.bottom}px`}
style:left={`${rect.left}px`}
style:right={`${rect.right}px`}
style:opacity={rect.visibility === 0 ? 0.4 : 1}
style:--mask-image={'none'}
tabindex={1000 + i}
> >
{getTimeFormat(hourOfDay + startHour)} <EventElement
event={ev}
hourHeight={cellHeight}
size={{
width: rect.width,
height: (calendarRect?.height ?? rect.top + rect.bottom) - rect.top - rect.bottom
}}
on:drop={(e) => {
dispatch('drop', {
date: new Date(event.date)
})
}}
on:resize={() => (events = events)}
/>
</div> </div>
{/if} {/if}
{#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
{@const day = getDay(weekMonday, dayOfWeek)}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="empty-cell"
style:width={`${colWidth}px`}
style:grid-column={`col-start ${dayOfWeek + 1} / ${dayOfWeek + 2}`}
style:grid-row={`row-start ${hourOfDay * 2 + 1} / row-start ${hourOfDay * 2 + 3}`}
on:dragenter={(e) => {
dispatch('dragenter', {
date: new Date(day.setHours(hourOfDay + startHour, 0, 0, 0))
})
}}
on:drop|preventDefault={(e) => {
dispatch('drop', {
day,
hour: hourOfDay + startHour,
date: new Date(day.setHours(hourOfDay + startHour, 0, 0, 0))
})
}}
on:click|stopPropagation={() => {
dispatch('create', {
date: new Date(day.setHours(hourOfDay + startHour, 0, 0, 0)),
withTime: true
})
}}
/>
{/each}
{#if hourOfDay === displayedHours - startHour - 1}<div class="clear-cell" />{/if}
{/each} {/each}
{/key}
{#key [styleAD, calendarWidth, displayedDaysCount, showHeader]} </div>
{#each newEvents.filter((ev) => !ev.allDay) as event, i}
{@const rect = getRect(event)}
{@const ev = events.find((p) => p._id === event._id)}
{#if ev}
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div
class="calendar-element"
style:top={`${rect.top}px`}
style:bottom={`${rect.bottom}px`}
style:left={`${rect.left}px`}
style:right={`${rect.right}px`}
style:opacity={rect.visibility === 0 ? 0.4 : 1}
style:--mask-image={'none'}
tabindex={1000 + i}
>
<EventElement
event={ev}
hourHeight={cellHeight}
size={{
width: rect.width,
height: (calendarRect?.height ?? rect.top + rect.bottom) - rect.top - rect.bottom
}}
on:drop={(e) => {
dispatch('drop', {
date: new Date(event.date)
})
}}
on:resize={() => (events = events)}
/>
</div>
{/if}
{/each}
{/key}
</div>
{/key}
</Scroller> </Scroller>
<style lang="scss"> <style lang="scss">