From a4a5812816c1e58f32f5736adbe776499044d55a Mon Sep 17 00:00:00 2001 From: samanpwbb Date: Tue, 10 Feb 2015 13:24:10 -0500 Subject: [PATCH] style cleanup --- css/app.css | 55 +++++++------------- js/id/modes/save.js | 119 +++++++++++++++++++++++++++++++------------- js/id/ui/confirm.js | 2 +- 3 files changed, 103 insertions(+), 73 deletions(-) diff --git a/css/app.css b/css/app.css index 56c06f1cd..bebf31704 100644 --- a/css/app.css +++ b/css/app.css @@ -239,9 +239,6 @@ ul li { list-style: none;} background-color: white; color: #7092FF; cursor: pointer; - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } .toggle-list > label:hover { @@ -823,9 +820,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} text-overflow: ellipsis; overflow: hidden; border-left: 1px solid rgba(0, 0, 0, .1); - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; } .feature-list-item .label .icon { @@ -905,9 +899,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} text-overflow: ellipsis; overflow: hidden; border-left: 1px solid rgba(0, 0, 0, .1); - -moz-transition: all 100ms; - -o-transition: all 100ms; - transition: all 100ms; border-radius: 0 3px 3px 0; } @@ -1192,6 +1183,17 @@ a:hover .icon.out-link { background-position: -500px -14px;} width: 100%; } +/* Hide placeholder for radio buttons if another is active, or not in hover state */ +.toggle-list label.active ~ .placeholder, +.toggle-list .placeholder { + padding: 0; + opacity: 0; + width: 0; + line-height: 0; + display: block; + overflow: hidden; +} + /* adding additional preset fields */ .more-fields { @@ -2489,11 +2491,11 @@ img.wiki-image { float: left; } -.error-container { +.conflict-container { border-bottom: 1px solid #ccc; } -.error-description { +.conflict-description { padding: 5px 20px; display: block; } @@ -2502,24 +2504,24 @@ img.wiki-image { padding: 20px 20px 0 20px; } -.error-container:not(.expanded) .error-description:hover { +.conflict-container:not(.expanded) .conflict-description:hover { background: #ececec; } -.error-container.expanded { +.conflict-container.expanded { padding: 10px 0; background: #f6f6f6; } -.error-detail-container { +.conflict-detail-container { padding: 0 20px 10px 20px; } -.error-choice-buttons { +.conflict-choice-buttons { margin-top: 10px; } -.error-choice-button { +.conflict-choice-button { height: 30px; } @@ -2703,28 +2705,7 @@ img.wiki-image { } .tooltip-inner .keyhint { - font-size: 10px; - padding: 0 7px; font-weight: bold; - display: inline-block; - border-radius: 2px; - border: 1px solid #CCC; - position: relative; - z-index: 1; - text-align: left; -} - -.tooltip-inner .keyhint::after { - content: ""; - position: absolute; - border-radius: 2px; - height: 10px; - width: 100%; - z-index: 0; - bottom: -4px; - left: -1px; - border: 1px solid #CCC; - border-top: 0; } /* Exceptions for tooltip layouts */ diff --git a/js/id/modes/save.js b/js/id/modes/save.js index 02ed82ea4..e87f00830 100644 --- a/js/id/modes/save.js +++ b/js/id/modes/save.js @@ -205,7 +205,7 @@ iD.modes.Save = function(context) { var message = body.append('div') .attr('class','message-text conflicts-message-text'); - addItems(confirm, conflicts); + addConflictItems(confirm, conflicts); var buttons = body .append('div') @@ -231,30 +231,17 @@ iD.modes.Save = function(context) { } - function showErrors() { - confirm = iD.ui.confirm(context.container()); - loading.close(); - - confirm - .select('.modal-section.header') - .append('h3') - .text(t('save.error')); - - addItems(confirm, errors); - confirm.okButton(); - } - - function addItems(confirm, data) { + function addConflictItems(confirm, data) { var message = confirm .select('.message-text'); var items = message - .selectAll('.error-container') + .selectAll('.conflict-container') .data(data); var enter = items.enter() .append('div') - .attr('class', 'error-container') + .attr('class', 'conflict-container') .classed('expanded', function(d, i) { return i === 0; }) @@ -264,7 +251,7 @@ iD.modes.Save = function(context) { enter .append('a') - .attr('class', 'error-description') + .attr('class', 'conflict-description') .attr('href', '#') .text(function(d) { return d.msg || t('save.unknown_error_details'); }) .on('click', function(d) { @@ -274,33 +261,32 @@ iD.modes.Save = function(context) { var details = enter .append('div') - .attr('class', 'error-detail-container') + .attr('class', 'conflict-detail-container') .style('display', function(d,i) { return i === 0 ? 'block' : 'none'; }); details .append('ul') - .attr('class', 'error-detail-list') + .attr('class', 'conflict-detail-list') .selectAll('li') .data(function(d) { return d.details || []; }) .enter() .append('li') - .attr('class', 'error-detail-item') + .attr('class', 'conflict-detail-item') .text(function(d) { return d; }); details .append('div') - .attr('class', 'error-choice-buttons joined cf') + .attr('class', 'conflict-choice-buttons joined cf') .selectAll('button') .data(function(d) { return d.choices || []; }) .enter() .append('button') - .attr('class', 'error-choice-button action col6') + .attr('class', 'conflict-choice-button action col6') .text(function(d) { return d.text; }) .on('click', function(d) { d.action(); - d3.event.preventDefault(); var container = this.parentElement.parentElement.parentElement; var next = container.parentElement.firstElementChild.classList.contains('expanded') ? container.nextElementSibling : container.parentElement.firstElementChild; @@ -321,6 +307,7 @@ iD.modes.Save = function(context) { .transition() .style('opacity', 0) .remove(); + d3.event.preventDefault(); }); items.exit() @@ -346,20 +333,82 @@ iD.modes.Save = function(context) { zoomToEntity(d); error.classed('expanded', !exp); - }; - - function zoomToEntity(d) { - var entity = context.graph().entity(d.id); - - if (entity) { - context.map().zoomTo(entity); - context.surface().selectAll( - iD.util.entityOrMemberSelector([entity.id], context.graph())) - .classed('hover', true); - } } } + + function showErrors() { + confirm = iD.ui.confirm(context.container()); + loading.close(); + + confirm + .select('.modal-section.header') + .append('h3') + .text(t('save.error')); + + addErrorItems(confirm, errors); + confirm.okButton(); + } + + function addErrorItems(confirm, data) { + var message = confirm + .select('.modal-section.message-text'); + + var items = message + .selectAll('.error-container') + .data(data); + + var enter = items.enter() + .append('div') + .attr('class', 'error-container'); + + enter + .append('a') + .attr('class', 'error-description') + .attr('href', '#') + .classed('hide-toggle', true) + .text(function(d) { return d.msg || t('save.unknown_error_details'); }) + .on('click', function() { + var error = d3.select(this), + detail = d3.select(this.nextElementSibling), + exp = error.classed('expanded'); + + detail.style('display', exp ? 'none' : 'block'); + error.classed('expanded', !exp); + + d3.event.preventDefault(); + }); + + var details = enter + .append('div') + .attr('class', 'error-detail-container') + .style('display', 'none'); + + details + .append('ul') + .attr('class', 'error-detail-list') + .selectAll('li') + .data(function(d) { return d.details || []; }) + .enter() + .append('li') + .attr('class', 'error-detail-item') + .text(function(d) { return d; }); + + items.exit() + .remove(); + } + + } + + function zoomToEntity(d) { + var entity = context.graph().entity(d.id); + + if (entity) { + context.map().zoomTo(entity); + context.surface().selectAll( + iD.util.entityOrMemberSelector([entity.id], context.graph())) + .classed('hover', true); + } } function success(e, changeset_id) { diff --git a/js/id/ui/confirm.js b/js/id/ui/confirm.js index 367877e79..88569470a 100644 --- a/js/id/ui/confirm.js +++ b/js/id/ui/confirm.js @@ -18,7 +18,7 @@ iD.ui.confirm = function(selection) { modal.okButton = function() { buttons .append('button') - .attr('class', 'action col2') + .attr('class', 'action col4') .on('click.confirm', function() { modal.remove(); })