mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/liamortiz/pixel-editor

This commit is contained in:
Leamsi Escribano 2021-07-04 13:56:07 -04:00
parent 4d4878c4fa 17da5efb78
commit 0d545fba25
3 changed files with 67 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/pixel-editor.scss
View File

@ -40,6 +40,33 @@ body {
/* Disable Android and iOS callouts*/
}
#help {
max-height: 500px;
overflow-y:scroll;
li {
margin-top:5px;
}
// Fancy scrollbar
&::-webkit-scrollbar {
background: #232125;
width: 0.5em;
}
&::-webkit-scrollbar-track {
margin-top: -0.125em;
width: 0.5em;
}
&::-webkit-scrollbar-thumb {
background: #332f35;
border-radius: 0.25em;
border: solid 0.125em #232125; //same color as scrollbar back to fake padding
}
&::-webkit-scrollbar-corner {
background: #232125;
}
}
#layer-properties-menu {
visibility: hidden;
margin: 0;

10
js/_splashPage.js
View File

@ -5,12 +5,12 @@ function SplashCoverImage(path, author, link) {
}
let images = [
new SplashCoverImage('Rayquaza', 'Unsettled', 'https://twitter.com/_unsettled_'),
new SplashCoverImage('Mountains', 'Skeddles', 'https://twitter.com/skeddles'),
new SplashCoverImage('Sweetie', 'GrafxKid', 'https://grafxkid.tumblr.com/'),
new SplashCoverImage('Glacier', 'WindfallApples', 'https://twitter.com/windfallapples'),
new SplashCoverImage('Rayquaza', 'Unsettled', 'https://lospec.com/unsettled'),
new SplashCoverImage('Mountains', 'Skeddles', 'https://lospec.com/skeddles'),
new SplashCoverImage('Sweetie', 'GrafxKid', 'https://twitter.com/GrafxKid'),
new SplashCoverImage('Glacier', 'WindfallApples', 'https://lospec.com/windfallapples'),
new SplashCoverImage('Polyphorge1', 'Polyphorge', 'https://lospec.com/poly-phorge'),
new SplashCoverImage('Fusionnist', 'Fusionnist', 'https://twitter.com/fusionnist')
new SplashCoverImage('Fusionnist', 'Fusionnist', 'https://lospec.com/fusionnist')
];

51
views/pixel-editor.hbs
View File

@ -138,18 +138,18 @@
<button title="Decrease Ellipse Size" id="ellipse-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li>
<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="32" height="32"}}</button></li>
<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="32" height="32"}}</button></li>
<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li>
<li class="expanded">
<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</button>
<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li>
<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="32" height="32"}}</button></li>
<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="32" height="32"}}</button></li>
<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li>
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>
</ul>
@ -532,19 +532,38 @@
</ul>
<h2>Hotkeys</h2>
<ul>
<li>Pencil: <span class="keyboard-key">B</span> or <span class="keyboard-key">1</span></li>
<li>Fill: <span class="keyboard-key">F</span> or <span class="keyboard-key">2</span></li>
<li>Eyedropper: <span class="keyboard-key">E</span> or <span class="keyboard-key">3</span></li>
<li>Pan: <span class="keyboard-key">P</span> or <span class="keyboard-key">M</span> or <span class="keyboard-key">4</span></li>
<li>Zoom: <span class="keyboard-key">Z</span> or <span class="keyboard-key">5</span></li>
<li>Undo: Ctrl + <span class="keyboard-key">Z</span></li>
<li>Redo: Ctrl + <span class="keyboard-key">Y</span> or Ctrl + Alt + <span class="keyboard-key">Z</span></li>
<li><strong>Pencil:</strong> <span class="keyboard-key">B</span> or <span class="keyboard-key">1</span></li>
<li><strong>Eraser:</strong> <span class="keyboard-key">R</span></li>
<li><strong>Rectangle:</strong> <span class="keyboard-key">U</span></li>
<li><strong>Line:</strong> <span class="keyboard-key">L</span></li>
<li><strong>Fill:</strong> <span class="keyboard-key">F</span> or <span class="keyboard-key">2</span></li>
<li><strong>Eyedropper:</strong> <span class="keyboard-key">E</span> or <span class="keyboard-key">3</span></li>
<li><strong>Pan:</strong> <span class="keyboard-key">P</span> or <span class="keyboard-key">M</span> or <span class="keyboard-key">4</span></li>
<li><strong>Zoom:</strong> <span class="keyboard-key">Z</span> or <span class="keyboard-key">5</span></li>
<li><strong>Undo:</strong> Ctrl + <span class="keyboard-key">Z</span></li>
<li><strong>Redo:</strong> Ctrl + <span class="keyboard-key">Y</span> or Ctrl + Alt + <span class="keyboard-key">Z</span></li>
<li><strong>Rectangular selection:</strong> <span class="keyboard-key">M</span></li>
</ul>
<h2>Mouse Shortcuts</h2>
<ul>
<li>Alt + Click - Eyedropper</li>
<li>Space + Click - Pan</li>
<li>Alt + Scroll Wheel - Zoom</li>
<li><strong>Eyedropper: </strong>Alt + Click</li>
<li><strong>Pan: </strong>Space + Click</li>
<li><strong>Zoom: </strong>Alt + Scroll Wheel</li>
</ul>
<h2>Layers</h2>
<ul>
<li>{{svg "visible.svg" width="15" height="15" class = "default-icon"}}: show / hide layer</li>
<li>{{svg "lockedpadlock.svg" width="15" height="15" class = "default-icon"}}: lock / unlock layer, when a layer is locked it's not possible to draw on it</li>
<li>Right click on a layer to open the <strong>menu</strong>:
<ul>
<li><strong>Rename:</strong> change the name of the layer</li>
<li><strong>Duplicate:</strong> duplicate the layer</li>
<li><strong>Delete:</strong> delete the layer (doesn't work if there's only one layer)</li>
<li><strong>Merge below:</strong> merges the selected the layer with the one below it</li>
<li><strong>Flatten visible:</strong> merges all the visible layers</li>
<li></strong>Flatten all:</strong> merges all the layers</li>
</ul>
</li>
</ul>
</div>
<div id="about">