Added color options

2025-12-17 20:51:57 +01:00
parent bbc03acd03
commit 218992cf60
2 changed files with 101 additions and 8 deletions
--- a/styles.css
+++ b/styles.css
@@ -195,3 +195,65 @@
 	border-radius: var(--radius-s);
 	border-left: 3px solid var(--text-error);
 }
+
+.taskweaver-color-picker-container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-4-3);
+	margin-top: var(--size-4-2);
+}
+
+.taskweaver-preset-colors {
+	display: grid;
+	grid-template-columns: repeat(6, 1fr);
+	gap: var(--size-4-2);
+}
+
+.taskweaver-color-option {
+	width: 36px;
+	height: 36px;
+	border-radius: var(--radius-s);
+	cursor: pointer;
+	border: 2px solid transparent;
+	transition: all 0.2s;
+	position: relative;
+}
+
+.taskweaver-color-option:hover {
+	transform: scale(1.1);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.taskweaver-color-option.selected {
+	border-color: var(--text-normal);
+	box-shadow: 0 0 0 2px var(--background-primary);
+}
+
+.taskweaver-custom-color {
+	display: flex;
+	align-items: center;
+	gap: var(--size-4-2);
+}
+
+.taskweaver-custom-color label {
+	color: var(--text-muted);
+	font-size: var(--font-ui-small);
+}
+
+.taskweaver-custom-color input[type="color"] {
+	width: 50px;
+	height: 36px;
+	border: 1px solid var(--background-modifier-border);
+	border-radius: var(--radius-s);
+	cursor: pointer;
+	background: transparent;
+}
+
+.taskweaver-custom-color input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 2px;
+}
+
+.taskweaver-custom-color input[type="color"]::-webkit-color-swatch {
+	border: none;
+	border-radius: var(--radius-s);
+}
--- a/view.ts
+++ b/view.ts
@@ -306,14 +306,45 @@ class ManageCategoriesModal extends Modal {
 					categoryName = value;
 				}));

-		new Setting(contentEl)
-			.setName("Color")
-			.addText(text => text
-				.setValue(categoryColor)
-				.setPlaceholder("#4a9eff")
-				.onChange(value => {
-					categoryColor = value;
-				}));
+		const colorSetting = new Setting(contentEl)
+			.setName("Color");
+
+		const colorContainer = colorSetting.settingEl.createDiv({ cls: "taskweaver-color-picker-container" });
+
+		const presetColors = [
+			"#4a9eff", "#ff6b6b", "#51cf66", "#ffd43b",
+			"#ff8787", "#cc5de8", "#339af0", "#ff922b",
+			"#20c997", "#e599f7", "#74c0fc", "#a9e34b"
+		];
+
+		const presetContainer = colorContainer.createDiv({ cls: "taskweaver-preset-colors" });
+
+		presetColors.forEach(color => {
+			const colorOption = presetContainer.createDiv({ cls: "taskweaver-color-option" });
+			colorOption.style.backgroundColor = color;
+			if (color === categoryColor) {
+				colorOption.addClass("selected");
+			}
+			colorOption.onclick = () => {
+				categoryColor = color;
+				presetContainer.querySelectorAll(".taskweaver-color-option").forEach(el =>
+					el.removeClass("selected")
+				);
+				colorOption.addClass("selected");
+				colorPicker.value = color;
+			};
+		});
+
+		const customColorContainer = colorContainer.createDiv({ cls: "taskweaver-custom-color" });
+		customColorContainer.createEl("label", { text: "Custom: " });
+		const colorPicker = customColorContainer.createEl("input", { type: "color" });
+		colorPicker.value = categoryColor;
+		colorPicker.oninput = () => {
+			categoryColor = colorPicker.value;
+			presetContainer.querySelectorAll(".taskweaver-color-option").forEach(el =>
+				el.removeClass("selected")
+			);
+		};

 		new Setting(contentEl)
 			.setName("Emoji (optional)")