From 822917466cbcce752e09bd40446765d92b02f37f Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Mon, 26 Nov 2018 21:55:13 -0500
Subject: [PATCH] Display name suggestion presets on 2 lines (closes #5514)

---
 css/80_app.css              | 24 +++++++++++++++++++-----
 modules/ui/entity_editor.js | 20 +++++++++++++++++---
 modules/ui/preset_list.js   | 22 ++++++++++++++++++----
 3 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index afe4aa1fe..b2be2f88b 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -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,
diff --git a/modules/ui/entity_editor.js b/modules/ui/entity_editor.js
index 7d6c8c1c7..5b8ca940d 100644
--- a/modules/ui/entity_editor.js
+++ b/modules/ui/entity_editor.js
@@ -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
diff --git a/modules/ui/preset_list.js b/modules/ui/preset_list.js
index b593602fe..7990bf2c1 100644
--- a/modules/ui/preset_list.js
+++ b/modules/ui/preset_list.js
@@ -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() + '&hellip;'; });
@@ -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);