* Improved element alignment in "Insert Text" dialog

This commit is contained in:
Sync1211 2022-05-28 13:22:57 +02:00
parent 179aada453
commit 44df87011c
No known key found for this signature in database
GPG Key ID: B8878699435E69EC
4 changed files with 50 additions and 39 deletions

View File

@ -179,36 +179,40 @@
</div> </div>
<div id="text-input"> <div id="text-input">
<h1 data-i18n="insert-text">Insert Text</h1> <h1 data-i18n="insert-text">Insert Text</h1>
<div style="display:flex; flex-direction: column;"> <div>
<div id="text-settings"> <div id="text-settings">
<select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;"> <div name="font-and-size" class="text-settings-group">
<option value="Arial">Arial (sans-serif)</option>
<option value="Brush Script MT">Brush Script MT (cursive)</option> <select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
<option value="Courier New">Courier New (monospace)</option> <option value="Arial">Arial (sans-serif)</option>
<option value="Garamond">Garamond (serif)</option> <option value="Brush Script MT">Brush Script MT (cursive)</option>
<option value="Georgia">Georgia (serif)</option> <option value="Courier New">Courier New (monospace)</option>
<option value="Helvetica" selected>Helvetica (sans-serif)</option> <option value="Garamond">Garamond (serif)</option>
<option value="Tahoma">Tahoma (sans-serif)</option> <option value="Georgia">Georgia (serif)</option>
<option value="Times New Roman">Times New Roman (serif)</option> <option value="Helvetica" selected>Helvetica (sans-serif)</option>
<option value="Trebuchet MS">Trebuchet MS (sans-serif)</option> <option value="Tahoma">Tahoma (sans-serif)</option>
<option value="Verdana">Verdana (sans-serif)</option> <option value="Times New Roman">Times New Roman (serif)</option>
</select> <option value="Trebuchet MS">Trebuchet MS (sans-serif)</option>
<input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/> <option value="Verdana">Verdana (sans-serif)</option>
<br> </select>
<label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label> <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
<span class="text-align-container"> </div>
<input type="radio" name="text-align" value="left"/> <div name="wrap-and-align" class="text-settings-group">
<span class="text-align-checkmark text-align-left"></span> <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> <span class="text-align-container">
<span class="text-align-container"> <input type="radio" name="text-align" value="left"/>
<input type="radio" name="text-align" value="center"/> <span class="text-align-checkmark text-align-left"></span>
<span class="text-align-checkmark text-align-center"></span> </span>
</span> <span class="text-align-container">
<span class="text-align-container"> <input type="radio" name="text-align" value="center"/>
<input type="radio" name="text-align" value="right"/> <span class="text-align-checkmark text-align-center"></span>
<span class="text-align-checkmark text-align-center"></span> </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>
<div id="text-textarea"> <div id="text-textarea">
<textarea id="insert-text-area"></textarea> <textarea id="insert-text-area"></textarea>

View File

@ -107,9 +107,5 @@
"text-font": "Schriftart", "text-font": "Schriftart",
"text-size": "Textgröße", "text-size": "Textgröße",
"enter-text": "Text eingeben", "enter-text": "Text eingeben",
"wrap-by-space": "Autom. Zeilenumbruch", "wrap-by-space": "Autom. Zeilenumbruch"
"text-align": "Textausrichtung",
"align-left": "Linksbündig",
"align-mid": "Zentriert",
"align-right": "Rechtsbündig"
} }

View File

@ -132,9 +132,5 @@
"text-font": "Font", "text-font": "Font",
"text-size": "Size", "text-size": "Size",
"enter-text": "Enter text", "enter-text": "Enter text",
"wrap-by-space": "Wrap words by spaces", "wrap-by-space": "Wrap words by spaces"
"text-align": "Align text",
"align-left": "Left",
"align-mid": "Center",
"align-right": "Right"
} }

View File

@ -700,3 +700,18 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
.text-align-left { background-image: url("icons/text-left.svg")} .text-align-left { background-image: url("icons/text-left.svg")}
.text-align-center { background-image: url("icons/text-center.svg")} .text-align-center { background-image: url("icons/text-center.svg")}
.text-align-right { background-image: url("icons/text-right.svg")} .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%; }