Remove PNG images, replace them with SVGs

ui/components/CreateTaskOrEvent.slint

@@ -26,7 +26,7 @@ export component CreateTaskOrEvent inherits Rectangle {
 			 	}
 				accepted => { 
 					if (task-or-event == 1) {
-						Backend.createTask({
+						Backend.create-task({
 							sourceId: sourceInput.current-index,
 							eventId: -1,
 							title: newTaskTitleInput.text,
@@ -34,7 +34,7 @@ export component CreateTaskOrEvent inherits Rectangle {
 							date: taskDateInput.date
 						})
 					} else {
-						Backend.createEvent({
+						Backend.create-event({
 							sourceId: sourceInput.current-index,
 							title: newTaskTitleInput.text,
 							date: taskDateInput.date,

ui/components/EventGroup.slint

@@ -0,0 +1,91 @@
+import { Backend, TaskData, Event } from "../Backend.slint";
+import { ScrollView } from "std-widgets.slint";
+import { VCheckBox, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@vynui";
+import { TaskLine } from "./TaskLine.slint";
+import { Utils } from "../Utils.slint";
+
+export component EventGroup {
+	in property<Event> event;
+
+	eventPopup := VPopupIconMenu {
+		VActionButton {
+			icon-svg: Svg.plus;
+			icon-colorize: Colors.greenyellow;
+			icon-size: 1.5rem;
+			border-radius: 0;
+			clicked => { Backend.open-new-task-form({
+				eventSourceId: event.sourceId,
+				eventId: event.id,
+			})}
+		}
+		VActionButton {
+			icon-svg: Svg.pen;
+			icon-colorize: Colors.grey;
+			icon-size: 1.5rem;
+			border-radius: 0;
+			clicked => { Backend.open-edit-event-form(event.sourceId, event.id) }
+		}
+
+		VActionButton {
+			icon-svg: Svg.trash;
+			icon-colorize: Colors.pink;
+			icon-size: 1.5rem;
+			border-radius: 0;
+			clicked => { Backend.delete-event-clicked(event.sourceId, event.id) }
+		}
+	}
+
+	ta := TouchArea {
+		pointer-event(e) => { 
+			if (e.button == PointerEventButton.right && e.kind == PointerEventKind.up) {
+				eventPopup.show(ta.mouse-x, ta.mouse-y); 
+			}
+		}
+	}
+
+	HorizontalLayout {
+		VerticalLayout {
+			spacing: 4px;
+			VText {
+				text: Utils.time-to-string(event.startsAt);
+				color: Palette.accent;
+			}
+			HorizontalLayout {
+				alignment: center;
+				Rectangle {
+					width: 4px;
+					background: Palette.accent;
+					border-radius: 8px;
+
+				}
+			}
+			VText {
+				text: Utils.time-to-string(event.endsAt);
+				color: Palette.accent;
+				font-size: 0.8rem;
+				horizontal-alignment: center;
+			}
+		}
+		VerticalLayout {
+			horizontal-stretch: 1;
+			padding: 16px;
+			padding-top: 32px;
+			padding-bottom: 32px;
+			padding-right: 0px;
+			VText {
+				text: event.title;
+				font-size: 1.1rem;
+			}
+			for task[taskIndex] in event.tasks: VerticalLayout {
+				padding-top: taskIndex == 0 ? 16px : 0px;
+				padding-bottom: 8px;
+				TaskLine {
+					task: task;
+					source-index: task.sourceId;
+					task-index: task.id;
+				}
+			}
+		}
+	}
+
+}

ui/components/SideBar.slint

@@ -0,0 +1,31 @@
+import { Backend } from "../Backend.slint";
+import { ToggleButton, VText, Palette } from "@vynui";
+
+export component SideBar inherits Rectangle {
+	background: Palette.pane;
+
+	VerticalLayout {
+		alignment: start;
+		padding: 16px;
+		spacing: 16px;
+		VText {
+			text: "Sources";
+			font-size: 1.5rem;
+		}
+		VerticalLayout {
+			spacing: 4px;
+			ToggleButton {
+				text: "All";
+				text-alignment: left;
+				active: Backend.no-source-selected;
+				clicked => { Backend.source-clicked(-1) }
+			}
+			for item[index] in Backend.sources-selected: ToggleButton {
+				text: item.name;
+				text-alignment: left;
+				active: item.selected;
+				clicked => { Backend.source-clicked(index) }
+			}
+		}
+	}
+}

ui/components/TaskLine.slint

@@ -0,0 +1,100 @@
+import { Backend, TaskData } from "../Backend.slint";
+import { ToggleButton } from "@vynui";
+import { VPopupIconMenu, VTag, VButton, VActionButton, VCheckBox, Svg, Palette } from "@vynui";
+import { TaskEdit } from "./TaskEdit.slint";
+import { Date } from "std-widgets.slint";
+
+export component TaskLine inherits VerticalLayout {
+	in property<TaskData> task;
+	in property<Date> date;
+	in property<int> event-index: -1;
+	in property<int> source-index: -1;
+	in property<int> task-index: -1;
+
+	private property<length> popup-x: 200px;
+	private property<length> popup-y: 200px;
+
+	init => {
+		if (task-index == -1) {
+			debug("Error: missing task-index")
+		}
+	}
+
+	taskEdit := TaskEdit {
+		accepted(task) => {
+			Backend.save-task({
+				id: task.id,
+				sourceId: task.sourceId,
+				title: task.title,
+				scheduled: task.date.year != 0,
+				date: task.date
+			});
+			taskEdit.close();
+		}
+	}
+
+	if !taskEdit.should-show : Rectangle {
+		popup := VPopupIconMenu {
+			VActionButton {
+				icon-svg: Svg.pen;
+				icon-colorize: Colors.grey;
+				icon-size: 1.5rem;
+				border-radius: 0;
+				clicked => { 
+					taskEdit.show({
+						sourceId: task.sourceId,
+						id: task.id,
+						title: task.title,
+						scheduled: root.date.year != 0,
+						date: date,
+					});
+				}
+			}
+
+			VActionButton {
+				icon-svg: Svg.trash;
+				icon-colorize: Colors.pink;
+				icon-size: 1.5rem;
+				border-radius: 0;
+				clicked => {
+					Backend.delete-task-clicked(source-index, task-index)
+				}
+			}
+		}
+
+		ta := TouchArea {
+			clicked => {
+				checkbox.checked = !checkbox.checked;
+				Backend.task-clicked(source-index, task-index);
+			}
+			pointer-event(e) => {
+				if (e.button == PointerEventButton.right && e.kind == PointerEventKind.up) {
+					popup.show(ta.mouse-x, ta.mouse-y);
+				}
+			}
+			z: 10;
+		}
+
+		HorizontalLayout {
+			alignment: space-between;
+			HorizontalLayout {
+				alignment: start;
+				spacing: 8px;
+				checkbox := VCheckBox {
+					text: task.title;
+					checked: task.checked;
+					toggled => {
+						Backend.task-clicked(source-index, task-index)
+					}
+				}
+				for tag[tag-index] in task.tags: VTag {
+					text: tag;
+					size: 0.8rem;
+				}
+			}
+			
+		}
+
+	}
+	
+}