CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-04-21 19:26:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1606 from systemed/restyle-list

Browse Source 
restyling default list + toggle lists.
This commit is contained in:
Saman Bemel-Benrud
2013-06-20 12:10:43 -07:00
parent c497644e87 b259187aaa
commit f2942ca554
5 changed files with 956 additions and 1487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+52 -71
View File
@@ -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;}
@@ -541,7 +535,9 @@ button.save.has-count .count::before {
.icon.back { background-position: -420px 0;}
.icon.forward { background-position: -440px 0;}
.icon.help { background-position: -460px 0;}
.icon.translate { background-position: -520px 0;}
.icon.relation { background-position: -520px 0;}
.icon.relation.route { background-position: -540px 0;}
.icon.relation.multipolygon { background-position: -560px 0;}
.icon.plus.light,
.icon.zoom-in { background-position: -240px -20px;}
@@ -741,28 +737,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 +756,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 +1028,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 +1041,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 +1091,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 +1114,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 +1129,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 +1158,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 +1173,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 +1348,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 +1586,7 @@ div.combobox {
height: 31px;
right: 10%;
border: 1px solid #CCC;
border-top-width: 0;
border-top-width: 0;
border-left-width: 0;
}
dist/img/sprite.svg
Vendored
+823 -1352
View File
File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 164 KiB

After

Width:  |  Height:  |  Size: 155 KiB

js/id/ui/background.js
+51 -40
View File
@@ -33,19 +33,26 @@ iD.ui.Background = function(context) {
}
function selectLayer() {
content.selectAll('button.layer')
.classed('active', function(d) {
var overlay = context.map().layers[2].source();
return d.data.name === context.background().source().data.name ||
(overlay.data && overlay.data.name === d.data.name);
});
function active(d) {
var overlay = context.map().layers[2].source();
return d.data.name === context.background().source().data.name ||
(overlay.data && overlay.data.name === d.data.name);
}
content.selectAll('label.layer')
.classed('active', active)
.selectAll('input')
.property('checked', active);
}
function clickSetSource(d) {
d3.event.preventDefault();
if (d.data.name === 'Custom') {
var configured = d();
if (!configured) return;
if (!configured) {
selectLayer();
return;
}
d = configured;
}
context.background().source(d);
@@ -72,31 +79,23 @@ iD.ui.Background = function(context) {
selectLayer();
}
function clickGpx(d) {
d3.event.preventDefault();
if (!_.isEmpty(context.map().layers[1].geojson())) {
context.map().layers[1]
.enable(!context.map().layers[1].enable());
d3.select(this)
.classed('active', context.map().layers[1].enable());
context.redraw();
}
function clickGpx() {
context.map().layers[1]
.enable(!context.map().layers[1].enable());
context.redraw();
update();
}
function drawList(layerList, click, filter) {
function drawList(layerList, type, change, 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');
layerInner
.attr('href', '#')
.attr('class', 'layer')
.on('click.set-source', click);
.append('label')
.attr('class', 'layer');
// only set tooltips for layers with tooltips
layerInner
@@ -106,6 +105,12 @@ iD.ui.Background = function(context) {
.placement('right')
);
layerInner.append('input')
.attr('type', type)
.attr('name', 'layers')
.attr('value', function(d) { return d.data.name; })
.on('change', change);
layerInner.insert('span').text(function(d) {
return d.data.name;
});
@@ -113,25 +118,27 @@ 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() {
backgroundList.call(drawList, clickSetSource, function(d) {
backgroundList.call(drawList, 'radio', clickSetSource, function(d) {
return !d.data.overlay;
});
overlayList.call(drawList, clickSetOverlay, function(d) {
overlayList.call(drawList, 'checkbox', clickSetOverlay, function(d) {
return d.data.overlay;
});
var gpxLayer = context.map().layers[1],
hasGpx = !_.isEmpty(gpxLayer.geojson()),
showsGpx = hasGpx && gpxLayer.enable();
gpxLayerItem
.classed('active', function() {
var gpxLayer = context.map().layers[1];
return !_.isEmpty(gpxLayer.geojson()) &&
gpxLayer.enable();
});
.classed('active', hasGpx && gpxLayer.enable())
.selectAll('input')
.property('disabled', !hasGpx)
.property('checked', showsGpx);
selectLayer();
}
@@ -165,11 +172,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,20 +247,24 @@ 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')
.classed('layer-toggle-gpx', true)
.on('click.set-gpx', clickGpx);
.attr('class', 'toggle-list layer-list')
.append('label')
.classed('layer-toggle-gpx', true);
gpxLayerItem.call(bootstrap.tooltip()
.title(t('gpx.drag_drop'))
.placement('right'));
gpxLayerItem.append('input')
.attr('type', 'checkbox')
.property('disabled', true)
.on('change', clickGpx);
gpxLayerItem.append('span')
.text(t('gpx.local_layer'));
@@ -328,7 +340,6 @@ iD.ui.Background = function(context) {
context.surface().on('mousedown.background-outside', hide);
context.container().on('mousedown.background-outside', hide);
}
return background;
js/id/ui/feature_list.js
+4 -4
View File
@@ -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(); });
js/id/ui/preset/radio.js
+26 -20
View File
@@ -1,7 +1,7 @@
iD.ui.preset.radio = function(field) {
var event = d3.dispatch('change'),
buttons;
labels, radios;
function radio(selection) {
selection.classed('preset-radio', true);
@@ -12,27 +12,31 @@ iD.ui.preset.radio = function(field) {
var buttonWrap = wrap.enter().append('div')
.attr('class', 'preset-input-wrap toggle-list');
buttons = wrap.selectAll('button')
labels = wrap.selectAll('label')
.data(field.options || field.keys);
buttons.enter().append('button')
var enter = labels.enter().append('label');
enter.append('input')
.attr('type', 'radio')
.attr('name', field.id)
.attr('value', function(d) { return field.t('options.' + d, { 'default': d }); })
.attr('checked', false);
enter.append('span')
.text(function(d) { return field.t('options.' + d, { 'default': d }); });
buttons
.on('click', function(d) {
d3.event.preventDefault();
buttons.classed('active', function(e) { return d === e; });
change();
});
radios = labels.selectAll('input')
.on('change', change);
buttonWrap.append('span')
.attr('class','placeholder')
.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')
@@ -41,17 +45,16 @@ iD.ui.preset.radio = function(field) {
remove
.on('click', function() {
d3.event.preventDefault();
buttons.classed('active', false);
radios.property('checked', false);
change();
});
}
function change() {
var t = {};
if (field.key) t[field.key] = undefined;
buttons.each(function(d) {
var active = d3.select(this).classed('active');
radios.each(function(d) {
var active = d3.select(this).property('checked');
if (field.key) {
if (active) t[field.key] = d;
} else {
@@ -62,17 +65,20 @@ iD.ui.preset.radio = function(field) {
}
radio.tags = function(tags) {
buttons.classed('active', function(d) {
function checked(d) {
if (field.key) {
return tags[field.key] === d;
} else {
return tags[d] && tags[d] !== 'no';
return !!(tags[d] && tags[d] !== 'no');
}
});
}
labels.classed('active', checked);
radios.property('checked', checked);
};
radio.focus = function() {
buttons.node().focus();
radios.node().focus();
};
return d3.rebind(radio, event, 'on');