From ba0d59b90ea43adf97b66509edc75323818198e5 Mon Sep 17 00:00:00 2001
From: liyunze <50455574+liyunze-coding@users.noreply.github.com>
Date: Sat, 8 Jun 2024 09:16:41 +0800
Subject: [PATCH] multi-lines per task feature

---
 configs.js                |  1 +
 scripts/defaultConfigs.js |  1 +
 scripts/taskList.js       |  7 ++++++-
 styles/taskList.css       | 26 ++++++++++++++++++--------
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/configs.js b/configs.js
index f1a7cd8..f72303c 100644
--- a/configs.js
+++ b/configs.js
@@ -76,6 +76,7 @@ const configs = (function () {
 		bodyMarginTop: "1px", // px
 
 		// task
+		numberOfLines: 2, // number
 		lineHeight: 1.5, // number
 		usernameFontWeight: "bold", // normal or bold or number
 		usernameColor: "white", // hex or name or "" for twitch user color
diff --git a/scripts/defaultConfigs.js b/scripts/defaultConfigs.js
index 057e0cc..cf7aaad 100644
--- a/scripts/defaultConfigs.js
+++ b/scripts/defaultConfigs.js
@@ -76,6 +76,7 @@ const defaultConfigs = (function () {
 		bodyMarginTop: "0px", // px
 
 		// task
+		numberOfLines: 1, // number
 		lineHeight: 1.5, // number
 		usernameFontWeight: "bold", // normal or bold or number
 		usernameColor: "white", // hex or name or "" for twitch user color
diff --git a/scripts/taskList.js b/scripts/taskList.js
index d602aa9..5ad2f23 100644
--- a/scripts/taskList.js
+++ b/scripts/taskList.js
@@ -2424,7 +2424,12 @@ async function renderTaskListToDOM() {
 					taskElement.classList.add("focus");
 				}
 
-				taskElement.innerText = task.text;
+				const taskContent = document.createElement("div");
+				taskContent.classList.add("content");
+
+				taskContent.innerText = task.text;
+
+				taskElement.appendChild(taskContent);
 				olListDiv.appendChild(taskElement);
 			}
 		}
diff --git a/styles/taskList.css b/styles/taskList.css
index 7ee7443..a212f1b 100644
--- a/styles/taskList.css
+++ b/styles/taskList.css
@@ -17,12 +17,13 @@
   --header-font-family: sans-serif;
   --header-font-color: white;
   --header-font-weight: bold;
-  --task-count-margin-right: 10px;
+  --task-count-margin-right: 0px;
   --body-background-color: rgba(0, 0, 0, 0.7);
   --body-border-width: 5px;
   --body-border-color: white;
   --body-border-radius: 5px;
   --body-margin-top: 0px;
+  --number-of-lines: 1;
   --line-height: 1.5;
   --username-font-weight: bold;
   --task-background-color: rgba(0, 0, 0, 0.7);
@@ -45,10 +46,6 @@
   box-sizing: border-box;
 }
 
-body {
-  background: gray;
-}
-
 #main-container {
   width: 100%;
   height: 100vh;
@@ -118,14 +115,26 @@ body {
   font-size: var(--username-font-size);
 }
 #main-container .task-wrapper .task-container .task .user-tasks {
-  list-style-position: inside;
+  counter-reset: item;
 }
 #main-container .task-wrapper .task-container .task .user-tasks .todo {
+  display: flex;
+}
+#main-container .task-wrapper .task-container .task .user-tasks .todo:before {
+  counter-increment: item;
+  content: counters(item, ".") ". ";
+  margin-right: 5px;
+}
+#main-container .task-wrapper .task-container .task .user-tasks .todo .content {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--number-of-lines);
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 #main-container .task-wrapper .task-container .task .user-tasks .done {
+  color: var(--done-task-font-color);
+}
+#main-container .task-wrapper .task-container .task .user-tasks .done .content {
   text-decoration: line-through;
   color: var(--done-task-font-color);
 }
@@ -136,4 +145,5 @@ body {
   border-radius: var(--focus-task-border-radius);
   width: -moz-fit-content;
   width: fit-content;
+  margin-left: calc(var(--focus-task-horizontal-padding) * -1);
 }/*# sourceMappingURL=taskList.css.map */
\ No newline at end of file