mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Reduced tool size
Moved tool size buttons on the right, started lasso tool
This commit is contained in:
Nicola
parent
8ee0214fad
commit
a52fc647e3
@ -85,7 +85,7 @@
|
||||
|
||||
#canvas-view {
|
||||
bottom: 0px;
|
||||
left: 64px;
|
||||
left: 48px;
|
||||
right: 48px;
|
||||
top: 48px;
|
||||
cursor: default;
|
||||
@ -97,7 +97,7 @@
|
||||
box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 64px;
|
||||
left: 48px;
|
||||
right: 48px;
|
||||
top: 48px;
|
||||
display: block;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
|
||||
#tools-menu {
|
||||
left: 0;
|
||||
width: 64px;
|
||||
width: 48px;
|
||||
list-style-type: none;
|
||||
top: 48px;
|
||||
bottom: 0;
|
||||
@ -13,14 +13,10 @@
|
||||
z-index: 1120;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#tools-menu li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#tools-menu li button:first-child {
|
||||
text-align: center;
|
||||
border: none;
|
||||
@ -28,7 +24,8 @@
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
height: 64px;
|
||||
height: 48px;
|
||||
z-index:0;
|
||||
}
|
||||
|
||||
#tools-menu li button path {
|
||||
@ -48,23 +45,17 @@
|
||||
fill: $baseselectedicon;
|
||||
}
|
||||
|
||||
#tools-menu li.selected.expanded {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.tools-menu-sub-button {
|
||||
text-align: center;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
height: 22px;
|
||||
display: none;
|
||||
width: 22px !important;
|
||||
height:24px !important;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
|
||||
path {
|
||||
fill: $baseselectedicon !important;
|
||||
@ -77,37 +68,39 @@
|
||||
}
|
||||
}
|
||||
|
||||
#tools-menu li button#brush-bigger-button,
|
||||
#tools-menu li button#zoom-in-button,
|
||||
#tools-menu li button#eraser-bigger-button,
|
||||
#tools-menu li button#rectangle-bigger-button,
|
||||
#tools-menu li button#ellipse-bigger-button,
|
||||
#tools-menu li button#line-bigger-button {
|
||||
left: 0;
|
||||
#tools-menu .size-buttons {
|
||||
position:absolute;
|
||||
display: none;
|
||||
height:48px;
|
||||
left:8px;
|
||||
z-index:-1;
|
||||
background-color: $basecolor !important;
|
||||
}
|
||||
|
||||
#tools-menu li button#brush-smaller-button,
|
||||
#tools-menu li button#zoom-out-button,
|
||||
#tools-menu li button#eraser-smaller-button,
|
||||
#tools-menu li button#rectangle-smaller-button,
|
||||
#tools-menu li button#ellipse-smaller-button,
|
||||
#tools-menu li button#line-smaller-button {
|
||||
right: 0;
|
||||
#tools-menu .size-buttons button {
|
||||
text-align: center;
|
||||
border: none;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
height:24px;
|
||||
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 li.selected button#brush-smaller-button,
|
||||
#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 li.selected button#eraser-smaller-button,
|
||||
#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 button#ellipse-smaller-button,
|
||||
#tools-menu li.selected button#line-bigger-button,
|
||||
#tools-menu li.selected button#line-smaller-button {
|
||||
display: block;
|
||||
#tools-menu .size-buttons button:hover {
|
||||
background:$baseselected !important;
|
||||
}
|
||||
|
||||
#tools-menu .size-buttons button:active {
|
||||
background:$basehovericon !important;
|
||||
}
|
||||
|
||||
#tools-menu li.selected .size-buttons {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
29
js/tools/LassoSelectionTool.js
Normal file
29
js/tools/LassoSelectionTool.js
Normal 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) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,21 +1,27 @@
|
||||
<ul id="tools-menu">
|
||||
<li class="selected expanded">
|
||||
<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="32" height="32"}}</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>
|
||||
<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="24" height="24"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<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 class = "expanded">
|
||||
<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="32" height="32"}}</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>
|
||||
<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="24" height="24"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<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 class="expanded">
|
||||
<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32" id = "rectangle-empty-button-svg"}}
|
||||
{{svg "fullrect.svg" width="32" height="32" 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>
|
||||
<button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
|
||||
<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="24" height="24" id = "rectangle-empty-button-svg"}}
|
||||
{{svg "fullrect.svg" width="24" height="24" id = "rectangle-full-button-svg" display = "none"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<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>
|
||||
|
||||
<!-- 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 icons to use. Current ones are quickly prepared drafts and display with incorrect color. -->
|
||||
<button title="Ellipse Tool (S)" id="ellipse-button">
|
||||
{{svg "ellipse.svg" width="32" height="32" id = "ellipse-empty-button-svg"}}
|
||||
{{svg "filledellipse.svg" width="32" height="32" id = "ellipse-full-button-svg" display = "none"}}
|
||||
{{svg "ellipse.svg" width="24" height="24" id = "ellipse-empty-button-svg"}}
|
||||
{{svg "filledellipse.svg" width="24" height="24" id = "ellipse-full-button-svg" display = "none"}}
|
||||
</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 class="size-buttons">
|
||||
<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 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>
|
||||
<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="24" height="24"}}</button>
|
||||
<ul class="size-buttons">
|
||||
<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><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>
|
||||
Loading…
Reference in New Issue
Block a user