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

cleanup mapillary UI

Browse Source
This commit is contained in:
samanpwbb
2014-09-16 13:49:13 -04:00
parent 88bb6967d9
commit e721e93a31
11 changed files with 155 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+10 -6
View File
@@ -721,7 +721,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
position: absolute;
right: 0;
bottom: 30px;
padding: 8px;
padding: 5px;
background-color: #fff;
}
#mapillaryImage > div {
@@ -737,11 +737,11 @@ a:hover .icon.out-link { background-position: -500px -14px;}
}
#mapillaryImage .link {
background-color: black;
background-color: rgba(0,0,0,.5);
position: absolute;
bottom: 0;
padding: 2px 4px;
right: 0;
padding: 5px 10px;
}
#mapillaryImage img {
@@ -754,12 +754,16 @@ a:hover .icon.out-link { background-position: -500px -14px;}
visibility: hidden;
}
#mapillaryImage .close {
cursor: pointer;
#mapillaryImage.temp button {
display: none;
}
#mapillaryImage button {
border-radius: 0;
padding: 5px;
position: absolute;
right: 0;
top: 0;
background-color: #f2f2f2;
}
.feature-list-pane .inspector-body {
css/map.css
+10 -8
View File
@@ -1149,21 +1149,23 @@ g.image.point {
g.image.point path,
g.image.point circle {
stroke-width: 3;
stroke-width: 2;
stroke: #ffc600;
fill: #ffc600;
}
g.image.point circle {
fill-opacity: 0.3;
stroke-width: 4;
}
g.image.point.selected circle,
g.image.point.selected path,
g.image.point:hover circle,
g.image.point:hover path {
stroke: #ff9900;
fill: #ff9900;
stroke-width: 2;
stroke: #ff9900;
}
g.image.point.selected circle,
g.image.point.selected path {
fill: #ff5800;
stroke-width: 4;
stroke: #ff5800;
}
/* Modes */
data/core.yaml
+2 -2
View File
@@ -297,8 +297,8 @@ en:
browse: "Browse for a .gpx file"
mapillary:
tooltip: "Mapillary street photos"
title: "Mapillary"
view_on_mapillary: "View this image on Mapillary."
title: "Photo overlay"
view_on_mapillary: "View this image on Mapillary"
no_image_found: |
No image found on <a href="http://mapillary.com/" target="_blank">Mapillary</a>. Go and take some!
help:
dist/img/cursor-select-mapillary.png
Vendored
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 751 B

After

Width:  |  Height:  |  Size: 568 B

dist/img/cursor-select-mapillary2x.png
Vendored
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

dist/locales/en.json
Vendored
+2 -2
View File
@@ -360,8 +360,8 @@
},
"mapillary": {
"tooltip": "Mapillary street photos",
"title": "Mapillary",
"view_on_mapillary": "View this image on Mapillary.",
"title": "Photo overlay",
"view_on_mapillary": "View this image on Mapillary",
"no_image_found": "No image found on <a href=\"http://mapillary.com/\" target=\"_blank\">Mapillary</a>. Go and take some!\n"
},
"help": {
js/id/modes/select_image.js
+11 -2
View File
@@ -19,7 +19,10 @@ iD.modes.SelectImage = function (context) {
context.surface().selectAll('.image.point')
.classed('selected', function(d) {
return d === datum;
});
})
context.container()
.select('#mapillaryImage')
.classed('temp', false);
imageView.show(currentImage);
}
}
@@ -51,6 +54,11 @@ iD.modes.SelectImage = function (context) {
var datum = d3.event.target.__data__;
if (isImage(datum)) {
imageView.show(datum);
if (currentImage !== datum) {
context.container()
.select('#mapillaryImage')
.classed('temp', true);
}
}
})
.on('mouseout.image', function () {
@@ -73,7 +81,8 @@ iD.modes.SelectImage = function (context) {
if (!currentImage) {
context.container()
.select('#mapillaryImage')
.classed('hidden', true);
.classed('hidden', true)
.classed('temp', false);
}
context.surface().select('defs').selectAll('marker.arrow')
js/id/svg/sequences.js
+2 -2
View File
@@ -47,7 +47,7 @@ iD.svg.Sequences = function (projection, context) {
image.append('circle')
.attr('dx', '0')
.attr('dy', '0')
.attr('r', '10');
.attr('r', '8');
// Selecting the following implicitly
// sets the data (point entity) on the element
@@ -93,7 +93,7 @@ iD.svg.Sequences = function (projection, context) {
selection
.attr('class', klass)
.attr('transform', 'translate(0, 0)')
.attr('d', 'M 0,-10 l 0,-20 l -5,20 l 10,0 l -5,-20');
.attr('d', 'M 0,-5 l 0,-20 l -5,30 l 10,0 l -5,-30');
};
return drawSequences;
js/id/ui/background.js
+24 -25
View File
@@ -264,6 +264,30 @@ iD.ui.Background = function(context) {
var overlayList = content.append('ul')
.attr('class', 'layer-list');
var mapillaryLayerItem = overlayList.append('li');
var mapillaryLabel = mapillaryLayerItem.append('label')
.call(bootstrap.tooltip()
.title(t('modes.selectImage.description'))
.placement('top'));
mapillaryLabel.append('input')
.attr('type', 'checkbox')
.attr('id', 'select_image_checkbox')
.on('change', function(){
if (this.checked) {
mapillaryLayerItem.classed('active',true);
context.enter(iD.modes.SelectImage(context));
} else {
mapillaryLayerItem.classed('active',false);
context.enter(iD.modes.Browse(context));
}
update();
});
mapillaryLabel.append('span')
.text(t('mapillary.title'));
var gpxLayerItem = content.append('ul')
.style('display', iD.detect().filedrop ? 'block' : 'none')
.attr('class', 'layer-list')
@@ -312,31 +336,6 @@ iD.ui.Background = function(context) {
label.append('span')
.text(t('gpx.local_layer'));
var mapillaryLayerItem = content.append('ul')
.attr('class', 'layer-list')
.append('li')
.classed('layer-toggle-gpx', true);
var mapillaryLabel = mapillaryLayerItem.append('label')
.call(bootstrap.tooltip()
.title(t('modes.selectImage.description'))
.placement('top'));
mapillaryLabel.append('input')
.attr('type', 'checkbox')
.attr('id', 'select_image_checkbox')
.on('change', function(){
if (this.checked) {
context.enter(iD.modes.SelectImage(context));
} else {
context.enter(iD.modes.Browse(context));
}
update();
});
mapillaryLabel.append('span')
.text(t('mapillary.title'));
var adjustments = content.append('div')
.attr('class', 'adjustments');
js/id/ui/image_view.js
+13 -9
View File
@@ -26,20 +26,24 @@ iD.ui.ImageView = function (context) {
imageWrapper.html('');
var content = imageWrapper
.append('div');
content.append('div')
.attr('class', 'icon close')
.on('click', function(){
imageWrapper.classed('hidden', true);
});
content.append('button')
.on('click', function(){
imageWrapper.classed('hidden', true);
})
.append('div')
.attr('class', 'icon close');
var wrap = content.append('div');
wrap.append('div')
.append('img')
.attr('src', 'https://d1cuyjsrcm0gby.cloudfront.net/KEY/thumb-320.jpg'.replace('KEY', key));
wrap.append('a')
var wrapLink = wrap.append('a')
.attr('class', 'link')
.attr('target', '_blank')
.attr('src', 'http://mapillary.com/map/im/KEY'.replace('KEY', key));
wrapLink.append('span')
.attr('class','icon icon-pre-text out-link')
wrapLink.append('span')
.text(t('mapillary.view_on_mapillary'))
.attr('class', 'link')
.attr('target', '_blank')
.attr('src', 'http://mapillary.com/map/im/KEY'.replace('KEY', key));
};
return imageView;
svg/cursors.svg
+81 -6
View File
@@ -14,7 +14,7 @@
height="1052.3622047"
id="svg54747"
version="1.1"
inkscape:version="0.48.2 r9819"
inkscape:version="0.48.5 r10040"
sodipodi:docname="cursors.svg">
<defs
id="defs54749">
@@ -52,11 +52,11 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="-405.07998"
inkscape:cy="990.65897"
inkscape:zoom="8"
inkscape:cx="-535.77448"
inkscape:cy="943.92752"
inkscape:document-units="px"
inkscape:current-layer="cursor-draw-connect-line"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1337"
inkscape:window-height="840"
@@ -89,7 +89,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>
@@ -1081,5 +1081,80 @@
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.5;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
inkscape:connector-curvature="0" />
</g>
<g
id="g3183"
inkscape:export-filename="/Users/saman/work_repos/iD/css/img/cursor-select-mapillary@2x.png"
inkscape:export-xdpi="180"
inkscape:export-ydpi="180">
<g
id="g3153"
inkscape:label="cursor-select-way"
inkscape:export-xdpi="180"
inkscape:export-ydpi="180"
inkscape:export-filename="/Users/saman/work_repos/iD/img/cursor-select-line2x.png"
transform="translate(-20,60)">
<rect
ry="0"
rx="0"
y="43.362183"
x="-531"
height="20"
width="20"
id="rect3155"
style="color:#000000;fill:none;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate" />
<g
id="g3157"
transform="translate(0,-0.01280038)">
<rect
ry="1"
rx="1"
style="opacity:0.5;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate"
id="rect3159"
width="10"
height="10"
x="-522"
y="52.362183" />
<path
inkscape:connector-curvature="0"
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;opacity:0.5;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
d="m -521,51.374983 c -1.0907,0 -2,0.909297 -2,2 l 0,8 c 0,1.090703 0.9093,2 2,2 l 8,0 c 1.0907,0 2,-0.909297 2,-2 l 0,-8 c 0,-1.090703 -0.9093,-2 -2,-2 l -8,0 z m 0,1 8,0 c 0.554,0 1,0.446 1,1 l 0,8 c 0,0.554 -0.446,1 -1,1 l -8,0 c -0.554,0 -1,-0.446 -1,-1 l 0,-8 c 0,-0.554 0.446,-1 1,-1 z"
id="path3161" />
</g>
<path
sodipodi:nodetypes="ccccccccccc"
inkscape:connector-curvature="0"
id="path3173"
d="m -530,44.362183 0,2 3.5,8 1.5,0 1,-1 0,-3 3,0 1,-1 0,-1.5 -8,-3.5 z"
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
<path
sodipodi:nodetypes="ccccccccc"
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate"
d="m -529,45.362183 0,1 3,7 1,0 0,-3.987183 4,-0.01282 0,-1 -7,-3 z"
id="path3175"
inkscape:connector-curvature="0" />
</g>
<path
sodipodi:nodetypes="cccccc"
inkscape:connector-curvature="0"
id="path3177"
d="m -539,121.36218 1,-2 3,-3 2,4 c 0,0 0,1 -1,1 z"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
<path
sodipodi:nodetypes="ccccc"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
d="m -541,120.36218 2,-3 4,4 -5,0 c -1,0 -1,-1 -1,-1 z"
id="path3179"
inkscape:connector-curvature="0" />
<path
transform="matrix(1.5,0,0,1.5,270,-56.681091)"
d="m -538,114.36218 a 1,1 0 1 1 -2,0 1,1 0 1 1 2,0 z"
sodipodi:ry="1"
sodipodi:rx="1"
sodipodi:cy="114.36218"
sodipodi:cx="-539"
id="path3181"
style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
sodipodi:type="arc" />
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 88 KiB