Display name suggestion presets on 2 lines

(closes #5514)
This commit is contained in:
Bryan Housel
2018-11-26 21:55:13 -05:00
parent b719a45e1e
commit 822917466c
3 changed files with 54 additions and 12 deletions

View File

@@ -1092,6 +1092,9 @@ a.hide-toggle {
}
.preset-list-button .label {
display: flex;
flex-flow: row wrap;
align-items: center;
background-color: #f6f6f6;
text-align: left;
position: absolute;
@@ -1100,10 +1103,6 @@ a.hide-toggle {
right: 0;
padding: 5px 10px;
left: 60px;
line-height: 50px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
border-left: 1px solid rgba(0, 0, 0, .1);
border-radius: 0 3px 3px 0;
}
@@ -1116,6 +1115,21 @@ a.hide-toggle {
border-radius: 3px 0 0 3px;
}
.preset-list-button .label-inner {
width: 100%;
}
.preset-list-button .label-inner .namepart {
height: 17px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 30px;
}
[dir='rtl'] .preset-list-button .label-inner .namepart {
padding-right: 0;
padding-left: 30px;
}
.preset-list-button:hover .label,
.preset-list-button:focus .label {
background-color: #ececec;
@@ -1146,7 +1160,7 @@ a.hide-toggle {
.current .preset-list-button,
.current .preset-list-button .label {
background-color: #E8EBFF;
background-color: #e8ebff;
}
.category .preset-list-button:after,

View File

@@ -95,7 +95,9 @@ export function uiEntityEditor(context) {
.attr('class', 'preset-list-button preset-reset')
.call(tooltip().title(t('inspector.back_tooltip')).placement('bottom'))
.append('div')
.attr('class', 'label');
.attr('class', 'label')
.append('div')
.attr('class', 'label-inner');
enter
.append('div')
@@ -142,8 +144,20 @@ export function uiEntityEditor(context) {
.preset(_activePreset)
);
body.select('.preset-list-item .label')
.text(_activePreset.name());
var label = body.select('.label-inner');
var nameparts = label.selectAll('.namepart')
.data(_activePreset.name().split(' - '), function(d) { return d; });
nameparts.exit()
.remove();
nameparts
.enter()
.append('div')
.attr('class', 'namepart')
.text(function(d) { return d; });
body.select('.preset-editor')
.call(presetEditor

View File

@@ -262,7 +262,7 @@ export function uiPresetList(context) {
(textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward') : '#iD-icon-down';
d3_select(this)
.classed('expanded', !isExpanded);
d3_select(this).selectAll('div.label svg.icon use')
d3_select(this).selectAll('div.label-inner svg.icon use')
.attr('href', iconName);
item.choose();
}
@@ -301,9 +301,13 @@ export function uiPresetList(context) {
var label = button
.append('div')
.attr('class', 'label');
.attr('class', 'label')
.append('div')
.attr('class', 'label-inner');
label
.append('div')
.attr('class', 'namepart')
.call(svgIcon((textDirection === 'rtl' ? '#iD-icon-backward' : '#iD-icon-forward'), 'inline'))
.append('span')
.html(function() { return preset.name() + '…'; });
@@ -352,16 +356,26 @@ export function uiPresetList(context) {
var wrap = selection.append('div')
.attr('class', 'preset-list-button-wrap col12');
wrap.append('button')
var button = wrap.append('button')
.attr('class', 'preset-list-button')
.call(uiPresetIcon()
.geometry(context.geometry(_entityID))
.preset(preset))
.on('click', item.choose)
.on('keydown', itemKeydown)
var label = button
.append('div')
.attr('class', 'label')
.text(preset.name());
.append('div')
.attr('class', 'label-inner');
var parts = label.selectAll('.namepart')
.data(preset.name().split(' - '))
.enter()
.append('div')
.attr('class', 'namepart')
.text(function(d) { return d; });
wrap.call(item.reference.button);
selection.call(item.reference.body);