mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 17:23:02 +00:00
Clean up class names
This commit is contained in:
30
css/app.css
30
css/app.css
@@ -703,25 +703,25 @@ a:hover .icon.out-link { background-position: -500px -14px;}
|
||||
|
||||
/* Preset grid */
|
||||
|
||||
.preset-grid {
|
||||
.preset-list {
|
||||
width:100%;
|
||||
padding: 20px 20px 10px 20px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.grid-button-wrap {
|
||||
.preset-list-button-wrap {
|
||||
margin-bottom: 10px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.grid-entry {
|
||||
.preset-list-button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.preset-grid.filtered .grid-button-wrap:first-child .grid-entry {
|
||||
.preset-list.filtered .preset-list-item:first-child .preset-list-button {
|
||||
background: #ececec;
|
||||
}
|
||||
|
||||
@@ -737,7 +737,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.grid-entry .label {
|
||||
.preset-list-button .label {
|
||||
background-color: #f6f6f6;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
@@ -757,11 +757,11 @@ a:hover .icon.out-link { background-position: -500px -14px;}
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.grid-entry:hover .label {
|
||||
.preset-list-button:hover .label {
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.grid-button-wrap button.tag-reference-button {
|
||||
.preset-list-item button.tag-reference-button {
|
||||
float: right;
|
||||
position: static;
|
||||
margin-top: -60px;
|
||||
@@ -770,13 +770,13 @@ a:hover .icon.out-link { background-position: -500px -14px;}
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.current .grid-entry,
|
||||
.current .grid-entry .label {
|
||||
.current .preset-list-button,
|
||||
.current .preset-list-button .label {
|
||||
background-color: #E8EBFF;
|
||||
}
|
||||
|
||||
.category .grid-entry:after,
|
||||
.category .grid-entry:before {
|
||||
.category .preset-list-button:after,
|
||||
.category .preset-list-button:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
@@ -787,11 +787,11 @@ a:hover .icon.out-link { background-position: -500px -14px;}
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.category .grid-entry:before {
|
||||
.category .preset-list-button:before {
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.preset-grid-search-wrap .icon {
|
||||
.grid-pane .preset-search-icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
@@ -799,7 +799,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.preset-grid-search-wrap input {
|
||||
.grid-pane .preset-search-input {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
border-radius: 0;
|
||||
@@ -808,7 +808,7 @@ a:hover .icon.out-link { background-position: -500px -14px;}
|
||||
text-indent: 30px;
|
||||
}
|
||||
|
||||
.subgrid .preset-grid {
|
||||
.subgrid .preset-list {
|
||||
padding: 10px 10px 0 10px;
|
||||
border: 1px solid #CCC;
|
||||
margin-top: 0;
|
||||
|
||||
@@ -52,17 +52,17 @@ iD.ui.intro.area = function(context, reveal) {
|
||||
context.on('enter.intro', null);
|
||||
|
||||
timeout = setTimeout(function() {
|
||||
reveal('.preset-grid-search-wrap input', 'intro.areas.search');
|
||||
d3.select('.preset-grid-search-wrap input').on('keyup.intro', keySearch);
|
||||
reveal('.preset-search-input', 'intro.areas.search');
|
||||
d3.select('.preset-search-input').on('keyup.intro', keySearch);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function keySearch() {
|
||||
var first = d3.select('.grid-button-wrap:first-child');
|
||||
if (first.datum().id === 'leisure/playground') {
|
||||
reveal(first.select('.grid-entry').node(), 'intro.areas.choose');
|
||||
var first = d3.select('.preset-list-item:first-child');
|
||||
if (first.classed('preset-leisure-playground')) {
|
||||
reveal(first.select('.preset-list-button').node(), 'intro.areas.choose');
|
||||
d3.selection.prototype.one.call(context.history(), 'change.intro', selectedPreset);
|
||||
d3.select('.preset-grid-search-wrap input').on('keyup.intro', null);
|
||||
d3.select('.preset-search-input').on('keyup.intro', null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,7 +78,7 @@ iD.ui.intro.area = function(context, reveal) {
|
||||
context.on('exit.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
context.map().on('move.intro', null);
|
||||
d3.select('.preset-grid-search-wrap input').on('keyup.intro', null);
|
||||
d3.select('.preset-search-input').on('keyup.intro', null);
|
||||
};
|
||||
|
||||
return d3.rebind(step, event, 'on');
|
||||
|
||||
@@ -97,7 +97,7 @@ iD.ui.intro.line = function(context, reveal) {
|
||||
|
||||
timeout(function() {
|
||||
d3.select('#curtain').style('pointer-events', 'none');
|
||||
var road = d3.select('.preset-grid .grid-entry').filter(function(d) {
|
||||
var road = d3.select('.preset-list .preset-list-button').filter(function(d) {
|
||||
return d.id === 'category-road';
|
||||
});
|
||||
reveal(road.node(), 'intro.lines.road');
|
||||
@@ -109,7 +109,7 @@ iD.ui.intro.line = function(context, reveal) {
|
||||
timeout(function() {
|
||||
var grid = d3.select('.subgrid');
|
||||
reveal(grid.node(), 'intro.lines.residential');
|
||||
grid.selectAll('.grid-entry').filter(function(d) {
|
||||
grid.selectAll('.preset-list-button').filter(function(d) {
|
||||
return d.id === 'highway/residential';
|
||||
}).one('click.intro', roadDetails);
|
||||
}, 200);
|
||||
|
||||
@@ -40,18 +40,18 @@ iD.ui.intro.point = function(context, reveal) {
|
||||
context.on('enter.intro', null);
|
||||
|
||||
setTimeout(function() {
|
||||
reveal('.preset-grid-search-wrap input', 'intro.points.search');
|
||||
d3.select('.preset-grid-search-wrap input').on('keyup.intro', keySearch);
|
||||
reveal('.preset-search-input', 'intro.points.search');
|
||||
d3.select('.preset-search-input').on('keyup.intro', keySearch);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function keySearch() {
|
||||
var first = d3.select('.grid-button-wrap:first-child');
|
||||
if (first.datum().id === 'amenity/cafe') {
|
||||
reveal(first.select('.grid-entry').node(), 'intro.points.choose');
|
||||
var first = d3.select('.preset-list-item:first-child');
|
||||
if (first.classed('preset-amenity-cafe')) {
|
||||
reveal(first.select('.preset-list-button').node(), 'intro.points.choose');
|
||||
d3.selection.prototype.one.call(context.history(), 'change.intro', selectedPreset);
|
||||
|
||||
d3.select('.preset-grid-search-wrap input').on('keydown.intro', function() {
|
||||
d3.select('.preset-search-input').on('keydown.intro', function() {
|
||||
// Prevent search from updating and changing the grid
|
||||
d3.event.stopPropagation();
|
||||
d3.event.preventDefault();
|
||||
@@ -68,7 +68,7 @@ iD.ui.intro.point = function(context, reveal) {
|
||||
}
|
||||
|
||||
function closeEditor() {
|
||||
d3.select('.preset-grid-search-wrap input').on('keydown.intro', null);
|
||||
d3.select('.preset-search-input').on('keydown.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
reveal('.tag-pane', 'intro.points.close');
|
||||
}
|
||||
@@ -138,7 +138,7 @@ iD.ui.intro.point = function(context, reveal) {
|
||||
context.on('enter.intro', null);
|
||||
context.map().on('move.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
d3.select('.preset-grid-search-wrap input').on('keyup.intro', null).on('keydown.intro', null);
|
||||
d3.select('.preset-search-input').on('keyup.intro', null).on('keydown.intro', null);
|
||||
};
|
||||
|
||||
return d3.rebind(step, event, 'on');
|
||||
|
||||
@@ -53,57 +53,57 @@ iD.ui.PresetList = function(context, entity) {
|
||||
// enter
|
||||
var value = search.property('value');
|
||||
if (d3.event.keyCode === 13 && value.length) {
|
||||
grid.selectAll('.grid-entry:first-child').datum().choose();
|
||||
list.selectAll('.preset-list-item:first-child').datum().choose();
|
||||
} else {
|
||||
grid.classed('filtered', value.length);
|
||||
list.classed('filtered', value.length);
|
||||
if (value.length) {
|
||||
var results = presets.search(value);
|
||||
message.text(t('inspector.results', {
|
||||
n: results.collection.length,
|
||||
search: value
|
||||
}));
|
||||
grid.call(drawGrid, results);
|
||||
list.call(drawList, results);
|
||||
} else {
|
||||
grid.call(drawGrid, context.presets().defaults(geometry, 36));
|
||||
list.call(drawList, context.presets().defaults(geometry, 36));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var searchwrap = selection.append('div')
|
||||
.attr('class', 'preset-grid-search-wrap');
|
||||
var searchWrap = selection.append('div')
|
||||
.attr('class', 'preset-search');
|
||||
|
||||
var search = searchwrap.append('input')
|
||||
.attr('class', 'major')
|
||||
var search = selection.append('input')
|
||||
.attr('class', 'preset-search-input major')
|
||||
.attr('placeholder', t('inspector.search'))
|
||||
.attr('type', 'search')
|
||||
.on('keydown', keydown)
|
||||
.on('keyup', keyup);
|
||||
|
||||
searchwrap.append('span')
|
||||
.attr('class', 'icon search');
|
||||
searchWrap.append('span')
|
||||
.attr('class', 'preset-search-icon icon search');
|
||||
|
||||
if (autofocus) {
|
||||
search.node().focus();
|
||||
}
|
||||
|
||||
var gridwrap = selection.append('div')
|
||||
var listWrap = selection.append('div')
|
||||
.attr('class', 'fillL2 inspector-body inspector-body-' + geometry);
|
||||
|
||||
var grid = gridwrap.append('div')
|
||||
.attr('class', 'preset-grid fillL cf')
|
||||
.call(drawGrid, context.presets().defaults(geometry, 36));
|
||||
var list = listWrap.append('div')
|
||||
.attr('class', 'preset-list fillL cf')
|
||||
.call(drawList, context.presets().defaults(geometry, 36));
|
||||
}
|
||||
|
||||
function drawGrid(grid, presets) {
|
||||
function drawList(list, presets) {
|
||||
var collection = presets.collection.map(function(preset) {
|
||||
return preset.members ? CategoryItem(preset) : PresetItem(preset)
|
||||
});
|
||||
|
||||
var items = grid.selectAll('.preset-item')
|
||||
var items = list.selectAll('.preset-list-item')
|
||||
.data(collection, function(d) { return d.preset.id; });
|
||||
|
||||
items.enter().append('div')
|
||||
.attr('class', 'preset-item')
|
||||
.attr('class', function(item) { return 'preset-list-item preset-' + item.preset.id.replace('/', '-'); })
|
||||
.classed('current', function(item) { return item.preset === current; })
|
||||
.each(function(item) {
|
||||
d3.select(this).call(item);
|
||||
@@ -119,15 +119,15 @@ iD.ui.PresetList = function(context, entity) {
|
||||
}
|
||||
|
||||
function CategoryItem(preset) {
|
||||
var box, subgrid, shown = false;
|
||||
var box, sublist, shown = false;
|
||||
|
||||
function item(selection) {
|
||||
var wrap = selection.append('div')
|
||||
.attr('class', 'grid-button-wrap category col12');
|
||||
.attr('class', 'preset-list-button-wrap category col12');
|
||||
|
||||
wrap.append('button')
|
||||
.datum(preset)
|
||||
.attr('class', 'grid-entry')
|
||||
.attr('class', 'preset-list-button')
|
||||
.call(iD.ui.PresetIcon(context.geometry(entity.id)))
|
||||
.on('click', item.choose)
|
||||
.append('div')
|
||||
@@ -141,8 +141,8 @@ iD.ui.PresetList = function(context, entity) {
|
||||
box.append('div')
|
||||
.attr('class', 'arrow');
|
||||
|
||||
subgrid = box.append('div')
|
||||
.attr('class', 'preset-grid fillL3 cf fl');
|
||||
sublist = box.append('div')
|
||||
.attr('class', 'preset-list fillL3 cf fl');
|
||||
}
|
||||
|
||||
item.choose = function() {
|
||||
@@ -155,7 +155,7 @@ iD.ui.PresetList = function(context, entity) {
|
||||
.style('padding-bottom', '0');
|
||||
} else {
|
||||
shown = true;
|
||||
subgrid.call(drawGrid, preset.members);
|
||||
sublist.call(drawList, preset.members);
|
||||
box.transition()
|
||||
.duration(200)
|
||||
.style('opacity', '1')
|
||||
@@ -172,11 +172,11 @@ iD.ui.PresetList = function(context, entity) {
|
||||
function PresetItem(preset) {
|
||||
function item(selection) {
|
||||
var wrap = selection.append('div')
|
||||
.attr('class', 'grid-button-wrap col12');
|
||||
.attr('class', 'preset-list-button-wrap col12');
|
||||
|
||||
wrap.append('button')
|
||||
.datum(preset)
|
||||
.attr('class', 'grid-entry')
|
||||
.attr('class', 'preset-list-button')
|
||||
.call(iD.ui.PresetIcon(context.geometry(entity.id)))
|
||||
.on('click', item.choose)
|
||||
.append('div')
|
||||
|
||||
Reference in New Issue
Block a user