From f4505554398f77a518ee1526b83acd94c7559bfd Mon Sep 17 00:00:00 2001 From: Scott Bishel Date: Tue, 30 Nov 2021 10:57:34 -0700 Subject: [PATCH] GH-1864 Add + sign to add new event. (#1892) * Updating table row css (#1787) * add + to date anchor * rename classes, update tests * Updating css for button * Updating css Co-authored-by: Asaad Mahmood Co-authored-by: Mattermod --- .../__snapshots__/fullCalendar.test.tsx.snap | 1890 +++++++++++++++-- .../src/components/calendar/fullCalendar.tsx | 43 +- .../src/components/calendar/fullcalendar.scss | 87 +- 3 files changed, 1878 insertions(+), 142 deletions(-) diff --git a/webapp/src/components/calendar/__snapshots__/fullCalendar.test.tsx.snap b/webapp/src/components/calendar/__snapshots__/fullCalendar.test.tsx.snap index 1149d488f..dcb7e6511 100644 --- a/webapp/src/components/calendar/__snapshots__/fullCalendar.test.tsx.snap +++ b/webapp/src/components/calendar/__snapshots__/fullCalendar.test.tsx.snap @@ -277,7 +277,20 @@ exports[`components/calendar/toolbar return calendar, no date property 1`] = ` class="fc-daygrid-day-number" id="fc-dom-2" > - 26 +
+
+ + +
+
+ 26 +
+
- 27 +
+
+ + +
+
+ 27 +
+
- 28 +
+
+ + +
+
+ 28 +
+
- 29 +
+
+ + +
+
+ 29 +
+
- 30 +
+
+ + +
+
+ 30 +
+
- 1 +
+
+ + +
+
+ 1 +
+
- 2 +
+
+ + +
+
+ 2 +
+
- 3 +
+
+ + +
+
+ 3 +
+
- 4 +
+
+ + +
+
+ 4 +
+
- 5 +
+
+ + +
+
+ 5 +
+
- 6 +
+
+ + +
+
+ 6 +
+
- 7 +
+
+ + +
+
+ 7 +
+
- 8 +
+
+ + +
+
+ 8 +
+
- 9 +
+
+ + +
+
+ 9 +
+
- 10 +
+
+ + +
+
+ 10 +
+
- 11 +
+
+ + +
+
+ 11 +
+
- 12 +
+
+ + +
+
+ 12 +
+
- 13 +
+
+ + +
+
+ 13 +
+
- 14 +
+
+ + +
+
+ 14 +
+
- 15 +
+
+ + +
+
+ 15 +
+
- 16 +
+
+ + +
+
+ 16 +
+
- 17 +
+
+ + +
+
+ 17 +
+
- 18 +
+
+ + +
+
+ 18 +
+
- 19 +
+
+ + +
+
+ 19 +
+
- 20 +
+
+ + +
+
+ 20 +
+
- 21 +
+
+ + +
+
+ 21 +
+
- 22 +
+
+ + +
+
+ 22 +
+
- 23 +
+
+ + +
+
+ 23 +
+
- 24 +
+
+ + +
+
+ 24 +
+
- 25 +
+
+ + +
+
+ 25 +
+
- 26 +
+
+ + +
+
+ 26 +
+
- 27 +
+
+ + +
+
+ 27 +
+
- 28 +
+
+ + +
+
+ 28 +
+
- 29 +
+
+ + +
+
+ 29 +
+
- 30 +
+
+ + +
+
+ 30 +
+
- 31 +
+
+ + +
+
+ 31 +
+
- 1 +
+
+ + +
+
+ 1 +
+
- 2 +
+
+ + +
+
+ 2 +
+
- 3 +
+
+ + +
+
+ 3 +
+
- 4 +
+
+ + +
+
+ 4 +
+
- 5 +
+
+ + +
+
+ 5 +
+
- 6 +
+
+ + +
+
+ 6 +
+
- 26 +
+
+ + +
+
+ 26 +
+
- 27 +
+
+ + +
+
+ 27 +
+
- 28 +
+
+ + +
+
+ 28 +
+
- 29 +
+
+ + +
+
+ 29 +
+
- 30 +
+
+ + +
+
+ 30 +
+
- 1 +
+
+ + +
+
+ 1 +
+
- 2 +
+
+ + +
+
+ 2 +
+
- 3 +
+
+ + +
+
+ 3 +
+
- 4 +
+
+ + +
+
+ 4 +
+
- 5 +
+
+ + +
+
+ 5 +
+
- 6 +
+
+ + +
+
+ 6 +
+
- 7 +
+
+ + +
+
+ 7 +
+
- 8 +
+
+ + +
+
+ 8 +
+
- 9 +
+
+ + +
+
+ 9 +
+
- 10 +
+
+ + +
+
+ 10 +
+
- 11 +
+
+ + +
+
+ 11 +
+
- 12 +
+
+ + +
+
+ 12 +
+
- 13 +
+
+ + +
+
+ 13 +
+
- 14 +
+
+ + +
+
+ 14 +
+
- 15 +
+
+ + +
+
+ 15 +
+
- 16 +
+
+ + +
+
+ 16 +
+
- 17 +
+
+ + +
+
+ 17 +
+
- 18 +
+
+ + +
+
+ 18 +
+
- 19 +
+
+ + +
+
+ 19 +
+
- 20 +
+
+ + +
+
+ 20 +
+
- 21 +
+
+ + +
+
+ 21 +
+
- 22 +
+
+ + +
+
+ 22 +
+
- 23 +
+
+ + +
+
+ 23 +
+
- 24 +
+
+ + +
+
+ 24 +
+
- 25 +
+
+ + +
+
+ 25 +
+
- 26 +
+
+ + +
+
+ 26 +
+
- 27 +
+
+ + +
+
+ 27 +
+
- 28 +
+
+ + +
+
+ 28 +
+
- 29 +
+
+ + +
+
+ 29 +
+
- 30 +
+
+ + +
+
+ 30 +
+
- 31 +
+
+ + +
+
+ 31 +
+
- 1 +
+
+ + +
+
+ 1 +
+
- 2 +
+
+ + +
+
+ 2 +
+
- 3 +
+
+ + +
+
+ 3 +
+
- 4 +
+
+ + +
+
+ 4 +
+
- 5 +
+
+ + +
+
+ 5 +
+
- 6 +
+
+ + +
+
+ 6 +
+
- 26 +
+
+ + +
+
+ 26 +
+
- 27 +
+
+ + +
+
+ 27 +
+
- 28 +
+
+ + +
+
+ 28 +
+
- 29 +
+
+ + +
+
+ 29 +
+
- 30 +
+
+ + +
+
+ 30 +
+
- 1 +
+
+ + +
+
+ 1 +
+
- 2 +
+
+ + +
+
+ 2 +
+
- 3 +
+
+ + +
+
+ 3 +
+
- 4 +
+
+ + +
+
+ 4 +
+
- 5 +
+
+ + +
+
+ 5 +
+
- 6 +
+
+ + +
+
+ 6 +
+
- 7 +
+
+ + +
+
+ 7 +
+
- 8 +
+
+ + +
+
+ 8 +
+
- 9 +
+
+ + +
+
+ 9 +
+
- 10 +
+
+ + +
+
+ 10 +
+
- 11 +
+
+ + +
+
+ 11 +
+
- 12 +
+
+ + +
+
+ 12 +
+
- 13 +
+
+ + +
+
+ 13 +
+
- 14 +
+
+ + +
+
+ 14 +
+
- 15 +
+
+ + +
+
+ 15 +
+
- 16 +
+
+ + +
+
+ 16 +
+
- 17 +
+
+ + +
+
+ 17 +
+
- 18 +
+
+ + +
+
+ 18 +
+
- 19 +
+
+ + +
+
+ 19 +
+
- 20 +
+
+ + +
+
+ 20 +
+
- 21 +
+
+ + +
+
+ 21 +
+
- 22 +
+
+ + +
+
+ 22 +
+
- 23 +
+
+ + +
+
+ 23 +
+
- 24 +
+
+ + +
+
+ 24 +
+
- 25 +
+
+ + +
+
+ 25 +
+
- 26 +
+
+ + +
+
+ 26 +
+
- 27 +
+
+ + +
+
+ 27 +
+
- 28 +
+
+ + +
+
+ 28 +
+
- 29 +
+
+ + +
+
+ 29 +
+
- 30 +
+
+ + +
+
+ 30 +
+
- 31 +
+
+ + +
+
+ 31 +
+
- 1 +
+
+ + +
+
+ 1 +
+
- 2 +
+
+ + +
+
+ 2 +
+
- 3 +
+
+ + +
+
+ 3 +
+
- 4 +
+
+ + +
+
+ 4 +
+
- 5 +
+
+ + +
+
+ 5 +
+
- 6 +
+
+ + +
+
+ 6 +
+
{ 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 = {} 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 ( +
+
onNewEvent({start: args.date, end: args.date})} + > + {'+'} +
+
+ {args.dayNumberText} +
+
+ ) + }, []) + return (
{ eventClick={eventClick} eventContent={renderEventContent} eventChange={eventChange} + selectable={isSelectable} selectMirror={true} select={onNewEvent} diff --git a/webapp/src/components/calendar/fullcalendar.scss b/webapp/src/components/calendar/fullcalendar.scss index 7a040a550..1b8ea643b 100644 --- a/webapp/src/components/calendar/fullcalendar.scss +++ b/webapp/src/components/calendar/fullcalendar.scss @@ -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 {