Simplified settings dialog

This commit is contained in:
benweet 2014-01-21 23:48:42 +00:00
parent d60e32dd01
commit b9cc5a9026
5 changed files with 123 additions and 74 deletions

View File

@ -2,11 +2,11 @@
<html manifest="cache.manifest"> <html manifest="cache.manifest">
<head> <head>
<title>StackEdit *smart* markdown editor</title> <title>StackEdit markdown editor</title>
<link rel="canonical" href="https://stackedit.io/"> <link rel="canonical" href="https://stackedit.io/">
<link rel="icon" href="res-min/img/stackedit-32.ico" type="image/x-icon"> <link rel="icon" href="res-min/img/stackedit-32.ico" type="image/x-icon">
<link rel="shortcut icon" href="res-min/img/stackedit-32.ico" type="image/x-icon"> <link rel="shortcut icon" href="res-min/img/stackedit-32.ico" type="image/x-icon">
<meta name="description" content="StackEdit is a full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites."> <meta name="description" content="Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.">
<meta name="author" content="Benoit Schweblin"> <meta name="author" content="Benoit Schweblin">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612" <meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612"

View File

@ -681,6 +681,11 @@ define([
// Populate shortcuts in settings // Populate shortcuts in settings
shortcutMgr.addSettingEntries(); shortcutMgr.addSettingEntries();
// Hide shortcuts settings if light mode
if(window.lightMode) {
$('.tab-settings-shortcuts').hide();
}
// listen to online/offline events // listen to online/offline events
$(window).on('offline', core.setOffline); $(window).on('offline', core.setOffline);

View File

@ -121,7 +121,14 @@ define([
logger.log("onLoadSettings"); logger.log("onLoadSettings");
_.each(extensionList, function(extension) { _.each(extensionList, function(extension) {
var isChecked = !extension.isOptional || extension.config.enabled === undefined || extension.config.enabled === true; var isChecked = !extension.isOptional || extension.config.enabled === undefined || extension.config.enabled === true;
utils.setInputChecked($("#input-enable-extension-" + extension.extensionId), isChecked); utils.setInputChecked("#input-enable-extension-" + extension.extensionId, isChecked);
// Special case for Markdown Extra and MathJax
if(extension.extensionId == 'markdownExtra') {
utils.setInputChecked("#input-settings-markdown-extra", isChecked);
}
else if(extension.extensionId == 'mathJax') {
utils.setInputChecked("#input-settings-mathjax", isChecked);
}
var onLoadSettingsListener = extension.onLoadSettings; var onLoadSettingsListener = extension.onLoadSettings;
onLoadSettingsListener && onLoadSettingsListener(); onLoadSettingsListener && onLoadSettingsListener();
}); });
@ -131,6 +138,20 @@ define([
_.each(extensionList, function(extension) { _.each(extensionList, function(extension) {
var newExtensionConfig = _.extend({}, extension.defaultConfig); var newExtensionConfig = _.extend({}, extension.defaultConfig);
newExtensionConfig.enabled = utils.getInputChecked("#input-enable-extension-" + extension.extensionId); newExtensionConfig.enabled = utils.getInputChecked("#input-enable-extension-" + extension.extensionId);
var isChecked;
// Special case for Markdown Extra and MathJax
if(extension.extensionId == 'markdownExtra') {
isChecked = utils.getInputChecked("#input-settings-markdown-extra");
if(isChecked != extension.enabled) {
newExtensionConfig.enabled = isChecked;
}
}
else if(extension.extensionId == 'mathJax') {
isChecked = utils.getInputChecked("#input-settings-mathjax");
if(isChecked != extension.enabled) {
newExtensionConfig.enabled = isChecked;
}
}
var onSaveSettingsListener = extension.onSaveSettings; var onSaveSettingsListener = extension.onSaveSettings;
onSaveSettingsListener && onSaveSettingsListener(newExtensionConfig, event); onSaveSettingsListener && onSaveSettingsListener(newExtensionConfig, event);
newExtensionSettings[extension.extensionId] = newExtensionConfig; newExtensionSettings[extension.extensionId] = newExtensionConfig;
@ -204,6 +225,7 @@ define([
html += elt.innerHTML; html += elt.innerHTML;
}); });
html = html.replace(/^<div class="se-section-delimiter"><\/div>\n\n/gm, ''); html = html.replace(/^<div class="se-section-delimiter"><\/div>\n\n/gm, '');
html = html.replace(/ <span class="comment label label-danger">.*<\/span> /g, '');
onPreviewFinished(utils.trim(html)); onPreviewFinished(utils.trim(html));
}); });
}; };
@ -242,7 +264,7 @@ define([
var accordionHtml = _.chain(extensionList).sortBy(function(extension) { var accordionHtml = _.chain(extensionList).sortBy(function(extension) {
return extension.extensionName.toLowerCase(); return extension.extensionName.toLowerCase();
}).reduce(function(html, extension) { }).reduce(function(html, extension) {
return html + (extension.settingsBlock ? _.template(settingsExtensionsAccordionHTML, { return html + (extension.settingsBlock && !(window.lightMode === true && extension.disableInLight === true) ? _.template(settingsExtensionsAccordionHTML, {
extensionId: extension.extensionId, extensionId: extension.extensionId,
extensionName: extension.extensionName, extensionName: extension.extensionName,
isOptional: extension.isOptional, isOptional: extension.isOptional,
@ -250,7 +272,7 @@ define([
}) : ""); }) : "");
}, "").value(); }, "").value();
document.querySelector('.accordion-extensions').innerHTML = accordionHtml; document.querySelector('.accordion-extensions').innerHTML = accordionHtml;
// Create extension buttons // Create extension buttons
logger.log("onCreateButton"); logger.log("onCreateButton");
var onCreateButtonListenerList = getExtensionListenerList("onCreateButton"); var onCreateButtonListenerList = getExtensionListenerList("onCreateButton");

View File

@ -906,10 +906,10 @@
<h3 class="modal-title">Settings</h3> <h3 class="modal-title">Settings</h3>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a class="action-load-settings" <li class="active"><a class="action-load-settings"
href="#tabpane-settings-editor" data-toggle="tab">Editor</a></li> href="#tabpane-settings-basic" data-toggle="tab">Basic</a></li>
<li><a class="action-load-settings"
href="#tabpane-settings-services" data-toggle="tab">Services</a></li>
<li><a class="action-load-settings" <li><a class="action-load-settings"
href="#tabpane-settings-advanced" data-toggle="tab">Advanced</a></li>
<li><a class="action-load-settings tab-settings-shortcuts"
href="#tabpane-settings-shortcuts" data-toggle="tab">Shortcuts</a></li> href="#tabpane-settings-shortcuts" data-toggle="tab">Shortcuts</a></li>
<li><a class="action-load-settings" <li><a class="action-load-settings"
href="#tabpane-settings-extensions" data-toggle="tab">Extensions</a></li> href="#tabpane-settings-extensions" data-toggle="tab">Extensions</a></li>
@ -920,7 +920,7 @@
<div class="modal-body"> <div class="modal-body">
<div class="tab-content clearfix"> <div class="tab-content clearfix">
<div class="tab-pane active" id="tabpane-settings-editor"> <div class="tab-pane active" id="tabpane-settings-basic">
<div class="form-horizontal"> <div class="form-horizontal">
<div class="form-group"> <div class="form-group">
<label class="col-lg-4 control-label">Layout orientation</label> <label class="col-lg-4 control-label">Layout orientation</label>
@ -946,6 +946,68 @@
</select> </select>
</div> </div>
</div> </div>
<div class="form-group">
<div class="col-lg-4"></div>
<div class="col-lg-7">
<div class="checkbox">
<label>
<input type="checkbox" id="input-settings-markdown-extra" />
Use <b>Markdown Extra/GitHub Flavored Markdown</b> syntax
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-4"></div>
<div class="col-lg-7">
<div class="checkbox">
<label>
<input type="checkbox" id="input-settings-mathjax" />
<b>LaTeX mathematical expressions</b> using <code>$</code> and <code>$$</code> delimiters
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label"
for="input-settings-gdrive-multiaccount">Google Drive multi-accounts</a>
</label>
<div class="col-lg-7">
<select id="input-settings-gdrive-multiaccount" class="form-control">
<option value="1">1 account</option>
<option value="2">2 accounts</option>
<option value="3">3 accounts</option>
</select>
<span class="help-block"><b>Please sign in first with Google.</b> Once linked with your Google accounts, changing account is not possible unless you reset the application.</span>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tabpane-settings-advanced">
<div class="form-horizontal">
<div class="form-group">
<label class="col-lg-4 control-label">Mode</label>
<div class="col-lg-7">
<div class="radio">
<label> <input type="radio"
name="radio-settings-mode" value="_ace_">
Normal (ACE)
</label>
</div>
<div class="radio">
<label> <input type="radio"
name="radio-settings-mode" value="_light_">
Light (textarea)
</label>
</div>
<div class="radio">
<label> <input type="radio"
name="radio-settings-mode" value="_light_rtl_">
Light + Right-to-left
</label>
</div>
</div>
</div>
<div class="form-group"> <div class="form-group">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-settings-lazy-rendering">Lazy rendering <a for="input-settings-lazy-rendering">Lazy rendering <a
@ -987,44 +1049,35 @@
class="form-control"></textarea> class="form-control"></textarea>
</div> </div>
</div> </div>
<div class="form-group">
<label class="col-lg-4 control-label">Mode</label>
<div class="col-lg-7">
<div class="radio">
<label> <input type="radio"
name="radio-settings-mode" value="_ace_">
Normal (ACE)
</label>
</div>
<div class="radio">
<label> <input type="radio"
name="radio-settings-mode" value="_light_">
Light (textarea)
</label>
</div>
<div class="radio">
<label> <input type="radio"
name="radio-settings-mode" value="_light_rtl_">
Light + Right-to-left
</label>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tabpane-settings-services">
<div class="form-horizontal">
<div class="form-group"> <div class="form-group">
<label class="col-lg-4 control-label" <label class="col-lg-4 control-label"
for="input-settings-gdrive-multiaccount">Google Drive multi-accounts</a> for="textarea-settings-publish-template">Default
template <a href="#" class="tooltip-template">(?)</a>
</label> </label>
<div class="col-lg-7"> <div class="col-lg-7">
<select id="input-settings-gdrive-multiaccount" class="form-control"> <textarea id="textarea-settings-publish-template"
<option value="1">1 account</option> class="form-control"></textarea>
<option value="2">2 accounts</option> </div>
<option value="3">3 accounts</option> </div>
<div class="form-group">
<label class="col-lg-4 control-label"
for="textarea-settings-pdf-template">PDF
template <a href="#" class="tooltip-template">(?)</a>
</label>
<div class="col-lg-7">
<textarea id="textarea-settings-pdf-template"
class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label" for="input-settings-pdf-page-size">PDF page size</label>
<div class="col-lg-7">
<select id="input-settings-pdf-page-size" class="form-control">
<option value="A3">A3</option>
<option value="A4">A4</option>
<option value="Legal">Legal</option>
<option value="Letter">Letter</option>
</select> </select>
<span class="help-block"><b>Please sign in first with Google.</b> Once linked with your Google accounts, changing account is not possible unless you reset the application.</span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -1081,37 +1134,6 @@
class="form-control"> class="form-control">
</div> </div>
</div> </div>
<div class="form-group">
<label class="col-lg-4 control-label"
for="textarea-settings-publish-template">Default
template <a href="#" class="tooltip-template">(?)</a>
</label>
<div class="col-lg-7">
<textarea id="textarea-settings-publish-template"
class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label"
for="textarea-settings-pdf-template">PDF
template <a href="#" class="tooltip-template">(?)</a>
</label>
<div class="col-lg-7">
<textarea id="textarea-settings-pdf-template"
class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label" for="input-settings-pdf-page-size">PDF page size</label>
<div class="col-lg-7">
<select id="input-settings-pdf-page-size" class="form-control">
<option value="A3">A3</option>
<option value="A4">A4</option>
<option value="Legal">Legal</option>
<option value="Letter">Letter</option>
</select>
</div>
</div>
</div> </div>
</div> </div>
<div class="tab-pane" id="tabpane-settings-shortcuts"> <div class="tab-pane" id="tabpane-settings-shortcuts">

View File

@ -6,7 +6,7 @@
<link rel="canonical" href="https://stackedit.io/viewer"> <link rel="canonical" href="https://stackedit.io/viewer">
<link rel="icon" href="res-min/img/stackedit-32.ico" type="image/x-icon"> <link rel="icon" href="res-min/img/stackedit-32.ico" type="image/x-icon">
<link rel="shortcut icon" href="res-min/img/stackedit-32.ico" type="image/x-icon"> <link rel="shortcut icon" href="res-min/img/stackedit-32.ico" type="image/x-icon">
<meta name="description" content="StackEdit is a full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites."> <meta name="description" content="Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.">
<meta name="author" content="Benoit Schweblin"> <meta name="author" content="Benoit Schweblin">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612" <meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612"