From 44df87011c80f5c7718ea3900bba0156b8e689f8 Mon Sep 17 00:00:00 2001
From: Sync1211 <dpf12110@gmail.com>
Date: Sat, 28 May 2022 13:22:57 +0200
Subject: [PATCH] * Improved element alignment in "Insert Text" dialog

---
 www/index.html      | 60 ++++++++++++++++++++++++---------------------
 www/lang/de-DE.json |  6 +----
 www/lang/en-US.json |  6 +----
 www/main.css        | 17 ++++++++++++-
 4 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/www/index.html b/www/index.html
index 6f2b266..ad23430 100644
--- a/www/index.html
+++ b/www/index.html
@@ -179,36 +179,40 @@
         </div>
         <div id="text-input">
             <h1 data-i18n="insert-text">Insert Text</h1>
-            <div style="display:flex; flex-direction: column;">
+            <div>
                 
                 <div id="text-settings">
-                    <select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
-                        <option value="Arial">Arial (sans-serif)</option>
-                        <option value="Brush Script MT">Brush Script MT (cursive)</option>
-                        <option value="Courier New">Courier New (monospace)</option>
-                        <option value="Garamond">Garamond (serif)</option>
-                        <option value="Georgia">Georgia (serif)</option>
-                        <option value="Helvetica" selected>Helvetica (sans-serif)</option>
-                        <option value="Tahoma">Tahoma (sans-serif)</option>
-                        <option value="Times New Roman">Times New Roman (serif)</option>
-                        <option value="Trebuchet MS">Trebuchet MS (sans-serif)</option>
-                        <option value="Verdana">Verdana (sans-serif)</option>
-                    </select>
-                    <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
-                    <br>
-                    <label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
-                    <span class="text-align-container">
-                        <input type="radio" name="text-align" value="left"/>
-                        <span class="text-align-checkmark text-align-left"></span>
-                    </span>
-                    <span class="text-align-container">
-                        <input type="radio" name="text-align" value="center"/>
-                        <span class="text-align-checkmark text-align-center"></span>
-                    </span>
-                    <span class="text-align-container">
-                        <input type="radio" name="text-align" value="right"/>
-                        <span class="text-align-checkmark text-align-center"></span>
-                    </span>
+                    <div name="font-and-size" class="text-settings-group">
+
+                        <select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
+                            <option value="Arial">Arial (sans-serif)</option>
+                            <option value="Brush Script MT">Brush Script MT (cursive)</option>
+                            <option value="Courier New">Courier New (monospace)</option>
+                            <option value="Garamond">Garamond (serif)</option>
+                            <option value="Georgia">Georgia (serif)</option>
+                            <option value="Helvetica" selected>Helvetica (sans-serif)</option>
+                            <option value="Tahoma">Tahoma (sans-serif)</option>
+                            <option value="Times New Roman">Times New Roman (serif)</option>
+                            <option value="Trebuchet MS">Trebuchet MS (sans-serif)</option>
+                            <option value="Verdana">Verdana (sans-serif)</option>
+                        </select>
+                        <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
+                    </div>
+                    <div name="wrap-and-align" class="text-settings-group">
+                        <label data-i18n="wrap-by-space" name="wrap-by-space-label"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
+                        <span class="text-align-container">
+                            <input type="radio" name="text-align" value="left"/>
+                            <span class="text-align-checkmark text-align-left"></span>
+                        </span>
+                        <span class="text-align-container">
+                            <input type="radio" name="text-align" value="center"/>
+                            <span class="text-align-checkmark text-align-center"></span>
+                        </span>
+                        <span class="text-align-container">
+                            <input type="radio" name="text-align" value="right"/>
+                            <span class="text-align-checkmark text-align-center"></span>
+                        </span>
+                    </div>
                 </div>
                 <div id="text-textarea">
                     <textarea id="insert-text-area"></textarea>
diff --git a/www/lang/de-DE.json b/www/lang/de-DE.json
index 1ade635..adbebc6 100644
--- a/www/lang/de-DE.json
+++ b/www/lang/de-DE.json
@@ -107,9 +107,5 @@
     "text-font": "Schriftart",
     "text-size": "Textgröße",
     "enter-text": "Text eingeben",
-    "wrap-by-space": "Autom. Zeilenumbruch",
-    "text-align": "Textausrichtung",
-    "align-left": "Linksbündig",
-    "align-mid": "Zentriert",
-    "align-right": "Rechtsbündig"
+    "wrap-by-space": "Autom. Zeilenumbruch"
 }
\ No newline at end of file
diff --git a/www/lang/en-US.json b/www/lang/en-US.json
index 80ba3ce..8c39e0f 100644
--- a/www/lang/en-US.json
+++ b/www/lang/en-US.json
@@ -132,9 +132,5 @@
     "text-font": "Font",
     "text-size": "Size",
     "enter-text": "Enter text",
-    "wrap-by-space": "Wrap words by spaces",
-    "text-align": "Align text",
-    "align-left": "Left",
-    "align-mid": "Center",
-    "align-right": "Right"
+    "wrap-by-space": "Wrap words by spaces"
 }
\ No newline at end of file
diff --git a/www/main.css b/www/main.css
index d14b498..1c3843d 100644
--- a/www/main.css
+++ b/www/main.css
@@ -699,4 +699,19 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
   }
 .text-align-left { background-image: url("icons/text-left.svg")}
 .text-align-center { background-image: url("icons/text-center.svg")}
-.text-align-right { background-image: url("icons/text-right.svg")}
\ No newline at end of file
+.text-align-right { background-image: url("icons/text-right.svg")}
+
+input[name="wrap-by-space"] { margin-right: 5px; }
+#text-settings {
+    display: flex;
+    flex-direction: column;
+}
+.text-settings-group {
+    margin-top: 1rem;
+}
+.text-settings-group[name="wrap-and-align"] {
+    display: flex;
+    justify-content: center;
+}
+label[name="wrap-by-space-label"] { padding-right: 2%; }
+#text-font { height: 100%; }
\ No newline at end of file