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

Started layers menu

Browse Source 
Horrible colors included for free
This commit is contained in:
unsettledgames 2020-06-16 23:23:12 +02:00
parent 65b207e1f7
commit 4b9d51200f
2 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/pixel-editor.scss
View File

@ -22,6 +22,43 @@ body {
/* Disable Android and iOS callouts*/ /* Disable Android and iOS callouts*/
} }
#layers-menu {
width:200px;
top: 48px;
bottom: 0;
right:0;
padding: 0;
margin: 0;
background-color: color(base);
box-sizing: border-box;
position: fixed;
z-index: 1120;
list-style-type: none;
}
.layers-menu-entry {
background-color:blue;
display:inline-block;
height:45px;
width:100%;
display:flex;
align-items:center;
canvas {
display:inline-block;
height:100%;
width:50px;
background-color:red;
left:4px;
}
p {
display:inline-block;
padding-left:10px;
text-align:center;
}
}
//don't let svg handle click events, just send to parents //don't let svg handle click events, just send to parents
svg { svg {
pointer-events: none; pointer-events: none;
@ -229,7 +266,7 @@ svg {
} }
#colors-menu { #colors-menu {
right: 0; right: 200px;
width: 48px; width: 48px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;

11
views/pixel-editor.hbs
View File

@ -114,6 +114,7 @@
<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>
<!-- PALETTE -->
<ul id="colors-menu"> <ul id="colors-menu">
{{! {{!
@ -123,9 +124,19 @@
<li class="noshrink"><button title="Add Current Color To Palette" id="add-color-button">{{svg "./plus.svg" width="30" height="30"}}</button></li> <li class="noshrink"><button title="Add Current Color To Palette" id="add-color-button">{{svg "./plus.svg" width="30" height="30"}}</button></li>
</ul> </ul>
<!-- LAYER MENU -->
<ul id = "layers-menu">
<li class = "layers-menu-entry">
<canvas></canvas>
<p>Lorem ipsum</p>
</li>
</ul>
<div id="eyedropper-preview"></div> <div id="eyedropper-preview"></div>
<div id="brush-preview"></div> <div id="brush-preview"></div>
<!-- CANVASES -->
<div id="canvas-view"> <div id="canvas-view">
<canvas id="vfx-canvas" class = "drawingCanvas"></canvas> <canvas id="vfx-canvas" class = "drawingCanvas"></canvas>
<canvas id = "tmp-canvas" class = "drawingCanvas"></canvas> <canvas id = "tmp-canvas" class = "drawingCanvas"></canvas>