diff --git a/css/app.css b/css/app.css index 3c2e250d6..5a910da34 100644 --- a/css/app.css +++ b/css/app.css @@ -55,11 +55,11 @@ strong { } a:visited, a { - color: #b0b0b0; + color: #7092ff; } a:hover { - color:#222; + color:#154dff; } input[type=text] { @@ -90,8 +90,7 @@ table th { /* UI Lists ------------------------------------------------------- */ -ul.toggle-list { -} +ul li { list-style: none;} ul.toggle-list li a { font-weight: bold; @@ -113,6 +112,21 @@ a.selected { color:#222; } + +ul.link-list li { + float: left; + display: inline-block; + margin-left: 10px; + padding-left: 10px; + border-left: 1px solid white; +} + +ul.link-list li:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; +} + /* Mode-specific styles ------------------------------------------------------- */ @@ -147,6 +161,7 @@ a.selected { .fillL2 { background: #f7f7f7 url(../img/background-pattern-1.png) repeat;} .fillD { background-color: #222222; + background-color: rgba(0,0,0,.8); color: white; } @@ -158,6 +173,15 @@ form.hide { display:none; } +.content { + background-color:#fff; + border-radius: 4px; + border: 1px solid #ccc; +} + +.pad1 { +padding: 10px;} + /* Buttons */ button { @@ -320,23 +344,27 @@ button.action .label { .icon.zoom-out { background-position: -260px 0px;} .icon.geocode { background-position: -280px 0px;} .icon.layers { background-position: -300px 0px;} +.icon.avatar { background-position: -320px 0px;} +.icon.nearby { background-position: -340px 0px;} -/*.active .icon.browse { background-position: 0px -20px;} -.active .icon.add-point { background-position: -20px -20px;} -.active .icon.add-line { 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 .icon.apply { background-position: -120px -20px;} -.active .icon.save { background-position: -140px -20px;} -.active .icon.close { background-position: -160px -20px;} -.active .icon.delete { background-position: -180px -20px;} -.active .icon.remove { background-position: -200px -20px;} -.active .icon.inspect { background-position: -220px -20px;} -.active .icon.zoom-in { background-position: -240px -20px;} -.active .icon.zoom-out { background-position: -260px -20px;} -.active .icon.geocode { background-position: -280px -20px;} -.active .icon.layers { background-position: -300px -20px;}*/ +.fillD .icon.browse { background-position: 0px -20px;} +.fillD .icon.add-point { background-position: -20px -20px;} +.fillD .icon.add-line { background-position: -40px -20px;} +.fillD .icon.add-area { background-position: -60px -20px;} +.fillD .icon.undo { background-position: -80px -20px;} +.fillD .icon.redo { background-position: -100px -20px;} +.fillD .icon.apply { background-position: -120px -20px;} +.fillD .icon.save { background-position: -140px -20px;} +.fillD .icon.close { background-position: -160px -20px;} +.fillD .icon.delete { background-position: -180px -20px;} +.fillD .icon.remove { background-position: -200px -20px;} +.fillD .icon.inspect { background-position: -220px -20px;} +.fillD .icon.zoom-in { background-position: -240px -20px;} +.fillD .icon.zoom-out { background-position: -260px -20px;} +.fillD .icon.geocode { background-position: -280px -20px;} +.fillD .icon.layers { background-position: -300px -20px;} +.fillD .icon.avatar { background-position: -320px -20px;} +.fillD .icon.nearby { background-position: -340px -20px;} button[disabled] .icon.browse { background-position: 0px -40px;} button[disabled] .icon.add-point { background-position: -20px -40px;} @@ -354,6 +382,8 @@ button[disabled] .icon.zoom-in { background-position: -240px -40px;} button[disabled] .icon.zoom-out { background-position: -260px -40px;} button[disabled] .icon.geocode { background-position: -280px -40px;} button[disabled] .icon.layers { background-position: -300px -40px;} +button[disabled] .icon.avatar { background-position: -320px -40px;} +button[disabled] .icon.nearby { background-position: -340px -40px;} /* Toggle Icon is special */ .toggle.icon { background-position: 0px -180px;} @@ -494,12 +524,6 @@ button.Browse .label { display: block; } -.content { - background-color:#fff; - border-radius: 4px; - border: 1px solid #ccc; -} - /* Zoomer */ .zoombuttons { @@ -613,34 +637,39 @@ img.tile { /* About Section ------------------------------------------------------- */ -#about { +.about-block { position:absolute; - bottom:5px; - right:5px; - background:#fff; - padding:2px 5px; + bottom:0px; } -#about #user-list a:not(:last-child):after { +#about { + bottom:0px; + right:0px; + border-radius:3px 0 0 0; +} + +#user-list { + border-radius:3px 3px 0 0; + right: 330px; + max-width: 300px; +} + +#user-list a:not(:last-child):after { content: ', '; } -/* Account Information -------------------------------------------------------- */ +/* Account Information */ -.user { - width:200px; +.user-container { position:absolute; - bottom:10px; - left:10px; - background:#fff; - padding:2px 5px; - border-radius:3px; - border:1px solid #aaa; + left:0px; + border-radius:0 3px 0 0; } -.user .logout { +.user-container .logout { margin-left:10px; + border-left: 1px solid white; + padding-left: 10px; } /* typeahead dropdowns @@ -738,7 +767,6 @@ div.typeahead a:first-child { left:70px; width:250px; height:50px; - padding:10px; background:#fff; font-size: 20px; font-weight: bold; diff --git a/img/source/design.svg b/img/source/design.svg index 27ef8cd15..f47abee08 100644 --- a/img/source/design.svg +++ b/img/source/design.svg @@ -419,24 +419,78 @@ ry="0.5" /> + + + + + + + + + + + + + + + image/svg+xml - + @@ -583,7 +637,19474 @@ inkscape:groupmode="layer" id="layer6" inkscape:label="map" - style="display:inline" /> + style="display:inline" + sodipodi:insensitive="true"> + + Commit + x="550.40125" + y="117.36218">Save Welcome to the iD editor - + d="m 446.67679,2.9063768 86,0 c 2.216,0 4,1.784 4,4 l 0,31.0000002 c 0,2.216 -1.784,4 -4,4 l -86,0 c -2.216,0 -4,-1.784 -4,-4 l 0,-31.0000002 c 0,-2.216 1.784,-4 4,-4 z" + id="rect16652" + inkscape:connector-curvature="0" + sodipodi:nodetypes="sssssssss" /> Delete + + style="fill:#ffffff;fill-opacity:1;display:inline" + transform="translate(253,-162)"> + style="fill:#ffffff;fill-opacity:1"> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate" /> @@ -2129,7 +21656,7 @@ inkscape:connector-curvature="0" id="path5636-3" d="m 35.000006,114.86219 -2.999997,-3.00001 2.999992,-3 z" - style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate" /> + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate" /> + id="tspan54723" + x="-472.15625" + y="291.03125" /> + + + + samanbb + + + + + + + + + + + + + + + + + + + Viewing edits by ideditor, aude, samanbb + + + + + + + + + + + + + + + + + report a bug + github + + + + + + Welcome, samanbb + Logout + + Viewing edits by ideditor, aude, samanbb + + + + + + + + + + + + + + + + + + imagery provided by Bing + report a bug + github + + + + + Added a point + transform="translate(205,197.63782)"> @@ -2435,8 +22414,9 @@ y="109.36218" /> Moved an area + transform="translate(408,237.63782)"> + style="color:#000000;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:115;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> + style="color:#000000;fill:#b0b0b0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:115;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> @@ -3966,7 +23950,7 @@ transform="translate(-570,10)"> + x="1290" + y="-160" /> + id="g44643" + transform="translate(150,-220)"> - - - + + + + + + transform="matrix(2,0,0,2,-1006,-505.72436)"> + id="defs12395"> + + + + @@ -141,6 +152,10 @@ orientation="0,1" position="145,60" id="guide47496" /> + @@ -159,21 +174,237 @@ inkscape:groupmode="layer" id="layer1" transform="translate(-25,-62.362183)" - style="display:none"> - + style="display:inline"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + transform="translate(-25,2.6796875e-6)"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/img/sprite.png b/img/sprite.png index 19d4ef5e9..8138e5980 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 9b7844a13..6e9a89990 100644 --- a/js/id/id.js +++ b/js/id/id.js @@ -98,7 +98,7 @@ window.iD = function(container) { .placement('bottom')); this.append('div') - .attr('class', 'user') + .attr('class', 'user-container pad1 fillD about-block') .append('div') .attr('class', 'hello'); @@ -166,15 +166,19 @@ window.iD = function(container) { .style('display', 'none'); var about = this.append('div') - .attr('id', 'about') - .html("code " + - "report a bug" + - " "); + + about.append('ul') + .attr('id','about') + .attr('class','pad1 fillD about-block link-list') + .html("
  • view code
    • " + + "
  • report a bug
    • " + + "
  • imagery provided by bing
    • "); about.append('div') .attr('id', 'user-list') + .attr('class','about-block fillD pad1') .append('span') - .text('edited by '); + .text('Viewing contributions by '); history.on('change.buttons', function() { var undo = history.undoAnnotation(), @@ -215,7 +219,7 @@ window.iD = function(container) { .center([-77.02405, 38.87952]); } - d3.select('.user').call(iD.userpanel(connection) + d3.select('.user-container').call(iD.userpanel(connection) .on('logout', connection.logout) .on('login', connection.authenticate)); diff --git a/js/id/ui/notice.js b/js/id/ui/notice.js index 34ab460cd..d1d3eec52 100644 --- a/js/id/ui/notice.js +++ b/js/id/ui/notice.js @@ -3,6 +3,7 @@ iD.notice = function(selection) { notice = {}; notice.message = function(_) { + selection.attr('class','inner') if (!arguments.length) return _; if (!message && _) { selection diff --git a/js/id/ui/userpanel.js b/js/id/ui/userpanel.js index 6c126898a..6543620cd 100644 --- a/js/id/ui/userpanel.js +++ b/js/id/ui/userpanel.js @@ -7,8 +7,8 @@ iD.userpanel = function(connection) { if (connection.authenticated()) { selection.style('display', 'block'); connection.userDetails(function(user_details) { + selection.append('span').attr('class','icon avatar icon-pre-text') selection.append('span') - .text('signed in as ') .append('a') .attr('href', connection.url() + '/user/' + user_details.display_name)