From 5faa9990712de7c5b687cdc55c9e6e90ad416ab6 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Tue, 26 Feb 2019 18:00:33 -0500
Subject: [PATCH] Use preset icon for favorite buttons

---
 css/80_app.css                | 17 ++++++++++++++++-
 modules/ui/modes.js           | 16 +++++++++++++---
 modules/ui/preset_favorite.js |  3 +--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index cf2156f4c..5323aff27 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -472,8 +472,18 @@ button[disabled].action:hover {
     padding: 0 10px;
     min-width: 30px;
     white-space: nowrap;
+    display: flex;
 }
-.tool-group button .icon {
+.tool-group button.add-favorite {
+    padding-left: 0px;
+}
+.tool-group button.add-favorite .label {
+    padding-left: 0;
+}
+.narrow .tool-group button.add-favorite {
+    padding-right: 0;
+}
+.tool-group button > .icon {
     flex: 0 0 20px;
 }
 .tool-group button .label {
@@ -970,6 +980,10 @@ a.hide-toggle {
     height: 60px;
     text-align: center;
 }
+#bar .preset-icon-container {
+    width: 40px;
+    height: 40px;
+}
 
 .preset-icon-line {
     margin: auto;
@@ -1018,6 +1032,7 @@ a.hide-toggle {
 .preset-icon-frame {
     width: 100%;
     height:100%;
+    position: absolute;
 }
 .preset-icon-frame .icon{
     position: absolute;
diff --git a/modules/ui/modes.js b/modules/ui/modes.js
index c73628054..92151dc77 100644
--- a/modules/ui/modes.js
+++ b/modules/ui/modes.js
@@ -13,6 +13,7 @@ import {
 import { svgIcon } from '../svg';
 import { t } from '../util/locale';
 import { tooltip } from '../util/tooltip';
+import { uiPresetIcon } from './preset_icon';
 import { uiTooltipHtml } from './tooltipHtml';
 
 export function uiModes(context) {
@@ -110,7 +111,8 @@ export function uiModes(context) {
                     description: [t('operations.add.title'), t('presets.presets.' + preset.id + '.name'), t('geometry.' + d.geom)].join(' '),
                     key: '',
                     icon: icon,
-                    preset: preset
+                    preset: preset,
+                    geometry: d.geom
                 };
                 switch (d.geom) {
                     case 'point':
@@ -158,8 +160,16 @@ export function uiModes(context) {
 
             buttonsEnter
                 .each(function(d) {
-                    d3_select(this)
-                        .call(svgIcon(d.icon || '#iD-icon-' + d.button));
+                    if (d.preset) {
+                        d3_select(this)
+                            .call(uiPresetIcon()
+                                .geometry(d.geometry)
+                                .preset(d.preset)
+                            )
+                    } else {
+                        d3_select(this)
+                            .call(svgIcon(d.icon || '#iD-icon-' + d.button));
+                    }
                 });
 
             buttonsEnter
diff --git a/modules/ui/preset_favorite.js b/modules/ui/preset_favorite.js
index ffdb02307..f78808c20 100644
--- a/modules/ui/preset_favorite.js
+++ b/modules/ui/preset_favorite.js
@@ -14,10 +14,9 @@ export function uiPresetFavorite(preset, geom, context) {
 
 
     presetFavorite.button = function(selection) {
-        var data = (preset.icon) ? [0] : [];
 
         _button = selection.selectAll('.preset-favorite-button')
-            .data(data);
+            .data([0]);
 
         _button.exit().remove();