From a75f9db98d37aab755c97ec3cbe08b40fcd7dd5a Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Sat, 28 Oct 2017 23:35:12 +0200
Subject: [PATCH] fix(globalLinks): improve custom icon selection

---
 .../edit-global-link/_edit-global-link-c.scss |  6 ++++
 .../edit-global-link/edit-global-link-c.html  | 31 +++++++++++--------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/app-src/scripts/dialogs/edit-global-link/_edit-global-link-c.scss b/app-src/scripts/dialogs/edit-global-link/_edit-global-link-c.scss
index e69de29bb2..a68f5d8dca 100644
--- a/app-src/scripts/dialogs/edit-global-link/_edit-global-link-c.scss
+++ b/app-src/scripts/dialogs/edit-global-link/_edit-global-link-c.scss
@@ -0,0 +1,6 @@
+.edit-global-link-dialog{
+  .custom-icon-wrapper{
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file
diff --git a/app-src/scripts/dialogs/edit-global-link/edit-global-link-c.html b/app-src/scripts/dialogs/edit-global-link/edit-global-link-c.html
index 3544e60881..938c3d1a3e 100644
--- a/app-src/scripts/dialogs/edit-global-link/edit-global-link-c.html
+++ b/app-src/scripts/dialogs/edit-global-link/edit-global-link-c.html
@@ -39,19 +39,24 @@
           </md-option>
         </md-select>
 
-        <md-autocomplete flex="100"
-                         tabindex="1"
-                         md-selected-item="vm.linkCopy.customIcon"
-                         md-search-text="vm.searchIconTxt"
-                         md-items="icon in vm.getFilteredIconSuggestions(vm.searchIconTxt)"
-                         md-item-text="icon"
-                         md-require-match="true"
-                         placeholder="Select custom icon">
-          <md-item-template>
-          <span md-highlight-text="vm.searchIconTxt"
-                md-highlight-flags="i">{{icon}}</span>
-          </md-item-template>
-        </md-autocomplete>
+
+        <div class="custom-icon-wrapper">
+          <md-autocomplete tabindex="1"
+                           md-selected-item="vm.linkCopy.customIcon"
+                           md-search-text="vm.searchIconTxt"
+                           md-items="icon in vm.getFilteredIconSuggestions(vm.searchIconTxt)"
+                           md-item-text="icon"
+                           md-require-match="true"
+                           placeholder="Select custom icon">
+            <md-item-template>
+              <ng-md-icon icon="{{icon}}"></ng-md-icon>
+              <span md-highlight-text="vm.searchIconTxt"
+                    md-highlight-flags="i">{{icon}}</span>
+            </md-item-template>
+          </md-autocomplete>
+          <ng-md-icon ng-if="vm.linkCopy.customIcon"
+                      icon="{{vm.linkCopy.customIcon}}"></ng-md-icon>
+        </div>
       </div>
     </md-dialog-content>