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

editor: toggle #options block upon clicking its title

Browse Source
This commit is contained in:
tophf 2017-09-01 12:46:41 +03:00
parent 1f237a98eb
commit d3b7b45452
4 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
edit.html
View File

@ -144,8 +144,8 @@
<button id="to-mozilla" i18n-text="exportLabel"></button> <button id="to-mozilla" i18n-text="exportLabel"></button>
</div> </div>
</section> </section>
<section id="options"> <details id="options">
<h2 id="options-heading" i18n-text="optionsHeading"></h2> <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
<div class="option"> <div class="option">
<input id="editor.lineWrapping" type="checkbox"> <input id="editor.lineWrapping" type="checkbox">
<label id="lineWrapping-label" for="editor.lineWrapping" i18n-text="cm_lineWrapping"></label> <label id="lineWrapping-label" for="editor.lineWrapping" i18n-text="cm_lineWrapping"></label>
@ -195,7 +195,8 @@
<use xlink:href="#svg-icon-settings"/> <use xlink:href="#svg-icon-settings"/>
</svg>&nbsp; </svg>&nbsp;
</span> </span>
</section> </div>
</details>
<section id="lint"><h2 i18n-text="linterIssues">: <span id="issue-count"></span><svg id="lint-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2><div></div></section> <section id="lint"><h2 i18n-text="linterIssues">: <span id="issue-count"></span><svg id="lint-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2><div></div></section>
</div> </div>
<section id="sections"> <section id="sections">

9
edit/edit.css
View File

@ -118,6 +118,15 @@ h2 .svg-icon, label .svg-icon {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
/* options */ /* options */
#options summary {
align-items: center;
margin-left: -13px;
cursor: pointer;
outline: none;
}
#options summary h2 {
display: inline-block;
}
#options [type="number"] { #options [type="number"] {
max-width: 2.5rem; max-width: 2.5rem;
text-align: right; text-align: right;

7
edit/edit.js
View File

@ -1282,7 +1282,7 @@ function beautify(event) {
} }
} }
document.addEventListener('DOMContentLoaded', init); onDOMready().then(init);
function init() { function init() {
initCodeMirror(); initCodeMirror();
@ -1395,6 +1395,11 @@ function initHooks() {
$('#sections-help').addEventListener('click', showSectionHelp, false); $('#sections-help').addEventListener('click', showSectionHelp, false);
$('#keyMap-help').addEventListener('click', showKeyMapHelp, false); $('#keyMap-help').addEventListener('click', showKeyMapHelp, false);
$('#cancel-button').addEventListener('click', goBackToManage); $('#cancel-button').addEventListener('click', goBackToManage);
$('#options').open = prefs.get('editor.options.expanded');
$('#options h2').addEventListener('click', () => {
setTimeout(() => prefs.set('editor.options.expanded', $('#options').open));
});
initLint(); initLint();
if (!FIREFOX) { if (!FIREFOX) {

1
js/prefs.js
View File

@ -25,6 +25,7 @@ var prefs = new function Prefs() {
'manage.newUI.targets': 3, // max number of applies-to targets visible: 0 = none 'manage.newUI.targets': 3, // max number of applies-to targets visible: 0 = none
'editor.options': {}, // CodeMirror.defaults.* 'editor.options': {}, // CodeMirror.defaults.*
'editor.options.expanded': true,// UI element state: expanded/collapsed
'editor.lineWrapping': true, // word wrap 'editor.lineWrapping': true, // word wrap
'editor.smartIndent': true, // 'smart' indent 'editor.smartIndent': true, // 'smart' indent
'editor.indentWithTabs': false, // smart indent with tabs 'editor.indentWithTabs': false, // smart indent with tabs