From 1a9ad1a7e3b51aeb16063d8064066999a49919f3 Mon Sep 17 00:00:00 2001
From: Al McKinlay <alistair@10people.co.uk>
Date: Tue, 19 Dec 2017 13:49:17 +0000
Subject: [PATCH] Add advanced toggle and hide certain settings by default

---
 client/js/options.js              |  3 +++
 client/views/windows/settings.tpl | 21 +++++++++++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/client/js/options.js b/client/js/options.js
index 085ae38d..e2f05b78 100644
--- a/client/js/options.js
+++ b/client/js/options.js
@@ -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]);
 	}
 }
 
diff --git a/client/views/windows/settings.tpl b/client/views/windows/settings.tpl
index f5fe5737..cf414f4b 100644
--- a/client/views/windows/settings.tpl
+++ b/client/views/windows/settings.tpl
@@ -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>