new version

This commit is contained in:
jdescottes 2014-07-05 11:45:49 +02:00
parent 0501123763
commit d6608ab263
14 changed files with 1008 additions and 498 deletions

BIN
css/fonts/piskel.eot Normal file

Binary file not shown.

12
css/fonts/piskel.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="512">
<font-face units-per-em="512" ascent="480" descent="-32" />
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
<glyph unicode="&#xe600;" d="M548.568 469.33c-230.956 1.035-548.568-255.999-548.568-255.999s288.019-255.998 548.568-255.998c229.744 0 548.568 255.998 548.568 255.998s-319.896 254.974-548.568 255.999zM543.082 387.731c100.382 0 181.713-81.33 181.713-181.713s-81.331-181.713-181.713-181.713c-100.382 0-181.827 81.331-181.827 181.713s81.445 181.713 181.827 181.713zM543.197 320.645c-65.289 0-118.285-52.996-118.285-118.285s52.996-118.171 118.285-118.171c65.289 0 118.17 52.882 118.17 118.171s-52.882 118.285-118.17 118.285z" horiz-adv-x="1097" />
<glyph unicode="&#xe601;" d="M340.96 469.333l-32.981-29.267-1.969 10.697-18.862-5.459v-36.471l1.221-25.849 35.952 31.903c-0.462-6.572-0.68-13.508-0.223-21.207 0.724-12.19 4.071-23.146 10.733-31.718s15.637-14.063 25.589-18.607c19.904-9.088 44.707-23.995 75.102-49.258 57.553-47.833 64.672-71.707 75.043-113.771 9.874-54.678-5.819-94.055-28.463-127.459-16.179-23.866-36.205-45.046-80.229-53.974s-85.245-11.81-114.725-11.81v-29.712c31.378 0 73.891 2.924 120.63 12.404s92.839 24.688 121.002 54.15c30.486 31.892 59.625 89.691 42.191 180.054l-0.074 0.297c-7.766 36.041-31.345 90.17-123.528 130.25-38.13 16.578-58.817 27.279-74.37 34.381-7.777 3.551-12.257 8.151-14.697 11.29s-4.042 6.988-4.531 15.228c-1.101 18.541 1.596 32.644 4.42 41.968s5.2 12.925 5.2 12.925l-22.433 19.015zM308.574 410.875c0 0-21.425 5.601-21.425-1.56 0-39.679-0.543-46.688 13.068-74.726s31.172-56.883 57.683-81.363c50.137-46.294 46.077-53.33 54.399-77.145 3.064-8.767 4.356-29.132 2.228-45.125s-8.091-37.102-15.933-49.099c-12.322-18.852-22.247-38.122-45.82-51.216-24.626-13.678-45.867-16.634-65.626-16.634v-29.712c24.75 0 52.923 5.962 82.673 17.976s58.387 30.034 75.728 56.564c11.616 17.771 23.842 44.829 26.541 66.454s8.060 40.281-6.041 69.411c-21.705 44.841-50.569 58.307-85.806 88.136-21.815 18.466-41.428 40.207-53.325 64.713s-17.61 49.391-18.347 63.324zM304.637 391.785l-17.488-1.597c0.887-16.769 0-51.279 0-84.047 0-15.558 2.587-34.459 5.019-47.508 4.685-25.143 12.495-41.458 17.392-57.248 3.892-12.55 8.256-30.116 11.158-36.87 7.858-18.288 8.948-40.637 0.897-66.369-8.154-26.060-20.866-51.039-42.106-59.238l7.64-25.197c30.736 11.865 73.733 45.32 85.493 82.907 10.6 33.878 3.906 64.497-5.757 86.981-5.858 13.634-11.428 23.024-17.668 34.392-7.678 13.987-23.993 31.521-28.665 45.802-4.248 12.988-9.303 28.695-10.605 44.761-2.605 32.132-4.319 65.104-5.311 83.231zM235.254 469.297l32.98-29.267 1.969 10.697 18.862-5.459v-36.471l-1.221-25.85-35.952 31.903c0.463-6.572 0.68-13.508 0.223-21.207-0.724-12.19 0.731-24.346-5.931-32.918s-14.437-20.066-24.389-24.61c-19.904-9.088-43.506-23.995-73.901-49.258-57.553-47.833-56.268-60.902-66.639-102.966-3.871-55.878-7.038-55.096 5.653-93.844 7.669-23.416 26.602-46.246 70.624-67.18 40.566-19.291 102.053-35.822 131.533-35.822v-29.712c-31.378 0-73.891 2.924-120.63 12.404s-92.839 24.688-121.002 54.15c-30.485 31.892-59.626 89.691-42.191 180.054l0.074 0.297c7.766 36.041 31.345 90.17 123.528 130.25 38.13 16.578 58.816 27.279 74.37 34.381 7.777 3.551 12.256 8.151 14.697 11.29s4.042 6.988 4.531 15.228c1.101 18.541-1.595 32.644-4.419 41.968s-5.2 12.925-5.2 12.925l22.433 19.015zM279.99 414.237l10.697-15.18c-0.887-16.769 0-51.279 0-84.047 0-15.558 4.204-36.156 1.772-49.205-4.685-25.143-4.006-33.818-8.903-49.609-3.892-12.55-8.256-34.361-11.158-41.114-7.858-18.288-9.797-60.161-1.745-85.894 8.154-26.060 13.226-59.528 25.976-78.763l4.742-48.906c-28.188 38.181-56.634 82.055-68.394 119.642-10.6 33.878-9.848 93.36-0.185 115.844 5.858 13.634 11.428 27.269 17.668 38.636 7.678 13.987 12.048 27.92 15.519 43.401 2.99 13.334 8.248 35.049 9.55 51.115 2.605 32.131 3.469 65.953 4.462 84.079z" horiz-adv-x="576" />
</font></defs></svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
css/fonts/piskel.ttf Normal file

Binary file not shown.

BIN
css/fonts/piskel.woff Normal file

Binary file not shown.

View File

@ -172,12 +172,14 @@ body {
background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
}
.layers-canvas {
.layers-canvas,
.canvas.onion-skin-canvas {
opacity: 0.2;
}
.canvas.canvas-overlay,
.canvas.layers-canvas {
.canvas.layers-canvas,
.canvas.onion-skin-canvas {
position: absolute;
top: 0;
left: 0;
@ -193,60 +195,10 @@ body {
.canvas.layers-below-canvas {z-index: 7;}
.canvas.drawing-canvas {z-index: 8;}
.canvas.layers-above-canvas {z-index: 9;}
.canvas.canvas-overlay {z-index: 10;}
.canvas.onion-skin-canvas {z-index: 10;}
.canvas.canvas-overlay {z-index: 11;}
/**
* Animated preview styles.
*/
.preview-container {
border : 0px Solid black;
border-radius:5px 0px 0px 5px;
box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
font-size: 0;
}
.preview-container .canvas-container {
overflow : hidden;
}
.preview-container canvas {
border : 0px Solid transparent;
}
#animated-preview-container {
background: #333;
border-radius : 0 0 2px 2px;
overflow : hidden;
}
#animated-preview-canvas-container {
height :200px;
width : 200px;
}
.tiled-frame-container {
height: 100%;
width: 100%;
position: relative;
background-repeat : repeat;
}
.display-fps {
float: left;
color: #aaa;
font-size: 12px;
min-width: 55px;
vertical-align: bottom;
line-height: 24px;
}
.range-fps {
overflow: hidden;
width: 120px;
height : 24px;
margin : 0;
}
/**
* User messages
@ -315,6 +267,40 @@ body {
font-weight:bold;
font-family:Courier;
}
@font-face {
font-family: 'piskel';
src:url('fonts/piskel.eot?-3olv93');
src:url('fonts/piskel.eot?#iefix-3olv93') format('embedded-opentype'),
url('fonts/piskel.woff?-3olv93') format('woff'),
url('fonts/piskel.ttf?-3olv93') format('truetype'),
url('fonts/piskel.svg?-3olv93#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="piskel-icon-"], [class*=" piskel-icon-"] {
font-family: 'piskel';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.piskel-icon-eye:before {
content: "\e600";
}
.piskel-icon-onion:before {
content: "\e601";
}
.row {
display: block;
}
@ -514,6 +500,7 @@ body {
}
.settings-title {
color : gold;
margin-top: 20px;
margin-bottom: 10px;
text-transform: uppercase;
@ -1415,6 +1402,28 @@ body {
background-size: 22px;
background-repeat: no-repeat;
background-position: 97%;
position: relative;
}
.layers-toggle-preview {
position: absolute;
top : 0.9em;
right: 3.3em;
color: #999;
font-size: 0.8em;
cursor: pointer;
transition: 0.2s linear;
}
.layers-toggle-preview:hover {
color: white;
}
.layers-toggle-preview-enabled,
.layers-toggle-preview-enabled:hover {
color : gold;
}
.layers-list {
@ -1522,6 +1531,82 @@ body {
right: 1px;
border-left-color: transparent;
}
/**
* Animated preview styles.
*/
.preview-container {
border : 0px Solid black;
border-radius:5px 0px 0px 5px;
box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
font-size: 0;
}
.preview-container .canvas-container {
overflow : hidden;
}
.preview-container canvas {
border : 0px Solid transparent;
}
#animated-preview-container {
background: #333;
border-radius : 0 0 2px 2px;
overflow : hidden;
}
#animated-preview-canvas-container {
height :200px;
width : 200px;
}
.tiled-frame-container {
height: 100%;
width: 100%;
position: relative;
background-repeat : repeat;
}
.display-fps {
float: left;
color: #aaa;
font-size: 12px;
min-width: 55px;
vertical-align: bottom;
line-height: 26px;
}
.range-fps {
overflow: hidden;
width: 100px;
height : 26px;
margin : 0;
box-sizing: border-box;
padding:0;
}
.preview-toggle-onion-skin {
font-size: 1.6rem;
color: #aaa;
float: left;
line-height: 26px;
height: 100%;
padding-left: 5px;
padding-right: 5px;
border-right: 1px solid #222;
transition: 0.2s linear;
cursor:pointer;
}
.preview-toggle-onion-skin:hover {
color : white;
}
.preview-toggle-onion-skin-enabled,
.preview-toggle-onion-skin-enabled:hover {
color : gold;
}
/***
Spectrum Colorpicker v1.1.2
https://github.com/bgrins/spectrum

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

BIN
logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 414 B

View File

@ -1,5 +1,10 @@
<div class="toolbox-container layers-list-container">
<h3 class="toolbox-title layers-title">Layers</h3>
<h3 class="toolbox-title layers-title">Layers
<div title="Toggle layer preview (alt+L)"
rel="tooltip"
data-placement="top"
class="layers-toggle-preview piskel-icon-eye"></div>
</h3>
<div class="toolbox-button-container layers-button-container">
<button class="button toolbox-button" data-action="add" >Add</button>
<button class="button toolbox-button" data-action="delete" >Delete</button>

View File

@ -3,6 +3,10 @@
<div class="canvas-background"></div>
</div>
<div>
<div title="Toggle onion skin (alt+O)"
rel="tooltip"
data-placement="bottom"
class="piskel-icon-onion preview-toggle-onion-skin"></div>
<span id="display-fps" class="display-fps"></span>
<input id="preview-fps" class="range-fps" type="range" min="1" max="24"/>
</div>

View File

@ -29,9 +29,10 @@
<option value="4">Enabled - 4px wide</option>
</select>
</div>
<div class="settings-item">
<!-- <div class="settings-item">
<label for="tiled-preview">Display tiled preview :</label>
<input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
</div>
</div> -->
</div>

View File

@ -3,17 +3,19 @@
Export to Animated GIF
</div>
<div class="settings-item">
<label>Select resolution:</label>
<form action="" method="POST" name="gif-export-upload-form">
<form action="" method="POST" class="gif-export-form">
<label>Select resolution:</label>
<script type="text/template" id="gif-export-radio-template">
<label style="display:block"><input type="radio" name="gif-zoom-level" value="{{value}}"/>
{{label}}</label>
</script>
<div class="gif-export-radio-group"></div>
<input type="submit" class="button button-primary gif-upload-button" value="Upload" />
<span class="gif-export-progress-status"></span>
<div class="gif-export-progress-bar"></div>
<button type="button" class="button button-primary gif-download-button">Download GIF</button>
<button type="button" class="button button gif-upload-button">Export online</button>
</form>
<span class="gif-export-progress-status"></span>
<div class="gif-export-progress-bar"></div>
<div class="gif-export-preview"></div>
<div class="gif-upload-status"></div>
</div>

View File

@ -6,8 +6,8 @@
<span>Preview : </span>
<div class="png-export-preview"></div>
<div class="png-export-radio-group"></div>
<input type="button" class="button button-primary png-download-button" value="Download PNG" />
<input type="button" class="button png-upload-button" value="Upload PNG" />
<button type="button" class="button button-primary png-download-button">Download PNG</button>
<button type="button" class="button png-upload-button">Export online</button>
<!-- <input type="button" class="button png-download-button" value="Download" /> -->
<div class="png-upload-status"></div>
</div>

View File

@ -1,4 +1,9 @@
<div class="settings-section">
<div class="settings-title">
Restore previous session
</div>
<div class="settings-item previous-session">
</div>
<div class="settings-title">
Browse Local Piskels
</div>
@ -15,4 +20,12 @@
<td><a class="local-piskel-delete-link" data-action="delete" data-name="{{name}}" href="javascript:void(0);">x</a></td>
</tr>
</script>
<script type="text/template" id="previous-session-info-template">
<div>
Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
<div style="margin-top:10px;">
<button type="button" class="button button-primary restore-session-button">Restore</button>
</div>
</div>
</script>
</div>