diff --git a/css/app.css b/css/app.css index 493726b1d..a448b212b 100644 --- a/css/app.css +++ b/css/app.css @@ -5,7 +5,7 @@ body { font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif; margin:0; padding:0; - color:#444; + color:#222; } #iD * { @@ -63,7 +63,10 @@ input[type=text]:focus { .fillL { background-color: white;} .fillL2 { background: #f7f7f7 url(/img/background-pattern-1.png) repeat;} - +.fillD { + background-color: #222222; + color: white; +} div.hide { display:none; } @@ -87,8 +90,8 @@ button { font-size:14px; display: inline-block; height:40px; - margin:10px; } +.fillD button { border: 1px solid black; } button:hover { background-color: #ececec; @@ -104,14 +107,17 @@ button.narrow { border-radius:4px; } -button.wide, +button.wide { + margin: 10px; + width: 100px; +} + button.add-button { width: 80px; } - button.narrow, -button.add-button:first-child { +button.Browse { width:40px; } @@ -145,12 +151,14 @@ button.save { color:#6dc643; } -button.cancel { - background:#aaa; +button.delete { + color:#ff7070; } -button.delete { - background:#DD5757; +button.close { + position: absolute; + top: 10px; + right: 10px; } input[type=text] { @@ -169,6 +177,15 @@ button small { vertical-align: top; } +button .label { + margin-right: 3px; + text-shadow: 0 1px 0 white; +} + +.active .label { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); +} + /* Icons */ .icon { @@ -176,18 +193,208 @@ button small { vertical-align:top; width:20px; height:20px; - background:transparent url(/img/background-pattern-1.png) no-repeat 0px 0px; + background:transparent url(/img/sprite.png) no-repeat 0px 0px; text-indent:-9999px; overflow:hidden; } -.icon.browse { background-position: 0px 0px;} -.icon.place { background-position: -20px 0px;} -.icon.road { background-position: -40px 0px;} -.icon.area { background-position: -60px 0px;} -.icon.undo { background-position: -80px 0px;} -.icon.redo { background-position: -100px 0px;} -.icon.save { background-position: -120px 0px;} +.icon.icon-pre-text { + margin-right: 3px; +} + +.icon.browse { background-position: 0px 0px;} +.icon.add-place { background-position: -20px 0px;} +.icon.add-road { background-position: -40px 0px;} +.icon.add-area { background-position: -60px 0px;} +.icon.undo { background-position: -80px 0px;} +.icon.redo { background-position: -100px 0px;} +.apply.icon { background-position: -120px 0px;} +.save.icon { background-position: -140px 0px;} +.close.icon { background-position: -160px 0px;} +.delete.icon { background-position: -180px 0px;} + +.active .icon.browse { background-position: 0px -20px;} +.active .icon.add-place { background-position: -20px -20px;} +.active .icon.add-road { background-position: -40px -20px;} +.active .icon.add-area { background-position: -60px -20px;} +.active .icon.undo { background-position: -80px -20px;} +.active .icon.redo { background-position: -100px -20px;} +.active .apply.icon { background-position: -120px -20px;} +.active .save.icon { background-position: -140px -20px;} +.active .close.icon { background-position: -160px -20px;} +.active .delete.icon { background-position: -180px -20px;} + + +button[disabled] .icon.browse { background-position: 0px -40px;} +button[disabled] .icon.add-place { background-position: -20px -40px;} +button[disabled] .icon.add-road { background-position: -40px -40px;} +button[disabled] .icon.add-area { background-position: -60px -40px;} +button[disabled] .icon.undo { background-position: -80px -40px;} +button[disabled] .icon.redo { background-position: -100px -40px;} +button[disabled] .apply.icon { background-position: -120px -40px;} +button[disabled] .save.icon { background-position: -140px -40px;} +button[disabled] .close.icon { background-position: -160px -40px;} +button[disabled] .delete.icon { background-position: -180px -40px;} + +/* ToolBar / Persistent UI Elements +------------------------------------------------------- */ + +#bar { + border-bottom:1px solid #ccc; + position:absolute; + left:0px; + top:0px; + right:0; + height:60px; +} + +/* Special rules for toolbar icons */ + +button.Browse .label { + display: none; + } + +/* Status box */ + +.messages { + display:none; +} + +/* Inspector */ + +.inspector-wrap { + border:1px solid #ccc; + position:absolute; + right: 0; + left: 530px; + min-height: 60px; + opacity:0; + display:none; +} + +.inspector-inner { + padding: 10px; +} + +.inspector-wrap a.permalink { + text-decoration:none; + margin-right:1em; +} + +.inspector tbody td { + border: 1px solid #ccc; + width:150px; +} + +.inspector input { + margin:0; + padding:4px; + border:0; + background:#fff; + width:150px; +} + +.inspector-wrap table { + border-collapse: collapse; + width:100%; + border-spacing:0; +} + +.inspector-wrap .tag-table-wrap { + max-height:350px; + overflow:auto; +} + +.inspector-wrap table td { + padding:0; + border-spacing:0; +} + +.inspector-wrap .buttons { + margin-top: 10px; + border-top: 1px solid #ccc; +} + +/* Map Controls */ + +.map-control { + left:10px; + position:absolute; +} + +.map-control button { + text-indent: -9999px; + overflow: hidden; + background-image: url(/img/sprite.png); +} + +/* Zoomer */ + +.zoombuttons { + top:70px; + width: 40px; +} + +.zoombuttons button.zoom-in { + background-position: 10px -90px; + border-bottom:0; + border-radius:4px 4px 0 0; +} + +.zoombuttons button.zoom-out { + background-position: -30px -90px; + border-radius:0 0 4px 4px; +} + +/* Layer Switcher */ + +.layerswitcher-control { + top:210px; +} + +.layerswitcher-control button { + background-position: -110px -90px; +} + +.layerswitcher-control .content { + background:#fff; + padding:5px; + position:absolute; + left:40px; + width:100px; + top:0; +} + +.layerswitcher-control .opacity-options { + border:1px solid #000; + height:15px; + width:45px; +} + +.layerswitcher-control a.layer { + display:block; +} + +.layerswitcher-control a.opacity { + background:#000; + display:inline-block; + width:15px; + height:15px; +} + +/* Geocoder */ + +.geocode-control { + top:160px; +} + +.geocode-control button { + background-position: -70px -90px; +} + +.geocode-control input { + display:none; +} /* Map ------------------------------------------------------- */ @@ -228,155 +435,6 @@ img.tile { padding:2px 5px; } -/* ToolBar / Persistent UI Elements -------------------------------------------------------- */ - -#bar { - border-bottom:1px solid #ccc; - position:absolute; - left:0px; - top:0px; - right:0; - height:60px; -} - -/* Status box */ - -.messages { - display:none; -} - -/* Inspector */ - -.inspector-wrap { - border:1px solid #ccc; - position:absolute; - right: 0; - left: 510px; - padding:10px; - height: 60px; - opacity:0; - display:none; -} - -.inspector-wrap a.permalink { - text-decoration:none; - margin-right:1em; -} - -.inspector tbody td { - border: 1px solid #ccc; - width:150px; -} - -.inspector input { - margin:0; - padding:4px; - border:0; - background:#fff; - width:150px; -} - -.inspector-wrap table { - border-collapse: collapse; - width:347px; - border-spacing:0; -} - -.inspector-wrap .tag-table-wrap { - max-height:350px; - overflow:auto; -} - -.inspector-wrap table td { - padding:0; - border-spacing:0; -} - -.inspector-wrap .close { - border: 0; - position: absolute; - top: 0; - right: 0; - cursor: pointer; -} - -/* Map Controls */ - -#bar .zoombuttons { - position:absolute; - left:10px; - top:50px; - width:40px; -} - -#bar .zoombuttons button { - width:40px; - border:1px solid #ccc; -} - -#bar .zoombuttons button.zoom-in { - border-bottom:0; - border-radius:5px 5px 0 0; -} - -#bar .zoombuttons button.zoom-out { - border-radius:0 0 5px 5px; -} - -/* Layer Switcher */ - -div.layerswitcher-control { - position:absolute; - top:170px; - left:10px; - color:#222; -} - -div.layerswitcher-control .content { - background:#fff; - padding:5px; - position:absolute; - left:40px; - width:100px; - top:0; -} - -div.layerswitcher-control div.opacity-options { - border:1px solid #000; - height:15px; - width:45px; -} - -div.layerswitcher-control a.layer { - display:block; -} - -div.layerswitcher-control a.opacity { - background:#000; - display:inline-block; - width:15px; - height:15px; -} - -/* Geocoder */ - -div.geocode-control { - position:absolute; - top:130px; - left:10px; - color:#222; -} - -#bar div.geocode-control button, -div.layerswitcher-control button { - width:40px; -} - -div.geocode-control input { - display:none; -} - /* Account Information ------------------------------------------------------- */ @@ -476,15 +534,16 @@ div.typeahead a { .tooltip { position: absolute; z-index: 1030; - display: block; padding: 5px; font-size: 11px; opacity: 0; + display: none; filter: alpha(opacity=0); visibility: visible; } .tooltip.in { + display: block; opacity: 0.8; filter: alpha(opacity=80); } diff --git a/css/reset.css b/css/reset.css index 7f9084c6f..6e0beba61 100644 --- a/css/reset.css +++ b/css/reset.css @@ -60,6 +60,7 @@ textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ + padding: 0; } /* @@ -139,4 +140,18 @@ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; -} \ No newline at end of file +} + +/* +** Markup free clearing +** Details: http://www.positioniseverything.net/easyclearing.html +*/ +.cf:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } + +.cf { display: inline-block; } \ No newline at end of file diff --git a/img/source/design.svg b/img/source/design.svg index e682c225c..c9f80174f 100644 --- a/img/source/design.svg +++ b/img/source/design.svg @@ -21,6 +21,11 @@ inkscape:export-ydpi="90"> + + y="-131.63782" /> Save + x="480.40121" + y="117.36218">Commit + style="fill:#cccccc;fill-opacity:1"> + style="color:#000000;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> areas. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Show a menu for doing operations, positioned relativeto selected feature. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Delete + Did you know? + y="-115">Did you know? Add a point of interest to the map. + style="display:inline"> + transform="matrix(3.8187791,0,0,4.7029385,-2129.8919,348.44168)" /> Baselayers OpenStreetMap Bing Satellite + y="283">Bing Satellite + id="g7330" + transform="translate(0,-20)" /> Overlays + y="405">Overlays TIGER roads @@ -2011,7 +2449,7 @@ width="19" height="19" x="20.5" - y="330.5" + y="310.5" rx="9.5" ry="9.5" inkscape:export-filename="/Users/saman/work_repos/iD/img/source/layerswitcher-expanded.png" @@ -2020,7 +2458,7 @@ Standard @@ -2146,7 +2584,7 @@ Cycle Map + y="363">Cycle Map GPS Tracks + y="523">GPS Tracks + id="g8339" + transform="translate(0,-20)"> diff --git a/img/source/sprite.png b/img/source/sprite.png index efc5f6781..ff071a8d7 100644 Binary files a/img/source/sprite.png and b/img/source/sprite.png differ diff --git a/img/source/sprite.svg b/img/source/sprite.svg index c000ca96d..3a092d2d8 100644 --- a/img/source/sprite.svg +++ b/img/source/sprite.svg @@ -10,14 +10,14 @@ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="220" - height="100" + height="160" id="svg12393" version="1.1" inkscape:version="0.48.2 r9819" sodipodi:docname="sprite.svg" - inkscape:export-filename="/Users/saman/work_repos/iD/img/source/sprite@2x.png" - inkscape:export-xdpi="180" - inkscape:export-ydpi="180"> + inkscape:export-filename="/Users/saman/work_repos/iD/img/sprite.png" + inkscape:export-xdpi="90" + inkscape:export-ydpi="90"> + transform="translate(-25,-62.362183)" + style="display:none"> + + + transform="translate(-25,1.1484375e-6)"> + + + + + + + + + + + - - - - + + transform="translate(125,-153.36218)"> @@ -263,7 +337,7 @@ + transform="translate(-896,174.63782)"> - - - - + - + d="M 134.5,4 129.5625,12.5625 126,9 l -1,0 -1,1 0,1 5,5 1,0 1,0 6,-10 0,-1 -1,-1 -1.5,0 z" + transform="translate(346,101.36218)" + id="path4961-2" + inkscape:connector-curvature="0" /> @@ -438,7 +495,7 @@ d="m 136,2.01282 5,4.5 -5,4.5 0,-3 -3,0 L 132,9 l 0,3.01282 1,0.98718 5,0.0128 1,1.00002 0,1 -1,0.99998 -5,0 -2,-0.99998 -1,-1 -1,-2.00002 0,-3 1,-1.99998 1,-1 2,-1.00002 3,0 z" style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + transform="translate(125,-192.36218)"> - - - - + + transform="translate(-896,213.63782)"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/sprite.png b/img/sprite.png index e0cfac510..53d2e0e3b 100644 Binary files a/img/sprite.png and b/img/sprite.png differ diff --git a/js/id/id.js b/js/id/id.js index a0534863a..d75692706 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -31,12 +31,18 @@ window.iD = function(container) { var buttons = buttons_joined.selectAll('button.add-button') .data([iD.modes.Browse(), iD.modes.AddPlace(), iD.modes.AddRoad(), iD.modes.AddArea()]) .enter().append('button') - .attr('class', 'add-button') - .text(function (mode) { return mode.title; }) + .attr('class', function (mode) { return mode.title + ' add-button'; }) .attr('data-original-title', function (mode) { return mode.description; }) .call(bootstrap.tooltip().placement('bottom')) .on('click', function (mode) { controller.enter(mode); }); + buttons.append('span') + .attr('class', function(d) { + return d.id + ' icon icon-pre-text'; + }); + + buttons.append('span').attr('class', 'label').text(function (mode) { return mode.title; }); + controller.on('enter', function (entered) { buttons.classed('active', function (mode) { return entered.button === mode.button; }); }); @@ -47,7 +53,7 @@ window.iD = function(container) { undo_buttons.append('button') .attr({ id: 'undo', 'class': 'narrow' }) .property('disabled', true) - .html('←') + .html("") .on('click', history.undo) .call(bootstrap.tooltip() .placement('bottom')); @@ -55,7 +61,7 @@ window.iD = function(container) { undo_buttons.append('button') .attr({ id: 'redo', 'class': 'narrow' }) .property('disabled', true) - .html('→') + .html("") .on('click', history.redo) .call(bootstrap.tooltip() .placement('bottom')); @@ -67,7 +73,7 @@ window.iD = function(container) { bar.append('button') .attr('class', 'save wide') - .html("Upload") + .html("Save") .attr('title', 'Save changes to OpenStreetMap, making them visible to other users') .call(bootstrap.tooltip() .placement('bottom')) @@ -107,16 +113,16 @@ window.iD = function(container) { bar.append('div') .attr('class', 'messages'); - var zoom = bar.append('div') - .attr('class', 'zoombuttons') + var zoom = this.append('div') + .attr('class', 'zoombuttons map-control') .selectAll('button') .data([['zoom-in', '+', map.zoomIn], ['zoom-out', '-', map.zoomOut]]) - .enter().append('button').attr('class', function(d) { return d[0] + ' wide'; }) + .enter().append('button').attr('class', function(d) { return d[0] + ' narrow'; }) .text(function(d) { return d[1]; }) .on('click', function(d) { return d[2](); }); - var gc = bar.append('div').attr('class', 'geocode-control'); - gc.append('button').text('?').attr('class','wide'); + var gc = this.append('div').attr('class', 'geocode-control map-control'); + gc.append('button').text('geocode').attr('class','narrow'); gc .on('mouseover', function() { d3.select('.geocode-control input').style('display', 'inline-block'); @@ -138,7 +144,7 @@ window.iD = function(container) { }); }); - this.append('div').attr('class', 'layerswitcher-control') + this.append('div').attr('class', 'map-control layerswitcher-control') .call(iD.layerswitcher(map)); this.append('div') diff --git a/js/id/modes/add_area.js b/js/id/modes/add_area.js index 06857ba32..cf5360112 100644 --- a/js/id/modes/add_area.js +++ b/js/id/modes/add_area.js @@ -2,7 +2,7 @@ iD.modes.AddArea = function() { var mode = { id: 'add-area', button: 'area', - title: '+ Area', + title: 'Area', description: 'Add parks, buildings, lakes, or other areas to the map.' }; diff --git a/js/id/modes/add_place.js b/js/id/modes/add_place.js index 780023e76..576c5fc6f 100644 --- a/js/id/modes/add_place.js +++ b/js/id/modes/add_place.js @@ -1,7 +1,7 @@ iD.modes.AddPlace = function() { var mode = { id: 'add-place', - title: '+ Place', + title: 'Place', description: 'Restaurants, monuments, and postal boxes are points.' }; diff --git a/js/id/modes/add_road.js b/js/id/modes/add_road.js index efb3db113..e1d4b6c59 100644 --- a/js/id/modes/add_road.js +++ b/js/id/modes/add_road.js @@ -2,7 +2,7 @@ iD.modes.AddRoad = function() { var mode = { id: 'add-road', button: 'road', - title: '+ Road', + title: 'Road', description: 'Roads can be highways, streets, pedestrian paths, or even canals' }; diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 4e678aefa..11fff6390 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -458,10 +458,14 @@ iD.Map = function() { .style('display', 'none'); } else { d3.select('div.inspector-wrap') + .html('') .style('display', 'block') .transition() - .style('opacity', 1) - .text(_); + .style('opacity', 1); + d3.select('div.inspector-wrap') + .append('div') + .attr('class','inspector-inner') + .text(_) } }; diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js index 60a84819a..ab3e08433 100644 --- a/js/id/ui/inspector.js +++ b/js/id/ui/inspector.js @@ -42,16 +42,17 @@ iD.Inspector = function() { function inspector(selection) { selection.each(function(entity) { selection.html("").append('button') - .text('x').attr({ title: 'close', 'class': 'close' }) + .attr('class', 'narrow close') + .html("") .on('click', function() { event.close(entity); }); selection.append('div') - .attr('class', 'head').call(drawhead); + .attr('class', 'head inspector-inner').call(drawhead); var table = selection - .append('div').attr('class', 'tag-table-wrap') + .append('div').attr('class', 'inspector-inner tag-table-wrap') .append('table').attr('class', 'inspector'); table.append('thead').append('tr').selectAll('th') @@ -128,16 +129,15 @@ iD.Inspector = function() { function drawbuttons(selection) { selection.append('button') - .attr('class', 'save').text('Save') + .attr('class', 'save wide') + .html("Apply") .on('click', function(entity) { event.changeTags(entity, clean(grabtags())); event.close(entity); }); selection.append('button') - .attr('class', 'cancel').text('Cancel') - .on('click', function(entity) { event.close(entity); }); - selection.append('button') - .attr('class', 'delete').text('Delete') + .attr('class', 'delete wide') + .html("Delete") .on('click', function(entity) { event.remove(entity); }); } }); diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js index f91d80e36..942538987 100644 --- a/js/id/ui/layerswitcher.js +++ b/js/id/ui/layerswitcher.js @@ -15,7 +15,7 @@ iD.layerswitcher = function(map) { function layerswitcher(selection) { selection .append('button') - .attr('class', 'wide') + .attr('class', 'narrow') .text('L') .on('click', function() { content.classed('hide', function() {