mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Enhancement : Shortcuts for onion kin + layer prev
Added 2 new icons : - Animated Preview Panel : toggle onion skin - Layers Toolbox : toggle layer preview Added an icon font generated with icomoon. SVGs for both icons have been made under Inkscape and are kept under misc/svg. All reference SVGs have been moved to misc/svg. Added 2 keyboard shortcuts for toggling onion skin / layer preview : - alt L : toggle layer preview - alt O : toggle onion skin
This commit is contained in:
jdescottes
parent
24186d5aec
commit
a77168986a
68
misc/icons/SVG/eye.svg
Normal file
68
misc/icons/SVG/eye.svg
Normal file
@ -0,0 +1,68 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="300"
|
||||
height="140.00085"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="eye.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.98994949"
|
||||
inkscape:cx="-6.0052729"
|
||||
inkscape:cy="93.159467"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1148"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-223.21875,-469.24915)">
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none"
|
||||
d="m 373.21875,469.25 c -63.15236,-0.28299 -150,70 -150,70 0,0 78.75568,70 150,70 62.82091,0 150,-70 150,-70 0,0 -87.47199,-69.71981 -150,-70 z m -1.5,22.3125 c 27.44855,0 49.6875,22.23895 49.6875,49.6875 0,27.44855 -22.23895,49.6875 -49.6875,49.6875 C 344.2702,590.9375 322,568.69855 322,541.25 c 0,-27.44855 22.2702,-49.6875 49.71875,-49.6875 z m 0.0312,18.34375 c -17.85254,0 -32.34375,14.49121 -32.34375,32.34375 0,17.85254 14.49121,32.3125 32.34375,32.3125 17.85254,0 32.3125,-14.45996 32.3125,-32.3125 0,-17.85254 -14.45996,-32.34375 -32.3125,-32.34375 z"
|
||||
id="path2987"
|
||||
inkscape:export-filename="C:\Development\git\piskel\misc\icons\eye.png"
|
||||
inkscape:export-xdpi="28.799999"
|
||||
inkscape:export-ydpi="28.799999"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
99
misc/icons/SVG/onion.svg
Normal file
99
misc/icons/SVG/onion.svg
Normal file
@ -0,0 +1,99 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="484.83377"
|
||||
height="430.80322"
|
||||
id="svg3775"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="New document 3">
|
||||
<defs
|
||||
id="defs3777" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.04375"
|
||||
inkscape:cx="-429.81362"
|
||||
inkscape:cy="-202.97901"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1148"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<metadata
|
||||
id="metadata3780">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-108.38875,-334.08796)">
|
||||
<g
|
||||
id="g4409">
|
||||
<g
|
||||
id="g4402" />
|
||||
<g
|
||||
transform="translate(0,0.82903262)"
|
||||
id="g4395">
|
||||
<path
|
||||
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
|
||||
d="m 395.27679,333.25893 -27.75,24.625 -1.65625,-9 -15.87054,4.59375 0,30.6875 1.02679,21.75 16.5625,-14.6875 13.6875,-12.15625 c -0.38933,5.52995 -0.57204,11.36571 -0.1875,17.84375 0.60884,10.25666 3.42535,19.47486 9.03125,26.6875 5.6059,7.21264 13.15778,11.83264 21.53125,15.65625 16.74693,7.64722 37.6168,20.19024 63.19196,41.4465 48.42535,40.24771 54.41585,60.33492 63.14228,95.72811 8.30827,46.0064 -4.89609,79.1393 -23.94924,107.24539 -13.61329,20.08154 -30.46397,37.90172 -67.50554,45.41482 -37.04157,7.5131 -71.72672,9.9375 -96.53125,9.9375 l 0,25 c 26.40206,0 62.17269,-2.46078 101.5,-10.4375 39.32731,-7.97672 78.11592,-20.77325 101.8125,-45.5625 25.65093,-26.83371 50.16969,-75.46693 35.5,-151.5 l -0.0312,-0.125 -0.0312,-0.125 c -6.53497,-30.32511 -26.37349,-75.86993 -103.9375,-109.59375 -32.08342,-13.94946 -49.48883,-22.95257 -62.57589,-28.92857 -6.54353,-2.988 -10.31288,-6.85833 -12.36607,-9.5 -2.05319,-2.64167 -3.40095,-5.87935 -3.8125,-12.8125 -0.92607,-15.60085 1.34241,-27.46751 3.71875,-35.3125 2.37634,-7.84499 4.375,-10.875 4.375,-10.875 l -18.875,-16 z"
|
||||
id="path3783-2"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccccccsssscssccsscccsssssccc" />
|
||||
<path
|
||||
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
|
||||
d="m 368.02679,382.44643 c 0,0 -18.02679,-4.71234 -18.02679,1.3125 0,33.38646 -0.45698,39.28362 10.99554,62.875 11.45252,23.59138 26.22845,47.86253 48.53571,68.45982 42.18558,38.95183 38.76978,44.87254 45.77232,64.91071 2.57793,7.37689 3.66466,24.51253 1.875,37.96875 -1.78965,13.45623 -6.8081,31.21802 -13.40625,41.3125 -10.36811,15.86211 -18.71831,32.07642 -38.55357,43.09375 C 384.4983,713.88847 366.62548,716.375 350,716.375 l 0,25 c 20.82486,0 44.52967,-5.01706 69.5625,-15.125 25.03283,-10.10794 49.12742,-25.27054 63.71875,-47.59375 9.77369,-14.95272 20.06105,-37.72017 22.33202,-55.91561 2.27097,-18.19544 6.78209,-33.89274 -5.08281,-58.40387 -18.26325,-37.72918 -42.54947,-49.06002 -72.19845,-74.15863 -18.35479,-15.5378 -34.85805,-33.83125 -44.86772,-54.45046 -10.00967,-20.61921 -14.81706,-41.55822 -15.4375,-53.28125 z"
|
||||
id="path3783-9-4-2"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="csssszssccssssssc" />
|
||||
<path
|
||||
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
|
||||
d="M 364.71429,398.50893 350,399.85268 c 0.74677,14.10988 0,43.14662 0,70.71875 0,13.09078 2.17726,28.99404 4.22321,39.97321 3.9423,21.15552 10.51352,34.8833 14.63393,48.16965 3.27485,10.5598 6.94665,25.34012 9.3884,31.02232 6.61244,15.3878 7.52886,34.1921 0.75446,55.84375 -6.86056,21.92704 -17.55684,42.94479 -35.42857,49.84375 L 350,716.625 c 25.86119,-9.9831 62.03992,-38.1333 71.93512,-69.75936 8.9188,-28.50537 3.28613,-54.26844 -4.84375,-73.1875 -4.92941,-11.47123 -9.61575,-19.37277 -14.86607,-28.9375 -6.46007,-11.76857 -20.1885,-26.52209 -24.11895,-38.53817 -3.57466,-10.92835 -7.82736,-24.14439 -8.92331,-37.66229 -2.1919,-27.03581 -3.63369,-54.77948 -4.46875,-70.03125 z"
|
||||
id="path3783-9-4-4-8-8"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccsssssccsssssc" />
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
|
||||
d="m 306.33447,334.11887 27.75,24.625 1.65625,-9 15.87054,4.59375 0,30.6875 -1.02679,21.75 -16.5625,-14.6875 -13.6875,-12.15625 c 0.38933,5.52995 0.57204,11.36571 0.1875,17.84375 -0.60884,10.25666 0.61526,20.48501 -4.99064,27.69765 -5.6059,7.21264 -12.14763,16.88341 -20.5211,20.70702 -16.74693,7.64722 -36.60664,20.19024 -62.1818,41.4465 -48.42535,40.24771 -47.34479,51.24354 -56.07122,86.63673 -3.25751,47.01655 -5.92183,46.3581 4.75635,78.96112 6.45302,19.70261 22.38275,38.91187 59.42432,56.52649 34.13302,16.23151 85.86885,30.14056 110.67338,30.14056 l 0,25 c -26.40206,0 -62.17269,-2.46078 -101.5,-10.4375 -39.32731,-7.97672 -78.11592,-20.77325 -101.8125,-45.5625 -25.65093,-26.83371 -50.169693,-75.46693 -35.5,-151.5 l 0.0312,-0.125 0.0312,-0.125 c 6.53497,-30.32511 26.37349,-75.86993 103.9375,-109.59375 32.08342,-13.94946 49.48883,-22.95257 62.57589,-28.92857 6.54353,-2.988 10.31288,-6.85833 12.36607,-9.5 2.05319,-2.64167 3.40095,-5.87935 3.8125,-12.8125 0.92607,-15.60085 -1.34241,-27.46751 -3.71875,-35.3125 -2.37634,-7.84499 -4.375,-10.875 -4.375,-10.875 l 18.875,-16 z"
|
||||
id="path3783-2-4"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccccccsssscssccsscccsssssccc" />
|
||||
<path
|
||||
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:25;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
|
||||
d="m 343.97613,380.44701 9.00001,12.77232 c -0.74677,14.10988 0,43.14662 0,70.71875 0,13.09078 3.53703,30.42261 1.49108,41.40178 -3.9423,21.15552 -3.37067,28.45473 -7.49108,41.74108 -3.27485,10.5598 -6.94665,28.91155 -9.3884,34.59375 -6.61244,15.3878 -8.24315,50.62067 -1.46875,72.27232 6.86056,21.92704 11.12828,50.08764 21.85715,66.27232 l 3.98985,41.15013 C 338.24766,729.2435 314.3133,692.32754 304.4181,660.70148 c -8.9188,-28.50537 -8.28613,-78.55416 -0.15625,-97.47322 4.92941,-11.47123 9.61575,-22.9442 14.86607,-32.50893 6.46007,-11.76857 10.13774,-23.49163 13.05804,-36.51786 2.51528,-11.21964 6.93976,-29.49102 8.03571,-43.00892 2.1919,-27.03581 2.9194,-55.49377 3.75446,-70.74554 z"
|
||||
id="path3783-9-4-4-8-8-7"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccsssssccsssssc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
33
src/css/font-icon.css
Normal file
33
src/css/font-icon.css
Normal file
@ -0,0 +1,33 @@
|
||||
@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";
|
||||
}
|
||||
|
||||
BIN
src/css/fonts/piskel.eot
Normal file
BIN
src/css/fonts/piskel.eot
Normal file
Binary file not shown.
12
src/css/fonts/piskel.svg
Normal file
12
src/css/fonts/piskel.svg
Normal 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=" " d="" horiz-adv-x="256" />
|
||||
<glyph unicode="" 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="" 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
src/css/fonts/piskel.ttf
Normal file
BIN
src/css/fonts/piskel.ttf
Normal file
Binary file not shown.
BIN
src/css/fonts/piskel.woff
Normal file
BIN
src/css/fonts/piskel.woff
Normal file
Binary file not shown.
@ -162,58 +162,7 @@ body {
|
||||
.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
|
||||
|
||||
74
src/css/toolbox-animated-preview.css
Normal file
74
src/css/toolbox-animated-preview.css
Normal file
@ -0,0 +1,74 @@
|
||||
/**
|
||||
* 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: 100px;
|
||||
height : 24px;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
.preview-toggle-onion-skin {
|
||||
font-size: 1.6rem;
|
||||
color: #aaa;
|
||||
float: left;
|
||||
line-height: 24px;
|
||||
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;
|
||||
}
|
||||
@ -10,6 +10,28 @@
|
||||
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 {
|
||||
|
||||
@ -16,16 +16,43 @@
|
||||
var frame = this.piskelController.getCurrentFrame();
|
||||
|
||||
this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
|
||||
this.updateZoom_();
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.init = function () {
|
||||
// the oninput event won't work on IE10 unfortunately, but at least will provide a
|
||||
// consistent behavior across all other browsers that support the input type range
|
||||
// see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
|
||||
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
|
||||
document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
|
||||
|
||||
this.toggleOnionSkinEl = document.querySelector(".preview-toggle-onion-skin");
|
||||
this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this));
|
||||
|
||||
pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
|
||||
|
||||
$.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
|
||||
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
|
||||
|
||||
pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
|
||||
this.updateZoom_();
|
||||
this.updateOnionSkinPreview_();
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
|
||||
this.updateZoom_();
|
||||
this.updateContainerDimensions_();
|
||||
ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
|
||||
if (name == pskl.UserSettings.ONION_SKIN) {
|
||||
this.updateOnionSkinPreview_();
|
||||
} else {
|
||||
this.updateZoom_();
|
||||
this.updateContainerDimensions_();
|
||||
}
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.updateOnionSkinPreview_ = function () {
|
||||
var enabledClassname = 'preview-toggle-onion-skin-enabled';
|
||||
if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
|
||||
this.toggleOnionSkinEl.classList.add(enabledClassname);
|
||||
} else {
|
||||
this.toggleOnionSkinEl.classList.remove(enabledClassname);
|
||||
}
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
|
||||
@ -49,14 +76,6 @@
|
||||
};
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.init = function () {
|
||||
// the oninput event won't work on IE10 unfortunately, but at least will provide a
|
||||
// consistent behavior across all other browsers that support the input type range
|
||||
// see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
|
||||
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
|
||||
document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
|
||||
this.setFPS(parseInt($("#preview-fps")[0].value, 10));
|
||||
};
|
||||
|
||||
@ -7,16 +7,21 @@
|
||||
|
||||
ns.LayersListController.prototype.init = function () {
|
||||
this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
|
||||
this.rootEl = document.querySelectorAll('.layers-list-container')[0];
|
||||
this.layersListEl = document.querySelectorAll('.layers-list')[0];
|
||||
this.rootEl = document.querySelector('.layers-list-container');
|
||||
this.layersListEl = document.querySelector('.layers-list');
|
||||
this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');
|
||||
|
||||
this.rootEl.addEventListener('click', this.onClick_.bind(this));
|
||||
this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this));
|
||||
|
||||
$.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
|
||||
|
||||
pskl.app.shortcutService.addShortcut('alt+L', this.toggleLayerPreview_.bind(this));
|
||||
|
||||
this.renderLayerList_();
|
||||
this.updateToggleLayerPreview_();
|
||||
|
||||
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
|
||||
};
|
||||
|
||||
ns.LayersListController.prototype.renderLayerList_ = function () {
|
||||
@ -25,6 +30,21 @@
|
||||
layers.forEach(this.addLayerItem.bind(this));
|
||||
};
|
||||
|
||||
ns.LayersListController.prototype.updateToggleLayerPreview_ = function () {
|
||||
var enabledClassname = 'layers-toggle-preview-enabled';
|
||||
if (pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)) {
|
||||
this.toggleLayerPreviewEl.classList.add(enabledClassname);
|
||||
} else {
|
||||
this.toggleLayerPreviewEl.classList.remove(enabledClassname);
|
||||
}
|
||||
};
|
||||
|
||||
ns.LayersListController.prototype.onUserSettingsChange_ = function (evt, name, value) {
|
||||
if (name == pskl.UserSettings.LAYER_PREVIEW) {
|
||||
this.updateToggleLayerPreview_();
|
||||
}
|
||||
};
|
||||
|
||||
ns.LayersListController.prototype.addLayerItem = function (layer, index) {
|
||||
var isSelected = this.piskelController.getCurrentLayer() === layer;
|
||||
var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
|
||||
|
||||
@ -30,8 +30,12 @@
|
||||
get : function (key) {
|
||||
this.checkKeyValidity_(key);
|
||||
if (!(key in this.cache_)) {
|
||||
this.cache_[key] =
|
||||
this.readFromLocalStorage_(key) || this.readFromDefaults_(key);
|
||||
var storedValue = this.readFromLocalStorage_(key);
|
||||
if (typeof storedValue !== 'undefined' && storedValue !== null) {
|
||||
this.cache_[key] = storedValue;
|
||||
} else {
|
||||
this.cache_[key] = this.readFromDefaults_(key);
|
||||
}
|
||||
}
|
||||
return this.cache_[key];
|
||||
},
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
(typeof exports != "undefined" ? exports : pskl_exports).styles = [
|
||||
"css/reset.css",
|
||||
"css/style.css",
|
||||
"css/font-icon.css",
|
||||
"css/forms.css",
|
||||
"css/settings.css",
|
||||
"css/tools.css",
|
||||
@ -13,6 +14,7 @@
|
||||
"css/toolbox.css",
|
||||
"css/toolbox-layers-list.css",
|
||||
"css/toolbox-palettes-list.css",
|
||||
"css/toolbox-animated-preview.css",
|
||||
"css/spectrum/spectrum.css",
|
||||
"css/spectrum/spectrum-overrides.css",
|
||||
"css/bootstrap/bootstrap.css",
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user