From efd8ff51db4548627c646cdcdc3d9df616fc9c1a Mon Sep 17 00:00:00 2001
From: Kadison <134670047+KadisonM@users.noreply.github.com>
Date: Thu, 14 Mar 2024 22:09:54 +1030
Subject: [PATCH] Add tooltips

---
 src/homework-modal.ts | 15 +++++++++++++++
 src/scss/styles.scss  |  4 ++++
 styles.css            |  3 +++
 3 files changed, 22 insertions(+)

diff --git a/src/homework-modal.ts b/src/homework-modal.ts
index e52a8ef..5f29a5a 100644
--- a/src/homework-modal.ts
+++ b/src/homework-modal.ts
@@ -60,6 +60,8 @@ export default class HomeworkModal extends Modal {
 
         const dropdownButton = headerLeft.createEl("span", {cls: ["homework-manager-icon-button", "clickable-icon"]});
         setIcon(dropdownButton, "chevron-down");
+        dropdownButton.setAttribute("aria-label", "Views");
+        dropdownButton.setAttribute("data-tooltip-position", "top");
 
         let dropdownList: HTMLDivElement | undefined = undefined;
 
@@ -106,12 +108,25 @@ export default class HomeworkModal extends Modal {
         let viewName = views[viewIndex].name;
 		headerLeft.createEl("h1", { text: viewName });
 
+        // Add top-level task
+        const newTaskButton = headerLeft.createEl("span", {cls: ["homework-manager-header-task", "homework-manager-icon-button", "clickable-icon"]});
+        newTaskButton.setAttribute("aria-label", "Add new task without subject");
+        newTaskButton.setAttribute("data-tooltip-position", "top");
+        setIcon(newTaskButton, "plus");
+
+        newTaskButton.addEventListener("click", (click) => {
+            // TODO: Call create task function and list the source (Subject/Top)
+        });
+
         // ------------------- RIGHT HEADER ------------------- //
 
         // Create the edit button
         const editButton = this.divHeader.createEl("span", {cls: ["homework-manager-icon-button", "clickable-icon"]});
         const editIcon = this.editMode ? "book-open" : "pencil";
         setIcon(editButton, editIcon);
+        const attributeMessage = this.editMode ? "Switch to view mode" : "Switch to edit mode\nFor editing, reordering or deleting tasks/subjects"
+        editButton.setAttribute("aria-label", attributeMessage);
+        editButton.setAttribute("data-tooltip-position", "top");
 
         editButton.addEventListener("click", (click) => {
             this.editMode = !this.editMode;
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 35b5832..729f28d 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -17,6 +17,10 @@
             font-size: x-large;
             margin: 0;
         }
+
+        &-task {
+            margin-left: 10px;
+        }
     }
 
     &-icon-button {
diff --git a/styles.css b/styles.css
index 7ce2526..d0e56f9 100644
--- a/styles.css
+++ b/styles.css
@@ -14,6 +14,9 @@
   font-size: x-large;
   margin: 0;
 }
+.homework-manager-header-task {
+  margin-left: 10px;
+}
 .homework-manager-icon-button {
   width: 30px;
   height: 30px;