Extract preset icon component (fixes #1176)

This commit is contained in:
John Firebaugh
2013-03-27 18:40:57 -07:00
parent 49f24a2fae
commit 160f3e7e4c
6 changed files with 38 additions and 42 deletions
+6 -16
View File
@@ -675,13 +675,15 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
background: #ececec;
}
.grid-entry > .icon {
.preset-icon {
position: absolute;
top: 30px;left: 0px; right: 0px;
top: 30px;
left: 0px;
right: 0px;
margin: auto;
}
.inspector-body-line .grid-entry > .icon {
.preset-icon-line {
top: 15px;
left: -10px;
right: -10px;
@@ -863,7 +865,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
border-bottom-color: #CCC;
}
.tag-wrap .preset-icon-wrap div {
.tag-wrap .preset-icon-wrap > div {
height: 80px;
width: 33.3333%;
width: -webkit-calc(33.3333% - 10px);
@@ -874,18 +876,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
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;
}
.inspector-preset .form-field {
padding-left: 20px;
padding-right: 20px;
+1
View File
@@ -85,6 +85,7 @@
<script src='js/id/ui/restore.js'></script>
<script src='js/id/ui/tag_reference.js'></script>
<script src='js/id/ui/preset.js'></script>
<script src='js/id/ui/preset_icon.js'></script>
<script src='js/id/ui/lasso.js'></script>
<script src='js/id/ui/source_switch.js'></script>
<script src='js/id/ui/toggle.js'></script>
+2 -22
View File
@@ -135,18 +135,6 @@ iD.ui.PresetGrid = function(context, entity) {
function name(d) { return d.name(); }
function presetClass(d) {
var s = 'preset-icon-fill ' + entity.geometry(context.graph());
if (d.members) {
s += 'category';
} else {
for (var i in d.tags) {
s += ' tag-' + i + ' tag-' + i + '-' + d.tags[i];
}
}
return s;
}
// Inserts a div inline after the entry for the provided entity
// Used for preset descriptions, and for expanding categories
function insertBox(grid, entity, klass) {
@@ -235,16 +223,8 @@ iD.ui.PresetGrid = function(context, entity) {
.transition()
.style('opacity', 1);
buttonInner.append('div')
.attr('class', presetClass);
var geometry = entity.geometry(context.graph()),
fallbackIcon = geometry === 'line' ? 'other-line' : 'marker-stroked';
buttonInner.append('div')
.attr('class', function(d) {
return 'feature-' + (d.icon || fallbackIcon) + ' icon';
});
buttonInner
.call(iD.ui.PresetIcon(context.geometry(entity.id)));
var label = buttonInner.append('div')
.attr('class','label')
+23
View File
@@ -0,0 +1,23 @@
iD.ui.PresetIcon = function(geometry) {
return function(selection) {
selection.append('div')
.attr('class', function(preset) {
var s = 'preset-icon-fill ' + geometry;
if (preset.members) {
s += 'category';
} else {
for (var i in preset.tags) {
s += ' tag-' + i + ' tag-' + i + '-' + preset.tags[i];
}
}
return s;
});
var fallbackIcon = geometry === 'line' ? 'other-line' : 'marker-stroked';
selection.append('div')
.attr('class', function(preset) {
return 'feature-' + (preset.icon || fallbackIcon) + ' icon preset-icon preset-icon-' + geometry;
});
}
};
+5 -4
View File
@@ -21,7 +21,9 @@ iD.ui.TagEditor = function(context, entity) {
preset = newpreset;
}
selection.html('');
selection
.datum(preset)
.html('');
var messagewrap = selection.append('div')
.attr('class', 'header fillL cf');
@@ -52,9 +54,8 @@ iD.ui.TagEditor = function(context, entity) {
editorwrap.append('div')
.attr('class', 'col12 inspector-inner preset-icon-wrap fillL3')
.append('div')
.attr('class','fillL')
.append('span')
.attr('class', geometry + ' preset-icon icon feature-' + icon);
.attr('class','fillL')
.call(iD.ui.PresetIcon(context.geometry(entity.id)));
presetUI = iD.ui.preset(context, entity, preset)
.on('change', changeTags)
+1
View File
@@ -83,6 +83,7 @@
<script src='../js/id/ui/restore.js'></script>
<script src='../js/id/ui/tag_reference.js'></script>
<script src='../js/id/ui/preset.js'></script>
<script src='../js/id/ui/preset_icon.js'></script>
<script src='../js/id/ui/lasso.js'></script>
<script src='../js/id/ui/source_switch.js'></script>
<script src='../js/id/ui/toggle.js'></script>