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

Updated help section

Browse Source
This commit is contained in:
unsettledgames 2021-07-01 13:10:08 +02:00
parent d35e768ce8
commit d8531a7e01
2 changed files with 62 additions and 16 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*/ /* 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 { #layer-properties-menu {
visibility: hidden; visibility: hidden;
margin: 0; margin: 0;

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> <button title="Decrease Ellipse Size" id="ellipse-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li> </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"> <li class="expanded">
<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</button> <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="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> <button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li> </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> <li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>
</ul> </ul>
@ -532,19 +532,38 @@
</ul> </ul>
<h2>Hotkeys</h2> <h2>Hotkeys</h2>
<ul> <ul>
<li>Pencil: <span class="keyboard-key">B</span> or <span class="keyboard-key">1</span></li> <li><strong>Pencil:</strong> <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><strong>Eraser:</strong> <span class="keyboard-key">R</span></li>
<li>Eyedropper: <span class="keyboard-key">E</span> or <span class="keyboard-key">3</span></li> <li><strong>Rectangle:</strong> <span class="keyboard-key">U</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><strong>Line:</strong> <span class="keyboard-key">L</span></li>
<li>Zoom: <span class="keyboard-key">Z</span> or <span class="keyboard-key">5</span></li> <li><strong>Fill:</strong> <span class="keyboard-key">F</span> or <span class="keyboard-key">2</span></li>
<li>Undo: Ctrl + <span class="keyboard-key">Z</span></li> <li><strong>Eyedropper:</strong> <span class="keyboard-key">E</span> or <span class="keyboard-key">3</span></li>
<li>Redo: Ctrl + <span class="keyboard-key">Y</span> or Ctrl + Alt + <span class="keyboard-key">Z</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> </ul>
<h2>Mouse Shortcuts</h2> <h2>Mouse Shortcuts</h2>
<ul> <ul>
<li>Alt + Click - Eyedropper</li> <li><strong>Eyedropper: </strong>Alt + Click</li>
<li>Space + Click - Pan</li> <li><strong>Pan: </strong>Space + Click</li>
<li>Alt + Scroll Wheel - Zoom</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> </ul>
</div> </div>
<div id="about"> <div id="about">