mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-15 21:48:20 +02:00
Extract preset icon component (fixes #1176)
This commit is contained in:
+6
-16
@@ -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;
|
||||
|
||||
@@ -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
@@ -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')
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user