Skip to content

Commit

Permalink
Fix layout of Attributes and Custom Zoom windows in Modern themes
Browse files Browse the repository at this point in the history 
and unreleased Bubblegum theme, mostly; the Custom Zoom window's numeric
input is too big in the Bubblegum theme, so it's not aligned nicely with
the other radio buttons.
  • Loading branch information
@1j01
1j01 committed Mar 1, 2024
1 parent b1ced5e commit 00715fb
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 13 deletions.
26 changes: 13 additions & 13 deletions src/functions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,12 +391,12 @@ function show_custom_zoom_window() {
$fieldset.append(`
<legend>${localize("Zoom to")}</legend>
<div class="fieldset-body">
<input type="radio" name="custom-zoom-radio" id="zoom-option-1" aria-keyshortcuts="Alt+1 1" value="1"/><label for="zoom-option-1">${display_hotkey("&100%")}</label>
<input type="radio" name="custom-zoom-radio" id="zoom-option-2" aria-keyshortcuts="Alt+2 2" value="2"/><label for="zoom-option-2">${display_hotkey("&200%")}</label>
<input type="radio" name="custom-zoom-radio" id="zoom-option-4" aria-keyshortcuts="Alt+4 4" value="4"/><label for="zoom-option-4">${display_hotkey("&400%")}</label>
<input type="radio" name="custom-zoom-radio" id="zoom-option-6" aria-keyshortcuts="Alt+6 6" value="6"/><label for="zoom-option-6">${display_hotkey("&600%")}</label>
<input type="radio" name="custom-zoom-radio" id="zoom-option-8" aria-keyshortcuts="Alt+8 8" value="8"/><label for="zoom-option-8">${display_hotkey("&800%")}</label>
<input type="radio" name="custom-zoom-radio" id="zoom-option-really-custom" value="really-custom"/><label for="zoom-option-really-custom"><input type="number" min="10" max="1000" name="really-custom-zoom-input" class="inset-deep no-spinner" value=""/>%</label>
<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-1" aria-keyshortcuts="Alt+1 1" value="1"/><label for="zoom-option-1">${display_hotkey("&100%")}</label></div>
<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-2" aria-keyshortcuts="Alt+2 2" value="2"/><label for="zoom-option-2">${display_hotkey("&200%")}</label></div>
<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-4" aria-keyshortcuts="Alt+4 4" value="4"/><label for="zoom-option-4">${display_hotkey("&400%")}</label></div>
<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-6" aria-keyshortcuts="Alt+6 6" value="6"/><label for="zoom-option-6">${display_hotkey("&600%")}</label></div>
<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-8" aria-keyshortcuts="Alt+8 8" value="8"/><label for="zoom-option-8">${display_hotkey("&800%")}</label></div>
<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-really-custom" value="really-custom"/><label for="zoom-option-really-custom"><input type="number" min="10" max="1000" name="really-custom-zoom-input" class="inset-deep no-spinner" value=""/>%</label></div>
</div>
`);
let is_custom = true;
Expand Down Expand Up @@ -2866,9 +2866,9 @@ function image_attributes() {
const $units = $(E("fieldset")).appendTo($main).append(`
<legend>${localize("Units")}</legend>
<div class="fieldset-body">
<input type="radio" name="units" id="unit-in" value="in" aria-keyshortcuts="Alt+I I"><label for="unit-in">${display_hotkey(localize("&Inches"))}</label>
<input type="radio" name="units" id="unit-cm" value="cm" aria-keyshortcuts="Alt+M M"><label for="unit-cm">${display_hotkey(localize("C&m"))}</label>
<input type="radio" name="units" id="unit-px" value="px" aria-keyshortcuts="Alt+P P"><label for="unit-px">${display_hotkey(localize("&Pixels"))}</label>
<div class="radio-field"><input type="radio" name="units" id="unit-in" value="in" aria-keyshortcuts="Alt+I I"><label for="unit-in">${display_hotkey(localize("&Inches"))}</label></div>
<div class="radio-field"><input type="radio" name="units" id="unit-cm" value="cm" aria-keyshortcuts="Alt+M M"><label for="unit-cm">${display_hotkey(localize("C&m"))}</label></div>
<div class="radio-field"><input type="radio" name="units" id="unit-px" value="px" aria-keyshortcuts="Alt+P P"><label for="unit-px">${display_hotkey(localize("&Pixels"))}</label></div>
</div>
`);
$units.find(`[value=${current_unit}]`).attr({ checked: true });
Expand All @@ -2882,17 +2882,17 @@ function image_attributes() {
const $colors = $(E("fieldset")).appendTo($main).append(`
<legend>${localize("Colors")}</legend>
<div class="fieldset-body">
<input type="radio" name="colors" id="attribute-monochrome" value="monochrome" aria-keyshortcuts="Alt+B B"><label for="attribute-monochrome">${display_hotkey(localize("&Black and white"))}</label>
<input type="radio" name="colors" id="attribute-polychrome" value="polychrome" aria-keyshortcuts="Alt+L L"><label for="attribute-polychrome">${display_hotkey(localize("Co&lors"))}</label>
<div class="radio-field"><input type="radio" name="colors" id="attribute-monochrome" value="monochrome" aria-keyshortcuts="Alt+B B"><label for="attribute-monochrome">${display_hotkey(localize("&Black and white"))}</label></div>
<div class="radio-field"><input type="radio" name="colors" id="attribute-polychrome" value="polychrome" aria-keyshortcuts="Alt+L L"><label for="attribute-polychrome">${display_hotkey(localize("Co&lors"))}</label></div>
</div>
`);
$colors.find(`[value=${monochrome ? "monochrome" : "polychrome"}]`).attr({ checked: true });

const $transparency = $(E("fieldset")).appendTo($main).append(`
<legend>${localize("Transparency")}</legend>
<div class="fieldset-body">
<input type="radio" name="transparency" id="attribute-transparent" value="transparent"><label for="attribute-transparent">${localize("Transparent")}</label>
<input type="radio" name="transparency" id="attribute-opaque" value="opaque"><label for="attribute-opaque">${localize("Opaque")}</label>
<div class="radio-field"><input type="radio" name="transparency" id="attribute-transparent" value="transparent"><label for="attribute-transparent">${localize("Transparent")}</label></div>
<div class="radio-field"><input type="radio" name="transparency" id="attribute-opaque" value="opaque"><label for="attribute-opaque">${localize("Opaque")}</label></div>
</div>
`);
$transparency.find(`[value=${transparency ? "transparent" : "opaque"}]`).attr({ checked: true });
Expand Down
6 changes: 6 additions & 0 deletions styles/layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -779,6 +779,12 @@ html, body, .jspaint {
width: 50px;
}

.radio-field {
display: flex;
flex-flow: row;
align-items: center;
}

/* @TODO: part of os-gui */
.os-window {
display: flex;
Expand Down

0 comments on commit 00715fb

Please sign in to comment.