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

Reduced tool size

Browse Source 
Moved tool size buttons on the right, started lasso tool
This commit is contained in:
Nicola 2021-12-27 19:11:59 +01:00
parent 8ee0214fad
commit a52fc647e3
4 changed files with 98 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/_canvas.scss
View File

@ -85,7 +85,7 @@
#canvas-view { #canvas-view {
bottom: 0px; bottom: 0px;
left: 64px; left: 48px;
right: 48px; right: 48px;
top: 48px; top: 48px;
cursor: default; cursor: default;
@ -97,7 +97,7 @@
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4); box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
left: 64px; left: 48px;
right: 48px; right: 48px;
top: 48px; top: 48px;
display: block; display: block;

79
css/_tools-menu.scss
View File

@ -1,7 +1,7 @@
#tools-menu { #tools-menu {
left: 0; left: 0;
width: 64px; width: 48px;
list-style-type: none; list-style-type: none;
top: 48px; top: 48px;
bottom: 0; bottom: 0;
@ -13,14 +13,10 @@
z-index: 1120; z-index: 1120;
} }
#tools-menu li { #tools-menu li {
position: relative; position: relative;
} }
#tools-menu li button:first-child { #tools-menu li button:first-child {
text-align: center; text-align: center;
border: none; border: none;
@ -28,7 +24,8 @@
width: 100%; width: 100%;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
height: 64px; height: 48px;
z-index:0;
} }
#tools-menu li button path { #tools-menu li button path {
@ -48,23 +45,17 @@
fill: $baseselectedicon; fill: $baseselectedicon;
} }
#tools-menu li.selected.expanded {
padding-bottom: 10px;
}
.tools-menu-sub-button { .tools-menu-sub-button {
text-align: center; text-align: center;
border: none; border: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
width: 50%; width: 22px !important;
height: 22px; height:24px !important;
display: none; display: inline-block;
line-height: 0; line-height: 0;
overflow: hidden; overflow: hidden;
position: absolute; position: relative;
bottom: 0;
path { path {
fill: $baseselectedicon !important; fill: $baseselectedicon !important;
@ -77,37 +68,39 @@
} }
} }
#tools-menu li button#brush-bigger-button, #tools-menu .size-buttons {
#tools-menu li button#zoom-in-button, position:absolute;
#tools-menu li button#eraser-bigger-button, display: none;
#tools-menu li button#rectangle-bigger-button, height:48px;
#tools-menu li button#ellipse-bigger-button, left:8px;
#tools-menu li button#line-bigger-button { z-index:-1;
left: 0; background-color: $basecolor !important;
} }
#tools-menu li button#brush-smaller-button, #tools-menu .size-buttons button {
#tools-menu li button#zoom-out-button, text-align: center;
#tools-menu li button#eraser-smaller-button, border: none;
#tools-menu li button#rectangle-smaller-button, padding: 0;
#tools-menu li button#ellipse-smaller-button, position: relative;
#tools-menu li button#line-smaller-button { height:24px;
right: 0; background-color: $baseselected !important;
cursor: pointer;
display:inline-block;
line-height: 0;
overflow: hidden;
width:22px;
} }
#tools-menu li.selected button#brush-bigger-button, #tools-menu .size-buttons button:hover {
#tools-menu li.selected button#brush-smaller-button, background:$baseselected !important;
#tools-menu li.selected button#zoom-in-button, }
#tools-menu li.selected button#zoom-out-button,
#tools-menu li.selected button#eraser-bigger-button, #tools-menu .size-buttons button:active {
#tools-menu li.selected button#eraser-smaller-button, background:$basehovericon !important;
#tools-menu li.selected button#rectangle-bigger-button, }
#tools-menu li.selected button#rectangle-smaller-button,
#tools-menu li.selected button#ellipse-bigger-button, #tools-menu li.selected .size-buttons {
#tools-menu li.selected button#ellipse-smaller-button, display:inline-block;
#tools-menu li.selected button#line-bigger-button,
#tools-menu li.selected button#line-smaller-button {
display: block;
} }

29
js/tools/LassoSelectionTool.js Normal file
View File

@ -0,0 +1,29 @@
class LassoSelectionTool extends SelectionTool {
constructor (name, options, switchFunc, moveTool) {
}
onStart(mousePos) {
super.onStart(mousePos);
}
onDrag(mousePos) {
super.onDrag(mousePos);
}
onEnd(mousePos) {
super.onEnd(mousePos);
}
onSelect(mousePos) {
super.onSelect(mousePos);
}
onDeselect(mousePos) {
super.onDeselect(mousePos);
}
drawSelection(mousePos) {
}
}

52
views/tools-menu.hbs
View File

@ -1,21 +1,27 @@
<ul id="tools-menu"> <ul id="tools-menu">
<li class="selected expanded"> <li class="selected expanded">
<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="32" height="32"}}</button> <button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button> <ul class="size-buttons">
<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button> <button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</ul>
</li> </li>
<li class = "expanded"> <li class = "expanded">
<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="32" height="32"}}</button> <button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button> <ul class="size-buttons">
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button> <button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</ul>
</li> </li>
<li class="expanded"> <li class="expanded">
<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32" id = "rectangle-empty-button-svg"}} <button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id = "rectangle-empty-button-svg"}}
{{svg "fullrect.svg" width="32" height="32" id = "rectangle-full-button-svg" display = "none"}}</button> {{svg "fullrect.svg" width="24" height="24" id = "rectangle-full-button-svg" display = "none"}}</button>
<button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button> <ul class="size-buttons">
<button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button> <button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</ul>
</li> </li>
<!-- TODO: [ELLIPSE] Once ellipse is ready for release make it visible by default --> <!-- TODO: [ELLIPSE] Once ellipse is ready for release make it visible by default -->
@ -23,24 +29,28 @@
<!-- TODO: [ELLIPSE] Decide on a shortcut to use. "S" was chosen without any in-team consultation. --> <!-- TODO: [ELLIPSE] Decide on a shortcut to use. "S" was chosen without any in-team consultation. -->
<!-- TODO: [ELLIPSE] Decide on icons to use. Current ones are quickly prepared drafts and display with incorrect color. --> <!-- TODO: [ELLIPSE] Decide on icons to use. Current ones are quickly prepared drafts and display with incorrect color. -->
<button title="Ellipse Tool (S)" id="ellipse-button"> <button title="Ellipse Tool (S)" id="ellipse-button">
{{svg "ellipse.svg" width="32" height="32" id = "ellipse-empty-button-svg"}} {{svg "ellipse.svg" width="24" height="24" id = "ellipse-empty-button-svg"}}
{{svg "filledellipse.svg" width="32" height="32" id = "ellipse-full-button-svg" display = "none"}} {{svg "filledellipse.svg" width="24" height="24" id = "ellipse-full-button-svg" display = "none"}}
</button> </button>
<button title="Increase Ellipse Size" id="ellipse-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button> <ul class="size-buttons">
<button title="Decrease Ellipse Size" id="ellipse-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button> <button title="Increase Ellipse Size" id="ellipse-bigger-button" class="tools-menu-sub-button">{{svg "plus.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>
</ul>
</li> </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="24" height="24"}}</button>
<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button> <ul class="size-buttons">
<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.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>
</ul>
</li> </li>
<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="32" height="32"}}</button></li> <li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="24" height="24"}}</button></li>
<li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="32" height="32"}}</button></li> <li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="24" height="24"}}</button></li>
<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li> <li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="24" height="24"}}</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 = "24" height = "24"}}</button><li>
</ul> </ul>