Add advanced toggle and hide certain settings by default

This commit is contained in:
Al McKinlay 2017-12-19 13:49:17 +00:00 committed by Alistair McKinlay
parent bd619220d0
commit 1a9ad1a7e3
2 changed files with 18 additions and 6 deletions

View file

@ -24,6 +24,7 @@ let $warningBlocked;
// Default settings
const settings = {
syncSettings: false,
advanced: false,
autocomplete: true,
nickPostfix: "",
coloredNicks: true,
@ -155,6 +156,8 @@ function applySetting(name, value) {
} else if (!value) {
$warningBlocked.hide();
}
} else if (name === "advanced") {
$("#settings [data-advanced]").toggle(settings[name]);
}
}

View file

@ -4,9 +4,18 @@
<div class="container">
<h1 class="title">Settings</h1>
<div class="row">
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="advanced">
Advanced settings
</label>
</div>
</div>
<div class="row">
{{#unless public}}
<div class="col-sm-12">
<div class="col-sm-12" data-advanced>
<h2>
Settings synchronisation
<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Note: This is an experimental feature and may change in future releases.">
@ -71,7 +80,7 @@
Enable autocomplete
</label>
</div>
<div class="col-sm-12">
<div class="col-sm-12" data-advanced>
<label class="opt">
<label for="nickPostfix" class="sr-only">Nick autocomplete postfix (e.g. <code>, </code>)</label>
<input type="text" id="nickPostfix" name="nickPostfix" class="input" placeholder="Nick autocomplete postfix (e.g. ', ')">
@ -153,14 +162,14 @@
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-12" data-advanced>
<label class="opt">
<input type="checkbox" name="notifyAllMessages">
Enable notification for all messages
</label>
</div>
<div class="col-sm-12">
<div class="col-sm-12" data-advanced>
<label class="opt">
<label for="highlights" class="sr-only">Custom highlights (comma-separated keywords)</label>
<input type="text" id="highlights" name="highlights" class="input" placeholder="Custom highlights (comma-separated keywords)">
@ -194,10 +203,10 @@
</div>
{{/unless}}
{{/unless}}
<div class="col-sm-12">
<div class="col-sm-12" data-advanced>
<h2>Custom Stylesheet</h2>
</div>
<div class="col-sm-12">
<div class="col-sm-12" data-advanced>
<label for="user-specified-css-input" class="sr-only">Custom stylesheet. You can override any style with CSS here.</label>
<textarea class="input" name="userStyles" id="user-specified-css-input" placeholder="/* You can override any style with CSS here */"></textarea>
</div>