Team Calendar UI fixes (#3609)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-08-21 09:35:53 +03:00 committed by GitHub
parent 6e3ad0eb62
commit 0dd2fe3d72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 195 additions and 193 deletions

View File

@ -511,6 +511,7 @@ input.search {
.mx-4 { margin: 0 1rem; } .mx-4 { margin: 0 1rem; }
.mx-10 { margin: 0 2.5rem; } .mx-10 { margin: 0 2.5rem; }
.mx-auto { margin: 0 auto; } .mx-auto { margin: 0 auto; }
.my-1 { margin: .25rem 0; }
.my-2 { margin: .5rem 0; } .my-2 { margin: .5rem 0; }
.my-3 { margin: .75rem 0; } .my-3 { margin: .75rem 0; }
.my-4 { margin: 1rem 0; } .my-4 { margin: 1rem 0; }

View File

@ -105,8 +105,10 @@
} }
&:disabled { background-color: var(--theme-button-disabled); } &:disabled { background-color: var(--theme-button-disabled); }
&.selected { &.selected {
background-color: var(--theme-button-hovered); color: var(--theme-button-contrast-color);
.btn-icon { color: var(--theme-caption-color); } background-color: var(--theme-accent-color);
.btn-icon { color: var(--theme-button-contrast-color); }
&:hover { color: var(--theme-button-contrast-color); }
} }
} }
&.no-border { &.no-border {
@ -196,10 +198,6 @@
} }
&.regular, &.ghost { &.regular, &.ghost {
&:hover, &:active, &:focus { color: var(--theme-caption-color); } &:hover, &:active, &:focus { color: var(--theme-caption-color); }
&.selected {
color: var(--theme-button-contrast-color);
background-color: var(--theme-accent-color);
}
} }
&.accented, &.accented,
&.brand, &.brand,

View File

@ -181,10 +181,10 @@
const index = grid[event.day].columns.findIndex( const index = grid[event.day].columns.findIndex(
(col) => col.elements[col.elements.length - 1].dueDate <= event.date (col) => col.elements[col.elements.length - 1].dueDate <= event.date
) )
if (index === -1) {
const intersects = grid[event.day].columns.filter((col) => const intersects = grid[event.day].columns.filter((col) =>
checkIntersect(col.elements[col.elements.length - 1], event) checkIntersect(col.elements[col.elements.length - 1], event)
) )
if (index === -1) {
const size = intersects.length + 1 const size = intersects.length + 1
grid[event.day].columns.forEach((col) => { grid[event.day].columns.forEach((col) => {
if (checkIntersect(col.elements[col.elements.length - 1], event)) { if (checkIntersect(col.elements[col.elements.length - 1], event)) {
@ -195,9 +195,6 @@
elements: [{ id: event._id, date: event.date, dueDate: event.dueDate, cols: size }] elements: [{ id: event._id, date: event.date, dueDate: event.dueDate, cols: size }]
}) })
} else { } else {
const intersects = grid[event.day].columns.filter((col) =>
checkIntersect(col.elements[col.elements.length - 1], event)
)
let maxCols = 1 let maxCols = 1
intersects.forEach((col) => { intersects.forEach((col) => {
if (col.elements[col.elements.length - 1].cols > maxCols) { if (col.elements[col.elements.length - 1].cols > maxCols) {
@ -454,6 +451,7 @@
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"
@ -510,7 +508,11 @@
style:--mask-image={getMask(rect.visibility)} style:--mask-image={getMask(rect.visibility)}
tabindex={500 + i} tabindex={500 + i}
> >
<EventElement hourHeight={cellHeight} event={ev} size={{ width: rect.width, height: rect.height }} /> <EventElement
hourHeight={cellHeight}
event={ev}
size={{ width: rect.width, height: rect.height }}
/>
</div> </div>
{/if} {/if}
{/each} {/each}
@ -666,6 +668,7 @@
{/each} {/each}
{/key} {/key}
</div> </div>
{/key}
</Scroller> </Scroller>
<style lang="scss"> <style lang="scss">