CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-24 00:54:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

moving to SVG for UI graphics.

Browse Source
This commit is contained in:
Saman Bemel-Benrud
2013-04-08 17:29:09 -04:00
parent 39eec605b8
commit 53ab4d0419
5 changed files with 2341 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+9 -21
View File
@@ -440,7 +440,7 @@ button.save.has-count .count::before {
vertical-align:top;
width:20px;
height:20px;
background:transparent url(../img/sprite.png) no-repeat 0 0;
background:transparent url(../img/sprite.svg) no-repeat 0 0;
text-indent:-9999px;
overflow:hidden;
}
@@ -841,16 +841,16 @@ a:hover .icon.out-link { background-position: -500px -14px;}
margin: auto;
position: absolute;
left: 0; right: 0; top: 19px;
background:transparent url(../img/sprite.png) no-repeat -240px -80px;
background:transparent url(../img/sprite.svg) no-repeat -240px -80px;
}
.preset-icon-fill.tag-shop,
.preset-icon-fill.tag-building {
background:transparent url(../img/sprite.png) no-repeat 0 -80px;
background:transparent url(../img/sprite.svg) no-repeat 0 -80px;
}
.preset-icon-fill.tag-natural-water {
background:transparent url(../img/sprite.png) no-repeat -60px -80px;
background:transparent url(../img/sprite.svg) no-repeat -60px -80px;
}
.preset-icon-fill.tag-landuse,
@@ -858,11 +858,11 @@ a:hover .icon.out-link { background-position: -500px -14px;}
.preset-icon-fill.tag-natural-tree,
.preset-icon-fill.tag-natural-grassland,
.preset-icon-fill.tag-leisure-park {
background:transparent url(../img/sprite.png) no-repeat -120px -80px;
background:transparent url(../img/sprite.svg) no-repeat -120px -80px;
}
.preset-icon-fill.tag-amenity-parking {
background:transparent url(../img/sprite.png) no-repeat -180px -80px;
background:transparent url(../img/sprite.svg) no-repeat -180px -80px;
}
/* preset form basics */
@@ -1913,7 +1913,7 @@ img.wiki-image {
width: 100px;
margin: auto;
margin-bottom: 10px;
background:transparent url(../img/sprite.png) no-repeat 0 -220px;
background:transparent url(../img/sprite.svg) no-repeat 0 -220px;
}
.modal-actions :first-child {
@@ -2279,17 +2279,6 @@ img.wiki-image {
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.intro-points-add .tooltip-inner::before,
.intro-areas-add .tooltip-inner::before,
.intro-lines-add .tooltip-inner::before,
.walkthrough a:before,
.preset-icon-fill.icon-area,
.modal-actions button:before,
.map-control .icon,
.button-wrap .icon {
background-image: url(../img/sprite2x.png);
background-size: 600px 560px;
}
a,
button,
.checkselect label:hover,
@@ -2301,7 +2290,6 @@ img.wiki-image {
}
}
/* Scrollbars
----------------------------------------------------- */
@@ -2405,7 +2393,7 @@ img.wiki-image {
content: "";
height: 80px;
width: 200px;
background:transparent url(../img/sprite.png) no-repeat 0 -320px;
background:transparent url(../img/sprite.svg) no-repeat 0 -320px;
}
.intro-areas-add .tooltip-inner::before {
@@ -2425,6 +2413,6 @@ img.wiki-image {
.huge-modal-button .illustration {
height: 100px;
width: 100px;
background: rgba(0, 0, 0, 0) url(../img/sprite.png) no-repeat -301px -220px;
background: rgba(0, 0, 0, 0) url(../img/sprite.svg) no-repeat -301px -220px;
margin: auto;
}
img/sprite.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

img/sprite.svg
+2326
View File
File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

img/sprite2x.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

svg/sprite.svg
+6 -130
View File
@@ -38,12 +38,12 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="16"
inkscape:cx="505.57911"
inkscape:cy="546.02445"
inkscape:zoom="1"
inkscape:cx="590.57911"
inkscape:cy="225.02445"
inkscape:document-units="px"
inkscape:current-layer="layer12"
showgrid="true"
showgrid="false"
inkscape:window-width="1483"
inkscape:window-height="804"
inkscape:window-x="293"
@@ -53,7 +53,7 @@
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
showguides="true"
showguides="false"
inkscape:guide-bbox="true"
inkscape:snap-bbox="true"
inkscape:snap-nodes="true"
@@ -228,7 +228,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
@@ -815,130 +815,6 @@
id="path33359"
d="m 354.5,22.999997 c -1.5,0 -2.5,2 -2.5,3 0,0.666667 0,1.333333 0,2 0,1 1,2.153847 1,2.153847 l 0,0.846153 -1.69231,0.384617 c -1.45419,0.330499 -2.02608,1.236079 -2.15384,2.76923 L 349,35.999998 l 12,0 -0.15385,-1.846154 c -0.12776,-1.533151 -0.69965,-2.438731 -2.15384,-2.76923 L 357,30.999997 l 0,-0.846153 c 0,0 1,-1.153847 1,-2.153847 0,-0.666667 0,-1.333333 0,-2 0,-1 -1,-3 -2.5,-3 z"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m -245,88 c -5.5228,0 -10,4.47716 -10,10 0,5.52286 10,14 10,14 0,0 10,-8.47714 10,-14 0,-5.52284 -4.4772,-10 -10,-10 z m 0.3124,6 c 2.2092,0 4,1.79086 4,4 0,2.20914 -1.7908,4 -4,4 -2.209,0 -4,-1.79086 -4,-4 0,-2.20914 1.791,-4 4,-4 z"
id="path8139-4-6"
inkscape:connector-curvature="0" />
<g
style="fill:#c1c1c1;fill-opacity:1;display:inline"
id="g5401-6"
transform="matrix(2,0,0,2,-816,-123.72437)">
<path
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m 188,54 -1,1 0,1.59375 L 180.59375,63 179,63 l -1,1 0,2 1,1 2,0 1,-1 0,-1.59375 L 188.40625,58 190,58 l 1,-1 0,-2 -1,-1 -2,0 z m 1,1 c 0.55228,0 1,0.44772 1,1 0,0.55229 -0.44772,1 -1,1 -0.25152,0 -0.48052,-0.0967 -0.65625,-0.25 -0.0344,-0.03002 -0.0637,-0.05934 -0.0937,-0.09375 C 188.0967,56.480519 188,56.251521 188,56 c 0,-0.55228 0.44772,-1 1,-1 z m -9,9 c 0.25152,0 0.48052,0.0967 0.65625,0.25 l 0.0937,0.09375 C 180.9033,64.519481 181,64.748484 181,65 c 0,0.55229 -0.44772,1 -1,1 -0.55228,0 -1,-0.44771 -1,-1 0,-0.55228 0.44772,-1 1,-1 z"
transform="translate(81,51.362183)"
id="path5387-6"
inkscape:connector-curvature="0" />
</g>
<rect
style="opacity:0.2;color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect5406-1"
width="12"
height="11.999998"
x="-211"
y="94.000008" />
<g
style="display:inline"
transform="matrix(2,0,0,2,-1959,225.27564)"
id="g5327-2-5">
<path
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m 278,54 -1,1 0,2 1,1 0,4 -1,1 0,2 1,1 2,0 1,-1 4,0 1,1 2,0 1,-1 0,-2 -1,-1 0,-4 1,-1 0,-2 -1,-1 -2,0 -1,1 -4,0 -1,-1 -2,0 z m 1,1 c 0.55228,0 1,0.447715 1,1 0,0.552285 -0.44772,1 -1,1 -0.55228,0 -1,-0.447715 -1,-1 0,-0.552285 0.44772,-1 1,-1 z m 8,0 c 0.55228,0 1,0.447715 1,1 0,0.552285 -0.44772,1 -1,1 -0.55228,0 -1,-0.447715 -1,-1 0,-0.552285 0.44772,-1 1,-1 z m -6,2 4,0 1,1 0,4 -1,1 -4,0 -1,-1 0,-4 1,-1 z m -2,6 c 0.55228,0 1,0.447715 1,1 0,0.552285 -0.44772,1 -1,1 -0.55228,0 -1,-0.447715 -1,-1 0,-0.552285 0.44772,-1 1,-1 z m 8,0 c 0.55228,0 1,0.447715 1,1 0,0.552285 -0.44772,1 -1,1 -0.55228,0 -1,-0.447715 -1,-1 0,-0.552285 0.44772,-1 1,-1 z"
transform="translate(594,-122.63782)"
id="path5288-4-8"
inkscape:connector-curvature="0" />
</g>
<path
id="path46639"
d="m -122,87.999997 c -4.97056,0 -9,4.02944 -9,9 0,1.45311 0.35716,2.816163 0.96875,4.031253 L -137,108 l 0,2 c 0,1 1,2 2,2 l 2,0 6.96875,-6.96875 C -124.81616,105.64284 -123.45311,106 -122,106 c 4.97056,0 9,-4.02944 9,-9.000003 0,-4.97056 -4.02944,-9 -9,-9 z m 0,4 c 2.76142,0 5,2.23858 5,5 0,2.761423 -2.23858,5.000003 -5,5.000003 -2.76142,0 -5,-2.23858 -5,-5.000003 0,-2.76142 2.23858,-5 5,-5 z"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path4439"
d="m -169,92 -4,4 -7,0 0,8 7,0 4,4 8,0 4,-4 7,0 0,-8 -7,0 -4,-4 -8,0 z m 4,4 c 2.20912,0 4,1.79086 4,4 0,2.20914 -1.79088,4 -4,4 -2.20912,0 -4,-1.79086 -4,-4 0,-2.20914 1.79088,-4 4,-4 z"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
sodipodi:type="arc"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="path4448"
sodipodi:cx="140"
sodipodi:cy="100"
sodipodi:rx="4"
sodipodi:ry="4"
d="m 144,100 c 0,2.20914 -1.79086,4 -4,4 -2.20914,0 -4,-1.79086 -4,-4 0,-2.209139 1.79086,-4 4,-4 2.20914,0 4,1.790861 4,4 z"
transform="translate(-305,-3.0625001e-6)" />
<path
inkscape:connector-curvature="0"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m -95,88 -2,2 0,4 2,2 4,0 2,-2 0,-4 -2,-2 -4,0 z m 2,2 c 1.10456,0 2,0.89543 2,2 0,1.10457 -0.89544,2 -2,2 -1.10456,0 -2,-0.89543 -2,-2 0,-1.10457 0.89544,-2 2,-2 z"
id="path16163" />
<path
inkscape:connector-curvature="0"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m -79,104 -2,2 0,4 2,2 4,0 2,-2 0,-4 -2,-2 -4,0 z m 2,2 c 1.10456,0 2,0.89543 2,2 0,1.10457 -0.89544,2 -2,2 -1.10456,0 -2,-0.89543 -2,-2 0,-1.10457 0.89544,-2 2,-2 z"
id="path16191" />
<path
sodipodi:type="arc"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="path16208"
sodipodi:cx="215"
sodipodi:cy="95"
sodipodi:rx="1"
sodipodi:ry="1"
d="m 216,95 c 0,0.552285 -0.44772,1 -1,1 -0.55228,0 -1,-0.447715 -1,-1 0,-0.552285 0.44772,-1 1,-1 0.55228,0 1,0.447715 1,1 z"
transform="translate(-303,1.9999969)" />
<path
transform="translate(-297,7.9999969)"
d="m 216,95 c 0,0.552285 -0.44772,1 -1,1 -0.55228,0 -1,-0.447715 -1,-1 0,-0.552285 0.44772,-1 1,-1 0.55228,0 1,0.447715 1,1 z"
sodipodi:ry="1"
sodipodi:rx="1"
sodipodi:cy="95"
sodipodi:cx="215"
id="path16210"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
sodipodi:type="arc" />
<path
id="path16212"
d="m -75,88 2,2 0,4 -2,2 -4,0 -2,-2 0,-4 2,-2 4,0 z m -2,2 c -1.10456,0 -2,0.89543 -2,2 0,1.10457 0.89544,2 2,2 1.10456,0 2,-0.89543 2,-2 0,-1.10457 -0.89544,-2 -2,-2 z"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
inkscape:connector-curvature="0" />
<path
id="path16214"
d="m -91,104 2,2 0,4 -2,2 -4,0 -2,-2 0,-4 2,-2 4,0 z m -2,2 c -1.10456,0 -2,0.89543 -2,2 0,1.10457 0.89544,2 2,2 1.10456,0 2,-0.89543 2,-2 0,-1.10457 -0.89544,-2 -2,-2 z"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
inkscape:connector-curvature="0" />
<path
transform="matrix(-1,0,0,1,133,1.9999969)"
d="m 216,95 c 0,0.552285 -0.44772,1 -1,1 -0.55228,0 -1,-0.447715 -1,-1 0,-0.552285 0.44772,-1 1,-1 0.55228,0 1,0.447715 1,1 z"
sodipodi:ry="1"
sodipodi:rx="1"
sodipodi:cy="95"
sodipodi:cx="215"
id="path16216"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
sodipodi:type="arc" />
<path
sodipodi:type="arc"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="path16218"
sodipodi:cx="215"
sodipodi:cy="95"
sodipodi:rx="1"
sodipodi:ry="1"
d="m 216,95 c 0,0.552285 -0.44772,1 -1,1 -0.55228,0 -1,-0.447715 -1,-1 0,-0.552285 0.44772,-1 1,-1 0.55228,0 1,0.447715 1,1 z"
transform="matrix(-1,0,0,1,127,7.9999969)" />
<path
transform="matrix(-1,0,0,1,130,4.9999969)"
d="m 216,95 c 0,0.552285 -0.44772,1 -1,1 -0.55228,0 -1,-0.447715 -1,-1 0,-0.552285 0.44772,-1 1,-1 0.55228,0 1,0.447715 1,1 z"
sodipodi:ry="1"
sodipodi:rx="1"
sodipodi:cy="95"
sodipodi:cx="215"
id="path16220"
style="color:#000000;fill:#c1c1c1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79999375;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
sodipodi:type="arc" />
<path
inkscape:connector-curvature="0"
style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 185 KiB

After

Width:  |  Height:  |  Size: 176 KiB