From 62879c51737fd5558730bbbac7774ed022f76aae Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Fri, 22 Mar 2013 14:25:40 -0700 Subject: [PATCH] Use a label element rather than positioning hack --- css/app.css | 71 ++++++++++++++------------------- js/id/ui/preset.js | 13 +++--- js/id/ui/preset/address.js | 12 ++++-- js/id/ui/preset/check.js | 6 ++- js/id/ui/preset/combo.js | 12 +++--- js/id/ui/preset/defaultcheck.js | 2 +- js/id/ui/preset/input.js | 1 + js/id/ui/preset/radio.js | 14 +++---- js/id/ui/preset/textarea.js | 1 + 9 files changed, 64 insertions(+), 68 deletions(-) diff --git a/css/app.css b/css/app.css index 3e846896a..15daa67e6 100644 --- a/css/app.css +++ b/css/app.css @@ -147,6 +147,7 @@ input[type=email] { background-color: white; border:1px solid #ccc; padding:5px 10px; + height:30px; width: 100%; border-radius:4px; -webkit-transition: all 100ms; @@ -159,11 +160,6 @@ input:focus { background-color: #F1F1F1; } -input[type=text] { - padding:5px 10px; - height:30px; -} - input.major { width: 100%; padding:5px 10px; @@ -919,51 +915,47 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} background: #eef0ff; } -.preset-field h4 .modified-icon { +.preset-field .modified-icon { opacity: 0.2; display: none; pointer-events: all; } -.preset-field h4 .modified-icon:hover { +.preset-field .modified-icon:hover { opacity: 0.5; } -.preset-field.modified h4 .modified-icon { +.preset-field.modified .modified-icon { display: inline-block; } -.preset-field h4[for*="input-"] { +.preset-field .preset-label { + font-weight: bold; border: 1px solid #cfcfcf; padding: 5px 10px; background: #f6f6f6; - position: absolute; - left: 20px; - right: 20px; + display: block; border-radius: 4px 4px 0 0; - pointer-events: none; - z-index: 2; } -.preset-field h4 + input, -h4 + .input-wrap-position input, -h4 + .preset-input input:first-child { - padding-top: 35px; - height: 60px; +.preset-field > input, +.preset-field > textarea, +.preset-field .preset-input-wrap { + border: 1px solid #CCC; + border-top: 0; + border-radius: 0 0 4px 4px; } -.preset-field h4 + textarea { - padding-top: 35px; - height: 100px; +.preset-field textarea { + height: 65px; } -.preset-field h4[for="input-building:levels"], -.preset-field h4[for="input-ele"], -.preset-field.checkselect h4 { - right: 50%; +.preset-field-levels, +.preset-field-elevation, +.preset-field.checkselect { + width: 60%; } -.preset-field-name h4 + input { - padding-top: 35px; - height: 70px; +.preset-field-name input { + height: 35px; font-size: 18px; font-weight: bold; } @@ -998,7 +990,6 @@ button.preset-add-field { input[type=number] { position: relative; - width: 50%; padding-right: 65px; } @@ -1049,14 +1040,11 @@ input[type=number] { /* preset form checkbox */ -.checkselect label { +.checkselect label:last-of-type { display: block; - padding: 35px 5px 5px 5px; - border-radius: 4px; - margin-right: 50%; + padding: 5px; box-sizing: border-box; color: #999; - border: 1px solid #CCC; } .checkselect label:hover { @@ -1082,11 +1070,8 @@ input[type=number] { .radio-wrap { display: block; - padding: 30px 0 0 0; - border-radius: 4px; box-sizing: border-box; color: #999; - border: 1px solid #CCC; overflow: hidden; } @@ -1108,12 +1093,12 @@ input[type=number] { /* Preset form address */ .preset-field .addr-housename { - border-bottom: none; - border-radius: 4px 4px 0 0; + border: none; } .preset-field .addr-number { width: 20%; + border-left: none; border-right: none; border-bottom: none; border-radius: 0; @@ -1121,11 +1106,15 @@ input[type=number] { .preset-field .addr-street { width: 80%; - border-radius: 0; + border-right: none; border-bottom: none; + border-radius: 0; } .preset-field .addr-city { + border-left: none; + border-right: none; + border-bottom: none; border-radius: 0 0 4px 4px; } diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index f69517842..062a94b8c 100644 --- a/js/id/ui/preset.js +++ b/js/id/ui/preset.js @@ -68,15 +68,16 @@ iD.ui.preset = function(context, entity) { return 'preset-field preset-field-' + field.id + ' fillL inspector-inner col12'; }); - sections.append('h4') - .attr('for', function(d) { return 'input-' + d.key; }) - .text(function(d) { return d.label(); }) + sections.append('label') + .attr('class', 'preset-label') + .attr('for', function(field) { return 'preset-input-' + field.id; }) + .text(function(field) { return field.label(); }) .append('button') .attr('class', 'fr icon undo modified-icon') - .on('click', function(d) { + .on('click', function(field) { var original = context.graph().base().entities[entity.id]; var t = {}; - (d.keys || [d.key]).forEach(function(key) { + (field.keys || [field.key]).forEach(function(key) { t[key] = original ? original.tags[key] : undefined; }); event.change(t); @@ -90,7 +91,7 @@ iD.ui.preset = function(context, entity) { .on('close', event.close) .on('change', event.change); - event.on('setTags.' + field.key || field.type, function (tags) { + event.on('setTags.' + field.id, function(tags) { i.tags(_.clone(tags)); }); diff --git a/js/id/ui/preset/address.js b/js/id/ui/preset/address.js index b3d947fbe..4949f1257 100644 --- a/js/id/ui/preset/address.js +++ b/js/id/ui/preset/address.js @@ -41,15 +41,19 @@ iD.ui.preset.address = function(field, context) { function close() { return iD.behavior.accept().on('accept', event.close); } - housename = selection.append('input') + var wrap = selection.append('div') + .attr('class', 'preset-input-wrap'); + + housename = wrap.append('input') .property('type', 'text') .attr('placeholder', field.t('placeholders.housename')) .attr('class', 'addr-housename') + .attr('id', 'preset-input-' + field.id) .on('blur', change) .on('change', change) .call(close()); - housenumber = selection.append('input') + housenumber = wrap.append('input') .property('type', 'text') .attr('placeholder', field.t('placeholders.number')) .attr('class', 'addr-number') @@ -57,7 +61,7 @@ iD.ui.preset.address = function(field, context) { .on('change', change) .call(close()); - var streetwrap = selection.append('span') + var streetwrap = wrap.append('span') .attr('class', 'input-wrap-position'); street = streetwrap.append('input') @@ -67,7 +71,7 @@ iD.ui.preset.address = function(field, context) { .on('blur', change) .on('change', change); - city = selection.append('input') + city = wrap.append('input') .property('type', 'text') .attr('placeholder', field.t('placeholders.city')) .attr('class', 'addr-city') diff --git a/js/id/ui/preset/check.js b/js/id/ui/preset/check.js index 4c46cda91..ae28dda84 100644 --- a/js/id/ui/preset/check.js +++ b/js/id/ui/preset/check.js @@ -11,11 +11,13 @@ iD.ui.preset.check = function(field) { selection.classed('checkselect', 'true'); - label = selection.append('label'); + label = selection.append('label') + .attr('class', 'preset-input-wrap'); box = label.append('input') .property('indeterminate', true) - .attr('type', 'checkbox'); + .attr('type', 'checkbox') + .attr('id', 'preset-input-' + field.id); text = label.append('span') .text('unknown') diff --git a/js/id/ui/preset/combo.js b/js/id/ui/preset/combo.js index 0f9afba4c..dd53b8cf5 100644 --- a/js/id/ui/preset/combo.js +++ b/js/id/ui/preset/combo.js @@ -1,21 +1,19 @@ iD.ui.preset.combo = function(field) { var event = d3.dispatch('change', 'close'), - wrap, input; function combo(selection) { + var combobox = d3.combobox(); - wrap = selection.append('span') - .attr('class', 'input-wrap-position'); - - input = wrap.append('input') + input = selection.append('input') .attr('type', 'text') + .attr('id', 'preset-input-' + field.id) .on('change', change) .on('blur', change); - var combobox = d3.combobox(); - wrap.call(combobox); + selection + .call(combobox); if (field.options) { options(field.options); diff --git a/js/id/ui/preset/defaultcheck.js b/js/id/ui/preset/defaultcheck.js index 021f0862f..fa5f59a38 100644 --- a/js/id/ui/preset/defaultcheck.js +++ b/js/id/ui/preset/defaultcheck.js @@ -7,7 +7,7 @@ iD.ui.preset.defaultcheck = function(field) { input = selection.append('input') .attr('type', 'checkbox') - .attr('id', 'input-' + field.key) + .attr('id', 'preset-input-' + field.id) .on('change', function() { var t = {}; t[field.key] = input.property('checked') ? field.value || 'yes' : undefined; diff --git a/js/id/ui/preset/input.js b/js/id/ui/preset/input.js index 4ac69f450..35db78e1a 100644 --- a/js/id/ui/preset/input.js +++ b/js/id/ui/preset/input.js @@ -10,6 +10,7 @@ iD.ui.preset.url = function(field) { function i(selection) { input = selection.append('input') .attr('type', field.type) + .attr('id', 'preset-input-' + field.id) .attr('placeholder', field.placeholder || '') .on('blur', change) .on('change', change) diff --git a/js/id/ui/preset/radio.js b/js/id/ui/preset/radio.js index 24036a375..5ab65da70 100644 --- a/js/id/ui/preset/radio.js +++ b/js/id/ui/preset/radio.js @@ -6,18 +6,18 @@ iD.ui.preset.radio = function(field) { function radio(selection) { selection.classed('preset-radio', true); - var buttonwrap = selection.append('div').attr('class','radio-wrap'); + var buttonwrap = selection.append('div') + .attr('class', 'preset-input-wrap radio-wrap'); buttons = buttonwrap.selectAll('button') .data(field.keys || field.options) .enter() .append('button') - .text(function(d) { return field.t('options.' + d, { 'default': d }); }) - .on('click', function() { - buttons.classed('active', false); - d3.select(this).classed('active', true); - change(); - }); + .text(function(d) { return field.t('options.' + d, { 'default': d }); }) + .on('click', function(d) { + buttons.classed('active', function(e) { return d === e; }); + change(); + }); buttonwrap.append('button') .on('click', function() { diff --git a/js/id/ui/preset/textarea.js b/js/id/ui/preset/textarea.js index d27375343..4aad5bccb 100644 --- a/js/id/ui/preset/textarea.js +++ b/js/id/ui/preset/textarea.js @@ -5,6 +5,7 @@ iD.ui.preset.textarea = function(field) { function i(selection) { input = selection.append('textarea') + .attr('id', 'preset-input-' + field.id) .attr('placeholder', field.placeholder || '') .attr('maxlength', 255) .on('blur', change)