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

Images to sprite, fixed tooltip position, fixed spinner position if fullscreen is not supported

Browse Source
This commit is contained in:
Paul Annekov
2015-07-23 22:30:14 +03:00
parent fb1af6afe3
commit 739876de99
7 changed files with 110 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
css/app.css
View File

@@ -57,45 +57,17 @@ body {
.spinner {
opacity: .5;
float: right;
}
.spinner img {
position: absolute;
height: 40px;
width: 40px;
right: 50px;
top: 10px;
border-radius: 4px;
margin-right: 10px;
background: black;
}
div.full-screen {
position: absolute;
width: 40px;
right: 10px;
top: 10px;
}
button.full-screen {
width: 100%;
position: relative;
}
button.full-screen, button.full-screen.active {
width: 40px;
height: 40px;
background: transparent url(img/fullscreen_request.svg) no-repeat center;
}
button.full-screen.active {
background-image: url(img/fullscreen_exit.svg);
}
button.full-screen:hover, button.full-screen:focus {
background-color: rgba(0, 0, 0, .8);
}
div, textarea, label, input, form, span, ul, li, ol, a, button, h1, h2, h3, h4, h5, p, img {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@@ -580,6 +552,9 @@ button.save.has-count .count::before {
.icon.back.blue { background-position: -420px -20px;}
.icon.forward.blue { background-position: -440px -20px;}
.icon.full-screen { background-position: -620px -20px;}
.active .icon.full-screen { background-position: -640px -20px;}
button[disabled] .icon.alert { background-position: 0 -40px;}
button[disabled] .icon.add-point { background-position: -20px -40px;}
button[disabled] .icon.add-line { background-position: -40px -40px;}
@@ -1765,6 +1740,27 @@ img.wiki-image {
background: rgba(0,0,0,.8);
}
/* Fullscreen button */
div.full-screen {
float: right;
width: 40px;
margin-right: 10px;
}
div.full-screen .tooltip {
min-width: 160px;
}
div.full-screen > button, div.full-screen > button.active {
width: 40px;
height: 40px;
background: transparent;
}
div.full-screen > button:hover {
background-color: rgba(0, 0, 0, .8);
}
/* Map Controls */
.map-controls {

64
dist/img/fullscreen_exit.svg vendored
View File

@@ -1,64 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="16"
version="1.1"
viewBox="0 0 16 16"
width="16"
xml:space="preserve"
id="svg2"
inkscape:version="0.48.4 r9939"
sodipodi:docname="fullscreen_exit.svg"><metadata
id="metadata20"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs18" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1149"
id="namedview16"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="7.375"
inkscape:cx="-14.983051"
inkscape:cy="8"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" /><g
id="Layer_1"
transform="scale(0.5,0.5)"
style="fill:#ffffff" /><g
id="fullscreen_x5F_exit_x5F_alt"
transform="scale(0.5,0.5)"
style="fill:#ffffff"><g
id="g6"
style="fill:#ffffff"><polygon
points="28,20 20,20 20,28 22.586,25.414 29.172,32 32,29.172 25.414,22.586 "
style="fill:#ffffff"
id="polygon8" /><polygon
points="9.375,6.543 2.828,0 0,2.828 6.547,9.371 4,12 11.961,11.957 12,4 "
style="fill:#ffffff"
id="polygon10" /><polygon
points="12,20 4,20 6.586,22.586 0,29.172 2.828,32 9.414,25.414 12,28 "
style="fill:#ffffff"
id="polygon12" /><polygon
points="22.598,6.566 20,3.971 20,12 28.031,12 25.438,9.404 32,2.838 29.164,0 "
style="fill:#ffffff"
id="polygon14" /></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

64
dist/img/fullscreen_request.svg vendored
View File

@@ -1,64 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="16"
version="1.1"
viewBox="0 0 16 16"
width="16"
xml:space="preserve"
id="svg2"
inkscape:version="0.48.4 r9939"
sodipodi:docname="fullscreen_request.svg"><metadata
id="metadata20"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs18" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1149"
id="namedview16"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="7.375"
inkscape:cx="-14.983051"
inkscape:cy="8"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" /><g
id="Layer_1"
transform="scale(0.5,0.5)"
style="fill:#ffffff" /><g
id="fullscreen_x5F_alt"
transform="scale(0.5,0.5)"
style="fill:#ffffff"><g
id="g6"
style="fill:#ffffff"><polygon
points="24,32 32,32 32,24 29.414,26.586 22.828,20 20,22.828 26.586,29.414 "
style="fill:#ffffff"
id="polygon8" /><polygon
points="8,0 0,0 0,8 2.586,5.414 9.172,12 12,9.172 5.414,2.586 "
style="fill:#ffffff"
id="polygon10" /><polygon
points="32,8 32,0 24,0 26.586,2.586 20,9.172 22.828,12 29.414,5.414 "
style="fill:#ffffff"
id="polygon12" /><polygon
points="0,32 8,32 5.414,29.414 12,22.828 9.172,20 2.586,26.586 0,24 "
style="fill:#ffffff"
id="polygon14" /></g></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

80
dist/img/sprite.svg vendored
View File

@@ -13,7 +13,7 @@
width="800"
height="560"
id="svg12393"
inkscape:version="0.48.5 r10040"
inkscape:version="0.48.4 r9939"
sodipodi:docname="sprite.svg">
<sodipodi:namedview
pagecolor="#ffffff"
@@ -28,11 +28,11 @@
inkscape:window-height="856"
id="namedview392"
showgrid="true"
inkscape:zoom="1"
inkscape:cx="475.13394"
inkscape:cy="495.7147"
inkscape:window-x="276"
inkscape:window-y="71"
inkscape:zoom="16"
inkscape:cx="641.185"
inkscape:cy="531.10386"
inkscape:window-x="285"
inkscape:window-y="196"
inkscape:window-maximized="0"
inkscape:current-layer="svg12393"
showguides="true"
@@ -2106,4 +2106,72 @@
style="color:#000000;fill:#8cd05f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccsscsscssccscccccccccccccccccccccccccccssssssssssssssscccccccccsccsssssssssssssss" />
<g
id="g3387"
transform="translate(642.0625,21.9785)"
style="fill:#ffffff">
<g
style="fill:#ffffff"
transform="scale(0.5,0.5)"
id="Layer_1" />
<g
style="fill:#ffffff"
transform="scale(0.5,0.5)"
id="fullscreen_x5F_exit_x5F_alt">
<g
style="fill:#ffffff"
id="g6">
<polygon
id="polygon8"
style="fill:#ffffff"
points="25.414,22.586 28,20 20,20 20,28 22.586,25.414 29.172,32 32,29.172 " />
<polygon
id="polygon10"
style="fill:#ffffff"
points="12,4 9.375,6.543 2.828,0 0,2.828 6.547,9.371 4,12 11.961,11.957 " />
<polygon
id="polygon12"
style="fill:#ffffff"
points="12,28 12,20 4,20 6.586,22.586 0,29.172 2.828,32 9.414,25.414 " />
<polygon
id="polygon14"
style="fill:#ffffff"
points="29.164,0 22.598,6.566 20,3.971 20,12 28.031,12 25.438,9.404 32,2.838 " />
</g>
</g>
</g>
<g
id="g3407"
transform="translate(622.082,22.043)"
style="fill:#ffffff">
<g
style="fill:#ffffff"
transform="scale(0.5,0.5)"
id="Layer_1-1" />
<g
style="fill:#ffffff"
transform="scale(0.5,0.5)"
id="fullscreen_x5F_alt">
<g
style="fill:#ffffff"
id="g6-8">
<polygon
id="polygon8-1"
style="fill:#ffffff"
points="20,22.828 26.586,29.414 24,32 32,32 32,24 29.414,26.586 22.828,20 " />
<polygon
id="polygon10-6"
style="fill:#ffffff"
points="12,9.172 5.414,2.586 8,0 0,0 0,8 2.586,5.414 9.172,12 " />
<polygon
id="polygon12-0"
style="fill:#ffffff"
points="22.828,12 29.414,5.414 32,8 32,0 24,0 26.586,2.586 20,9.172 " />
<polygon
id="polygon14-3"
style="fill:#ffffff"
points="2.586,26.586 0,24 0,32 8,32 5.414,29.414 12,22.828 9.172,20 " />
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 179 KiB

After

Width:  |  Height:  |  Size: 181 KiB

4
dist/locales/en.json vendored
View File

@@ -430,9 +430,7 @@
"help": "Another user changed some of the same map features you changed.\nClick on each item below for more details about the conflict, and choose whether to keep\nyour changes or the other user's changes.\n"
}
},
"full_screen": {
"tooltip": "Toggle Full Screen"
},
"full_screen": "Toggle Fullscreen",
"merge_remote_changes": {
"conflict": {
"deleted": "This object has been deleted by {user}.",

8
js/id/ui.js
View File

@@ -60,14 +60,14 @@ iD.ui = function(context) {
.attr('class', 'button-wrap col1')
.call(iD.ui.Save(context));
bar.append('div')
.attr('class', 'spinner')
.call(iD.ui.Spinner(context));
bar.append('div')
.attr('class', 'full-screen')
.call(iD.ui.FullScreen(context));
bar.append('div')
.attr('class', 'spinner')
.call(iD.ui.Spinner(context));
var controls = bar.append('div')
.attr('class', 'map-controls');

10
js/id/ui/full_screen.js
View File

@@ -26,8 +26,8 @@ iD.ui.FullScreen = function(context) {
}
function isFullScreen() {
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement
|| document.msFullscreenElement;
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ||
document.msFullscreenElement;
}
function is_supported() {
@@ -53,10 +53,12 @@ iD.ui.FullScreen = function(context) {
.placement('left');
button = selection.append('button')
.attr('class', 'full-screen')
.attr('title', t('full_screen.tooltip'))
.attr('title', t('full_screen'))
.attr('tabindex', -1)
.on('click', fullScreen)
.call(tooltip);
button.append('span')
.attr('class', 'icon full-screen');
};
};