From a099d738fc02136c82ff96ca6cf80f9fa41361da Mon Sep 17 00:00:00 2001
From: Justin Hawkins <justin@hawkins.id.au>
Date: Thu, 16 Dec 2021 21:32:03 +1030
Subject: [PATCH] Arrange the colour choices more neatly.

---
 web/data/editor.html | 54 +++++++++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/web/data/editor.html b/web/data/editor.html
index e6cdb5c..5bc51a2 100644
--- a/web/data/editor.html
+++ b/web/data/editor.html
@@ -7,25 +7,43 @@
     <button type="button" @click="crop()" class="btn btn-primary">Apply</button>
   </div>
   <div id="tools-colour" x-show="toolbar == 'text'">
-    <div>FG: 
-      <button type="button" @click="set_colour('#fff0', 'fg')" class="btn btn-primary" style="">-</button>
+    <table>
+      <tr>
+        <th>foreground</th>
+        <template x-for="colour in colours">
+          <td>
+            <button type="button" @click="set_colour(colour, 'fg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
+          </td>
+        </template>
+        <td>
+          <button type="button" @click="set_colour('#fff0', 'fg')" class="btn btn-primary" style="">-</button>
+        </td>
+      </tr>
 
-      <template x-for="colour in colours">
-        <button type="button" @click="set_colour(colour, 'fg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
-      </template>
-    </div>
-    <div>BG: 
-      <button type="button" @click="set_colour('#fff0', 'bg')" class="btn btn-primary" style="">-</button>
-      <template x-for="colour in colours">
-        <button type="button" @click="set_colour(colour, 'bg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
-      </template>
-    </div>
-    <div>ST: 
-      <button type="button" @click="set_colour('#fff0', 'stroke')" class="btn btn-primary" style="">-</button>
-      <template x-for="colour in colours">
-        <button type="button" @click="set_colour(colour, 'stroke')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
-      </template>
-    </div>
+      <tr>
+        <th>background</th>
+        <template x-for="colour in colours">
+          <td>
+            <button type="button" @click="set_colour(colour, 'bg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
+          </td>
+        </template>
+        <td>
+          <button type="button" @click="set_colour('#fff0', 'bg')" class="btn btn-primary" style="">-</button>
+        </td>
+      </tr>
+
+      <tr>
+        <th>outline</th>
+        <template x-for="colour in colours">
+          <td>
+            <button type="button" @click="set_colour(colour, 'stroke')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
+          </td>
+        </template>
+        <td>
+          <button type="button" @click="set_colour('#fff0', 'stroke')" class="btn btn-primary" style="">-</button>
+        </td>
+      </tr>
+    </table>
   </div>
 
   <canvas id="c" width="600" height="600" x-bind:style="canvas_style"></canvas>