Official Beta release

- README incomplete
- haven't decided on an official name :(
- added padding to task list

README.md

@@ -1,4 +1,4 @@
-# Chat-Task-Tic Overlay
+# Chat-Task-Tic Overlay (Beta)
 
 ## Commands
 
@@ -52,8 +52,86 @@ Note: It's only available on Twitch for now
 
 ---
 
-## Customizing
+## Customization settings
 
 Edit `configs.js` to edit the style of the task list
 
+### Settings
+
+`showDoneTasks`:
+
+**true**: show the done tasks
+
+**false**: hide the done tasks
+
+`showTaskNumber`:
+
+**true**: show the task number (completed tasks / total tasks)
+
+**false**: hide the task number
+
+`crossTasksOnDone`:
+
+**true**: cross the tasks when they are marked as done
+
+**false**: don't cross the tasks when they are marked as done
+
+`showCheckBox`:
+
+**true**: show the checkbox
+
+**false**: hide the checkbox, use bullet points instead
+
+### fonts
+
+`headerFontFamily` - font family for the header
+
+`bodyFontFamily` - font family for the body
+
+### scroll
+
+`taskListScrollBehaviour` - scroll behaviour for the task list \([supports all css transition-timing-function](https://www.w3schools.com/css/css3_transitions.asp)\), linear and ease-in-out recommended
+
+`pixelsPerSecond` - speed of the scroll in pixels per second
+
+### task list
+
+`taskListWidth` - width of the task list (px)
+
+`taskListHeight` - height of the task list (px)
+
+`taskListBackgroundColor` - background color of the task list (hex only)
+
+`taskListBackgroundOpacity` - background opacity of the task list (0: transparent, 1: opaque, 0.5: half transparent)
+
+`taskListBorderColor` - border color of the task list (hex, name)
+
+`taskListBorderWidth` - border width of the task list (px)
+
+`taskListBorderRadius` - border radius of the task list (px)
+
+### header
+
+`headerHeight` - height of the header (px)
+
+`headerBackgroundColor` - background color of the header (hex only)
+
+`headerBackgroundOpacity` - background opacity of the header (0: transparent, 1: opaque, 0.5: half transparent)
+
+`headerBorderColor` - border color of the header (hex, name)
+
+`headerBorderWidth` - border width of the header (px)
+
+`headerBorderRadius` - border radius of the header (px)
+
+`headerFontSize` - font size of the header (px)
+
+`headerFontColor` - font color of the header (hex, name)
+
+`headerPadding` - padding of the header (px)
+
+`tasksNumberFontSize` - font size of the tasks number (px)
+
+( under construction )
+
 ---

configs.js

@@ -2,22 +2,23 @@ const configs = (function () {
 	"use strict";
 
 	// settings
-	const showDoneTasks = true; // true: check the box to mark the task as done, false: delete the task when done
-	const showTasksNumber = true; // show the number of tasks in the header, 'false' recommended if show done tasks is false
-	const crossTasksOnDone = false; // cross the task when done, 'false' recommended if show done tasks is false'
-	const showCheckBox = true; // show the checkbox to mark the task as done (otherwise use bullet points), 'false' recommended if show done tasks is false
+	const showDoneTasks = true; // true or false
+	const showTasksNumber = true; // true or false
+	const crossTasksOnDone = false; // true or false
+	const showCheckBox = true; // true or false
 
 	// fonts
 	const headerFontFamily = "Fredoka One"; // supports all google fonts - https://fonts.google.com/
 	const bodyFontFamily = "Nunito"; // supports all google fonts - https://fonts.google.com/
 
 	// scroll
-	const taskListScrollBehaviour = "linear"; // supports all css transition-timing-function (ease-in-out or linear recommended) - https://www.w3schools.com/css/css3_transitions.asp
+	const taskListScrollBehaviour = "linear"; // supports all css transition-timing-function
 	const pixelsPerSecond = 30; // must be a number
 
 	// task list
 	const taskListWidth = "500px"; // must have px at the end
 	const taskListHeight = "200px"; // must have px at the end
+
 	const taskListBackgroundColor = "#000"; // hex only
 	const taskListBackgroundOpacity = 0; // must be between 0 and 1
 
@@ -25,17 +26,20 @@ const configs = (function () {
 	const taskListBorderWidth = "0px"; // must have px at the end
 	const taskListBorderRadius = "10px"; // must have px at the end
 
-	const numberOfLines = 1; // number of lines
+	const taskListPadding = "10px"; // must have px at the end
 
 	// header
+	const headerHeight = "30px"; // must have px at the end
+	const headerBackgroundColor = "#000"; // hex only
+	const headerBackgroundOpacity = 0.9; // must be between 0 and 1
+
 	const headerBorderColor = "black"; // hex or name
 	const headerBorderWidth = "px"; // must have px at the end
 	const headerBorderRadius = "5px"; // must have px at the end
-	const headerHeight = "30px"; // must have px at the end
+
 	const headerFontSize = "20px"; // must have px at the end
-	const headerBackgroundColor = "#000"; // hex only
-	const headerBackgroundOpacity = 0.9; // must be between 0 and 1
 	const headerFontColor = "white"; // hex or name
+
 	const headerPadding = "10px"; // must have px at the end
 	const tasksNumberFontSize = "20px"; // must have px at the end
 
@@ -51,6 +55,7 @@ const configs = (function () {
 	const bodyHorizontalPadding = "3px"; // must have px at the end
 
 	// task (individual tasks)
+	const numberOfLines = 1; // number of lines for the task
 	const usernameColor = "white"; // hex or name, "" for twitch username color
 
 	const taskFontSize = "16px"; // must have px at the end
@@ -83,6 +88,7 @@ const configs = (function () {
 	const bulletPointCharacter = "🌻"; // any character
 	const bulletPointColor = "white"; // hex or name
 	const bulletPointSize = "15px"; // must have px at the end
+
 	const bulletPointMarginRight = "5px"; // must have px at the end
 	const bulletPointMarginLeft = "5px"; // must have px at the end
 	const bulletPointMarginTop = "-1px"; // must have px at the end
@@ -219,6 +225,7 @@ const configs = (function () {
 		taskListBorderColor,
 		taskListBorderWidth,
 		taskListBorderRadius,
+		taskListPadding,
 		numberOfLines,
 		headerFontColor,
 		headerBorderColor,

scripts/taskList.js

@@ -45,6 +45,7 @@ function importStyles() {
 		"taskListBorderColor",
 		"taskListBorderWidth",
 		"taskListBorderRadius",
+		"taskListPadding",
 		"numberOfLines",
 		"headerBorderColor",
 		"headerBorderWidth",

styles/taskList.css

@@ -21,7 +21,7 @@ CUSTOMIZATIONS TO ADD:
 	--task-list-border-width: 1px;
 	--task-list-border-radius: 10px;
 
-	--number-of-lines: 1; /* number of lines to show */
+	--task-list-padding: 10px;
 
 	/* header */
 	--header-border-color: black;
@@ -55,6 +55,8 @@ CUSTOMIZATIONS TO ADD:
 	--task-margin-bottom: 10px;
 	--task-padding: 10px;
 
+	--number-of-lines: 1; /* number of lines to show */
+
 	/* check box */
 	--check-box-size: 15px;
 	--check-box-color: white;
@@ -109,6 +111,7 @@ body {
 	border-color: var(--task-list-border-color);
 	border-width: var(--task-list-border-width);
 	border-radius: var(--task-list-border-radius);
+	padding: var(--task-list-padding);
 
 	background: var(--task-list-background-color);
 }