Add disclosure arrow to expandable search results

This commit is contained in:
Quincy Morgan
2019-03-04 12:11:31 -05:00
parent fa2e718edf
commit 9a7ad8a5cb
2 changed files with 29 additions and 10 deletions

View File

@@ -659,9 +659,11 @@ button.add-note svg.icon {
.search-add .list-item.disabled .label {
opacity: 0.55;
}
.search-add .subsection .list-item .label {
/*font-weight: normal;
letter-spacing: 0.1;*/
[dir='ltr'] .search-add .list-item .label .icon.inline {
margin-left: 0;
}
[dir='rtl'] .search-add .list-item .label .icon.inline {
margin-right: 0;
}
.search-add .list-item > *:not(button) {
pointer-events: none;

View File

@@ -54,12 +54,13 @@ export function uiSearchAdd(context) {
.on('keydown', function(){
// up/down arrow key navigation
var nextFocus,
priorFocus;
if (d3_event.keyCode === utilKeybinding.keyCodes['↓']) {
d3_event.preventDefault();
d3_event.stopPropagation();
var nextFocus,
priorFocus = popover.selectAll('.list .list-item.focused');
priorFocus = popover.selectAll('.list .list-item.focused');
if (priorFocus.empty()) {
nextFocus = popover.selectAll('.list > .list-item:first-child');
} else {
@@ -78,9 +79,9 @@ export function uiSearchAdd(context) {
d3_event.preventDefault();
d3_event.stopPropagation();
var priorFocus = popover.selectAll('.list .list-item.focused');
priorFocus = popover.selectAll('.list .list-item.focused');
if (!priorFocus.empty()) {
var nextFocus = d3_select(priorFocus.nodes()[0].previousElementSibling);
nextFocus = d3_select(priorFocus.nodes()[0].previousElementSibling);
if (!nextFocus.empty() && !nextFocus.classed('list-item')) {
nextFocus = nextFocus.selectAll('.list-item:last-child');
}
@@ -240,8 +241,17 @@ export function uiSearchAdd(context) {
.sizeClass('small')
);
});
row.append('div')
.attr('class', 'label')
var label = row.append('div')
.attr('class', 'label');
label.each(function(d) {
if (!d.geometry) {
d3_select(this)
.call(svgIcon((textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward'), 'inline'));
}
});
label.append('span')
.text(function(d) {
if (d.isSubitem) {
return t('modes.add_' + d.geometry + '.title');
@@ -307,15 +317,22 @@ export function uiSearchAdd(context) {
var selection = d3_select(this);
if (selection.classed('disabled')) return;
var listItemNode = selection.node().closest('.list-item');
var shouldExpand = !selection.classed('expanded');
selection.classed('expanded', shouldExpand);
var iconName = shouldExpand ?
'#iD-icon-down' : (textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward');
d3_select(listItemNode).selectAll('.label svg.icon use')
.attr('href', iconName);
if (shouldExpand) {
var subitems = geometries.map(function(geometry) {
return AddablePresetItem(preset, geometry, true);
});
var selector = '#' + selection.node().closest('.list-item').id + ' + *';
var selector = '#' + listItemNode.id + ' + *';
subsection = d3_selectAll('.search-add .popover .list').insert('div', selector)
.attr('class', 'subsection');
var subitemsEnter = subsection.selectAll('.list-item')