mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-04-22 11:44:28 +02:00
Code Issues Releases Wiki Activity

add fontsize to settings

Browse Source
This commit is contained in:
Kushagra Gour 2017-03-11 00:35:07 +05:30
parent d2f7fba297
commit 0a1248b375
3 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/index.html
View File

@ -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
</label>
<label class="line">
<input type="radio" name="indentation" value="tabs" d-change="updateSetting" data-setting="indentWith"> Tabs
</label>
<label class="line">
Indentation Size <input type="range" value="2" min="1" max="10" data-setting="indentSize" d-change="updateSetting">
Indentation Size <input type="range" class="va-m ml-1" value="2" min="1" max="7" list="indentationSizeList" data-setting="indentSize" d-change="updateSetting">
<datalist id="indentationSizeList">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<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
</label>
<label class="line">
<input type="radio" name="keymap" value="vim" d-change="updateSetting" data-setting="keymap"> Vim key bindings
Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
</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>

12
src/script.js
View File

@ -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();

8
src/style.css
View File

@ -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;
}