Merge pull request #141 from 0kyn/add-font-color-picker-ts

Add font color picker in Typescript
ondras · Oct 30, 2021 · 668a2c6 · 668a2c6
2 parents 1195732 + 930d086
commit 668a2c6
Show file tree

Hide file tree

Showing 9 changed files with 285 additions and 134 deletions.
diff --git a/css/pane.less b/css/pane.less
@@ -114,7 +114,7 @@
 
 		&[hidden] #toggle::after { content: "←"; }
 
-		#color {
+		.color-picker {
 			display: flex;
 			flex-direction: row;
 

diff --git a/index.html b/index.html
@@ -65,8 +65,22 @@ <h3>My Mind</h3>
 				</select></label>
 			</p>
 			<p>
-				<label><span>Color</span></label>
-				<span id="color">
+				<span>Font color</span>
+				<span id="fontColor" class="color-picker">
+					<a data-color="" title="Inherit" href="#"></a>
+					<a data-color="#000" title="Black" href="#"></a>
+					<a data-color="#e33" title="Red" href="#"></a>
+					<a data-color="#3e3" title="Green" href="#"></a>
+					<a data-color="#33e" title="Blue" href="#"></a>
+					<a data-color="#dd3" title="Yellow" href="#"></a>
+					<a data-color="#3dd" title="Cyan" href="#"></a>
+					<a data-color="#d3d" title="Magenta" href="#"></a>
+					<a data-color="#fa3" title="Orange" href="#"></a>
+				</span>
+			</p>
+			<p>
+				<span>Color</span>
+				<span id="color" class="color-picker">
 					<a data-color="" title="Inherit" href="#"></a>
 					<a data-color="#000" title="Black" href="#"></a>
 					<a data-color="#e33" title="Red" href="#"></a>

diff --git a/my-mind.css b/my-mind.css