diff --git a/css/app.css b/css/app.css index 9b3a118a4..36b52075c 100644 --- a/css/app.css +++ b/css/app.css @@ -122,19 +122,6 @@ a:hover { /* Forms ------------------------------------------------------- */ -.fillD textarea, -.fillD input[type=text] { - background-color: black; - border:1px solid rgba(255, 255, 255, .25); - color: white; -} - -.fillD textarea:focus, -.fillD input[type=text]:focus { - background-color: black; - border:1px solid rgba(255, 255, 255, .5); -} - textarea { resize: vertical; font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif; @@ -263,8 +250,8 @@ ul.link-list li:last-child { } .fillD { - background:rgba(0,0,0,.8); - color: #6C6C6C; + background:rgba(0,0,0,.5); + color: white; } .fl { float: left;} @@ -339,8 +326,10 @@ button.active { cursor: url(../img/cursor-pointing.png) 6 1, pointer; } +button[disabled], button.disabled { - background: #6c6c6c; + background-color: rgba(255,255,255,.25); + color: rgba(0,0,0,.5); cursor: auto; } @@ -358,16 +347,6 @@ button.minor { border-radius: 0; } -button.minor:hover { -} - -button.centered { - float: none; - margin-left: auto; - margin-right: auto; - display: block; -} - .button-wrap { display: inline-block; padding-right:10px; @@ -377,9 +356,9 @@ button.centered { .button-wrap button:only-child { width: 100%;} .button-wrap:last-of-type { padding-right: 0;} -.joined button { - border-right: 1px solid rgba(0,0,0,.5); +.joined button { border-radius:0; + border-right: 1px solid rgba(0,0,0,.5); } .joined button:first-child { @@ -394,17 +373,11 @@ button.centered { button.action { background: #7092ff; } + button.action:hover { background: #597BE7; } -button.cancel { - background-color: #ff7070; -} -button.cancel:hover { - background-color: #ef5454; -} - button.save.has-count { padding: 9px; } @@ -441,16 +414,6 @@ button.save.has-count .count::before { border-right: 6px solid rgba(255,255,255,.5); } -button[disabled] { - cursor:auto; - background: rgba(255,255,255,.5); - pointer-events:none; -} - -button[disabled] .label { - color: rgba(0,0,0,.5); -} - /* Icons */ .icon { @@ -463,11 +426,6 @@ button[disabled] .label { overflow:hidden; } -.icon.big { - width: 40px; - height: 40px; -} - .icon-pre-text { margin-right: 3px; } @@ -555,7 +513,6 @@ button[disabled] .icon.nearby { background-position: -340px -40px;} .icon.note { background-position: -120px -200px;} .icon.wheelchair { background-position: -140px -200px;} - /* Toggle icon is special */ .toggle.icon { background-position: 0px -180px;} @@ -574,7 +531,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} top:0px; right:0; height:60px; - border-radius: 0; } /* Header for modals / panes @@ -617,8 +573,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} ------------------------------------------------------- */ .inspector-wrap { - border-radius: 0 0 0 4px; - background:rgba(0,0,0,.8); position: absolute; height: 100%; right: 0; @@ -1835,10 +1789,9 @@ div.typeahead a:first-child { text-align: center; } -.modal a.action, .modal-splash button.action { +.modal-actions button { font-weight: normal; color: #7092FF; - background-color: white; border-bottom: 1px solid #CCC; border-radius: 0; height: 180px; @@ -1848,12 +1801,7 @@ div.typeahead a:first-child { transition: all 200ms; } -.modal a.action:hover, .modal-splash button.action:hover { - background-color: #ececec; -} - -a.action:before, -.modal-splash button.action:before { +.modal-actions button:before { display: block; content: ''; height: 100px; @@ -1863,14 +1811,26 @@ a.action:before, background:transparent url(../img/sprite.png) no-repeat 0px -220px; } -/* Success Modal -------------------------------------------------------- */ - -a.action.osm { +.modal-actions button:first-child { border-right: 1px solid #CCC; } -a.action.twitter:before { +/* Restore Modal +------------------------------------------------------- */ + +.modal-actions button.restore:before { + background-position: -400px -220px; +} + +.modal-actions button.reset:before { + background-position: -500px -220px; +} + + +/* Success Modal +------------------------------------------------------- */ + +.modal-actions button.twitter:before { background-position: -100px -220px; } @@ -1881,15 +1841,11 @@ a.action.twitter:before { text-align: center; } -.modal-splash .action.start { - border-left: 1px solid #CCC; -} - -.modal-splash .action.walkthrough:before { +.modal-actions button.walkthrough:before { background-position: -200px -220px; } -.modal-splash .action.start:before { +.modal-actions button.start:before { background-position: -300px -220px; } diff --git a/img/source/sprite.svg b/img/source/sprite.svg index 12bb15915..f7ebf53c3 100644 --- a/img/source/sprite.svg +++ b/img/source/sprite.svg @@ -9,15 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="500" + width="600" height="320" id="svg12393" version="1.1" - inkscape:version="0.48.2 r9819" + inkscape:version="0.48.1 r9760" sodipodi:docname="sprite.svg" - inkscape:export-filename="/Users/saman/work_repos/iD/img/sprite2x.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"> @@ -232,6 +232,13 @@ inkscape:label="sprite" transform="translate(-25,3.0624999e-6)" style="display:inline"> + @@ -2067,9 +2074,10 @@ style="fill:#1a1a1a;fill-opacity:1"> + id="path3648" + inkscape:connector-curvature="0" /> + id="path7490" + inkscape:connector-curvature="0" /> + + + + + + + + + + diff --git a/img/sprite.png b/img/sprite.png index 5f4a91d67..8e0e3da13 100644 Binary files a/img/sprite.png and b/img/sprite.png differ diff --git a/js/id/ui/restore.js b/js/id/ui/restore.js index 2ff639f31..d8f052cbe 100644 --- a/js/id/ui/restore.js +++ b/js/id/ui/restore.js @@ -23,22 +23,18 @@ iD.ui.Restore = function(context) { .text(t('restore.description')); var buttonWrap = introModal.append('div') - .attr('class', 'modal-section col12'); + .attr('class', 'modal-actions cf'); - var buttons = buttonWrap - .append('div') - .attr('class', 'button-wrap joined col4'); - - var restore = buttons.append('button') - .attr('class', 'save action button col6') + var restore = buttonWrap.append('button') + .attr('class', 'restore col6') .text(t('restore.restore')) .on('click', function() { context.history().load(); modal.remove(); }); - buttons.append('button') - .attr('class', 'cancel button col6') + buttonWrap.append('button') + .attr('class', 'reset col6') .text(t('restore.reset')) .on('click', function() { context.history().clearSaved(); @@ -47,4 +43,6 @@ iD.ui.Restore = function(context) { restore.node().focus(); }; + modal.select('button.close').attr('class','hide'); + }; diff --git a/js/id/ui/splash.js b/js/id/ui/splash.js index a14c9168c..a253ed5d5 100644 --- a/js/id/ui/splash.js +++ b/js/id/ui/splash.js @@ -1,7 +1,7 @@ iD.ui.Splash = function(context) { return function(selection) { - if (context.storage('sawSplash')) - return; + // if (context.storage('sawSplash')) + // return; context.storage('sawSplash', true); @@ -18,10 +18,19 @@ iD.ui.Splash = function(context) { .attr('class','modal-section cf') .append('h3').text(t('splash.welcome')); - var buttons = introModal.append('div').attr('class', 'cf'); + introModal.append('div') + .attr('class','modal-section') + .append('p') + .html(t('splash.text', { + version: iD.version, + website: 'ideditor.com', + github: 'github.com' + })); + + var buttons = introModal.append('div').attr('class', 'modal-actions cf'); buttons.append('button') - .attr('class', 'col6 action modal-section walkthrough') + .attr('class', 'col6 walkthrough') .text(t('splash.walkthrough')) .on('click', function() { d3.select(document.body).call(iD.ui.intro(context)); @@ -39,7 +48,7 @@ iD.ui.Splash = function(context) { }); buttons.append('button') - .attr('class', 'col6 action modal-section start') + .attr('class', 'col6 start') .text(t('splash.start')) .on('click', function() { modal @@ -55,15 +64,6 @@ iD.ui.Splash = function(context) { .remove(); }); - introModal.append('div') - .attr('class','modal-section') - .append('p') - .html(t('splash.text', { - version: iD.version, - website: 'ideditor.com', - github: 'github.com' - })); - modal.select('button.close').attr('class','hide'); }; diff --git a/js/id/ui/success.js b/js/id/ui/success.js index 67a75c62b..87b13ae8f 100644 --- a/js/id/ui/success.js +++ b/js/id/ui/success.js @@ -16,18 +16,18 @@ iD.ui.Success = function(connection) { var message = (m || 'Edited OSM!') + connection.changesetUrl(changeset.id); - var links = body.append('div').attr('class','cf'); + var links = body.append('div').attr('class','modal-actions cf'); - links.append('a') - .attr('class','col6 success-action modal-section osm') + links.append('button') + .attr('class','col6 osm') .attr('target', '_blank') .attr('href', function() { return connection.changesetUrl(changeset.id); }) .text(t('view_on_osm')); - links.append('a') - .attr('class','col6 success-action modal-section twitter') + links.append('button') + .attr('class','col6 twitter') .attr('target', '_blank') .attr('href', function() { return 'https://twitter.com/intent/tweet?source=webclient&text=' +