mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-13 13:55:23 +02:00
Code Issues Releases Wiki Activity

Refactor settings layout and add help to all settings. fixes #165

Browse Source
This commit is contained in:
Kushagra Gour 2017-09-12 21:37:02 +05:30
parent ebbd2ba0e8
commit 813b30db59
2 changed files with 103 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/index.html
View File

@ -364,8 +364,7 @@
<h1>Settings</h1>
<h3>Indentation</h3>
<p>
<div class="line">
<div class="line" title="I know this is tough, but you have to decide one!">
<label>
<input type="radio" checked="true" name="indentation" value="spaces" d-change="updateSetting" data-setting="indentWith"> Spaces
</label>
@ -373,7 +372,7 @@
<input type="radio" name="indentation" value="tabs" d-change="updateSetting" data-setting="indentWith"> Tabs
</label>
</div>
<label class="line">
<label class="line" title="">
Indentation Size <input type="range" class="va-m ml-1" value="2" min="1" max="7" list="indentationSizeList" data-setting="indentSize" d-change="updateSetting">
<span id="indentationSizeValueEl"></span>
<datalist id="indentationSizeList">
@ -386,11 +385,12 @@
<option>7</option>
</datalist>
</label>
</p>
<hr>
<h3>Editor</h3>
<p>
<div class="flex">
<div>
<label class="line">
Default Preprocessors
</label>
@ -444,33 +444,37 @@
<input type="radio" name="keymap" value="vim" d-change="updateSetting" data-setting="keymap"> Vim
</label>
</div>
<label class="line">
</div>
<div class="ml-2">
<label class="line" title="Your Preview will refresh when you resize the preview split">
<input type="checkbox" d-change="updateSetting" data-setting="refreshOnResize"> Refresh preview on resize
</label>
<label class="line">
<label class="line" title="Turns on the auto-completion suggestions as you type">
<input type="checkbox" d-change="updateSetting" data-setting="autoComplete"> Auto-complete suggestions
</label>
<label class="line">
<label class="line" title="Refreshes the preview as you code. Otherwise use the Run button">
<input type="checkbox" d-change="updateSetting" data-setting="autoPreview"> Auto-preview
</label>
<label class="line">
<label class="line" title="Auto-save keeps saving your code at regular intervals after you hit the first save manually">
<input type="checkbox" d-change="updateSetting" data-setting="autoSave"> Auto-save
</label>
<label class="line">
<label class="line" title="Loads the last open creation when app starts">
<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
</label>
<label class="line">
<label class="line" title="Turning this on will start showing Web Maker in every new tab you open">
<input type="checkbox" d-change="updateSetting" data-setting="replaceNewTab"> Replace new tab page
</label>
<label class="line">
<label class="line" title="Preserves the console logs across your preview refreshes">
<input type="checkbox" d-change="updateSetting" data-setting="preserveConsoleLogs"> Preserve console logs
</label>
</p>
</div>
</div>
<hr>
<h3>Fun</h3>
<p>
<label class="line">
<label class="line" title="Enjoy wonderful particle blasts while you type">
<input type="checkbox" d-change="updateSetting" data-setting="isCodeBlastOn"> Code blast!
</label>
</p>

5
src/style.css
View File

@ -31,6 +31,7 @@ a { text-decoration: none; color: crimson; cursor: pointer; }
.opacity--30 { opacity: 0.3; }
.pointer-none { pointer-events: none; }
.ml-1 { margin-left: 1rem; }
.ml-2 { margin-left: 2rem; }
hr {
background: 0;
border: 0;
@ -462,8 +463,8 @@ li.CodeMirror-hint-active {
/* Make settings modal smaller */
@media screen and (min-width: 600px) {
.modal--settings {
width: 600px;
margin-left: -300px;
/* width: 600px; */
/* margin-left: -300px; */
}
}
.saved-items-pane {