diff --git a/css/app.css b/css/app.css index 4e0758097..3110f6dd7 100644 --- a/css/app.css +++ b/css/app.css @@ -217,11 +217,9 @@ ul.toggle-list { ul.toggle-list li a { position: relative; - padding: 5px 10px; + padding: 5px 10px 5px 25px; display:block; border-top: 1px solid #ccc; - white-space:nowrap; - text-overflow:ellipsis; } ul.toggle-list li:first-child a { @@ -254,6 +252,28 @@ ul.link-list li:last-child { padding-left: 0; } +.toggle-list a::before { + content: ""; + display: inline-block; + border-radius: 50%; + height: 12px; + width: 12px; + margin-right: 10px; + border: 1px solid #CCC; + position: absolute; + left: 5px; + top: 8px; +} + +.toggle-list a:hover::before { + box-shadow: inset 0 0 0 2px white; +} + +.toggle-list a.selected::before { + background: #7092ff; + box-shadow: inset 0 0 0 2px white; +} + /* Utility Classes ------------------------------------------------------- */ .fillL { @@ -1100,21 +1120,38 @@ input[type=number] { /* Preset form radio button */ -.radio-wrap { - display: block; - overflow: hidden; - border-radius: 0 0 4px 4px; -} - .radio-wrap button { + position: relative; text-align: left; font-weight: normal; - padding: 2px 5px; height: 30px; border-radius: 0; border-bottom: 1px solid #CCC; color: #7092FF; width: 100%; + padding-left: 25px; +} + +.radio-wrap button::before { + content: ""; + display: inline-block; + border-radius: 50%; + height: 12px; + width: 12px; + margin-right: 10px; + border: 1px solid #CCC; + position: absolute; + left: 5px; + top: 8px; +} + +.radio-wrap button:hover::before { + box-shadow: inset 0 0 0 2px white; +} + +.radio-wrap button.active::before { + background: #7092ff; + box-shadow: inset 0 0 0 2px white; } .radio-wrap button:last-child { @@ -1125,6 +1162,18 @@ input[type=number] { background-color: #E8EBFF !important; } +.radio-wrap button.remove { + border-radius: 0 0 3px 3px; +} +.radio-wrap button.remove .icon { + position: absolute; + left: 2px; +} + +.radio-wrap button.remove::before { + content: none; +} + .form-field .wiki-lang { width: 30%; border-right: none; @@ -1158,7 +1207,7 @@ input[type=number] { #preset-input-maxspeed { border-right: none; - border-radius: 0; + border-radius: 0 0 0 4px; width: 80%; } diff --git a/data/locales.js b/data/locales.js index ca21acc21..a61d586cc 100644 --- a/data/locales.js +++ b/data/locales.js @@ -4624,7 +4624,8 @@ locale.en = { "bridge": "Bridge", "tunnel": "Tunnel", "embankment": "Embankment", - "cutting": "Cutting" + "cutting": "Cutting", + "remove": "Remove" } }, "supervised": { diff --git a/data/presets.yaml b/data/presets.yaml index 51a5cc43e..fc1e5efee 100644 --- a/data/presets.yaml +++ b/data/presets.yaml @@ -171,6 +171,7 @@ en: tunnel: Tunnel embankment: Embankment cutting: Cutting + remove: Remove supervised: label: Supervised surface: diff --git a/img/sprite.svg b/img/sprite.svg index f13952a2c..e69de29bb 100644 --- a/img/sprite.svg +++ b/img/sprite.svg @@ -1,403 +0,0 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/js/id/ui/preset/radio.js b/js/id/ui/preset/radio.js index 32bb65357..1beec86c7 100644 --- a/js/id/ui/preset/radio.js +++ b/js/id/ui/preset/radio.js @@ -7,7 +7,7 @@ iD.ui.preset.radio = function(field) { selection.classed('preset-radio', true); var buttonwrap = selection.append('div') - .attr('class', 'preset-input-wrap radio-wrap'); + .attr('class', 'preset-input-wrap toggle-list radio-wrap'); buttons = buttonwrap.selectAll('button') .data(field.options || field.keys) @@ -20,10 +20,12 @@ iD.ui.preset.radio = function(field) { }); buttonwrap.append('button') + .attr('class','remove') .on('click', function() { buttons.classed('active', false); change(); }) + .text( field.t('options.remove')) .append('span') .attr('class', 'icon remove'); }