Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use browser-style for options #97

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Use browser-style for options #97

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions src/options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,25 +58,25 @@
</div>
<form>
<ul>
<li class="mobile-incompatible">
<li class="mobile-incompatible browser-style">
<input class="setting save-on-change" type="checkbox" id="popupIconColored" name="icon-colored">
<label data-i18n="__MSG_optionPopupIconColored__" for="popupIconColored">Colored icon</label>
<label data-i18n="__MSG_optionPopupIconColored__" tabindex="0" for="popupIconColored">Colored icon</label>
<span data-i18n="__MSG_optionPopupIconColoredDescr__" class="helper-text">Shows a colored icon instead of the black/white icon in the toolbar.</span>
</li>
<li>
<fieldset id="qrCodeType" data-type="radiogroup" class="setting">
<legend data-i18n="__MSG_optionQrCodeType__">QR code type</legend>

<ul>
<li class="condensed-list">
<li class="condensed-list browser-style">
<input id="qrCodeTypeSvg" type="radio" name="qrcode-type" value="svg" class="save-on-input">
<label data-i18n="__MSG_optionQrCodeTypeSvg__" for="qrCodeTypeSvg">SVG</label>
<label data-i18n="__MSG_optionQrCodeTypeSvg__" tabindex="0" for="qrCodeTypeSvg">SVG</label>
<span data-i18n="__MSG_optionQrCodeTypeSvgHelper__" class="helper-text">Uses a modern generation method with vector graphics that enable smoother resizing.</span>
</li>

<li class="condensed-list">
<li class="condensed-list browser-style">
<input id="qrCodeTypeCanvas" type="radio" name="qrcode-type" value="canvas" class="save-on-input">
<label data-i18n="__MSG_optionQrCodeTypeCanvas__" for="qrCodeTypeCanvas">Canvas image</label>
<label data-i18n="__MSG_optionQrCodeTypeCanvas__" tabindex="0" for="qrCodeTypeCanvas">Canvas image</label>
<span data-i18n="__MSG_optionQrCodeTypeCanvasHelper__" class="helper-text">A legacy generation method generating the QR code as an image ("canvas").</span>
</li>
</ul>
Expand All @@ -87,38 +87,38 @@
<legend data-i18n="__MSG_optionQrCodeSize__">QR code size</legend>

<ul>
<li class="condensed-list">
<li class="condensed-list browser-style">
<input id="qrCodeSizeFixed" type="radio" name="qrcode-size" value="fixed" class="save-on-input">
<label data-i18n="__MSG_optionQrCodeSizeFixed__" for="qrCodeSizeFixed">Fixed size: </label>
<label data-i18n="__MSG_optionQrCodeSizeFixed__" tabindex="0" for="qrCodeSizeFixed">Fixed size: </label>

<input data-i18n="__MSG_optionPixelAbbreviation__" class="setting save-on-change" data-optiongroup="qrCodeSize" type="number" id="size" min="160" step="5" size="5" name="qr-size">
<span>px</span>
</li>

<li class="condensed-list">
<li class="condensed-list browser-style">
<input id="qrCodeSizeAuto" type="radio" name="qrcode-size" value="auto" class="save-on-input">
<label data-i18n="__MSG_optionQrCodeSizeAuto__" for="qrCodeSizeAuto">Automatically adjust size</label>
<label data-i18n="__MSG_optionQrCodeSizeAuto__" tabindex="0" for="qrCodeSizeAuto">Automatically adjust size</label>
<span data-i18n="__MSG_optionQrCodeSizeAutoHelper__" class="helper-text">Mostly useful on mobile devices, where the QR code opens in a new tab.</span>
</li>

<li class="condensed-list">
<li class="condensed-list browser-style">
<input id="qrCodeSizeRemember" type="radio" name="qrcode-size" value="remember" class="save-on-input">
<label data-i18n="__MSG_optionQrCodeSizeRemember__" for="qrCodeSizeRemember">Remember last size</label>
<label data-i18n="__MSG_optionQrCodeSizeRemember__" tabindex="0" for="qrCodeSizeRemember">Remember last size</label>
</li>
</ul>
</fieldset>
</li>
<li>
<li class="browser-style">
<label data-i18n="__MSG_optionQrCodeColor__" for="qrColor">QR code color: </label>
<input class="setting save-on-change trigger-on-update" type="color" id="qrColor" name="qr-color">
<input class="setting save-on-change trigger-on-update" tabindex="0" type="color" id="qrColor" name="qr-color">
</li>
<li>
<li class="browser-style">
<label data-i18n="__MSG_optionQrCodeBackgroundColor__" for="qrBackgroundColor">QR code background color: </label>
<input class="setting save-on-change trigger-on-update" type="color" id="qrBackgroundColor" name="qr-background-color">
<input class="setting save-on-change trigger-on-update" tabindex="0" type="color" id="qrBackgroundColor" name="qr-background-color">
</li>
<li>
<label data-i18n="__MSG_optionErrorCorrection__" for="qrErrorCorrection">Error correction level: </label>
<select id="qrErrorCorrection" class="setting save-on-change" name="error-correction" size="0">
<select id="qrErrorCorrection" class="setting save-on-change browser-style" name="error-correction" size="0">
<option data-i18n="__MSG_optionEcLow__" value="L">Low (7%)</option>
<option data-i18n="__MSG_optionEcMedium__" value="M">Medium (15%)</option>
<option data-i18n="__MSG_optionEcQuartile__" value="Q">Quartile (25%)</option>
Expand All @@ -132,21 +132,21 @@
<a data-i18n="__MSG_optionLearnMore__" data-i18n-href="__MSG_optionErrorCorrectionDescrLink__" href="https://en.wikipedia.org/wiki/QR_code#Error_correction">Learn more</a>
</span>
</li>
<li>
<li class="browser-style">
<input class="setting save-on-change" type="checkbox" id="autoGetSelectedText" name="auto-get-selected-text">
<label data-i18n="__MSG_optionAutoGetSelectedText__" for="autoGetSelectedText">Automatically use text selected on website</label>
<label data-i18n="__MSG_optionAutoGetSelectedText__" tabindex="0" for="autoGetSelectedText">Automatically use text selected on website</label>
</li>
<li>
<li class="browser-style">
<input class="setting save-on-change" type="checkbox" id="monospaceFont" name="monospace-font">
<label data-i18n="__MSG_optionUseMonospaceFont__" for="monospaceFont">Use monospace font</label>
<label data-i18n="__MSG_optionUseMonospaceFont__" tabindex="0" for="monospaceFont">Use monospace font</label>
</li>
<li>
<li class="browser-style">
<input class="setting save-on-change" type="checkbox" id="debugMode" name="debug-mode">
<label data-i18n="__MSG_optionDebugMode__" for="debugMode">Enable debug mode</label>
<label data-i18n="__MSG_optionDebugMode__" tabindex="0" for="debugMode">Enable debug mode</label>
<span data-i18n="__MSG_optionDebugModeDescr__" class="helper-text">This is only useful to get more detailed logging output in the console for reporting bugs, etc.</span>
</li>
<li>
<button data-i18n="__MSG_optionsResetButton__" type="button" name="reset-button" id="resetButton">Reset all settings to defaults</button>
<button data-i18n="__MSG_optionsResetButton__" type="button" class="browser-style" name="reset-button" id="resetButton">Reset all settings to defaults</button>
</li>
</ul>
</form>
Expand Down