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

Currently debugging the add layer function

Browse Source 
At the moment the new canvas is correclty added and it's possible to draw on it after selecting the corresponding layer. There's a bug that doesn't let the user select a layer after the first time.
This commit is contained in:
unsettledgames
2020-06-18 16:04:45 +02:00
parent 51d86cee77
commit 6cf6f86a91
8 changed files with 193 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
css/pixel-editor.scss
View File

@ -34,9 +34,23 @@ body {
position: fixed;
z-index: 1120;
list-style-type: none;
overflow-y:scroll;
button {
top:2px;
// TODO: make the scroll bar a bit fancier
#add-layer-button {
path {
fill:color(menu, foreground);
}
svg {
position:relative;
margin-right:10px;
}
position:relative;
justify-content: center;
display:flex;
align-items:center;
margin-top:2px;
font-size: 1.2em;
color: color(menu, foreground);
height: 100%;
@ -50,13 +64,23 @@ body {
transition: color 0.2s, background-color 0.2s;
}
button:hover {
#add-layer-button:hover {
color: color(base, foreground, bold);
background-color: color(base, foreground, default);
}
}
.selected-layer {
ul.layer-buttons li{
visibility:visible;
}
color: color(base, foreground, bold);
background-color: color(base, foreground, default);
}
.layers-menu-entry {
cursor:pointer;
margin-top:2px;
font-size: 1em;
color: color(base, foreground, text);
@ -67,6 +91,43 @@ body {
display:flex;
align-items:center;
ul.layer-buttons {
top:0;
left:0;
margin:0;
padding:0;
box-sizing:border-box;
position:relative;
height:100%;
list-style:none;
path {
fill: color(base, foreground);
}
li:hover {
background: color(base, background, hover);
path {
fill: color(base, foreground, hover);
}
}
li {
visibility:hidden;
height:50%;
}
}
.lock-layer-button, .hide-layer-button {
color: color(menu, foreground);
background: none;
border: none;
cursor: pointer;
background-color: color(menu);
transition: color 0.2s, background-color 0.2s;
height:100%;
position:relative;
}
canvas {
display:inline-block;
height:100%;
@ -76,6 +137,7 @@ body {
}
p {
right:0;
display:inline-block;
padding-left:10px;
height:18px;
@ -83,18 +145,18 @@ body {
position:relative;
}
transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
-moz-transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
-webkit-transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
transition: color 0.1s, background-color 0.1s;
-moz-transition: color 0.1s, background-color 0.1s;
-webkit-transition: color 0.1s, background-color 0.1s;
}
.layers-menu-entry:hover, .selected-layer {
ul.layer-buttons li{
visibility:visible;
}
color: color(base, foreground, bold);
background-color: color(base, foreground, default);
-webkit-box-shadow:inset 0px 0px 0px 2px color(base, foreground, text);
-moz-box-shadow:inset 0px 0px 0px 2px color(base, foreground, text);
box-shadow:inset 0px 0px 0px 2px color(base, foreground, text);
}
//don't let svg handle click events, just send to parents