From e721e93a312244378567884a4f4604a7da2e976c Mon Sep 17 00:00:00 2001 From: samanpwbb Date: Tue, 16 Sep 2014 13:49:13 -0400 Subject: [PATCH] cleanup mapillary UI --- css/app.css | 16 +++-- css/map.css | 18 ++--- data/core.yaml | 4 +- dist/img/cursor-select-mapillary.png | Bin 751 -> 568 bytes dist/img/cursor-select-mapillary2x.png | Bin 1621 -> 1081 bytes dist/locales/en.json | 4 +- js/id/modes/select_image.js | 13 +++- js/id/svg/sequences.js | 4 +- js/id/ui/background.js | 49 +++++++------- js/id/ui/image_view.js | 22 ++++--- svg/cursors.svg | 87 +++++++++++++++++++++++-- 11 files changed, 155 insertions(+), 62 deletions(-) diff --git a/css/app.css b/css/app.css index 010950a47..b280730c6 100644 --- a/css/app.css +++ b/css/app.css @@ -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 { diff --git a/css/map.css b/css/map.css index 0e20660a8..7e5ffe792 100644 --- a/css/map.css +++ b/css/map.css @@ -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 */ diff --git a/data/core.yaml b/data/core.yaml index ecf603004..d1118ef48 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -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 Mapillary. Go and take some! help: diff --git a/dist/img/cursor-select-mapillary.png b/dist/img/cursor-select-mapillary.png index bdfecf6a6c8d7ea4d3e57e0b0da29e4df6b8c660..5bf5c3feb5cd34d003df66d478690519c0c7f0bb 100644 GIT binary patch delta 544 zcmV+*0^j}b1-Jx|BYyw{b3#c}2nYxWd^H3DV zpHmANq6xT#f>Rb<3k4@T6uNc@LAYa}@9yH7t`-D~L%WG|5Pve<@#Xa&&~)k|cI=>J zd!h9MFBFeUB5nLgB0lgyxcBhmx#!*!VrKlNN&rAa9Q&Gx_KB$cV`7|;nVG{dWFZ7= znsx`^5WprgqlgpWbr^=6D2gKXeV;AMdIr!3uw4|mFNEN?NC-Bj+YVoAk>!n|MQ%Y%MC6iJb0Gca6X1*PbMwh9cRa&jq1^{@T zw`-c_f#-R<>3DHXg|bGEi2S6+G|hwge7<2A#=~qjJAeM97U?5@E5~uJ48wSE9OvrG z07Vj}<+^UY(P&KD?e_FX2|Jz6j_bPh1QrCrUbow=uM}mD65unlKbcI9bX|V}z_x8q z0dV5MU~tCFJ^(*Auv)F&EJK!U+x9d8=05Ubu~_?RPuKOAZ2wrtsd z7Z;bGY;0^hfu@B5F%P+>&Rw-?)qfE9^XJe1!-o(5PfSewFCigu320z35X+Kkurf`%u1}mOziCJyN(<=0)I0L>{1v9WH2u;?+>71 zyu=y^QWpaB=0A`jAa6T5I{sHuQu?W^to#Frzq7EgbOF_n6j?lCVq%x?-@gxbn4Fy4 zPoM!tKr9Hw%s?81nV=Y};VeK&82Iw))vNhSmoDwCuC8VPy68Vp;$B)>8Xq$=^TL1s z{#gTU!WxE*jDL*3nV6W4{{8zm9@#*U!7Ep+SWy}k6(s>=gIvP^GR)rAN-Q|gZx_@O zkT41W1`*@h^_vtA9zM1Z9P-aLBrs2?ct1>`cIVfR6X9Xoac94Vha ze`Y##=m;N3GcSFc{Pyn6kL!_nUU)5_Ir zBwU;vU%!9>^@xvsHUo{fbK9Nq-I3`(@1boTDud)D-nI|$xNVR6{cg_f}1f=2DBMaP!~!Iv*_xj16fA~x(uP+NPiOC6oOK^nTfM$sZcO< zU7?#QF-$B%>0%%#I-1hBu><2ILsUFnG*8~d{CS%9bozq>?;h?w`R+OQ-rTE1gm+o4 z>jvngGeD)3G}tqx)I+6|`#J#;5$a`@7FGhj0(?f_tF&`~h6;s(L?RKWN~p(LZOhk{Lg_$fafXz z9|97IM4AGc)uj9fz&F4hCjs3+Nz*hbm&+X?MVglX82AaeZ#!Te@@qhn$)qJfL(R(X z6rc~N`2BvV)oK@lG-Nm6TmK{?@(=Li{{BAMY__`t)_*RYODWt1PD7zk(+u_X^@*lw z(%aiBZns-{dV0j=a*0yPyt|W*l-LBhOp7DO1kuWDgKG!)87+<+Y+hrR1ysQEW=GCd z12(;>h=?eqzB@WPdYs8*NF)+%*RfK{3rqnY0p82)hBF-kJHW3Za;WMVYxbiapyc=a zeY?B6Xn&e!_>D;@6Wk-l2=8nLz-h)E!_a6biWug@WNTCSYVR26)%j*4~VajNGu8sJ6=I z^KV8+M{fX!ZOb7de*r(Qudkz&I)ejJrfyz&0n#2XJaSevU;fZWEJDyIbC))LM6fl)a4Ti(va{vY$z}D8*2MY@e zAGV6&Sc!|pqGxDm=*vo_;?Z?|Woc>Yw?;Ta0|NuQo12^8H^g-oaCmrF-`Lm~G}^kZ zuK+Z{8OmfbKbY5|qkySYYA~5h>KBRAn14mbHc7Eq^rX}22NxaJYAxCh7>Pt4R4NtE zWyUt!(Y6C_Z*RYU*|7%)2k$ldYzK_T(Qn5li2>e~m6g|H zV`I0v3Rc(Z>gwz9@$p-9y0BW*4nQ;-m0T|O3OMP;a=F~AXf$eMZO4ubzV&FbQ63fG fN!Nhj?6dPw z@}an?F!2LK<}%IPjLQ~76=SyehYMNeNcfYX12IDo1fdkr2?E*X2=XOZKnrvrFoDuS z-_CjTl?N#lTHgNJNe<_}bMHOp*K_VY_g+}6|7rOmK!7Pa*MGqGeqiqMxv9UQ&g z4Q9^*yIN=7`q?BX!a%jPwM2Y;JYi>NM}Zv$7gvGTS?|g+3$p-HKvgOgk(!!H2!%ol zs2|-GADRYYx-87&4K59oV=A9K;mRufQ-NlgSo?&p2kD^fQ7HOUWp12y|)* z;SV%0BLLCpPv`(Qge8P?4Ge-A!aAqN-D-+>JRVsaZEbA{E|*JiI2^*p#)e?C*%UC8 zGG?I7SiJ*HlO+fBW>^OOjME3;!DPuny@44Av5*5iA%B`ol^g>&1o@xPd^Z&YkgnBg zuV!Rqu;8dO3nnQkX$!2yGq7$0U_E-6onU%^3e@#_z5a4$W@a@GS?DaqJPVwY5}Q;5zM(pf11qy8L#ykvATk3l@X&O*sy!OeyoG8dpBathqZ zq0*36X@5v?k3iryF^|0k)oS$sPf>NxQ?97;1AuH`skvYL16Z6)PfwrMFs2ncZ4lgt zvC&T~1&0oBF4{m_XcKLl1K0xt^Bz8YNT!w+z4K_$K!GSRa+JbaNwXDb4j}saevU%~ zC!^^^*q$4?>U;Mck0zz8CG;~JzMb4-XAP?+2H4zMrH?1umoH!ODJUxT+PyovFEV1si(3V^T>zY9bac$NT&@tt?f*#L z+uLXRZb;bXj?PXeoD_FpUvFT*2E4f&X)zHr4qi%QZ|oi{8LUT-8Xel&+E*kTNeYaQ zJAcp_9v1qnzh7;yR;#%YQF{WMUUAZ1yde7%$5vL}b4E!g#sEsCTZYh4TYEeINYe53 z0UP`WGJZ^NeZx=u67}a&(|iU8U-0Cmx9h~dK4Yk}Oape7wop__(#z5uCG+A4`0)DM&&_6H<$thIsp}^|RI=f@BO}N5@kh z0)%VX)W!3%C+JKwu3Ym_Pr)_>JE zV5C^PW1_mK=;ap_y6JQ}&cXNtO0Mnn>bm|*u3%iF;f8J7+D`{YwHX6gR9vzWoj@w_ zKNBS7-TYOEjhLuN^|Xe?x^Xj~)E!Fr_&KGcOGW@rO--@xmX(Wy!dFK_w{0Ckhgh)X z6_rAFcenANppE3(gLe}zSiizGu{*VVXwGNVZLV~qAtr3^8K^d}EVtPx;%0%$Env9N&7^Li#-hVB}wMOiT zi84m;xvF;s_K%GG!#Vl+8Q-w&JA=i(YerzMv0yKIp}v3rfz$Bt2yc6M*fTz#Pdb9* z&K}NPK9rInFE1}G1zPOuOV+)8aS5AYtTyd@>R(@+KKYF5N4XpT@yr$BWfN~9-rlck zl8+^}rW{Y~p&WU5h_s)iB!9O=?b=~XFZP}K>_pGd@DTSkFHcS4(ZecNI8{)Owon48 zmV8T@o;UM1IXU?jd_{(bN+088bEe1gR&HMYnliZp-{%D!%gs#B^!NAgfs5>+r^+t3 z@o^2YQXm-P^Xe)=CE&xgzH&>k%JfA&p7vAXt};RMFUo>00000NkvXXu0mjf DEJ+2t diff --git a/dist/locales/en.json b/dist/locales/en.json index 2342ca3f2..164deac2f 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -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 Mapillary. Go and take some!\n" }, "help": { diff --git a/js/id/modes/select_image.js b/js/id/modes/select_image.js index 9ddda13c4..9fc126b0d 100644 --- a/js/id/modes/select_image.js +++ b/js/id/modes/select_image.js @@ -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') diff --git a/js/id/svg/sequences.js b/js/id/svg/sequences.js index ec5d7bfc9..29b620c04 100644 --- a/js/id/svg/sequences.js +++ b/js/id/svg/sequences.js @@ -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; diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 82065effc..2cf0b2c4d 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -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'); diff --git a/js/id/ui/image_view.js b/js/id/ui/image_view.js index b16db05d0..7795d9606 100644 --- a/js/id/ui/image_view.js +++ b/js/id/ui/image_view.js @@ -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; diff --git a/svg/cursors.svg b/svg/cursors.svg index 1c71eb967..252876269 100644 --- a/svg/cursors.svg +++ b/svg/cursors.svg @@ -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"> @@ -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 @@ image/svg+xml - + @@ -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" /> + + + + + + + + + + + + + +