From 639f1b6977394f4f0b20b2736615b76b727433a8 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Wed, 30 Jan 2013 16:44:27 -0500 Subject: [PATCH 01/11] Stub in splash screen (#567) --- index.html | 1 + js/id/id.js | 5 +++++ js/id/ui/splash.js | 11 +++++++++++ test/index.html | 1 + 4 files changed, 18 insertions(+) create mode 100644 js/id/ui/splash.js diff --git a/index.html b/index.html index af436a86e..dd7a2a648 100644 --- a/index.html +++ b/index.html @@ -69,6 +69,7 @@ + diff --git a/js/id/id.js b/js/id/id.js index ab6dd37f2..853aeceaa 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -245,6 +245,11 @@ window.iD = function(container) { .on('login.editor', connection.authenticate)); controller.enter(iD.modes.Browse()); + +// if (!localStorage.sawSplash) { + iD.ui.splash(); +// localStorage.sawSplash = true; +// } } editor.connection = function(_) { diff --git a/js/id/ui/splash.js b/js/id/ui/splash.js new file mode 100644 index 000000000..ef17f7fca --- /dev/null +++ b/js/id/ui/splash.js @@ -0,0 +1,11 @@ +iD.ui.splash = function() { + var modal = iD.ui.modal(); + + modal.select('.modal') + .classed('modal-splash', true); + + modal.select('.content') + .html('Welcome to iD!'); + + return modal; +}; diff --git a/test/index.html b/test/index.html index 859d5b95d..c9ac23ba5 100644 --- a/test/index.html +++ b/test/index.html @@ -66,6 +66,7 @@ + From 578d4eebdfde86143e75b308d81db7f79077d052 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 30 Jan 2013 19:40:41 -0500 Subject: [PATCH 02/11] everything but logo. --- css/app.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++ js/id/ui/splash.js | 13 +++++++++---- 2 files changed, 57 insertions(+), 4 deletions(-) diff --git a/css/app.css b/css/app.css index 8ba20a02c..361ecd2f7 100644 --- a/css/app.css +++ b/css/app.css @@ -908,6 +908,54 @@ div.typeahead a:first-child { left:0px; right:0px; top:0px; bottom:0px; } +.modal-section { + padding: 20px; +} + +.modal-section.header { + border-radius: 4px 4px 0 0; +} + +.modal-section:last-child { + border-radius: 0 0 4px 4px; +} + +.modal-section:only-child { border-radius: 4px; +} + +.modal-section .buttons { + padding-top: 10px; + width: 100%; +} + +.modal-section img.wiki-image { + max-width: 100%; + max-height: 300px; + display: block; +} + +.modal-flash .content { + box-shadow: none; + border-radius: 4px; + background: #111; + color: #eee; +} + +.modal-flash .close-modal { + display:none; +} + +.loading-modal { + text-align: center; +} + +/* Intro Modal +------------------------------------------------------- */ + + +/* Commit Modal +------------------------------------------------------- */ + .commit-modal .user-info { display: inline-block; } diff --git a/js/id/ui/splash.js b/js/id/ui/splash.js index ef17f7fca..952809c75 100644 --- a/js/id/ui/splash.js +++ b/js/id/ui/splash.js @@ -2,10 +2,15 @@ iD.ui.splash = function() { var modal = iD.ui.modal(); modal.select('.modal') - .classed('modal-splash', true); + .attr('class', 'modal-splash modal') - modal.select('.content') - .html('Welcome to iD!'); + var introModal = modal.select('.content') + .append('div') + .attr('class', 'header modal-section fillL'); + + introModal.append('div').attr('class','logo'); + + introModal.html("

Welcome to the iD OpenStreetMap editor

This is development version 0.0.0-alpha1. For more information see ideditor.com and report bugs at github.com.systemed/iD

"); return modal; -}; +}; \ No newline at end of file From 16b42b8e81c011e3e5034944fb60d8829f9bff60 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 30 Jan 2013 19:51:51 -0500 Subject: [PATCH 03/11] adding logo. --- css/app.css | 6 + img/logo.png | Bin 0 -> 3693 bytes img/source/logo.svg | 1205 +++++++++++++++++++++++++++++++++++++++++++ js/id/ui/splash.js | 2 +- 4 files changed, 1212 insertions(+), 1 deletion(-) create mode 100644 img/logo.png create mode 100644 img/source/logo.svg diff --git a/css/app.css b/css/app.css index 361ecd2f7..e7e9edd03 100644 --- a/css/app.css +++ b/css/app.css @@ -952,6 +952,12 @@ div.typeahead a:first-child { /* Intro Modal ------------------------------------------------------- */ +.logo { + height: 100px; + width: 100px; + margin: 0 auto 20px auto; + background: url(../img/logo.png) 0 0 repeat; +} /* Commit Modal ------------------------------------------------------- */ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..6afa01f1b68a4bd7558836529d015c69ddd5665a GIT binary patch literal 3693 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + iD + + + + + + + + + + + + + + + + + + + + + + + + + A javascript OpenStreetMap Editor + + + + + + + + + + + iD + + + + + + + + + + + + + + + + + + + + + + + A Javascript OpenStreetMap Editor + + + + + + + + + + + + + + + + + + + + + + + D3.js + + + + + + iD + + + + + + + + + + + iD + + + diff --git a/js/id/ui/splash.js b/js/id/ui/splash.js index 952809c75..4f8a40935 100644 --- a/js/id/ui/splash.js +++ b/js/id/ui/splash.js @@ -10,7 +10,7 @@ iD.ui.splash = function() { introModal.append('div').attr('class','logo'); - introModal.html("

Welcome to the iD OpenStreetMap editor

This is development version 0.0.0-alpha1. For more information see ideditor.com and report bugs at github.com.systemed/iD

"); + introModal.append('div').html("

Welcome to the iD OpenStreetMap editor

This is development version 0.0.0-alpha1. For more information see ideditor.com and report bugs at github.com.systemed/iD.

"); return modal; }; \ No newline at end of file From bd4c91c61228ddad6f089623249823a117cb4cdf Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Thu, 31 Jan 2013 13:25:20 -0500 Subject: [PATCH 04/11] modal touch-ups. --- css/app.css | 14 ++++++++------ js/id/ui/splash.js | 4 ++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/css/app.css b/css/app.css index e7e9edd03..118fa64ea 100644 --- a/css/app.css +++ b/css/app.css @@ -920,7 +920,8 @@ div.typeahead a:first-child { border-radius: 0 0 4px 4px; } -.modal-section:only-child { border-radius: 4px; +.modal-section:only-child { + border-radius: 4px; } .modal-section .buttons { @@ -949,9 +950,14 @@ div.typeahead a:first-child { text-align: center; } -/* Intro Modal +/* Splash Modal ------------------------------------------------------- */ +.modal-splash { + width: 33.3333%; + left: 33.3333%; +} + .logo { height: 100px; width: 100px; @@ -1028,10 +1034,6 @@ div.typeahead a:first-child { border-radius: 4px 4px 0 0; } -.modal-section:last-child { - border-radius: 0 0 4px 4px; -} - .modal-section .buttons { padding-top: 10px; width: 100%; diff --git a/js/id/ui/splash.js b/js/id/ui/splash.js index 4f8a40935..43489fab1 100644 --- a/js/id/ui/splash.js +++ b/js/id/ui/splash.js @@ -6,11 +6,11 @@ iD.ui.splash = function() { var introModal = modal.select('.content') .append('div') - .attr('class', 'header modal-section fillL'); + .attr('class', 'modal-section fillL'); introModal.append('div').attr('class','logo'); - introModal.append('div').html("

Welcome to the iD OpenStreetMap editor

This is development version 0.0.0-alpha1. For more information see ideditor.com and report bugs at github.com.systemed/iD.

"); + introModal.append('div').html("

Welcome to the iD OpenStreetMap editor

This is development version 0.0.0-alpha1. For more information see ideditor.com and report bugs at github.com.systemed/iD.

"); return modal; }; \ No newline at end of file From dea18306d00d96c1e3af89ab1579719b8a1ebd3e Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 31 Jan 2013 13:30:18 -0500 Subject: [PATCH 05/11] Uncomment localStorage --- js/id/id.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/id/id.js b/js/id/id.js index 853aeceaa..ac700f846 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -246,10 +246,10 @@ window.iD = function(container) { controller.enter(iD.modes.Browse()); -// if (!localStorage.sawSplash) { + if (!localStorage.sawSplash) { iD.ui.splash(); -// localStorage.sawSplash = true; -// } + localStorage.sawSplash = true; + } } editor.connection = function(_) { From 2613312d12984e25d68def10c6d6f0e3b209517a Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Thu, 31 Jan 2013 11:39:51 -0500 Subject: [PATCH 06/11] Add google analytics. --- index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/index.html b/index.html index dd7a2a648..2b30b8f83 100644 --- a/index.html +++ b/index.html @@ -128,4 +128,15 @@ d3.select("#iD").call(id); }); + + From bbccec75be436b5a32ef93a6578fc80d07fafa66 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 31 Jan 2013 18:20:57 -0500 Subject: [PATCH 07/11] Convert Hash to a behavior --- index.html | 2 +- js/id/{renderer => behavior}/hash.js | 52 ++++++++++------------- js/id/id.js | 4 +- test/index.html | 4 +- test/index_packaged.html | 2 +- test/spec/{renderer => behavior}/hash.js | 53 ++++++++---------------- 6 files changed, 47 insertions(+), 70 deletions(-) rename js/id/{renderer => behavior}/hash.js (68%) rename test/spec/{renderer => behavior}/hash.js (51%) diff --git a/index.html b/index.html index 4fe1bd621..870436dd1 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,6 @@ - @@ -93,6 +92,7 @@ + diff --git a/js/id/renderer/hash.js b/js/id/behavior/hash.js similarity index 68% rename from js/id/renderer/hash.js rename to js/id/behavior/hash.js index f4204531f..65e748e28 100644 --- a/js/id/renderer/hash.js +++ b/js/id/behavior/hash.js @@ -1,9 +1,6 @@ -iD.Hash = function() { - var hash = { hadHash: false }, - s0 = null, // cached location.hash - lat = 90 - 1e-8, // allowable latitude range - controller, - map; +iD.behavior.Hash = function(controller, map) { + var s0 = null, // cached location.hash + lat = 90 - 1e-8; // allowable latitude range var parser = function(map, s) { var q = iD.util.stringQs(s); @@ -61,32 +58,29 @@ iD.Hash = function() { map.on('drawn.hash', null); } - hash.controller = function(_) { - if (!arguments.length) return controller; - controller = _; - return hash; - }; + function hash() { + map.on('move.hash', move); - hash.map = function(x) { - if (!arguments.length) return map; - if (map) { - map.on("move.hash", null); - window.removeEventListener("hashchange", hashchange, false); - } - map = x; - if (x) { - map.on("move.hash", move); - window.addEventListener("hashchange", hashchange, false); - if (location.hash) { - var q = iD.util.stringQs(location.hash.substring(1)); - if (q.id) { - willselect(q.id); - } - hashchange(); - hash.hadHash = true; + d3.select(window) + .on('hashchange.hash', hashchange); + + if (location.hash) { + var q = iD.util.stringQs(location.hash.substring(1)); + if (q.id) { + willselect(q.id); } + hashchange(); + hash.hadHash = true; } - return hash; + } + + hash.off = function() { + map.on('move.hash', null); + + d3.select(window) + .on('hashchange.hash', null); + + location.hash = ""; }; return hash; diff --git a/js/id/id.js b/js/id/id.js index 69e64e5fe..7fa1d76e4 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -234,7 +234,9 @@ window.iD = function(container) { d3.select(document) .call(keybinding); - var hash = iD.Hash().controller(controller).map(map); + var hash = iD.behavior.Hash(controller, map); + + hash(); if (!hash.hadHash) { map.centerZoom([-77.02271, 38.90085], 20); diff --git a/test/index.html b/test/index.html index 370b238fe..d03c5a6c7 100644 --- a/test/index.html +++ b/test/index.html @@ -41,7 +41,6 @@ - @@ -89,6 +88,7 @@ + @@ -149,6 +149,7 @@ + @@ -163,7 +164,6 @@ - diff --git a/test/index_packaged.html b/test/index_packaged.html index 007392f3b..60979e236 100644 --- a/test/index_packaged.html +++ b/test/index_packaged.html @@ -44,6 +44,7 @@ + @@ -58,7 +59,6 @@ - diff --git a/test/spec/renderer/hash.js b/test/spec/behavior/hash.js similarity index 51% rename from test/spec/renderer/hash.js rename to test/spec/behavior/hash.js index b0e5b567f..7616bf536 100644 --- a/test/spec/renderer/hash.js +++ b/test/spec/behavior/hash.js @@ -1,60 +1,41 @@ -describe("iD.Hash", function () { +describe("iD.behavior.Hash", function () { var hash, map, controller; beforeEach(function () { - hash = iD.Hash(); map = { on: function () { return map; }, zoom: function () { return arguments.length ? map : 0; }, center: function () { return arguments.length ? map : [0, 0]; }, centerZoom: function () { return arguments.length ? map : [0, 0]; } }; + controller = { on: function () { return controller; } }; + + hash = iD.behavior.Hash(controller, map); }); afterEach(function () { - hash.map(null); - location.hash = ""; + hash.off(); }); - describe("#map()", function () { - it("gets and sets map", function () { - expect(hash.controller(controller).map(map)).to.equal(hash); - expect(hash.map()).to.equal(map); - }); + it("sets hadHash if location.hash is present", function () { + location.hash = "map=20.00/38.87952/-77.02405"; + hash(); + expect(hash.hadHash).to.be.true; + }); - it("sets hadHash if location.hash is present", function () { - location.hash = "map=20.00/38.87952/-77.02405"; - hash.map(map); - expect(hash.hadHash).to.be.true; - }); - - it("centerZooms map to requested level", function () { - location.hash = "map=20.00/38.87952/-77.02405"; - sinon.spy(map, 'centerZoom'); - hash.map(map); - expect(map.centerZoom).to.have.been.calledWith([-77.02405,38.87952], 20.0); - }); - - it("binds the map's move event", function () { - sinon.spy(map, 'on'); - hash.map(map); - expect(map.on).to.have.been.calledWith('move.hash', sinon.match.instanceOf(Function)); - }); - - it("unbinds the map's move event", function () { - sinon.spy(map, 'on'); - hash.map(map); - hash.map(null); - expect(map.on).to.have.been.calledWith('move.hash', null); - }); + it("centerZooms map to requested level", function () { + location.hash = "map=20.00/38.87952/-77.02405"; + sinon.spy(map, 'centerZoom'); + hash(); + expect(map.centerZoom).to.have.been.calledWith([-77.02405,38.87952], 20.0); }); describe("on window hashchange events", function () { beforeEach(function () { - hash.map(map); + hash(); }); function onhashchange(fn) { @@ -77,7 +58,7 @@ describe("iD.Hash", function () { sinon.stub(map, 'on') .withArgs("move.hash", sinon.match.instanceOf(Function)) .yields(); - hash.map(map); + hash(); expect(location.hash).to.equal("#map=0.00/0/0"); }); }); From dcfe8ac85b65c52c13a45cd86212e30c3e4e998f Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Thu, 31 Jan 2013 19:20:13 -0500 Subject: [PATCH 08/11] design pass on alignment toggles. --- css/app.css | 105 +++- img/source/sprite.svg | 982 +++++++++++++++++++++++++++++++++++++- js/id/ui/layerswitcher.js | 19 +- 3 files changed, 1075 insertions(+), 31 deletions(-) diff --git a/css/app.css b/css/app.css index fa750db1e..c979ea095 100644 --- a/css/app.css +++ b/css/app.css @@ -33,6 +33,7 @@ div, textarea, input, span, ul, li, ol, a, button { a, button, input, textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; + cursor:url(../img/cursor-pointer.png) 6 1, auto; } h2 { @@ -186,6 +187,7 @@ ul.toggle-list li a { display:block; border-top: 1px solid rgba(0, 0, 0, .5); } +ul.toggle-list li a:hover { background-color: #ececec;} ul.toggle-list .icon { float: left; @@ -253,7 +255,6 @@ button { font-size:12px; display: inline-block; height:40px; - cursor:url(../img/cursor-pointer.png) 6 1, auto; border-radius:4px; -webkit-transition: background 100ms; -moz-transition: background 100ms; @@ -620,6 +621,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} background: rgba(0,0,0,.5); border-radius: 0 0 4px 4px; } + .inspector-inner .add-tag:hover { background: rgba(0,0,0,.8); } @@ -635,25 +637,25 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} position:absolute; } -.map-control button { - width: 40px; +.map-control > button { + width: 30px; background: rgba(0,0,0,.5); border-radius: 0; border-bottom: 1px solid rgba(0, 0, 0, 1); } -.map-control button:hover { +.map-control > button:hover { background: rgba(0, 0, 0, .8); } -.map-control button.active:hover { +.map-control > button.active:hover { background: #6bc641; } .map-overlay { width: 150px; position:absolute; - left:50px; + left:40px; top:0; display: block; border-radius: 4px; @@ -663,7 +665,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} .zoombuttons { top:70px; - width: 40px; + width: 30px; } .zoombuttons button.zoom-in { @@ -680,24 +682,94 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} top:190px; } +.nudge-container { + margin-top: 10px; +} + .layerswitcher-control .adjustments button { - opacity:0.5; - height:20px; + height:30px; font-size:10px; - font-weight:normal; padding:0 5px 3px 5px; background: white; - border: 1px solid #ddd; - border-radius: 0; + border:0; + text-transform: uppercase; + font-weight: bold; + } .layerswitcher-control .adjustments button:hover { - opacity: 1; + background:#ececec; +} + +.layerswitcher-control .alignment-toggle:before { + content: ''; + display: inline-block; + height: 0; + width: 0; + margin-right: 5px; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 8px solid #7092ff; +} + +.layerswitcher-control .alignment-toggle.expanded:before { + border-top: 8px solid #7092ff; + border-bottom: 0; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + } .layerswitcher-control .nudge { + text-indent: -9999px; + overflow: hidden; width:20px; - margin-right:2px; + border-radius: 0; + margin-right:1px; + position: relative; +} + +.layerswitcher-control .nudge::after { + content: ''; + display: block; + position: absolute; + margin: auto; + left: 0; right: 0; top: 0; bottom: 0; + height: 0; + width: 0; +} + +.layerswitcher-control .nudge.left::after { + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #222; +} + +.layerswitcher-control .nudge.right::after { + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid #222; +} + +.layerswitcher-control .nudge.top::after { + border-right: 5px solid transparent; + border-left: 5px solid transparent; + border-bottom: 5px solid #222; +} + +.layerswitcher-control .nudge.bottom::after { + border-right: 5px solid transparent; + border-left: 5px solid transparent; + border-top: 5px solid #222; +} + +.layerswitcher-control .nudge:first-child { + border-radius: 4px 0 0 4px; +} + +.layerswitcher-control .reset { + width: 45px; + border-radius: 0 4px 4px 0; } .opacity-options-wrapper { @@ -711,6 +783,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} position: absolute; right: 10px; top: 10px; + border: 1px solid #ddd; } .opacity-options li { @@ -723,7 +796,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} .opacity-options li .select-box{ position: absolute; width:20px; - height:20px; + height:18px; z-index: 9999; } @@ -742,7 +815,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} background:#222; display:inline-block; width:20px; - height:20px; + height:18px; } /* Geocoder */ diff --git a/img/source/sprite.svg b/img/source/sprite.svg index 64b75e286..6248e28cc 100644 --- a/img/source/sprite.svg +++ b/img/source/sprite.svg @@ -7,6 +7,7 @@ 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:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="420" @@ -38,9 +39,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="4" - inkscape:cx="202.2911" - inkscape:cy="164.38176" + inkscape:zoom="1" + inkscape:cx="581.64693" + inkscape:cy="71.693021" inkscape:document-units="px" inkscape:current-layer="layer12" showgrid="false" @@ -53,10 +54,10 @@ 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"> + inkscape:snap-nodes="false"> + + + + + + + + + + + + fix misalignment + + + + + RESET diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js index ea87cb7a9..298c469e0 100644 --- a/js/id/ui/layerswitcher.js +++ b/js/id/ui/layerswitcher.js @@ -17,12 +17,12 @@ iD.ui.layerswitcher = function(map) { }, { name: 'MapBox', source: iD.BackgroundSource.MapBox, - description: 'Satellite and Aerial Imagery', + description: 'Satellite and aerial imagery.', link: 'http://mapbox.com' }, { name: 'Custom', source: iD.BackgroundSource.Custom, - description: 'A custom layer (requires configuration)' + description: 'A custom layer (requires configuration).' }], opacities = [1, 0.5, 0]; @@ -139,10 +139,10 @@ iD.ui.layerswitcher = function(map) { .attr('class', 'adjustments pad1'); var directions = [ - ['←', [-1, 0]], - ['↑', [0, -1]], - ['→', [1, 0]], - ['↓', [0, 1]]]; + ['left', [-1, 0]], + ['top', [0, -1]], + ['right', [1, 0]], + ['bottom', [0, 1]]]; function nudge(d) { map.background.nudge(d[1]); @@ -150,17 +150,16 @@ iD.ui.layerswitcher = function(map) { } adjustments.append('a') - .text('▶ fix misalignment') + .text('Fix misalignment') .attr('href', '#') + .classed('alignment-toggle', true) .classed('expanded', false) .on('click', function() { var exp = d3.select(this).classed('expanded'); if (!exp) { nudge_container.style('display', 'block'); - d3.select(this).text('▼ fix misalignment'); } else { nudge_container.style('display', 'none'); - d3.select(this).text('▶ fix misalignment'); } d3.select(this).classed('expanded', !exp); d3.event.preventDefault(); @@ -174,7 +173,7 @@ iD.ui.layerswitcher = function(map) { nudge_container.selectAll('button') .data(directions).enter() .append('button') - .attr('class', 'nudge') + .attr('class', function(d) { return d[0] + ' nudge'; }) .text(function(d) { return d[0]; }) .on('click', nudge); From 844e674ea5b09d22ef4a860af99cd3064c620d00 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Thu, 31 Jan 2013 19:24:35 -0500 Subject: [PATCH 09/11] refine misalignment ui. --- css/app.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/css/app.css b/css/app.css index b0507e02f..718c0c39a 100644 --- a/css/app.css +++ b/css/app.css @@ -701,12 +701,20 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} background:#ececec; } +.layerswitcher-control .alignment-toggle { + display: block; + padding-left: 12px; + position: relative; +} + .layerswitcher-control .alignment-toggle:before { content: ''; - display: inline-block; + display: block; + position: absolute; height: 0; width: 0; - margin-right: 5px; + left: 0; + top: 4px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 8px solid #7092ff; From 9494d8d468fd188bae5687703e8036488bc01c7c Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Fri, 1 Feb 2013 10:16:18 -0500 Subject: [PATCH 10/11] Remove unused --- js/id/renderer/map.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index a2c4781ef..c02ff65cb 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -369,24 +369,6 @@ iD.Map = function() { return map; }; - map.hint = function (_) { - if (_ === false) { - d3.select('div.inspector-wrap') - .style('opacity', 0) - .style('display', 'none'); - } else { - d3.select('div.inspector-wrap') - .html('') - .style('display', 'block') - .transition() - .style('opacity', 1); - d3.select('div.inspector-wrap') - .append('div') - .attr('class','inspector-inner') - .text(_); - } - }; - map.editable = function() { return map.zoom() >= 16; }; From 559f3c9037f1e87ce87c7edbd5a30fdb4f04abec Mon Sep 17 00:00:00 2001 From: Ansis Brammanis Date: Fri, 1 Feb 2013 11:00:55 -0500 Subject: [PATCH 11/11] Remove unecessary line --- js/id/renderer/map.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index c02ff65cb..cd99de738 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -55,7 +55,6 @@ iD.Map = function() { function pxCenter() { return [dimensions[0] / 2, dimensions[1] / 2]; } function drawVector(difference) { - if (surface.style(transformProp) != 'none') return; var filter, all, extent = map.extent(), graph = history.graph();