From 4c471ca255f21a3d889a27733311599da8760700 Mon Sep 17 00:00:00 2001 From: Saman Bemel-Benrud Date: Thu, 20 Jun 2013 13:06:12 -0400 Subject: [PATCH] restyling default list + toggle lists. --- css/app.css | 119 ++++++++++++++++----------------------- js/id/ui/background.js | 23 +++++--- js/id/ui/feature_list.js | 10 ++-- js/id/ui/preset/radio.js | 15 +++-- 4 files changed, 79 insertions(+), 88 deletions(-) diff --git a/css/app.css b/css/app.css index 118e4aaa9..537846cc5 100644 --- a/css/app.css +++ b/css/app.css @@ -182,6 +182,12 @@ input:focus { background-color: #F1F1F1; } +input[type="checkbox"], +input[type="radio"] { + width: 20px; + vertical-align: middle; +} + /* remove bottom border radius when combobox is open */ .combobox + * textarea:focus, .combobox + * input:focus { @@ -234,57 +240,42 @@ ul li { list-style: none;} border: 1px solid #CCC; } -.toggle-list > button { - font-weight: normal; - text-align: left; +.toggle-list > label { position: relative; - padding: 5px 10px 5px 30px; + padding: 5px 10px; display:block; - border-radius: 0; width: 100%; border-bottom: 1px solid #ccc; + background-color: white; height: 30px; color: #7092FF; + cursor: pointer; + -moz-transition: all 100ms; + -o-transition: all 100ms; + transition: all 100ms; } -.toggle-list > button:first-child { +.toggle-list > label:hover { + background-color: #ececec; +} + +.toggle-list > label:first-child { border-radius: 3px 3px 0 0; } -.toggle-list > button:last-child { +.toggle-list > label:last-child { border-radius: 0 0 3px 3px; border-bottom-width: 0; } -.toggle-list > button:only-child { +.toggle-list > label:only-child { border-radius: 3px; } -.toggle-list > button.active { +.toggle-list > label.active { background: #E8EBFF; } -.toggle-list > button::before { - content: ""; - display: inline-block; - border-radius: 50%; - height: 10px; - width: 10px; - margin-right: 10px; - background: #808080; - position: absolute; - left: 10px; - top: 10px; -} - -.toggle-list > button.active::before { - background: #7092ff; -} - -.toggle-list.check-list > button::before { - border-radius: 2px; -} - .link-list li { float: right; border-left: 1px solid rgba(255,255,255,.5); @@ -518,8 +509,11 @@ button.save.has-count .count::before { /* Definitions for every icon */ .icon.browse { background-position: 0 0;} +.icon.point, .icon.add-point { background-position: -20px 0;} +.icon.line, .icon.add-line { background-position: -40px 0;} +.icon.area, .icon.add-area { background-position: -60px 0;} .icon.undo { background-position: -80px 0;} .icon.redo { background-position: -100px 0;} @@ -741,28 +735,18 @@ a:hover .icon.out-link { background-position: -500px -14px;} .feature-list { width:100%; - padding: 20px 20px 10px 20px; - border-bottom: 1px solid #ccc; } .feature-list-item { width: 100%; - height: 60px; - margin-bottom: 10px; position: relative; - border: 1px solid #ccc; + border-bottom: 1px solid #ccc; + border-radius: 0; } .feature-list-item .label { - background-color: #f6f6f6; text-align: left; - position: absolute; - top: 0; - bottom: 0; - right: 0; padding: 5px 10px; - left: 60px; - line-height: 50px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -770,15 +754,27 @@ a:hover .icon.out-link { background-position: -500px -14px;} -moz-transition: all 100ms; -o-transition: all 100ms; transition: all 100ms; - border-radius: 0 3px 3px 0; +} + +.feature-list-item .label .icon { + opacity: .5; } .feature-list-item:hover .label { background-color: #ececec; } +.feature-list-item .entity-type { + color:#7092ff; +} + +.feature-list-item:hover .entity-type { + color:#597be7; +} + .feature-list-item .entity-name { font-weight: normal; + color: #666; padding-left: 10px; } @@ -1030,10 +1026,6 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* Preset form (hover mode) */ -.inspector-hover .header { - background-color: #f6f6f6; -} - .inspector-hover textarea, .inspector-hover input, .inspector-hover .form-label, @@ -1047,11 +1039,11 @@ a:hover .icon.out-link { background-position: -500px -14px;} /* hide and remove from layout */ .inspector-hidden, .inspector-hover .checkselect label input[type="checkbox"], -.inspector-hover .toggle-list button::before, -.inspector-hover .toggle-list button:not(.active), +.inspector-hover .checkselect label input[type="radio"], +.inspector-hover .toggle-list label:not(.active), .inspector-hover .inspector-inner .add-tag, .inspector-hover .inspector-inner .add-relation, -.inspector-hover .toggle-list button.remove .icon { +.inspector-hover .toggle-list label.remove .icon { height: 0; width: 0; overflow: hidden; @@ -1097,7 +1089,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* Unstyle button fields */ -.inspector-hover .toggle-list button.active, +.inspector-hover .toggle-list label.active, .inspector-hover .entity-editor-pane a.hide-toggle { opacity: 1; background-color: transparent; @@ -1120,7 +1112,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* Hide placeholder for radio buttons if another is active, or not in hover state */ -.toggle-list button.active ~ .placeholder, +.toggle-list label.active ~ .placeholder, .toggle-list .placeholder { padding: 0; opacity: 0; @@ -1135,14 +1127,7 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* first phase hover-to-active animations */ -.header { - -webkit-transition: background-color 200ms; - -moz-transition: background-color 200ms; - -o-transition: background-color 200ms; - transition: background-color 200ms; -} -header, textarea, .form-label, .preset-input-wrap, @@ -1171,8 +1156,8 @@ input, .more-buttons, .view-on-osm, .hide-toggle:before, -.entity-editor-pane .toggle-list button::before, -.entity-editor-pane .toggle-list button.remove .icon { +.entity-editor-pane .toggle-list label::before, +.entity-editor-pane .toggle-list label.remove .icon { -webkit-transition: opacity 200ms 200ms; -moz-transition: opacity 200ms 200ms; -o-transition: opacity 200ms 200ms; @@ -1186,14 +1171,14 @@ input, transition: padding-left 200ms 200ms, color 200ms 200ms; } -.entity-editor-pane .toggle-list button:not(.active) { +.entity-editor-pane .toggle-list label:not(.active) { -webkit-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; -moz-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; -o-transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; transition: height 200ms 200ms, padding 200ms 200ms, border-width 100ms 300ms; } -.entity-editor-pane .toggle-list button { +.entity-editor-pane .toggle-list label { -webkit-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; -moz-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; -o-transition: border-width 100ms 300ms, padding 200ms 200ms, background-color 200ms 200ms, color 200ms 200ms; @@ -1361,12 +1346,6 @@ input[type=number] { color: inherit; } -.checkselect input[type="checkbox"] { - margin-right: 5px; - width: 20px; - vertical-align: middle; -} - .checkselect label:not(.set) input[type="checkbox"] { opacity: .5; } @@ -1605,7 +1584,7 @@ div.combobox { height: 31px; right: 10%; border: 1px solid #CCC; - border-top-width: 0; + border-top-width: 0; border-left-width: 0; } diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 95d6334be..d62887fea 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -33,7 +33,7 @@ iD.ui.Background = function(context) { } function selectLayer() { - content.selectAll('button.layer') + content.selectAll('label.layer') .classed('active', function(d) { var overlay = context.map().layers[2].source(); return d.data.name === context.background().source().data.name || @@ -85,16 +85,15 @@ iD.ui.Background = function(context) { function drawList(layerList, click, filter) { - var layerLinks = layerList.selectAll('button.layer') + var layerLinks = layerList.selectAll('label.layer') .data(getSources().filter(filter), function(d) { return d.data.name; }); var layerInner = layerLinks.enter() - .append('button'); + .append('label'); layerInner - .attr('href', '#') .attr('class', 'layer') .on('click.set-source', click); @@ -106,6 +105,11 @@ iD.ui.Background = function(context) { .placement('right') ); + layerInner.insert('input') + .attr('type','radio') + .attr('name','layers') + .attr('value',function(d) { return d.data.name;}); + layerInner.insert('span').text(function(d) { return d.data.name; }); @@ -113,7 +117,7 @@ iD.ui.Background = function(context) { layerLinks.exit() .remove(); - layerList.style('display', layerList.selectAll('button.layer').data().length > 0 ? 'block' : 'none'); + layerList.style('display', layerList.selectAll('label.layer').data().length > 0 ? 'block' : 'none'); } function update() { @@ -165,11 +169,12 @@ iD.ui.Background = function(context) { .title(iD.ui.tooltipHtml(t('background.description'), key)); function hide() { setVisible(false); } + function toggle() { if (d3.event) d3.event.preventDefault(); tooltip.hide(button); setVisible(!button.classed('active')); - content.selectAll('.toggle-list button:first-child').node().focus(); + content.selectAll('.toggle-list label:first-child').node().focus(); } function setVisible(show) { @@ -239,13 +244,13 @@ iD.ui.Background = function(context) { var overlayList = content .append('div') - .attr('class', 'toggle-list layer-list check-list'); + .attr('class', 'toggle-list layer-list'); var gpxLayerItem = content .append('div') .style('display', iD.detect().filedrop ? 'block' : 'none') - .attr('class', 'toggle-list layer-list check-list') - .append('button') + .attr('class', 'toggle-list layer-list') + .append('label') .classed('layer-toggle-gpx', true) .on('click.set-gpx', clickGpx); diff --git a/js/id/ui/feature_list.js b/js/id/ui/feature_list.js index 7e4ec38e3..cc25062cf 100644 --- a/js/id/ui/feature_list.js +++ b/js/id/ui/feature_list.js @@ -1,7 +1,7 @@ iD.ui.FeatureList = function(context) { function featureList(selection) { var header = selection.append('div') - .attr('class', 'header fillL cf'); + .attr('class', 'header cf'); header.append('h3') .text(t('inspector.feature_list')); @@ -33,7 +33,7 @@ iD.ui.FeatureList = function(context) { .attr('class', 'inspector-body'); var list = listWrap.append('div') - .attr('class', 'feature-list fillL cf'); + .attr('class', 'feature-list cf'); context.map() .on('drawn.feature-list', mapDrawn); @@ -90,9 +90,6 @@ iD.ui.FeatureList = function(context) { var enter = items.enter().append('button') .attr('class', 'feature-list-item') - .call(iD.ui.PresetIcon() - .geometry(function(d) { return d.geometry }) - .preset(function(d) { return d.preset; })) .on('mouseover', function(d) { mouseover(d.entity); }) .on('mouseout', function(d) { mouseout(); }) .on('click', function(d) { click(d.entity); }); @@ -100,6 +97,9 @@ iD.ui.FeatureList = function(context) { var label = enter.append('div') .attr('class', 'label'); + label.append('span') + .attr('class', function(d) { return d.geometry + ' icon icon-pre-text'; }); + label.append('span') .attr('class', 'entity-type') .text(function(d) { return d.preset.name(); }); diff --git a/js/id/ui/preset/radio.js b/js/id/ui/preset/radio.js index 8d7c7c3db..f60efa718 100644 --- a/js/id/ui/preset/radio.js +++ b/js/id/ui/preset/radio.js @@ -12,10 +12,17 @@ iD.ui.preset.radio = function(field) { var buttonWrap = wrap.enter().append('div') .attr('class', 'preset-input-wrap toggle-list'); - buttons = wrap.selectAll('button') + buttons = wrap.selectAll('label') .data(field.options || field.keys); - buttons.enter().append('button') + var button = buttons.enter().append('label'); + + button.append('input') + .attr('type','radio') + .attr('name',field.label) + .attr('value', function(d) { return field.t('options.' + d, { 'default': d }); }); + + button.append('span') .text(function(d) { return field.t('options.' + d, { 'default': d }); }); buttons @@ -29,10 +36,10 @@ iD.ui.preset.radio = function(field) { .attr('class','placeholder') .text(field.placeholder()); - var remove = wrap.selectAll('button.remove') + var remove = wrap.selectAll('label.remove') .data([0]); - remove.enter().append('button') + remove.enter().append('label') .attr('class', 'remove') .text(t('inspector.remove')) .append('span')