mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Feature #470: update application settings layout

Browse Source
This commit is contained in:
Julian Descottes 2016-06-04 16:50:51 +02:00
parent f2ff3bc74e
commit 21b2261a9d
3 changed files with 26 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/css/settings-application.css
View File

@ -3,42 +3,37 @@
/*******************************/ /*******************************/
.background-picker-wrapper { .background-picker-wrapper {
display: inline-block;
width: 130px;
overflow: hidden; overflow: hidden;
padding: 5px 5px 2px 5px; vertical-align: middle;
margin-left: 5px;
} }
.background-picker { .background-picker {
cursor: pointer; cursor: pointer;
float: left; float: left;
height: 35px; height: 14px;
width: 35px; width: 14px;
background-color: transparent; background-color: transparent;
margin-right: 15px; margin-right: 5px;
padding: 1px; padding: 1px;
position: relative; position: relative;
border: #888 2px solid;
} }
.background-picker:after { .background-picker:hover {
content: " "; border-color: #eee;
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
} }
.background-picker:hover:after { .background-picker.selected {
border: #eee 1px solid; border-color: gold;
}
.background-picker.selected:after {
border: gold 1px solid;
} }
.layer-opacity-input { .layer-opacity-input {
margin: 5px; margin: 5px;
vertical-align: middle; vertical-align: middle;
width: 145px; width: 100px;
} }
.layer-opacity-text { .layer-opacity-text {
@ -53,9 +48,10 @@
} }
.grid-width-select { .grid-width-select {
margin: 5px; margin: 5px 5px 0 5px;
} }
.settings-section-application > .settings-item > label { .settings-section-application > .settings-title {
display: block; /* Override the default 10px margin bottom for this panel */
margin-bottom: 15px;
} }

18
src/templates/settings/application.html
View File

@ -4,6 +4,7 @@
<div class="settings-title"> <div class="settings-title">
General General
</div> </div>
<div class="settings-item"> <div class="settings-item">
<label>Background</label> <label>Background</label>
<div class="background-picker-wrapper"> <div class="background-picker-wrapper">
@ -23,7 +24,7 @@
</div> </div>
<div class="settings-item"> <div class="settings-item">
<label for="grid-width">Grid</label> <label for="grid-width">Pixel Grid</label>
<select id="grid-width" class="grid-width-select"> <select id="grid-width" class="grid-width-select">
<option value="0">Disabled</option> <option value="0">Disabled</option>
<option value="1">1px</option> <option value="1">1px</option>
@ -34,22 +35,15 @@
</div> </div>
<div class="settings-item"> <div class="settings-item">
<label for="tiled-preview">Layer Preview Opacity</label> <label for="tiled-preview">Layer Opacity</label>
<input type="range" class="layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/> <input type="range" class="layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
<span class="layer-opacity-text"></span> <span class="layer-opacity-text"></span>
</div> </div>
</div>
<div class="settings-section">
<div class="settings-title">
Preview
</div>
<div class="settings-item"> <div class="settings-item">
<label> <label>
<input type="checkbox" value="1" class="tiled-preview-checkbox checkbox-fix" name="tiled-preview-checkbox"/> Seamless drawing mode
Repeated preview <input type="checkbox" value="1" class="tiled-preview-checkbox" name="tiled-preview-checkbox"/>
</label> </label>
</div> </div>
@ -58,7 +52,7 @@
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/> <input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
</div> </div>
<input type="submit" class="button button-primary" value="Save" /> <input type="submit" class="button button-primary" value="Apply settings" />
</div> </div>
</form> </form>
</script> </script>

2
src/templates/settings/export.html
View File

@ -1,7 +1,7 @@
<script type="text/html" id="templates/settings/export.html"> <script type="text/html" id="templates/settings/export.html">
<div class="settings-section settings-section-export"> <div class="settings-section settings-section-export">
<div class="settings-title">Export</div> <div class="settings-title">Export</div>
<div class="settings-item export-scale" title="Scale the exported PNG spritesheet" <div class="settings-item export-scale" title="Scale the animation for export"
rel="tooltip" rel="tooltip"
data-placement="top"> data-placement="top">
<label for="scale-input">Scale</label> <label for="scale-input">Scale</label>