From 892b95fedc08e15c5ac890450b57fbe03cf7fbd5 Mon Sep 17 00:00:00 2001
From: and <and@tutao.de>
Date: Mon, 1 Jul 2024 09:36:14 +0200
Subject: [PATCH] Show new event button in Agenda view when it's empty (for
 single and two columns layout)

---
 .../calendar/view/CalendarAgendaView.ts       |  7 +++++
 .../calendar/view/CalendarView.ts             |  1 +
 src/common/gui/FolderColumnView.ts            | 20 ++----------
 src/common/gui/MainCreateButton.ts            | 31 +++++++++++++++++++
 4 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 src/common/gui/MainCreateButton.ts

diff --git a/src/calendar-app/calendar/view/CalendarAgendaView.ts b/src/calendar-app/calendar/view/CalendarAgendaView.ts
index 93881d1f495d..fa332f17b196 100644
--- a/src/calendar-app/calendar/view/CalendarAgendaView.ts
+++ b/src/calendar-app/calendar/view/CalendarAgendaView.ts
@@ -26,6 +26,7 @@ import { PageView } from "../../../common/gui/base/PageView.js"
 import { getIfLargeScroll } from "../../../common/gui/base/GuiUtils.js"
 import { isKeyPressed } from "../../../common/misc/KeyManager.js"
 import { Keys } from "../../../common/api/common/TutanotaConstants.js"
+import { MainCreateButton } from "../../../common/gui/MainCreateButton.js"
 
 export type CalendarAgendaViewAttrs = {
 	selectedDate: Date
@@ -49,6 +50,7 @@ export type CalendarAgendaViewAttrs = {
 	scrollPosition: number
 	onScrollPositionChange: (newPosition: number) => unknown
 	onViewChanged: (vnode: VnodeDOM) => unknown
+	onCreateEvent?: () => unknown
 }
 
 export class CalendarAgendaView implements Component<CalendarAgendaViewAttrs> {
@@ -184,6 +186,11 @@ export class CalendarAgendaView implements Component<CalendarAgendaViewAttrs> {
 				icon: BootIcons.Calendar,
 				message: "noEntries_msg",
 				color: theme.list_message_bg,
+				bottomContent: MainCreateButton({
+					label: "newEvent_action",
+					click: () => attrs.onCreateEvent?.(),
+					class: "mt-s",
+				}),
 			})
 		} else {
 			return m(
diff --git a/src/calendar-app/calendar/view/CalendarView.ts b/src/calendar-app/calendar/view/CalendarView.ts
index 584e53e60e51..dc9baefdd5b3 100644
--- a/src/calendar-app/calendar/view/CalendarView.ts
+++ b/src/calendar-app/calendar/view/CalendarView.ts
@@ -306,6 +306,7 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
 									scrollPosition: this.viewModel.getScrollPosition(),
 									onScrollPositionChange: (newPosition: number) => this.viewModel.setScrollPosition(newPosition),
 									onViewChanged: (vnode) => this.viewModel.setViewParameters(vnode.dom as HTMLElement),
+									onCreateEvent: () => this.createNewEventDialog(),
 								} satisfies CalendarAgendaViewAttrs),
 							})
 
diff --git a/src/common/gui/FolderColumnView.ts b/src/common/gui/FolderColumnView.ts
index c67a004dde68..0035b7b577a7 100644
--- a/src/common/gui/FolderColumnView.ts
+++ b/src/common/gui/FolderColumnView.ts
@@ -6,8 +6,7 @@ import { lang } from "../misc/LanguageViewModel.js"
 import { AriaLandmarks, landmarkAttrs } from "./AriaUtils.js"
 import type { ClickHandler } from "./base/GuiUtils.js"
 import type { lazy } from "@tutao/tutanota-utils"
-import { BaseButton, BaseButtonAttrs } from "./base/buttons/BaseButton.js"
-import { px, size } from "./size.js"
+import { MainCreateButton } from "./MainCreateButton.js"
 
 export type Attrs = {
 	/** Button to be displayed on top of the column*/
@@ -44,22 +43,7 @@ export class FolderColumnView implements Component<Attrs> {
 
 	private renderMainButton(attrs: Attrs): Children {
 		if (attrs.button) {
-			const label = lang.get(attrs.button.label)
-			return m(
-				".plr-button-double.scrollbar-gutter-stable-or-fallback.scroll",
-				m(BaseButton, {
-					label,
-					text: label,
-					onclick: attrs.button.click,
-					class: "full-width border-radius-big center b flash",
-					style: {
-						border: `2px solid ${theme.content_accent}`,
-						// matching toolbar
-						height: px(size.button_height + size.vpad_xs * 2),
-						color: theme.content_accent,
-					},
-				} satisfies BaseButtonAttrs),
-			)
+			return m(".plr-button-double.scrollbar-gutter-stable-or-fallback.scroll", MainCreateButton(attrs.button))
 		} else {
 			return null
 		}
diff --git a/src/common/gui/MainCreateButton.ts b/src/common/gui/MainCreateButton.ts
new file mode 100644
index 000000000000..cf85df0a35ba
--- /dev/null
+++ b/src/common/gui/MainCreateButton.ts
@@ -0,0 +1,31 @@
+import { lang, TranslationKey } from "../misc/LanguageViewModel.js"
+import { ClickHandler } from "./base/GuiUtils.js"
+import m, { Children } from "mithril"
+import { theme } from "./theme.js"
+import { px, size } from "./size.js"
+import { BaseButton, BaseButtonAttrs } from "./base/buttons/BaseButton.js"
+
+export interface MainCreateButtonAttrs {
+	label: TranslationKey
+	click: ClickHandler
+	class?: string
+}
+
+/**
+ * Main button used to open the creation dialog for emails,contacts and events.
+ */
+export const MainCreateButton = (buttonAttrs: MainCreateButtonAttrs): Children => {
+	const label = lang.get(buttonAttrs.label)
+	return m(BaseButton, {
+		label,
+		text: label,
+		onclick: buttonAttrs.click,
+		class: `full-width border-radius-big center b flash ${buttonAttrs.class}`,
+		style: {
+			border: `2px solid ${theme.content_accent}`,
+			// matching toolbar
+			height: px(size.button_height + size.vpad_xs * 2),
+			color: theme.content_accent,
+		},
+	} satisfies BaseButtonAttrs)
+}