add fontsize to settings

src/index.html

@@ -339,26 +339,31 @@
 			</div>
 		</div>
 
-	<style>
-		label {
-			display: block;
-			cursor: pointer;
-		}
-	</style>
 		<div class="modal" id="settingsModal">
 			<div class="modal__content">
 				<h1>Settings</h1>
 
 				<h3>Indentation</h3>
 				<p>
+					<div class="line">
+						<label>
+							<input type="radio" checked="true" name="indentation" value="spaces" d-change="updateSetting" data-setting="indentWith"> Spaces
+						</label>
+						<label class="ml-1">
+							<input type="radio" name="indentation" value="tabs" d-change="updateSetting" data-setting="indentWith"> Tabs
+						</label>
+					</div>
 					<label class="line">
-						<input type="radio" checked="true" name="indentation" value="spaces" d-change="updateSetting" data-setting="indentWith"> Spaces
+						Indentation Size <input type="range" class="va-m ml-1" value="2" min="1" max="7" list="indentationSizeList" data-setting="indentSize" d-change="updateSetting">
-					</label>
+						<datalist id="indentationSizeList">
-					<label class="line">
+							<option>1</option>
-						<input type="radio" name="indentation" value="tabs" d-change="updateSetting" data-setting="indentWith"> Tabs
+							<option>2</option>
-					</label>
+							<option>3</option>
-					<label class="line">
+							<option>4</option>
-						Indentation Size <input type="range" value="2" min="1" max="10" data-setting="indentSize" d-change="updateSetting">
+							<option>5</option>
+							<option>6</option>
+							<option>7</option>
+						</datalist>
 					</label>
 				</p>
 				<hr>
@@ -393,11 +398,18 @@
 						<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
 					</label>
 					<label class="line">
-						<input type="radio" checked="true" name="keymap" value="sublime" d-change="updateSetting" data-setting="keymap"> Sublime key bindings
+						Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
-					</label>
+
-					<label class="line">
-						<input type="radio" name="keymap" value="vim" d-change="updateSetting" data-setting="keymap"> Vim key bindings
 					</label>
+					<div class="line">
+						Key bindings
+						<label class="ml-1">
+							<input type="radio" checked="true" name="keymap" value="sublime" d-change="updateSetting" data-setting="keymap"> Sublime
+						</label>
+						<label class="ml-1">
+							<input type="radio" name="keymap" value="vim" d-change="updateSetting" data-setting="keymap"> Vim
+						</label>
+					</div>
 					<label class="line">
 						<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
 					</label>

src/script.js

@@ -1133,6 +1133,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 		e.preventDefault();
 	}
 
+	// Populate the settings in the settings UI
 	function updateSettingsInUi() {
 		$('[data-setting=preserveLastCode]').checked = prefs.preserveLastCode;
 		$('[data-setting=replaceNewTab]').checked = prefs.replaceNewTab;
@@ -1144,6 +1145,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 		$('[data-setting=isCodeBlastOn]').checked = prefs.isCodeBlastOn;
 		$('[data-setting=editorTheme]').value = prefs.editorTheme;
 		$('[data-setting=keymap][value=' + (prefs.keymap || 'sublime') + ']').checked = true;
+		$('[data-setting=fontSize]').value = prefs.fontSize || 16;
 	}
 
 	scope.updateSetting = function updateSetting(e) {
@@ -1153,12 +1155,16 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 			var obj = {};
 			var el = e.target;
 			console.log(e, settingName, (el.type === 'checkbox') ? el.checked : el.value);
-			obj[settingName] = el.type === 'checkbox' ? el.checked : el.value;
+			prefs[settingName] = el.type === 'checkbox' ? el.checked : el.value;
+			obj[settingName] = prefs[settingName];
 			chrome.storage.sync.set(obj, function() {
 				alertsService.add('setting saved');
 			});
 		}
 
+		htmlCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
+		cssCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
+		jsCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
 		['html', 'js', 'css'].forEach((type) => {
 			scope.cm[type].setOption(
 				'indentWithTabs',
@@ -1447,7 +1453,8 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 			indentWith: 'spaces',
 			indentSize: 2,
 			editorTheme: 'monokai',
-			keymap: 'sublime'
+			keymap: 'sublime',
+			fontSize: 16
 		}, function syncGetCallback(result) {
 			if (result.preserveLastCode && lastCode) {
 				unsavedEditCount = 0;
@@ -1475,6 +1482,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 			prefs.indentWith = result.indentWith;
 			prefs.editorTheme = result.editorTheme;
 			prefs.keymap = result.keymap;
+			prefs.fontSize = result.fontSize;
 
 			updateSettingsInUi();
 			scope.updateSetting();

src/style.css

@@ -31,18 +31,24 @@ a { text-decoration: none; color: crimson; cursor: pointer; }
 .fr { float: right; }
 .relative { position: relative; }
 .tac { text-align: center; }
+.va-m { vertical-align: middle; }
 .full-width { width: 100%; }
 .opacity--30 { opacity: 0.3; }
 .pointer-none { pointer-events: none; }
+.ml-1 { margin-left: 1rem; }
 hr {
 	background: 0;
 	border: 0;
 	border-bottom: 1px solid #dedede;
 }
+label {
+	cursor: pointer;
+}
 [class*="hint--"]:after {
 	text-transform: none;
 }
 .line {
+	display: block;
 	margin-bottom: 1em;
 }
 .caret {
@@ -58,7 +64,7 @@ hr {
 a > svg {
 	fill: rgba(255, 255, 255, 0.2)
 }
-select, input[type="text"], textarea {
+select, input[type="text"], input[type="number"],  textarea {
 	padding: 3px 5px;
 	font-size: inherit;
 }