self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-03-03 15:32:14 +02:00
Code Issues Releases Activity

GH-1864 Add + sign to add new event. (#1892)

Browse Source 
* Updating table row css (#1787)

* add + to date anchor

* rename classes, update tests

* Updating css for button

* Updating css

Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Scott Bishel 2021-11-30 10:57:34 -07:00 committed by GitHub
parent bfad610d15
commit f450555439
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 1878 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1890
webapp/src/components/calendar/__snapshots__/fullCalendar.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

43
webapp/src/components/calendar/fullCalendar.tsx
View File

@ -4,7 +4,7 @@
import React, {useCallback, useMemo} from 'react'
import {useIntl} from 'react-intl'
import FullCalendar, {EventClickArg, EventChangeArg, EventInput, EventContentArg} from '@fullcalendar/react'
import FullCalendar, {EventClickArg, EventChangeArg, EventInput, EventContentArg, DayCellContentArg} from '@fullcalendar/react'
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'
@ -47,6 +47,15 @@ function createDatePropertyFromCalendarDates(start: Date, end: Date) : DatePrope
return dateProperty
}
function createDatePropertyFromCalendarDate(start: Date) : DateProperty {
// save as noon local, expected from the date picker
start.setHours(12)
const dateFrom = start.getTime() - timeZoneOffset(start.getTime())
const dateProperty : DateProperty = {from: dateFrom}
return dateProperty
}
const timeZoneOffset = (date: number): number => {
return new Date(date).getTimezoneOffset() * 60 * 1000
}
@ -159,7 +168,15 @@ const CalendarFullView = (props: Props): JSX.Element|null => {
}, [cards, dateDisplayProperty])
const onNewEvent = useCallback((args: {start: Date, end: Date}) => {
const dateProperty = createDatePropertyFromCalendarDates(args.start, args.end)
let dateProperty: DateProperty
if (args.start === args.end) {
dateProperty = createDatePropertyFromCalendarDate(args.start)
} else {
dateProperty = createDatePropertyFromCalendarDates(args.start, args.end)
if (dateProperty.to === undefined) {
return
}
}
const properties: Record<string, string> = {}
if (dateDisplayProperty) {
@ -181,11 +198,32 @@ const CalendarFullView = (props: Props): JSX.Element|null => {
week: intl.formatMessage({id: 'calendar.week', defaultMessage: 'Week'}),
}), [])
const dayCellContent = useCallback((args: DayCellContentArg): JSX.Element|null => {
return (
<div
className='dateContainer'
>
<div
className='addEvent'
onClick={() => onNewEvent({start: args.date, end: args.date})}
>
{'+'}
</div>
<div
className='dateDisplay'
>
{args.dayNumberText}
</div>
</div>
)
}, [])
return (
<div
className='CalendarContainer'
>
<FullCalendar
dayCellContent={dayCellContent}
dayMaxEventRows={5}
initialDate={initialDate}
plugins={[dayGridPlugin, interactionPlugin]}
@ -198,6 +236,7 @@ const CalendarFullView = (props: Props): JSX.Element|null => {
eventClick={eventClick}
eventContent={renderEventContent}
eventChange={eventChange}
selectable={isSelectable}
selectMirror={true}
select={onNewEvent}

87
webapp/src/components/calendar/fullcalendar.scss
View File

@ -3,6 +3,15 @@
margin-bottom: 10px;
overflow: auto;
a {
text-decoration: none;
color: var(--link-color-rgb);
&:hover {
background-color: unset !important;;
}
}
.octo-tooltip {
display: flex;
max-width: 100%;
@ -45,8 +54,52 @@
height: 100%;
}
.fc-daygrid-day-frame {
cursor: pointer;
.fc-day {
.dateContainer {
display: flex;
flex-direction: row-reverse;
justify-content: right;
align-items: center;
width: 100%;
.addEvent {
border-radius: 4px;
margin: 0 4px;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
display: none;
font-size: 20px;
box-shadow: var(--elevation-1);
background: rgb(var(--center-channel-bg-rgb), 1);
border: 1px solid rgb(var(--center-channel-color-rgb), 0.12);
color: rgb(var(--center-channel-color-rgb), 0.56);
cursor: pointer;
&:hover {
background: rgb(var(--center-channel-color-rgb), 0.08);
color: rgb(var(--center-channel-color-rgb), 0.72);
}
&:active {
color: rgba(var(--button-bg-rgb), 1);
background: rgba(var(--button-bg-rgb), 0.08);
}
}
}
&:hover {
.dateContainer {
// display: flex;
flex-direction: row;
justify-content: space-between;
.addEvent {
display: flex;
}
}
}
}
.fc .fc-toolbar.fc-header-toolbar {
@ -147,24 +200,30 @@
background-color: rgba(var(--center-channel-color-rgb), 0.04);
}
.fc-day-today {
background: transparent;
.fc-daygrid-day-number {
color: rgba(var(--button-color-rgb));
background-color: rgba(var(--button-bg-rgb), 1);
}
}
.fc-daygrid-day-number {
.dateDisplay {
font-weight: 600;
margin: 4px 4px 0 0;
min-width: 24px;
height: 24px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.fc-day-today {
background: transparent;
.fc-daygrid-day-number {
.dateDisplay {
color: rgba(var(--button-color-rgb));
background-color: rgba(var(--button-bg-rgb), 1);
}
}
}
.fc-daygrid-day-number {
align-items: center;
width: 100%;
}
.fc-more-link {