CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-12 16:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve combobox dropdown styling to give labels more room and readability (#10127)

Browse Source 
* Fields: Break long lines in combo dropdown instead of ellipsis

Longer translations keys are not readable with ellipsis and the tooltip only shows the description (or fallback), not the title.

This change makes long use line breaks with small line height to make the whole text visible.

* Fields: Use table styles for rows to maximize available space

The flex box solution gave a lot of space to the label. This solution minimizes that space to give more space to the values dropdown.
This commit is contained in:
Tobias
2024-02-26 14:02:22 +01:00
committed by GitHub
parent a2e1c59885
commit ce51b33cf2
4 changed files with 30 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
css/80_app.css
View File

@@ -1585,11 +1585,11 @@ input.date-selector {
display: flex;
flex-flow: row nowrap;
}
.form-field ul.rows li.labeled-input > span,
.form-field ul.rows li.labeled-input > div {
flex: 1 1 auto;
width: 100%;
border-radius: 0;
line-height: 0.95rem;
}
.form-field ul.rows li input {
border-radius: 0;
@@ -1608,6 +1608,28 @@ input.date-selector {
border-right-width: 1px;
}
/* Field - lists with labeled input items as table
------------------------------------------------------- */
.form-field ul.rows.rows-table {
display: table;
width: 100%;
}
.form-field ul.rows.rows-table li.labeled-input {
display: table-row;
}
.form-field ul.rows.rows-table li.labeled-input > div:first-child {
display: table-cell;
width: auto;
max-width: 170px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.form-field ul.rows.rows-table li.labeled-input > div:nth-child(2) {
display: table-cell;
width: auto;
}
/* Field - Structure
------------------------------------------------------- */
@@ -2354,9 +2376,8 @@ div.combobox {
display: block;
padding: 5px 10px;
border-top: 1px solid #ccc;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
line-height: 0.95rem;
break: all;
}
.combobox a.selected,

2
modules/ui/fields/access.js
View File

@@ -37,7 +37,7 @@ export function uiFieldAccess(field, context) {
.attr('class', function(d) { return 'labeled-input preset-access-' + d; });
enter
.append('span')
.append('div')
.attr('class', 'label preset-label-access')
.attr('for', function(d) { return 'preset-input-access-' + d; })
.html(function(d) { return field.t.html('types.' + d); });

4
modules/ui/fields/directional_combo.js
View File

@@ -43,7 +43,7 @@ export function uiFieldDirectionalCombo(field, context) {
div = div.enter()
.append('ul')
.attr('class', 'rows')
.attr('class', 'rows rows-table')
.merge(div);
items = div.selectAll('li')
@@ -54,7 +54,7 @@ export function uiFieldDirectionalCombo(field, context) {
.attr('class', function(d) { return 'labeled-input preset-directionalcombo-' + stripcolon(d); });
enter
.append('span')
.append('div')
.attr('class', 'label preset-label-directionalcombo')
.attr('for', function(d) { return 'preset-input-directionalcombo-' + stripcolon(d); })
.html(function(d) { return field.t.html('types.' + d); });

4
modules/ui/fields/radio.js
View File

@@ -127,7 +127,7 @@ export function uiFieldRadio(field, context) {
.attr('class', 'labeled-input structure-type-item');
typeEnter
.append('span')
.append('div')
.attr('class', 'label structure-label-type')
.attr('for', 'preset-input-' + selected)
.call(t.append('inspector.radio.structure.type'));
@@ -172,7 +172,7 @@ export function uiFieldRadio(field, context) {
.attr('class', 'labeled-input structure-layer-item');
layerEnter
.append('span')
.append('div')
.attr('class', 'label structure-label-layer')
.attr('for', 'preset-input-layer')
.call(t.append('inspector.radio.structure.layer'));