open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
d4c3df6a09
stylus/options.html

180 lines
6.8 KiB
HTML
Raw Normal View History

adding options UI (fixes #22, #24)
2017-02-14 15:35:53 +00:00
<!DOCTYPE html>
Add <html id="stylus"> to all pages
2017-03-23 03:41:50 +00:00
<html id="stylus">
adding options UI (fixes #22, #24)
2017-02-14 15:35:53 +00:00
<head>
fix #223 - Android compatibility
2017-11-25 13:24:07 +00:00
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
options: localize the title
2017-04-10 06:47:09 +00:00
<title i18n-text-append="optionsHeading">Stylus </title>
Load global.css in options
2017-12-08 04:40:08 +00:00
<link rel="stylesheet" href="global.css">
fixup 58f966be
2017-08-27 14:45:15 +00:00
<link rel="stylesheet" href="options/options.css">
Use options dialog style
2017-09-05 21:33:08 +00:00
<link rel="stylesheet" href="options/onoffswitch.css">
use (i) icon in options for the extra info #334
2018-01-24 20:16:24 +00:00
<link rel="stylesheet" href="msgbox/msgbox.css">
improve CSS transition suppression on own pages in FF
2017-09-03 20:52:06 +00:00
<style id="firefox-transitions-bug-suppressor">
/* restrict to FF */
FF: fix transition-bug-suppressor condition
2017-12-02 16:38:03 +00:00
@supports (-moz-appearance:none) {
improve CSS transition suppression on own pages in FF
2017-09-03 20:52:06 +00:00
/* increased specificity to override sane selectors in user styles */
html#stylus.firefox #options *, #stylus #notes * {
transition: none !important;
}
}
</style>
Fix links & split out edit.css
2017-07-12 18:52:44 +00:00
<script src="js/dom.js"></script>
Move messaging.js file & references
2017-07-14 00:52:40 +00:00
<script src="js/messaging.js"></script>
Fix links & split out edit.css
2017-07-12 18:52:44 +00:00
<script src="js/localization.js"></script>
<script src="js/prefs.js"></script>
load storage-util in all pages prefs::doSyncSet uses it now, there'll be more in the future when we convert all direct chrome.storage calls
2018-01-19 12:14:09 +00:00
<script src="js/storage-util.js" async></script>
use (i) icon in options for the extra info #334
2018-01-24 20:16:24 +00:00
<script src="msgbox/msgbox.js" async></script>
Fix links & split out edit.css
2017-07-12 18:52:44 +00:00
<script src="content/apply.js"></script>
adding options UI (fixes #22, #24)
2017-02-14 15:35:53 +00:00
</head>
Proper IDs like other pages
2017-11-26 01:53:21 +00:00
<body id="stylus-options">
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
<div id="options">
Expose iframes via HTML[stylus-iframe] * convert actions to buttons
2017-04-28 23:36:10 +00:00
option to switch toolbar icon sets
2017-06-28 10:49:04 +00:00
<div class="block">
<h1 i18n-text="optionsCustomizeIcon"></h1>
<div class="items">
<label>
<span i18n-text="optionsIconDark"></span>
<div class="iconset">
<input type="radio" name="iconset">
<img src="/images/icon/16.png">
<img src="/images/icon/16w.png">
<img src="/images/icon/16x.png">
</div>
</label>
<label>
<span i18n-text="optionsIconLight"></span>
<div class="iconset">
<input type="radio" name="iconset">
<img src="/images/icon/light/16.png">
<img src="/images/icon/light/16w.png">
<img src="/images/icon/light/16x.png">
</div>
</label>
</div>
</div>
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
<div class="block">
<h1 i18n-text="optionsCustomizeBadge"></h1>
<div class="items">
Expose iframes via HTML[stylus-iframe] * convert actions to buttons
2017-04-28 23:36:10 +00:00
<label>
<span i18n-text="prefShowBadge"></span>
<span class="onoffswitch">
Common selector for non-traditional checkbox inputs
2017-11-28 04:09:52 +00:00
<input type="checkbox" id="show-badge" class="slider">
code cosmetics: simplify onoffswitch
2017-04-29 17:05:42 +00:00
<span></span>
Expose iframes via HTML[stylus-iframe] * convert actions to buttons
2017-04-28 23:36:10 +00:00
</span>
</label>
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
<label>
<span i18n-text="optionsBadgeNormal"></span>
<input type="color" id="badgeNormal">
</label>
<label>
<span i18n-text="optionsBadgeDisabled"></span>
<input type="color" id="badgeDisabled">
</label>
</div>
</div>
Expose iframes via HTML[stylus-iframe] * convert actions to buttons
2017-04-28 23:36:10 +00:00
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
<div class="block">
<h1 i18n-text="optionsCustomizePopup"></h1>
<div class="items">
<label>
<span i18n-text="optionsPopupWidth"></span>
<input type="number" id="popupWidth" min="200" max="800">
</label>
expose openEditInWindow as an option
2017-08-27 13:41:29 +00:00
<label>
<span i18n-text="popupOpenEditInWindow"
i18n-title="popupOpenEditInWindowTooltip"></span>
<span class="onoffswitch">
Common selector for non-traditional checkbox inputs
2017-11-28 04:09:52 +00:00
<input type="checkbox" id="openEditInWindow" class="slider">
expose openEditInWindow as an option
2017-08-27 13:41:29 +00:00
<span></span>
</span>
</label>
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
<label>
<span i18n-text="popupStylesFirst"></span>
<span class="onoffswitch">
Common selector for non-traditional checkbox inputs
2017-11-28 04:09:52 +00:00
<input type="checkbox" id="popup.stylesFirst" class="slider">
code cosmetics: simplify onoffswitch
2017-04-29 17:05:42 +00:00
<span></span>
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
</span>
</label>
popup: add side borders in Chrome 62+ fixes #226
2017-11-14 08:13:03 +00:00
<label class="chromium-only">
<span i18n-text="popupBorders" i18n-title="popupBordersTooltip"></span>
<span class="onoffswitch">
Common selector for non-traditional checkbox inputs
2017-11-28 04:09:52 +00:00
<input type="checkbox" id="popup.borders" class="slider">
popup: add side borders in Chrome 62+ fixes #226
2017-11-14 08:13:03 +00:00
<span></span>
</span>
</label>
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
</div>
OptionsUI: restructure html, make it userstylable
2017-03-28 00:42:07 +00:00
</div>
Expose iframes via HTML[stylus-iframe] * convert actions to buttons
2017-04-28 23:36:10 +00:00
simplify the options page
2017-12-12 00:27:28 +00:00
<div class="block" id="updates">
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
<h1 i18n-text="optionsCustomizeUpdate"></h1>
<div class="items">
use (i) icon in options for the extra info #334
2018-01-24 20:16:24 +00:00
<label>
<span i18n-text="optionsUpdateInterval">
<a data-cmd="note" i18n-title="optionsUpdateImportNote" href="#" class="svg-inline-wrapper">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</span>
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
<input type="number" min="0" id="updateInterval">
</label>
</div>
</div>
Expose iframes via HTML[stylus-iframe] * convert actions to buttons
2017-04-28 23:36:10 +00:00
Advanced options toggle (#238) * Advanced options toggle Whole div is clickable. Arrows to indicate functions. I went with carets and centered collapsed text, but we can use different arrow and/or keep the text to the left. * advanced options toggle * advanced options toggle * Only apply to Chrome * Delete options.css * Delete options.js * Only apply to Chrome * Only apply to Chrome * Fix label * Fix label again
2017-11-15 03:25:30 +00:00
<div class="block" id="advanced">
fixups Manage: Disable tabindex in nested buttons Manage: Fix homepage link alignment Manage: Make entry actions keyboard navigatable Manage: Add search help accessibility Msgbox: Save and restore focus Manage: Fix delete confirmation cancel Manage: Make history button accessible Manage: Make favicons dropdown accessible Manage: Prevent focus on hidden textarea Msgbox: Stop tabbing outside of msgbox Usercss: Make nondefault reset accessible Usercss: Make colorpicker accessible Edit: Disable tabindex in nested buttons Edit: Make info and config icons accessible Options: Cleanup HTML Options: Make advanced toggle accessible Edit: Fix issues popup Edit: Remove link underlines from icons
2017-12-09 15:25:44 +00:00
<div class="collapsible-resizer">
remove what-input, use own implementation, rebase on master
2017-12-12 18:33:41 +00:00
<h1 i18n-text="optionsAdvanced">
Advanced options toggle (#238) * Advanced options toggle Whole div is clickable. Arrows to indicate functions. I went with carets and centered collapsed text, but we can use different arrow and/or keep the text to the left. * advanced options toggle * advanced options toggle * Only apply to Chrome * Delete options.css * Delete options.js * Only apply to Chrome * Only apply to Chrome * Fix label * Fix label again
2017-11-15 03:25:30 +00:00
<svg class="svg-icon is-collapsed" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
</svg>
fixups Manage: Disable tabindex in nested buttons Manage: Fix homepage link alignment Manage: Make entry actions keyboard navigatable Manage: Add search help accessibility Msgbox: Save and restore focus Manage: Fix delete confirmation cancel Manage: Make history button accessible Manage: Make favicons dropdown accessible Manage: Prevent focus on hidden textarea Msgbox: Stop tabbing outside of msgbox Usercss: Make nondefault reset accessible Usercss: Make colorpicker accessible Edit: Disable tabindex in nested buttons Edit: Make info and config icons accessible Options: Cleanup HTML Options: Make advanced toggle accessible Edit: Fix issues popup Edit: Remove link underlines from icons
2017-12-09 15:25:44 +00:00
<svg class="svg-icon is-expanded" viewBox="0 0 1792 1792">
Advanced options toggle (#238) * Advanced options toggle Whole div is clickable. Arrows to indicate functions. I went with carets and centered collapsed text, but we can use different arrow and/or keep the text to the left. * advanced options toggle * advanced options toggle * Only apply to Chrome * Delete options.css * Delete options.js * Only apply to Chrome * Only apply to Chrome * Fix label * Fix label again
2017-11-15 03:25:30 +00:00
<path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
</svg>
</h1>
</div>
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
<div class="items">
<label>
use (i) icon in options for the extra info #334
2018-01-24 20:16:24 +00:00
<span i18n-text="optionsAdvancedExposeIframes">
<a data-cmd="note" i18n-title="optionsAdvancedExposeIframesNote" href="#" class="svg-inline-wrapper">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a>
</span>
Expose iframes via HTML[stylus-iframe] * convert actions to buttons
2017-04-28 23:36:10 +00:00
<span class="onoffswitch">
Common selector for non-traditional checkbox inputs
2017-11-28 04:09:52 +00:00
<input type="checkbox" id="exposeIframes" class="slider">
code cosmetics: simplify onoffswitch
2017-04-29 17:05:42 +00:00
<span></span>
Expose iframes via HTML[stylus-iframe] * convert actions to buttons
2017-04-28 23:36:10 +00:00
</span>
optionsUI: add 'editor.contextDelete'
2017-04-29 16:54:16 +00:00
</label>
Don't show editor.contextDelete option in FF; #128
2017-07-31 16:39:10 +00:00
<label class="chromium-only">
optionsUI: add 'editor.contextDelete'
2017-04-29 16:54:16 +00:00
<span i18n-text="optionsAdvancedContextDelete"></span>
<span class="onoffswitch">
Common selector for non-traditional checkbox inputs
2017-11-28 04:09:52 +00:00
<input type="checkbox" id="editor.contextDelete" class="slider">
code cosmetics: simplify onoffswitch
2017-04-29 17:05:42 +00:00
<span></span>
optionsUI: add 'editor.contextDelete'
2017-04-29 16:54:16 +00:00
</span>
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
</label>
Expose iframes via HTML[stylus-iframe] * convert actions to buttons
2017-04-28 23:36:10 +00:00
</div>
</div>
<div class="block" id="actions">
<button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
optionsUI: make "Shortcuts" a button; unify translations
2017-04-29 16:27:42 +00:00
<button data-cmd="open-manage" i18n-text="optionsOpenManager"></button>
Expose iframes via HTML[stylus-iframe] * convert actions to buttons
2017-04-28 23:36:10 +00:00
<div data-cmd="check-updates">
<button i18n-text="optionsCheck" i18n-title="optionsCheckUpdate">
<span id="update-progress"></span>
</button>
optionsUI: show progress bar and # of installed updates
2017-04-14 15:30:09 +00:00
<div id="updates-installed" i18n-text="updatesCurrentlyInstalled"></div>
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
</div>
optionsUI: equal height of 2-line action buttons
2017-04-29 17:58:53 +00:00
<button data-cmd="open-keyboard" class="chromium-only" i18n-text="shortcuts" i18n-title="shortcutsNote"></button>
optionsUI: group options and shorten labels
2017-04-14 07:50:52 +00:00
</div>
OptionsUI: restructure html, make it userstylable
2017-03-28 00:42:07 +00:00
</div>
use (i) icon in options for the extra info #334
2018-01-24 20:16:24 +00:00
<svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
<symbol id="svg-icon-help" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
</symbol>
</svg>
fixup 58f966be
2017-08-27 14:45:15 +00:00
<script src="options/options.js"></script>
adding options UI (fixes #22, #24)
2017-02-14 15:35:53 +00:00
</body>
</html>
Reference in New Issue Copy Permalink