mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
UX : Primary/Secondary colors usability
- Added swap colors icon - Created SVG icon, source is in resources (Inkscape)
This commit is contained in:
jdescottes
parent
b51620634e
commit
cac1fa8ed5
@ -25,13 +25,18 @@
|
||||
|
||||
/* Remove the padding on the input container */
|
||||
.sp-replacer {
|
||||
padding: 3px;
|
||||
padding: 4px;
|
||||
height: 100%;
|
||||
border-width: 0;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.sp-replacer:hover {
|
||||
background-color: #888;
|
||||
}
|
||||
|
||||
/* Hide the triangle */
|
||||
.sp-dd {
|
||||
display: none;
|
||||
|
||||
@ -136,6 +136,22 @@
|
||||
cursor: url(../img/icons/dropper.png) 0 15, pointer;
|
||||
}
|
||||
|
||||
.swap-colors-icon {
|
||||
background-image: url(../img/tools/swap-arrow-square-small-grey.png);
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 6px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background-size: 18px;
|
||||
opacity : 0.3;
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
.swap-colors-icon:hover {
|
||||
opacity : 1;
|
||||
}
|
||||
|
||||
.tool-color-picker {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
BIN
img/tools/swap-arrow-square-small-grey.png
Normal file
BIN
img/tools/swap-arrow-square-small-grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 973 B |
@ -43,6 +43,8 @@
|
||||
secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
|
||||
this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
|
||||
|
||||
var swapColorsIcon = $('.swap-colors-icon');
|
||||
swapColorsIcon.click(this.swapColors.bind(this));
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
BIN
resources/swap-arrow-small.png
Normal file
BIN
resources/swap-arrow-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 B |
BIN
resources/swap-arrow-square-small-grey.png
Normal file
BIN
resources/swap-arrow-square-small-grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 973 B |
BIN
resources/swap-arrow-square-small.png
Normal file
BIN
resources/swap-arrow-square-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 816 B |
80
resources/swap-arrow-square.svg
Normal file
80
resources/swap-arrow-square.svg
Normal file
@ -0,0 +1,80 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="744.09448819"
|
||||
height="1052.3622047"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="swap-arrow-square.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.98994949"
|
||||
inkscape:cx="394.04689"
|
||||
inkscape:cy="437.49995"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="g3903"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1148"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<g
|
||||
id="g3863"
|
||||
transform="matrix(1.0584227,0.8783336,-0.88927511,1.0454,500.51129,-281.01924)" />
|
||||
<g
|
||||
id="g3903"
|
||||
transform="matrix(1.0752324,0,0,1.1512202,-10.080657,-112.64735)">
|
||||
<path
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3015"
|
||||
d="m 134.94957,482.97409 77.33565,-84.65176 90.19445,84.65176 c -55.58473,1.43563 -111.94607,1.12702 -167.5301,0 z"
|
||||
style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.91215169px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.02133131px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 454.32064,637.60642 c 0,0 -209.21865,11.0537 -216.48659,-180.84972 l -55.19052,0.25672 c 0.0919,230.63552 273.06531,236.67753 273.06531,236.67753 z"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccc"
|
||||
id="path2995-0" />
|
||||
<path
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3015-5"
|
||||
d="m 420.44925,576.40133 84.53491,77.33565 -84.53491,90.19445 c -1.43564,-55.58473 -1.12702,-111.94607 0,-167.5301 z"
|
||||
style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.91215169px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
80
resources/swap-arrow.svg
Normal file
80
resources/swap-arrow.svg
Normal file
@ -0,0 +1,80 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="744.09448819"
|
||||
height="1052.3622047"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="New document 1">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.4"
|
||||
inkscape:cx="205.60891"
|
||||
inkscape:cy="475.62016"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1148"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<g
|
||||
id="g3866"
|
||||
transform="matrix(0.76563359,0.64327693,-0.64327693,0.76563359,437.69481,-47.0057)">
|
||||
<path
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3015"
|
||||
d="m 130,570.36218 0,-60 63.85714,0 c -20.96635,20.14932 -41.98769,40.84088 -63.85714,60 z"
|
||||
style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<path
|
||||
sodipodi:nodetypes="cccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3015-7"
|
||||
d="m 469.84542,570.36218 0,-60 -63.85714,0 c 20.96635,20.14932 41.98769,40.84088 63.85714,60 z"
|
||||
style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<g
|
||||
id="g3863">
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.73463827px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 449.48174,512.15368 c 0,0 -145.41018,128.54808 -299.94302,0 L 150,552.36218 c 154.5622,109.35713 300,0 300,0 z"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccc"
|
||||
id="path2995-0" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@ -3,12 +3,28 @@
|
||||
<div class="vertical-centerer">
|
||||
<ul id="tools-container" class="tools-wrapper"></ul>
|
||||
<div class="palette-wrapper">
|
||||
<div class="tool-icon tool-color-picker">
|
||||
<div
|
||||
class="tool-icon tool-color-picker"
|
||||
title="Primary - left mouse button"
|
||||
rel="tooltip"
|
||||
data-placement="right"
|
||||
>
|
||||
<input id="color-picker" class="color" type="text"/>
|
||||
</div>
|
||||
<div class="tool-icon tool-color-picker">
|
||||
<div
|
||||
class="tool-icon tool-color-picker"
|
||||
title="Secondary - right mouse button"
|
||||
rel="tooltip"
|
||||
data-placement="right"
|
||||
>
|
||||
<input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
|
||||
</div>
|
||||
<div
|
||||
class="swap-colors-icon"
|
||||
title="Swap colors (X)"
|
||||
rel="tooltip"
|
||||
data-placement="right"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user