From acf30753fc71cc16c2234c999a2de3bf1ff70f02 Mon Sep 17 00:00:00 2001 From: 0-ft <0ft@pm.me> Date: Wed, 18 May 2022 14:47:17 +0100 Subject: [PATCH 1/5] Add title to event editing modal --- src/modal.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modal.ts b/src/modal.ts index e5f71188..57d20f45 100644 --- a/src/modal.ts +++ b/src/modal.ts @@ -40,6 +40,7 @@ export class EventModal extends Modal { input.id ); if (event) { + this.titleEl.setText("Edit Event"); this.data = event.data; this.event = event; this.open(); From f3ad73dae1ea4ef050f579e522339406b4cdb445 Mon Sep 17 00:00:00 2001 From: 0-ft <0ft@pm.me> Date: Wed, 18 May 2022 16:55:55 +0100 Subject: [PATCH 2/5] Update event editing modal --- src/EditModal.css | 51 +++++++ src/components/EditEvent.tsx | 285 ++++++++++++++++++++--------------- src/view.ts | 1 + 3 files changed, 215 insertions(+), 122 deletions(-) create mode 100644 src/EditModal.css diff --git a/src/EditModal.css b/src/EditModal.css new file mode 100644 index 00000000..b84aab00 --- /dev/null +++ b/src/EditModal.css @@ -0,0 +1,51 @@ +.ofc-edit-modal-content { + display: grid; + gap: 1em; + grid-template-columns: 1fr 1fr; +} + +.ofc-edit-modal-column { + display: flex; + flex-direction: column; +} + +.ofc-edit-modal-event-save-button { + margin: 0; +} + +.ofc-edit-modal-content label { + color: var(--text-muted); + font-size: 14px; +} + +.ofc-edit-modal-content input[type="date"], +.ofc-edit-modal-content input[type="time"], +.ofc-edit-modal-content select { + background: var(--background-modifier-form-field); + border: 1px solid var(--background-modifier-border); + color: var(--text-normal); + font-family: inherit; + padding: 5px 14px; + font-size: 16px; + border-radius: 4px; + outline: none; + height: 30px; +} + +.ofc-edit-modal-buttons, +.ofc-edit-modal-checkbox { + display: flex; +} + +.ofc-edit-modal-event-delete-button { + background-color: var(--background-secondary); + color: var(--background-modifier-error); + border-color: var(--background-modifier-error); + border-width: 1px; + border-style: solid; + margin-right: auto; +} + +.not-visible { + display: none; +} \ No newline at end of file diff --git a/src/components/EditEvent.tsx b/src/components/EditEvent.tsx index c333c0d3..fa8df1c0 100644 --- a/src/components/EditEvent.tsx +++ b/src/components/EditEvent.tsx @@ -1,4 +1,3 @@ -import { DropdownComponent } from "obsidian"; import * as React from "react"; import { useEffect, useRef, useState } from "react"; import { @@ -57,26 +56,31 @@ const DAY_MAP = { const DaySelect = ({ value: days, onChange, + label: selectLabel, }: { value: string[]; onChange: (days: string[]) => void; + label: string; }) => { return ( -
- {Object.entries(DAY_MAP).map(([code, label]) => ( - - days.includes(code) - ? onChange(days.filter((c) => c !== code)) - : onChange([code, ...days]) - } - /> - ))} -
+ <> + +
+ {Object.entries(DAY_MAP).map(([code, label]) => ( + + days.includes(code) + ? onChange(days.filter((c) => c !== code)) + : onChange([code, ...days]) + } + /> + ))} +
+ ); }; @@ -134,6 +138,11 @@ export const EditEvent = ({ [] ); + const onRecurringDaysChanged = (days: string[]) => { + setIsRecurring(days.length > 0); + setDaysOfWeek(days); + }; + const [allDay, setAllDay] = useState(initialEvent?.allDay || false); const [calendarIndex, setCalendarIndex] = useState(defaultCalendarIndex); @@ -161,6 +170,7 @@ export const EditEvent = ({ endRecur: endRecur || undefined, } : { + type: "single", date, endDate, }), @@ -169,18 +179,83 @@ export const EditEvent = ({ ); }; - return ( + const startTimeInput = ( <> -
-

- {open && } -

-
+ + x)} + /> + + ); + + const endTimeInput = ( + <> + + x)} + /> + + ); + + const startDateInput = ( + <> + + x)} + /> + + ); + + const endDateInput = ( + <> + + + x == "undefined" ? undefined : x + )} + /> + + ); -
-

+ const stopRecurringInput = ( + <> + + x)} + /> + + ); + + return ( + <> + +

+ x)} /> -

-

+

+
+ -

-

- {!isRecurring && ( - x)} - /> - )} - - {allDay ? ( - <> - ) : ( - <> - x - )} - /> - - - x - )} - /> - - )} -

-

- +

+
{startDateInput}
+
+ {!isRecurring && endDateInput} +
+
setAllDay(e.target.checked)} type="checkbox" /> -

-

- + +

+
setIsRecurring(e.target.checked)} type="checkbox" /> -

- + +
+ {!allDay && ( + <> +
+ {startTimeInput} +
+
+ {endTimeInput} +
+ + )} {isRecurring && ( <> - -

- Starts recurring - x)} - /> - and stops recurring - x - )} +

+ -

+
+
+ {stopRecurringInput} +
)} -

- - - {deleteEvent && ( - - )} - -

+ {deleteEvent && ( + + )} + + + ); diff --git a/src/view.ts b/src/view.ts index 655fc5e2..650dbbd1 100644 --- a/src/view.ts +++ b/src/view.ts @@ -1,4 +1,5 @@ import "./overrides.css"; +import "./EditModal.css"; import { ItemView, Notice, TFile, WorkspaceLeaf } from "obsidian"; import { Calendar } from "@fullcalendar/core"; import { renderCalendar } from "./calendar"; From f4fba257ff53d3a4ef1118c34270e04b4ffa6942 Mon Sep 17 00:00:00 2001 From: 0-ft <0ft@pm.me> Date: Wed, 18 May 2022 17:09:20 +0100 Subject: [PATCH 3/5] Remove erroneous bracket from end of recurring event filenames --- src/models/Event.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/models/Event.ts b/src/models/Event.ts index 543d88e6..8c8ea320 100644 --- a/src/models/Event.ts +++ b/src/models/Event.ts @@ -9,7 +9,7 @@ export function basenameFromEvent(event: EventFrontmatter): string { case undefined: return `${event.date} ${event.title}`; case "recurring": - return `(Every ${event.daysOfWeek.join(",")}) ${event.title})`; + return `(Every ${event.daysOfWeek.join(",")}) ${event.title}`; } } From bbdb056c6e7653b4146aa3eca67841fc48b2724d Mon Sep 17 00:00:00 2001 From: 0-ft <0ft@pm.me> Date: Thu, 19 May 2022 21:51:40 +0100 Subject: [PATCH 4/5] Always set end date when event is created --- src/frontmatter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontmatter.ts b/src/frontmatter.ts index c627ff5a..5187a86f 100644 --- a/src/frontmatter.ts +++ b/src/frontmatter.ts @@ -22,7 +22,7 @@ export function dateEndpointsToFrontmatter( return { type: "single", date, - endDate: date !== endDate ? endDate : undefined, + endDate, allDay, ...(allDay ? {} From 0149920de75f6710e2f5f08e50b5a11c8093b335 Mon Sep 17 00:00:00 2001 From: 0-ft <0ft@pm.me> Date: Thu, 19 May 2022 21:57:07 +0100 Subject: [PATCH 5/5] Always have title for event modal --- src/main.ts | 9 +++++++-- src/modal.ts | 3 ++- src/view.ts | 4 +++- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/main.ts b/src/main.ts index 7c5a4b94..e275976a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -50,7 +50,7 @@ export default class FullCalendarPlugin extends Plugin { id: "full-calendar-new-event", name: "New Event", callback: () => { - new EventModal(this.app, this, null).open(); + new EventModal(this.app, this, null, "Create Event").open(); }, }); this.addCommand({ @@ -68,7 +68,12 @@ export default class FullCalendarPlugin extends Plugin { this.app.workspace.getActiveViewOfType(MarkdownView); if (view) { const file = view.file; - new EventModal(this.app, this, null).editInModal(file); + new EventModal( + this.app, + this, + null, + "Create Event" + ).editInModal(file); } }, }); diff --git a/src/modal.ts b/src/modal.ts index 57d20f45..b8c2a6d6 100644 --- a/src/modal.ts +++ b/src/modal.ts @@ -23,12 +23,14 @@ export class EventModal extends Modal { app: App, plugin: FullCalendarPlugin, calendar: Calendar | null, + title: string, event?: Partial ) { super(app); this.plugin = plugin; this.data = event; this.calendar = calendar; + this.titleEl.setText(title); } async editInModal(input: EventApi | TFile) { @@ -40,7 +42,6 @@ export class EventModal extends Modal { input.id ); if (event) { - this.titleEl.setText("Edit Event"); this.data = event.data; this.event = event; this.open(); diff --git a/src/view.ts b/src/view.ts index 650dbbd1..063eb0a3 100644 --- a/src/view.ts +++ b/src/view.ts @@ -115,7 +115,8 @@ export class CalendarView extends ItemView { new EventModal( this.app, this.plugin, - this.calendar + this.calendar, + "Edit Event" ).editInModal(info.event); } }, @@ -129,6 +130,7 @@ export class CalendarView extends ItemView { this.app, this.plugin, this.calendar, + "Create Event", partialEvent ); modal.open();