diff --git a/src/EditModal.css b/src/EditModal.css new file mode 100644 index 0000000..b84aab0 --- /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 c333c0d..fa8df1c 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/frontmatter.ts b/src/frontmatter.ts index c627ff5..5187a86 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 ? {} diff --git a/src/main.ts b/src/main.ts index 7c5a4b9..e275976 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 e5f7118..b8c2a6d 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) { diff --git a/src/models/Event.ts b/src/models/Event.ts index 543d88e..8c8ea32 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}`; } } diff --git a/src/view.ts b/src/view.ts index 655fc5e..063eb0a 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"; @@ -114,7 +115,8 @@ export class CalendarView extends ItemView { new EventModal( this.app, this.plugin, - this.calendar + this.calendar, + "Edit Event" ).editInModal(info.event); } }, @@ -128,6 +130,7 @@ export class CalendarView extends ItemView { this.app, this.plugin, this.calendar, + "Create Event", partialEvent ); modal.open();