diff --git a/css/app.css b/css/app.css
index cceffbb90..a448b212b 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,8 +1,17 @@
+/* Basics
+------------------------------------------------------- */
+
body {
font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
margin:0;
padding:0;
- color:#444;
+ color:#222;
+}
+
+#iD * {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
h2 {
@@ -35,6 +44,10 @@ a:hover {
color:#000;
}
+table th {
+ text-align:left;
+}
+
input[type=text] {
font-size:12px;
line-height:20px;
@@ -45,22 +58,115 @@ input[type=text]:focus {
border-color:#222;
}
-button {
- background:#7092ff;
- border:0;
- color:#fff;
- font-size:12px;
- line-height:18px;
- margin:5px 5px 0 0;
- cursor:pointer;
- border-radius:2px;
+/* Utility Classes
+------------------------------------------------------- */
+
+.fillL { background-color: white;}
+.fillL2 { background: #f7f7f7 url(/img/background-pattern-1.png) repeat;}
+.fillD {
+ background-color: #222222;
+ color: white;
+}
+div.hide {
+ display:none;
}
-button.cancel {
- background:#aaa;
+a.selected {
+ background:#DDE4FF;
}
+
+/* Buttons */
+
+button {
+ border:0;
+ line-height:20px;
+ cursor:pointer;
+ border:1px solid #aaa;
+ box-shadow: inset 0 0 0 1px #fff;
+ color:#222;
+ background: white;
+ font-weight:bold;
+ white-space:nowrap;
+ font-size:14px;
+ display: inline-block;
+ height:40px;
+}
+.fillD button { border: 1px solid black; }
+
+button:hover {
+ background-color: #ececec;
+}
+
+button.active:not([disabled]) {
+ background:#7392ff;
+ color:#fff;
+}
+
+button.wide,
+button.narrow {
+ border-radius:4px;
+}
+
+button.wide {
+ margin: 10px;
+ width: 100px;
+}
+
+button.add-button {
+ width: 80px;
+}
+
+button.narrow,
+button.Browse {
+ width:40px;
+}
+
+.buttons-joined {
+ display: inline-block;
+ margin:10px;
+}
+
+.buttons-joined button {
+ border-right-width: 0;
+ border-radius:0;
+ margin: 0;
+}
+
+.buttons-joined button:first-child {
+ border-radius:4px 0 0 4px;
+}
+
+.buttons-joined button:last-child {
+ border-right-width: 1px;
+ border-radius:0 4px 4px 0;
+}
+
+button[disabled] {
+ color:#eee;
+ cursor:auto;
+}
+
+button.save {
+ display:inline-block;
+ color:#6dc643;
+}
+
button.delete {
- background:#DD5757;
+ color:#ff7070;
+}
+
+button.close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+
+input[type=text] {
+ width:150px;
+ height:20px;
+ border:1px solid #ccc;
+ padding:5px;
+ margin:0;
}
button small {
@@ -71,219 +177,105 @@ button small {
vertical-align: top;
}
-table th {
- text-align:left;
+button .label {
+ margin-right: 3px;
+ text-shadow: 0 1px 0 white;
}
-#map {
- display:block;
- position:absolute;
- overflow:hidden;
- top:45px;
- left:0;
- right:0;
- bottom:0;
- background:#fff;
+.active .label {
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
-#about {
- position:absolute;
- bottom:5px;
- right:5px;
- background:#fff;
- padding:2px 5px;
+/* Icons */
+
+.icon {
+ display:inline-block;
+ vertical-align:top;
+ width:20px;
+ height:20px;
+ background:transparent url(/img/sprite.png) no-repeat 0px 0px;
+ text-indent:-9999px;
+ overflow:hidden;
+ }
+
+.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 {
- background:#e8e8e8;
- border-bottom:1px solid #aaa;
+ border-bottom:1px solid #ccc;
position:absolute;
left:0px;
top:0px;
- height:44px;
right:0;
+ height:60px;
}
-div.layerswitcher-control {
- position:absolute;
- top:170px;
- left:10px;
- color:#222;
-}
+/* Special rules for toolbar icons */
-div.hide {
+button.Browse .label {
+ display: none;
+ }
+
+/* Status box */
+
+.messages {
display:none;
}
-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;
-}
-
-
-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;
-}
-
-#bar button,
-button.white {
- width:80px;
- white-space:nowrap;
- cursor:pointer;
- display:inline-block;
- background:#fff;
- color:#222;
- font-weight:bold;
- font-size:14px;
- line-height:19px;
- border-radius:3px;
- border:1px solid #ccc;
- padding:0 10px;
- height:35px;
- margin:0;
-}
-
-div.buttons-joined {
- margin:5px;
- padding:1px;
- background:#fff;
- display:inline-block;
- border-radius:3px;
- border:1px solid #ccc;
-}
-
-#bar div.buttons-joined button:first-child {
- border-radius:2px 0 0 2px;
-}
-
-#bar div.buttons-joined button:last-child {
- border-right:0;
- border-radius:0 2px 2px 0;
-}
-
-#bar div.buttons-joined button {
- height:31px;
- border:0;
- border-right:1px solid #ccc;
- border-radius:0;
-}
-
-#bar .messages {
- display:none;
-}
-
-.user {
- width:200px;
- position:absolute;
- bottom:10px;
- left:10px;
- background:#fff;
- padding:2px 5px;
- border-radius:3px;
- border:1px solid #aaa;
-}
-
-.user .logout {
- margin-left:10px;
-}
-
-#bar button[disabled] {
- color:#eee;
- cursor:auto;
-}
-
-#bar button.active:not([disabled]) {
- background:#7392ff;
- color:#fff;
-}
-
-#bar button.save {
- display:inline-block;
- color:#6dc643;
-}
-
-#bar button.mini,
-#bar button.mini {
- width:auto;
-}
-
-#bar input[type=text] {
- width:150px;
- height:20px;
- border:1px solid #ccc;
- padding:5px;
- margin:0;
-}
-
-.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;
-}
+/* Inspector */
.inspector-wrap {
- border-radius:3px;
border:1px solid #ccc;
position:absolute;
- top:50px;
- left:50%;
- margin-left:-175px;
- overflow:auto;
- padding:10px;
- background:#fff;
- width:350px;
+ 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;
@@ -304,7 +296,7 @@ div.buttons-joined {
.inspector-wrap table {
border-collapse: collapse;
- width:347px;
+ width:100%;
border-spacing:0;
}
@@ -318,12 +310,147 @@ div.buttons-joined {
border-spacing:0;
}
-.inspector-wrap .close {
- border: 0;
- position: absolute;
- top: 0;
- right: 0;
- cursor: pointer;
+.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
+------------------------------------------------------- */
+
+#map {
+ display:block;
+ position:absolute;
+ overflow:hidden;
+ top:45px;
+ left:0;
+ right:0;
+ bottom:0;
+ background:#fff;
+}
+
+img.tile {
+ position:absolute;
+ transform-origin:0 0;
+ -ms-transform-origin:0 0;
+ -webkit-transform-origin:0 0;
+ -moz-transform-origin:0 0;
+ -o-transform-origin:0 0;
+}
+
+#tile-g {
+ position:absolute;
+ top:0;
+}
+
+/* About Section
+------------------------------------------------------- */
+
+#about {
+ position:absolute;
+ bottom:5px;
+ right:5px;
+ background:#fff;
+ padding:2px 5px;
+}
+
+/* Account Information
+------------------------------------------------------- */
+
+.user {
+ width:200px;
+ position:absolute;
+ bottom:10px;
+ left:10px;
+ background:#fff;
+ padding:2px 5px;
+ border-radius:3px;
+ border:1px solid #aaa;
+}
+
+.user .logout {
+ margin-left:10px;
}
div.typeahead {
@@ -337,9 +464,8 @@ div.typeahead a {
display:block;
}
-a.selected {
- background:#DDE4FF;
-}
+/* Modals
+------------------------------------------------------- */
.modal {
width:640px;
@@ -398,11 +524,8 @@ a.selected {
overflow:auto;
}
-/* mobile tweaks */
-* {
- -webkit-tap-highlight-color:rgba(0,0,0,0);
- -webkit-touch-callout:none;
-}
+/* Tooltips
+------------------------------------------------------- */
#bar button .tooltip {
white-space: normal;
@@ -411,15 +534,16 @@ a.selected {
.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);
}
@@ -452,16 +576,9 @@ a.selected {
border-width: 0 5px 5px;
}
-img.tile {
- position:absolute;
- transform-origin:0 0;
- -ms-transform-origin:0 0;
- -webkit-transform-origin:0 0;
- -moz-transform-origin:0 0;
- -o-transform-origin:0 0;
-}
-
-#tile-g {
- position:absolute;
- top:0;
-}
+/* Mobile Tweaks
+------------------------------------------------------- */
+* {
+ -webkit-tap-highlight-color:rgba(0,0,0,0);
+ -webkit-touch-callout:none;
+}
\ No newline at end of file
diff --git a/css/reset.css b/css/reset.css
index e29c0f5f4..6e0beba61 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -1,4 +1,4 @@
-/* http://meyerweb.com/eric/tools/css/reset/
+/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
@@ -12,8 +12,8 @@ b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
@@ -24,7 +24,7 @@ time, mark, audio, video {
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
+article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
@@ -46,3 +46,112 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
+
+/*
+ * 1. Corrects font family not being inherited in all browsers.
+ * 2. Corrects font size not being inherited in all browsers.
+ * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
+ */
+
+button,
+input,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 2 */
+ margin: 0; /* 3 */
+ padding: 0;
+}
+
+/*
+ * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+ line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+ cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to `content-box` in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ * (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/*
+** 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/background-pattern-1.png b/img/background-pattern-1.png
new file mode 100644
index 000000000..8e3ffcbc4
Binary files /dev/null and b/img/background-pattern-1.png differ
diff --git a/img/background-pattern-opacity.png b/img/background-pattern-opacity.png
new file mode 100644
index 000000000..154dcf0b0
Binary files /dev/null and b/img/background-pattern-opacity.png differ
diff --git a/img/source/design.svg b/img/source/design.svg
index 0d245cfc2..c9f80174f 100644
--- a/img/source/design.svg
+++ b/img/source/design.svg
@@ -21,6 +21,28 @@
inkscape:export-ydpi="90">
+
+
+
+
@@ -112,43 +134,6 @@
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -310,7 +476,8 @@
+ inkscape:label="map"
+ style="display:inline">
@@ -329,50 +496,7 @@
inkscape:groupmode="layer"
id="layer7"
inkscape:label="shadows"
- style="display:inline">
-
-
-
-
-
-
-
+ style="display:inline" />
+ y="-131.63782" />
+ id="g5774"
+ 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" />
+ y="222.86218" />
logout
-
-
-
-
-
-
-
+ d="M 278 54 L 277 55 L 277 57 L 278 58 L 278 62 L 277 63 L 277 65 L 278 66 L 280 66 L 281 65 L 285 65 L 286 66 L 288 66 L 289 65 L 289 63 L 288 62 L 288 58 L 289 57 L 289 55 L 288 54 L 286 54 L 285 55 L 281 55 L 280 54 L 278 54 z M 279 55 C 279.55228 55 280 55.447715 280 56 C 280 56.552285 279.55228 57 279 57 C 278.44772 57 278 56.552285 278 56 C 278 55.447715 278.44772 55 279 55 z M 287 55 C 287.55228 55 288 55.447715 288 56 C 288 56.552285 287.55228 57 287 57 C 286.44772 57 286 56.552285 286 56 C 286 55.447715 286.44772 55 287 55 z M 281 57 L 285 57 L 286 58 L 286 62 L 285 63 L 281 63 L 280 62 L 280 58 L 281 57 z M 279 63 C 279.55228 63 280 63.447715 280 64 C 280 64.552285 279.55228 65 279 65 C 278.44772 65 278 64.552285 278 64 C 278 63.447715 278.44772 63 279 63 z M 287 63 C 287.55228 63 288 63.447715 288 64 C 288 64.552285 287.55228 65 287 65 C 286.44772 65 286 64.552285 286 64 C 286 63.447715 286.44772 63 287 63 z "
+ transform="translate(594,-122.63782)"
+ id="path5288-4" />
-
-
+ d="M 188 54 L 187 55 L 187 56.59375 L 180.59375 63 L 179 63 L 178 64 L 178 66 L 179 67 L 181 67 L 182 66 L 182 64.40625 L 188.40625 58 L 190 58 L 191 57 L 191 55 L 190 54 L 188 54 z M 189 55 C 189.55228 55 190 55.44772 190 56 C 190 56.55229 189.55228 57 189 57 C 188.74848 57 188.51948 56.903302 188.34375 56.75 C 188.30934 56.719983 188.28002 56.690659 188.25 56.65625 C 188.0967 56.480519 188 56.251521 188 56 C 188 55.44772 188.44772 55 189 55 z M 180 64 C 180.25152 64 180.48052 64.096697 180.65625 64.25 L 180.75 64.34375 C 180.9033 64.519481 181 64.748484 181 65 C 181 65.55229 180.55228 66 180 66 C 179.44772 66 179 65.55229 179 65 C 179 64.44772 179.44772 64 180 64 z "
+ transform="translate(81,51.362183)"
+ id="path5387" />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- this thing gets bigger
areas.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Show a menu for doing operations, positioned relativeto selected feature.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Delete
+
+ transform="translate(0,-309)"
+ inkscape:export-filename="/Users/saman/work_repos/iD/img/sprite.png"
+ inkscape:export-xdpi="90"
+ inkscape:export-ydpi="90">
Did you know?
+ y="-115">Did you know?
Add a point of interest to the map.
+ Patterns
+
+
+
+
+
+
+ Baselayers
+
+
+
+
+ OpenStreetMap
+
+
+ Bing Satellite
+
+
+ Overlays
+
+
+ TIGER roads
+
+
+ Standard
+
+
+
+
+
+
+
+
+
+
+
+
+ Cycle Map
+
+
+ GPS Tracks
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Baselayer
+
+
+
+ OpenStreetMap
+
+
+ Bing Satellite
+
+ Overlays
+
+
+ TIGER roads
+
+
+ Standard
+
+
+
+
+
+
+
+
+ Cycle Map
+
+
+ GPS Tracks
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Adjust the opacity
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum
+
+
+
+
+ Dolor sit amet
+ Lorem ipsum
+
+ Edit Overlays
+
+
+ Dolor sit amet
+ Lorem ipsum
+
+
+
+
+
+
diff --git a/img/source/renders/basic-ui.png b/img/source/renders/basic-ui.png
index aa6acfccd..af2a21e42 100644
Binary files a/img/source/renders/basic-ui.png and b/img/source/renders/basic-ui.png differ
diff --git a/img/source/renders/layers-more.png b/img/source/renders/layers-more.png
new file mode 100644
index 000000000..d34f328af
Binary files /dev/null and b/img/source/renders/layers-more.png differ
diff --git a/img/source/renders/layers.png b/img/source/renders/layers.png
new file mode 100644
index 000000000..1059e2978
Binary files /dev/null and b/img/source/renders/layers.png differ
diff --git a/img/source/renders/layerswitcher-default.png b/img/source/renders/layerswitcher-default.png
new file mode 100644
index 000000000..930a5038a
Binary files /dev/null and b/img/source/renders/layerswitcher-default.png differ
diff --git a/img/source/renders/layerswitcher-expand.png b/img/source/renders/layerswitcher-expand.png
new file mode 100644
index 000000000..07f83f508
Binary files /dev/null and b/img/source/renders/layerswitcher-expand.png differ
diff --git a/img/source/renders/layerswitcher-expanded.png b/img/source/renders/layerswitcher-expanded.png
new file mode 100644
index 000000000..688551f09
Binary files /dev/null and b/img/source/renders/layerswitcher-expanded.png differ
diff --git a/img/source/renders/layerswitcher-hover.png b/img/source/renders/layerswitcher-hover.png
new file mode 100644
index 000000000..9f9165f2e
Binary files /dev/null and b/img/source/renders/layerswitcher-hover.png differ
diff --git a/img/source/renders/layerswitcher-inactive.png b/img/source/renders/layerswitcher-inactive.png
new file mode 100644
index 000000000..930a5038a
Binary files /dev/null and b/img/source/renders/layerswitcher-inactive.png differ
diff --git a/img/source/renders/layerswitcher-simplified.png b/img/source/renders/layerswitcher-simplified.png
new file mode 100644
index 000000000..53246ad64
Binary files /dev/null and b/img/source/renders/layerswitcher-simplified.png differ
diff --git a/img/source/renders/opacity.png b/img/source/renders/opacity.png
new file mode 100644
index 000000000..416b8fdf6
Binary files /dev/null and b/img/source/renders/opacity.png differ
diff --git a/img/source/sprite.png b/img/source/sprite.png
new file mode 100644
index 000000000..ff071a8d7
Binary files /dev/null and b/img/source/sprite.png differ
diff --git a/img/source/sprite.svg b/img/source/sprite.svg
new file mode 100644
index 000000000..3a092d2d8
--- /dev/null
+++ b/img/source/sprite.svg
@@ -0,0 +1,835 @@
+
+
+
+
diff --git a/img/sprite.png b/img/sprite.png
new file mode 100644
index 000000000..53d2e0e3b
Binary files /dev/null and b/img/sprite.png differ
diff --git a/js/id/id.js b/js/id/id.js
index 2dff2a791..4700d339e 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -24,7 +24,7 @@ window.iD = function(container) {
.call(map);
var bar = this.append('div')
- .attr('id', 'bar');
+ .attr('id', 'bar').attr('class', 'fillL2');
var buttons_joined = bar.append('div')
.attr('class', 'buttons-joined');
@@ -32,12 +32,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; });
});
@@ -46,17 +52,17 @@ window.iD = function(container) {
.attr('class', 'buttons-joined');
undo_buttons.append('button')
- .attr({ id: 'undo', 'class': 'mini' })
+ .attr({ id: 'undo', 'class': 'narrow' })
.property('disabled', true)
- .html('←')
+ .html("")
.on('click', history.undo)
.call(bootstrap.tooltip()
.placement('bottom'));
undo_buttons.append('button')
- .attr({ id: 'redo', 'class': 'mini' })
+ .attr({ id: 'redo', 'class': 'narrow' })
.property('disabled', true)
- .html('→')
+ .html("")
.on('click', history.redo)
.call(bootstrap.tooltip()
.placement('bottom'));
@@ -67,8 +73,8 @@ window.iD = function(container) {
.attr('class', 'hello');
bar.append('button')
- .attr('class', 'save')
- .html("Upload")
+ .attr('class', 'save wide')
+ .html("Save")
.attr('title', 'Save changes to OpenStreetMap, making them visible to other users')
.call(bootstrap.tooltip()
.placement('bottom'))
@@ -108,16 +114,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]; })
+ .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('?');
+ 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');
@@ -139,11 +145,11 @@ 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')
- .attr('class', 'inspector-wrap')
+ .attr('class', 'inspector-wrap fillL')
.style('display', 'none');
this.append('div')
diff --git a/js/id/modes/add_area.js b/js/id/modes/add_area.js
index 9a0989198..ae19f193d 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 82b423368..fe16ac20c 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 d3e57b066..471bba894 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 fafbea5bc..d5b8d9950 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -418,10 +418,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 6c51d0d99..31a3e986a 100644
--- a/js/id/ui/inspector.js
+++ b/js/id/ui/inspector.js
@@ -49,16 +49,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')
@@ -135,16 +136,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 7484fb0c7..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', 'white')
+ .attr('class', 'narrow')
.text('L')
.on('click', function() {
content.classed('hide', function() {