From 65a8320d8dd0d16a84fc8d7475d36151172b5b81 Mon Sep 17 00:00:00 2001 From: saman bb Date: Mon, 25 Mar 2013 14:53:35 -0400 Subject: [PATCH] revisions to the preset form layout. --- css/app.css | 80 ++++++++++++++++++++++++----------------- data/core.yaml | 2 +- data/locales.js | 2 +- js/id/ui/preset_grid.js | 4 +-- js/id/ui/tag_editor.js | 27 +++++++------- 5 files changed, 64 insertions(+), 51 deletions(-) diff --git a/css/app.css b/css/app.css index 9633ad552..f7904a811 100644 --- a/css/app.css +++ b/css/app.css @@ -593,6 +593,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} overflow: hidden; position: absolute; right: 0; + top: 0; } .modal > button { @@ -641,16 +642,9 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} position: relative; } -.inspector-wrap .header button.preset-reset { - width: 60px; -} - .inspector-wrap .header button.preset-reset > div { height: 100%; padding: 20px 0; - -webkit-transition: opacity 200ms; - -moz-transition: opacity 200ms; - transition: opacity 200ms; } .inspector-wrap .header button.preset-reset .col12:last-child { @@ -672,12 +666,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} padding: 0; } -.pane:last-child .header h3 { - position: absolute; - left: 60px; - right: 0px; -} - .inspector-toggle { color:#fff; width: 100%; @@ -817,23 +805,24 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} } .subgrid { - width: -webkit-calc(100% - 10px); + width: -webkit-calc(100% + 10px); width: calc(100% - 10px); + width: 100%; + margin-left: -10px; overflow: hidden; } .subgrid .preset-grid { - background: #eee; padding: 10px 0px 0px 10px; + border: 1px solid #CCC; margin-top: 0px; - border: 0; border-radius: 4px; } .subgrid .arrow { border: solid rgba(0, 0, 0, 0); border-width: 10px; - border-bottom-color: #eee; + border-bottom-color: #CCC; width: 0; height: 0; margin-left: 33.3333%; @@ -903,24 +892,49 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} /* preset form basics */ -.preset-field.inspector-inner { +.tag-wrap .preset-icon-wrap { + border-bottom: 1px solid #CCC; +} + +.tag-wrap .preset-icon-wrap::after { + content: ""; + position: absolute; + height: 0; + width: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + border: solid rgba(0, 0, 0, 0); + border-width: 10px; + border-bottom-color: #CCC; +} + +.tag-wrap .preset-icon-wrap div { + height: 90px; + width: 33.3333%; + margin: auto; + border-radius: 4px; + border: 1px solid #CCC; + position: relative; +} + +.tag-wrap .preset-icon-wrap .preset-icon { + position: absolute; + top: 30px; + left: 0px; + right: 0px; + margin: auto; +} + +.tag-wrap .preset-icon-wrap .preset-icon.line { + top: 15px; +} + +.preset-field.inspector-inner { padding-bottom: 0; } -.tag-wrap .grid-button-wrap { - padding: 0; - height: 110px; -} - -.tag-wrap .grid-button-wrap .grid-entry { - border-top: 0; - background: #eef0ff; -} - -.tag-wrap .grid-button-wrap .grid-entry .label { - background: #eef0ff; -} - .preset-field .modified-icon { opacity: 0.2; display: none; @@ -997,7 +1011,7 @@ input[type=number] { .spin-control { width: 60px; - height: 30px; + height: 29px; border-left: 1px solid #CCC; display: inline-block; margin-left: -60px; diff --git a/data/core.yaml b/data/core.yaml index 5e27328a4..dc67c4c94 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -107,7 +107,7 @@ en: nothing_to_redo: Nothing to redo. just_edited: "You just edited OpenStreetMap!" browser_notice: "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map." - view_on_osm: View on OSM + view_on_osm: "View on OSM →"" zoom_in_edit: zoom in to edit the map logout: logout report_a_bug: report a bug diff --git a/data/locales.js b/data/locales.js index b14eb867b..715093c84 100644 --- a/data/locales.js +++ b/data/locales.js @@ -139,7 +139,7 @@ locale.en = { "nothing_to_redo": "Nothing to redo.", "just_edited": "You just edited OpenStreetMap!", "browser_notice": "This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. Please upgrade your browser or use Potlatch 2 to edit the map.", - "view_on_osm": "View on OSM", + "view_on_osm": "View on OSM →", "zoom_in_edit": "zoom in to edit the map", "logout": "logout", "report_a_bug": "report a bug", diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js index 004de7510..1fd0adccd 100644 --- a/js/id/ui/preset_grid.js +++ b/js/id/ui/preset_grid.js @@ -15,7 +15,7 @@ iD.ui.PresetGrid = function(context, entity) { .attr('class', 'header fillL cf'); var message = messagewrap.append('h3') - .attr('class', 'inspector-inner fl') + .attr('class', 'inspector-inner') .text(t('inspector.choose')); if (preset) { @@ -115,7 +115,7 @@ iD.ui.PresetGrid = function(context, entity) { .attr('class', 'arrow'); subgrid.append('div') - .attr('class', 'preset-grid fillL cf fl') + .attr('class', 'preset-grid fillL2 cf fl') .data([d.members.collection]) .call(drawGrid, 1000); diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js index 99f0d6f18..ef948b90e 100644 --- a/js/id/ui/tag_editor.js +++ b/js/id/ui/tag_editor.js @@ -26,26 +26,18 @@ iD.ui.TagEditor = function(context, entity) { var messagewrap = selection.append('div') .attr('class', 'header fillL cf'); - var back = messagewrap.append('button') - .attr('class', 'preset-reset fl ' + geometry) + messagewrap.append('button') + .attr('class', 'preset-reset fl ') .on('click', function() { event.choose(preset); - }); - - var icon = preset.icon || (geometry === 'line' ? 'other-line' : 'marker-stroked'); - - back.append('div') - .attr('class', 'col12') - .append('span') - .attr('class', 'preset-icon icon feature-' + icon); - - back.append('div') - .attr('class', 'col12') + }) .append('span') .attr('class', 'icon back'); + var icon = preset.icon || (geometry === 'line' ? 'other-line' : 'marker-stroked'); + messagewrap.append('h3') - .attr('class', 'inspector-inner fl') + .attr('class', 'inspector-inner') .text(t('inspector.editing_feature', { feature: preset.name() })); messagewrap.append('button') @@ -57,6 +49,13 @@ iD.ui.TagEditor = function(context, entity) { var editorwrap = selection.append('div') .attr('class', 'tag-wrap inspector-body fillL2 inspector-body-' + geometry); + editorwrap.append('div') + .attr('class', 'col12 inspector-inner fillL2 preset-icon-wrap') + .append('div') + .attr('class','fillL') + .append('span') + .attr('class', geometry + ' preset-icon icon feature-' + icon); + presetUI = iD.ui.preset(context, entity) .preset(preset) .on('change', changeTags)