Skip to content

Commit

Permalink
combine style/editor settings
Browse files Browse the repository at this point in the history 
+ allow multiple #help-popup on screen
  • Loading branch information
@tophf
tophf committed Oct 21, 2023
1 parent f6e3674 commit 9ea2ce5
Show file tree
Hide file tree
Showing 15 changed files with 268 additions and 279 deletions.
103 changes: 0 additions & 103 deletions edit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,105 +277,6 @@ <h1 id="heading" i18n="data-edit:editStyleHeading, data-add:addStyleTitle">
</div>
</section>
<div id="details-wrapper">
<details id="options" data-pref="editor.options.expanded" class="ignore-pref-if-compact">
<summary><h2 id="options-heading" i18n="editorSettings"></h2></summary>
<div id="options-wrapper">
<div class="options-column">
<div class="option">
<label id="lineWrapping-label" i18n="+cm_lineWrapping">
<input id="editor.lineWrapping" type="checkbox">
</label>
</div>
<div class="option">
<label id="smartIndent-label" i18n="+cm_smartIndent">
<input id="editor.smartIndent" type="checkbox">
</label>
</div>
<div class="option">
<label id="indentWithTabs-label" i18n="+cm_indentWithTabs">
<input id="editor.indentWithTabs" type="checkbox">
</label>
</div>
<div class="option">
<label i18n="+cm_autoCloseBrackets, title:cm_autoCloseBracketsTooltip">
<input id="editor.autoCloseBrackets" type="checkbox">
</label>
</div>
<div class="option">
<label i18n="+cm_autocompleteOnTyping">
<input id="editor.autocompleteOnTyping" type="checkbox">
</label>
</div>
<div class="option">
<label i18n="+cm_selectByTokens, title:cm_selectByTokensTooltip">
<input id="editor.selectByTokens" type="checkbox">
</label>
</div>
<div class="option sectioned-only">
<label i18n="+cm_arrowKeysTraverse">
<input id="editor.arrowKeysTraverse" type="checkbox">
</label>
</div>
<div class="option">
<label i18n="+cm_colorpicker">
<input id="editor.colorpicker" type="checkbox">
</label>
<a id="colorpicker-settings" class=icon i18n="title:shortcutsNote" tabindex="0">
<i class=i-config></i>
</a>
</div>
<div class="option usercss-only">
<label i18n="+appliesLineWidgetLabel, title:appliesLineWidgetWarning">
<input id="editor.appliesToLineWidget" type="checkbox">
</label>
</div>
</div>
<div class="options-column">
<div class="option aligned">
<label id="tabSize-label" for="editor.tabSize" i18n="cm_tabSize"></label>
<input id="editor.tabSize" type="number" min="0">
</div>
<div class="option aligned">
<label id="keyMap-label" for="editor.keyMap" i18n="cm_keyMap"></label>
<div class="select-wrapper">
<select id="editor.keyMap"></select>
</div>
<a id="keyMap-help" class=icon tabindex="0">
<i class=i-info></i>
</a>
</div>
<div class="option aligned">
<label id="theme-label" for="editor.theme" i18n="cm_theme"></label>
<div class="select-wrapper">
<select id="editor.theme"></select>
</div>
</div>
<div class="option aligned">
<label id="highlight-label" for="editor.matchHighlight" i18n="cm_matchHighlight"></label>
<div class="select-wrapper">
<select id="editor.matchHighlight">
<option i18n="cm_matchHighlightToken" value="token">
<option i18n="cm_matchHighlightSelection" value="selection">
<option i18n="genericDisabledLabel" value="">
</select>
</div>
</div>
<div class="option aligned">
<label id="linter-label" for="editor.linter" i18n="cm_linter"></label>
<div class="select-wrapper">
<select id="editor.linter">
<option value="csslint" selected>CSSLint</option>
<option value="stylelint">Stylelint</option>
<option value="" i18n="genericDisabledLabel"></option>
</select>
</div>
<a id="linter-settings" class=icon i18n="title:linterConfigTooltip" tabindex="0">
<i class=i-config></i>
</a>
</div>
</div>
</div>
</details>
<details id="publish" data-pref="editor.publish.expanded" class="ignore-pref-if-compact">
<summary><h2 i18n="publish"></h2></summary>
<div>
Expand Down Expand Up @@ -415,10 +316,6 @@ <h2><span i18n="linterIssues"></span><span id="issue-count"></span>
</div>
</div>
<section id="sections"></section>
<div id="help-popup">
<div class="title"></div><i class="i-close dismiss" id="sections-help"></i>
<div class="contents"></div>
</div>
</template>

<link href="edit/edit.css" rel="stylesheet">
Expand Down
51 changes: 3 additions & 48 deletions edit/base.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* global $$ $ $create messageBoxProxy setInputValue setupLivePrefs */// dom.js
/* global $$ $ messageBoxProxy setInputValue setupLivePrefs */// dom.js
/* global API */// msg.js
/* global CODEMIRROR_THEMES */
/* global CodeMirror */
Expand Down Expand Up @@ -109,11 +109,10 @@ const editor = {
/* exported EditorHeader */
function EditorHeader() {
initBeautifyButton($('#beautify'));
initKeymapElement();
initNameArea();
initThemeElement();
setupLivePrefs();

// move the theme after built-in CSS so that its same-specificity selectors win
document.head.appendChild($('#cm-theme'));
window.on('load', () => {
prefs.subscribe('editor.keyMap', showHotkeyInTooltip, true);
window.on('showHotkeyInTooltip', showHotkeyInTooltip);
Expand Down Expand Up @@ -155,50 +154,6 @@ function EditorHeader() {
enabledEl.onchange = () => editor.updateEnabledness(enabledEl.checked);
}

function initThemeElement() {
$('#editor.theme').append(...[
$create('option', {value: 'default'}, t('defaultTheme')),
...Object.keys(CODEMIRROR_THEMES).map(s => $create('option', s)),
]);
// move the theme after built-in CSS so that its same-specificity selectors win
document.head.appendChild($('#cm-theme'));
}

function initKeymapElement() {
// move 'pc' or 'mac' prefix to the end of the displayed label
const maps = Object.keys(CodeMirror.keyMap)
.map(name => ({
value: name,
name: name.replace(/^(pc|mac)(.+)/, (s, arch, baseName) =>
baseName.toLowerCase() + '-' + (arch === 'mac' ? 'Mac' : 'PC')),
}))
.sort((a, b) => a.name < b.name && -1 || a.name > b.name && 1);

const fragment = document.createDocumentFragment();
let bin = fragment;
let groupName;
// group suffixed maps in <optgroup>
maps.forEach(({value, name}, i) => {
groupName = !name.includes('-') ? name : groupName;
const groupWithNext = maps[i + 1] && maps[i + 1].name.startsWith(groupName);
if (groupWithNext) {
if (bin === fragment) {
bin = fragment.appendChild($create('optgroup', {label: name.split('-')[0]}));
}
}
const el = bin.appendChild($create('option', {value}, name));
if (value === prefs.defaults['editor.keyMap']) {
el.dataset.default = '';
el.title = t('defaultTheme');
}
if (!groupWithNext) bin = fragment;
});
const selector = $('#editor.keyMap');
selector.textContent = '';
selector.appendChild(fragment);
selector.value = prefs.get('editor.keyMap');
}

function showHotkeyInTooltip(_, mapName = prefs.get('editor.keyMap')) {
const extraKeys = CodeMirror.defaults.extraKeys;
for (const el of $$('[data-hotkey-tooltip]')) {
Expand Down
3 changes: 1 addition & 2 deletions edit/drafts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
const info = t('draftTitle', makeRelativeDate(draft.date));
const popup = showCodeMirrorPopup(info, '', {value, readOnly: true});
popup.className += ' danger';
window.on('closeHelp', onNo, {once: true});
helpPopup.div.onClose.add(onNo);
helpPopup.contents.append(
$create('p', t('draftAction')),
$create('.buttons', [t('confirmYes'), t('confirmNo')].map((btn, i) =>
Expand All @@ -51,7 +51,6 @@
} else {
API.drafts.delete(makeId()).catch(() => {});
}
window.off('closeHelp', onNo);
helpPopup.close();
}

Expand Down
60 changes: 9 additions & 51 deletions edit/edit.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,6 @@ html:not(.is-new-style) #heading::before {
.usercss:not(.compact-layout) #popup-button {
right: 24px;
}
/************ checkbox & select************/
.options-column > .option {
margin-bottom: .25rem;
}

.options-column > .usercss-only {
margin-bottom: .75rem;
}

/************ header ************/
#header {
Expand Down Expand Up @@ -115,14 +107,6 @@ html:not(.is-new-style) #heading::before {
margin-top: 1rem;
margin-left: 1.7rem;
}
.aligned {
display: table-row;
}
.aligned > *:not(.icon) {
display: table-cell;
margin-top: 0.1rem;
min-height: 1.4rem;
}

/* basic info */
#basic-info {
Expand Down Expand Up @@ -178,9 +162,6 @@ a.icon {
position: absolute;
margin-top: -1px;
}
#sections-help {
margin-left: -1px;
}
.i-info {
width: 14px;
height: 16px;
Expand All @@ -195,9 +176,6 @@ i,
.i-config:hover {
color: var(--fg);
}
#options span i {
margin-top: -3px; /* inline info and config icons */
}
/* collapsibles */
#header details {
margin-right: var(--header-resizer-width);
Expand Down Expand Up @@ -338,16 +316,6 @@ i,
transform: scale(0.125);
transform-origin: 0 10px;
}
/* options */
#options [type="number"] {
width: 3.5em;
text-align: left;
padding-left: .25em;
}
#options .option.aligned > label {
padding: .1rem .25rem 0 0;
vertical-align: middle;
}
/* footer */
.usercss #footer {
display: block;
Expand Down Expand Up @@ -723,15 +691,14 @@ i,
#help-popup {
--pad-x: 1.5rem;
--pad-y: 1rem;
--pad-y2: calc(var(--pad-y) / 1.5);
--pad-y2: calc(var(
--pad-y) / 1.5);
top: 3rem;
right: 3rem;
max-width: 50vw;
max-width: calc(100% - var(--header-width) - 6rem);
position: fixed;
display: none;
background-color: var(--bg);
box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
padding: var(--pad-y) var(--pad-x) 0;
z-index: 99;
}
#help-popup.big,
Expand All @@ -749,7 +716,6 @@ i,
#help-popup .title {
font-weight: bold;
background-color: rgba(128, 128, 128, .15);
margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x)) 0;
padding: var(--pad-y2) var(--pad-x);
}
#help-popup.danger .title {
Expand All @@ -762,13 +728,14 @@ i,
#help-popup .contents {
max-height: calc(100vh - 8rem);
overflow-y: auto;
padding: var(--pad-y) 0;
padding: var(--pad-y) var(--pad-x);
}
#help-popup .dismiss {
position: absolute;
right: 0;
top: 0;
padding: var(--pad-y2) .5em;
font-size: 14px;
}
#help-popup input[type="search"],
#help-popup .CodeMirror {
Expand Down Expand Up @@ -953,14 +920,6 @@ i,
display: none !important; /* hide during page init */
}

#options:not([open]) + #lint {
margin-top: 0;
}

#options-wrapper .options-column:nth-child(2) {
margin-top: .75rem;
}

.single-editor {
position: relative;
height: 100%;
Expand Down Expand Up @@ -1148,7 +1107,6 @@ i,
max-width: 50vw;
right: 0;
}
#options[open],
#publish[open],
#lint:not([open]) {
flex: 0 0 auto;
Expand All @@ -1169,20 +1127,20 @@ i,
overflow: hidden;
flex: 1;
}
#help-popup.big[style="display: block;"],
#help-popup[style="display: block;"] {
#help-popup.big,
#help-popup {
width: max-content;
height: min-content;
max-width: 90%;
max-width: 100vw;
max-height: 90vh;
top: 7rem;
right: 0;
margin: auto;
}
#help-popup[style*="left:"] {
left: 1rem !important;
margin-top: -2.35rem;
}
#help-popup:not([style*="display: block;"]),
#help-popup .CodeMirror-lint-markers,
#help-popup .CodeMirror-guttermarker-subtle {
display: none !important;
Expand Down
Loading

0 comments on commit 9ea2ce5

Please sign in to comment.