From 52aa9702968c2fc9633bd97f03c9be288277faa4 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Wed, 29 May 2013 15:40:01 -0400 Subject: [PATCH] click preset icon to return to preset grid. --- css/app.css | 45 ++++++++++++++++++++------------------- data/core.yaml | 2 +- dist/locales/en.json | 2 +- js/id/ui/entity_editor.js | 18 ++++++++++------ js/id/ui/preset/check.js | 4 ++-- 5 files changed, 38 insertions(+), 33 deletions(-) diff --git a/css/app.css b/css/app.css index 99426c325..92315ea9f 100644 --- a/css/app.css +++ b/css/app.css @@ -6,8 +6,8 @@ applied to both html and body. https://gist.github.com/jfirebaugh/bd225bcfdd3a633850c4 */ html, body { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } body { @@ -872,7 +872,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} .entity-editor-pane .preset-icon-wrap { border-bottom: 1px solid #ccc; - padding: 10px 20px; + padding: 20px; } .entity-editor-pane .preset-icon-wrap::after { @@ -889,12 +889,14 @@ a:hover .icon.out-link { background-position: -500px -14px;} border-bottom-color: #ccc; } -.entity-editor-pane .preset-icon-wrap > div { +.entity-editor-pane .preset-icon-wrap > button { + display: block; height: 60px; width: 60px; margin: auto; border-radius: 4px; position: relative; + background-color: transparent; } .form-field { @@ -1001,9 +1003,9 @@ a:hover .icon.out-link { background-position: -500px -14px;} /* hide but preserve in layout */ .inspector-hover .modified .form-label .modified-icon, -.inspector-hover button.minor, +.inspector-hover .entity-editor-pane button.minor, .inspector-hover .combobox-carat, -.inspector-hover button, +.inspector-hover .entity-editor-pane .header button, .inspector-hover .spin-control, .inspector-hover .hide-toggle:before, .inspector-hover .more-buttons, @@ -1081,19 +1083,8 @@ textarea, transition: all 200ms; } -.modified .form-label .modified-icon, -button.minor, -.combobox-carat, -button, -.spin-control, -.more-buttons { - -webkit-transition: opacity 200ms; - -moz-transition: opacity 200ms; - -o-transition: opacity 200ms; - transition: opacity 200ms; -} - /* second phase hover-to-active animations */ + input, .checkselect label:last-of-type { -webkit-transition: all 200ms 200ms; @@ -1102,6 +1093,12 @@ input, transition: all 200ms 200ms; } +.modified .form-label .modified-icon, +.entity-editor-pane button.minor, +.combobox-carat, +.entity-editor-pane .header button, +.spin-control, +.more-buttons, .inspector-external-links, .hide-toggle:before, .radio-wrap button::before, @@ -1147,10 +1144,10 @@ a.hide-toggle { button.preset-add-field { width: 25%; height: 40px; - -webkit-transition: width 200ms 400ms; - -moz-transition: width 200ms 400ms; - -o-transition: width 200ms 400ms; - transition: width 200ms 400ms; + -webkit-transition: width 200ms; + -moz-transition: width 200ms; + -o-transition: width 200ms; + transition: width 200ms; } /* set width based on # of buttons */ @@ -1202,6 +1199,10 @@ button.preset-add-field:nth-last-child(8) ~ button.preset-add-field { border-left-color: #000; } +.entity-editor-pane .tooltip.right .tooltip-arrow { + border-right-color: #000; +} + .entity-editor-pane .tooltip-inner { background: #000; color: #ccc; diff --git a/data/core.yaml b/data/core.yaml index 93248abad..50aa71e0d 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -182,7 +182,7 @@ en: choose: Select feature type results: "{n} results for {search}" reference: View on OpenStreetMap Wiki - back_tooltip: Change feature type + back_tooltip: Change feature remove: Remove search: Search incomplete: diff --git a/dist/locales/en.json b/dist/locales/en.json index d679c0931..48b85c10a 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -225,7 +225,7 @@ "choose": "Select feature type", "results": "{n} results for {search}", "reference": "View on OpenStreetMap Wiki", - "back_tooltip": "Change feature type", + "back_tooltip": "Change feature", "remove": "Remove", "search": "Search", "incomplete": "" diff --git a/js/id/ui/entity_editor.js b/js/id/ui/entity_editor.js index 747b54f29..56200515f 100644 --- a/js/id/ui/entity_editor.js +++ b/js/id/ui/entity_editor.js @@ -36,11 +36,6 @@ iD.ui.EntityEditor = function(context) { $header.select('h3') .text(preset.name()); - $header.select('.preset-reset') - .on('click', function() { - event.choose(preset); - }); - $header.select('.preset-close') .on('click', function() { context.enter(iD.modes.Browse(context)); @@ -56,7 +51,11 @@ iD.ui.EntityEditor = function(context) { $enter.append('div') .attr('class', 'preset-icon-wrap inspector-inner col12') - .append('div'); + .append('button') + .attr('class', 'preset-reset preset-icon-button') + .call(bootstrap.tooltip() + .title(t('inspector.back_tooltip')) + .placement('right')); $enter.append('div') .attr('class', 'inspector-border inspector-preset col12'); @@ -73,9 +72,14 @@ iD.ui.EntityEditor = function(context) { $enter.append('div') .attr('class', 'inspector-external-links inspector-inner col12'); + selection.selectAll('.preset-reset') + .on('click', function() { + event.choose(preset); + }); + // Update - $body.select('.preset-icon-wrap div') + $body.select('.preset-icon-wrap button') .call(iD.ui.PresetIcon() .geometry(context.geometry(id)) .preset(preset)); diff --git a/js/id/ui/preset/check.js b/js/id/ui/preset/check.js index 23772636d..04f8e1b34 100644 --- a/js/id/ui/preset/check.js +++ b/js/id/ui/preset/check.js @@ -21,7 +21,7 @@ iD.ui.preset.check = function(field) { .attr('id', 'preset-input-' + field.id); enter.append('span') - .text('unknown') + .text('Unknown') .attr('class', 'value'); box = label.select('input') @@ -39,7 +39,7 @@ iD.ui.preset.check = function(field) { value = tags[field.key]; box.property('indeterminate', !value); box.property('checked', value === 'yes'); - text.text(value || 'unknown'); + text.text(value || 'Unknown'); label.classed('set', !!value); };