From 3cdebf4427470427ec7b1a92b3f0d693f2ed0c84 Mon Sep 17 00:00:00 2001
From: Simon Busborg <simon@umbraco.com>
Date: Fri, 12 Feb 2016 09:38:37 +0100
Subject: [PATCH 1/3] Fixes U4-7918 Make icon picker for document type and list
 views consistent

---
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../src/less/components/umb-iconpicker.less   | 46 +++++++++++++++++++
 .../src/views/common/dialogs/iconpicker.html  | 46 ++++++++-----------
 .../overlays/iconpicker/iconpicker.html       | 16 +++++--
 src/Umbraco.Web.UI/umbraco/config/lang/en.xml |  1 +
 5 files changed, 79 insertions(+), 31 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less

diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index a7335d8314..9d01cae4b9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -107,6 +107,7 @@
 @import "components/umb-grid.less";
 @import "components/umb-empty-state.less";
 @import "components/umb-property-editor.less";
+@import "components/umb-iconpicker.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
new file mode 100644
index 0000000000..de9d26a2af
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
@@ -0,0 +1,46 @@
+.umb-iconpicker {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    margin: 0;
+}
+
+.umb-iconpicker-item {
+    display: flex;
+    flex-direction: row;
+    flex: 0 0 12.5%;
+    justify-content: center;
+    align-items: center;
+
+    margin-bottom: 0;
+
+    overflow: hidden;
+}
+
+.umb-iconpicker-item a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+
+    padding: 15px 0;
+
+    text-decoration: none;
+}
+
+.umb-iconpicker-item a:hover,
+.umb-iconpicker-item a:focus{
+    background: darken(@grayLighter, 1%);
+    outline: none;
+}
+
+.umb-iconpicker-item a:active {
+    background: darken(@grayLighter, 4%);
+}
+
+.umb-iconpicker-item i {
+    font-size: 26px;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html
index bcf7fe3247..314bfe85e1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html
@@ -2,55 +2,49 @@
 	<div class="umb-panel-header">
 		<div class="umb-el-wrap umb-panel-buttons">
 	        <div class="form-search">
-                <i class="icon-search"></i>	                    
+                <i class="icon-search"></i>
                 <input type="text"
-                	   style="width: 100%" 
-                       ng-model="searchTerm" 
-                       class="umb-search-field search-query input-block-level" 
+                	   style="width: 100%"
+                       ng-model="searchTerm"
+                       class="umb-search-field search-query input-block-level"
                        placeholder="Filter...">
             </div>
     	</div>
 	</div>
 
 	<div class="umb-panel-body with-footer">
-        
+
         <div class="umb-control-group">
         	<select ng-model="color" class="input-block-level">
         		<option value="">Black</option>
-        		<option value="color-green">Green</option>	
-        		<option value="color-yellow">Yellow</option>	
+        		<option value="color-green">Green</option>
+        		<option value="color-yellow">Yellow</option>
         		<option value="color-orange">Orange</option>
-        		<option value="color-blue">Blue</option>	
+        		<option value="color-blue">Blue</option>
         		<option value="color-red">Red</option>
         	</select>
-<!--
-        	<select class="input-block-level">
-        		<option value="">Black</option>
-        		<option value="color-green">Green</option>	
-        		<option value="color-blue">Turquoise</option>	
-        		<option value="color-purple">Purple</option>	
-        		<option value="color-red">Red</option>	
-        		<option value="color-orange">Orange</option>	
-        		<option value="color-sky-blue">Sky blue</option>	
-        		<option value="color-yellow">Yellow</option>		
-        	</select>-->
-
         </div>
 
         <div class="umb-loader" ng-hide="icons"></div>
 
         <div class="umb-control-group">
-	        <ul class="umb-thumbnails thumbnails" ng-class="color">
-		        <li class="span1" ng-repeat="icon in icons|filter: searchTerm">
-				    <a href="#" title="{{icon}}" class="thumbnail" ng-click="submitClass(icon)" prevent-default>
-						<i class="{{icon}} large" style="font-size: 32px"></i>
+	        <ul class="umb-iconpicker" ng-class="color" ng-show="icons">
+		        <li class="umb-iconpicker-item" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
+				    <a href="#" title="{{icon}}" ng-click="submitClass(icon)" prevent-default>
+						<i class="{{icon}} large"></i>
 		            </a>
 		        </li>
 		    </ul>
-		</div>
 
+			<umb-empty-state
+				ng-if="filtered.length === 0"
+				position="center">
+				<localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
+			</umb-empty-state>
+
+		</div>
 	</div>
-	
+
 	<div class="umb-panel-footer" >
 		<div class="umb-el-wrap umb-panel-buttons">
 	        <div class="btn-toolbar umb-btn-toolbar pull-right">
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
index e48db80179..30bc1f9b9a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
@@ -39,13 +39,19 @@
     <umb-load-indicator ng-if="loading"></umb-load-indicator>
 
     <div class="umb-control-group" ng-show="!loading">
-        <ul class="umb-thumbnails thumbnails" ng-class="color">
-            <li class="span1" ng-repeat="icon in icons|filter: searchTerm">
-                <a href="#" title="{{icon}}" class="thumbnail" ng-click="selectIcon(icon, color)" prevent-default>
-                    <i class="{{icon}} large" style="font-size: 32px"></i>
+        <ul class="umb-iconpicker" ng-class="color" ng-show="icons">
+            <li class="umb-iconpicker-item" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
+                <a href="#" title="{{icon}}" ng-click="selectIcon(icon, color)" prevent-default>
+                    <i class="{{icon}} large"></i>
                 </a>
             </li>
         </ul>
-    </div>
 
+        <umb-empty-state
+            ng-if="filtered.length === 0"
+            position="center">
+            <localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
+        </umb-empty-state>
+
+    </div>
 </div>
diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
index b14b101af7..4f6b65dc64 100644
--- a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml
@@ -265,6 +265,7 @@
     <key alias="selectContent">Select content</key>
     <key alias="selectMember">Select member</key>
     <key alias="selectMemberGroup">Select member group</key>
+    <key alias="noIconsFound">No icons were found</key>
 
     <key alias="noMacroParams">There are no parameters for this macro</key>
 

From 5c1502c8066a6c49f3047e0942e432488ff2b0a5 Mon Sep 17 00:00:00 2001
From: Simon Busborg <simon@umbraco.com>
Date: Fri, 12 Feb 2016 10:13:30 +0100
Subject: [PATCH 2/3] Removes umb-control-group when no icons displayed

---
 .../src/views/common/dialogs/iconpicker.html    | 17 ++++++++---------
 .../common/overlays/iconpicker/iconpicker.html  | 15 +++++++--------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html
index 314bfe85e1..260d8ff85c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.html
@@ -25,9 +25,9 @@
         	</select>
         </div>
 
-        <div class="umb-loader" ng-hide="icons"></div>
+        <umb-load-indicator ng-if="loading"></umb-load-indicator>
 
-        <div class="umb-control-group">
+        <div class="umb-control-group" ng-show="!loading">
 	        <ul class="umb-iconpicker" ng-class="color" ng-show="icons">
 		        <li class="umb-iconpicker-item" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
 				    <a href="#" title="{{icon}}" ng-click="submitClass(icon)" prevent-default>
@@ -35,14 +35,13 @@
 		            </a>
 		        </li>
 		    </ul>
-
-			<umb-empty-state
-				ng-if="filtered.length === 0"
-				position="center">
-				<localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
-			</umb-empty-state>
-
 		</div>
+
+		<umb-empty-state
+			ng-if="filtered.length === 0"
+			position="center">
+			<localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
+		</umb-empty-state>
 	</div>
 
 	<div class="umb-panel-footer" >
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
index 30bc1f9b9a..83a02a4504 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/iconpicker/iconpicker.html
@@ -38,7 +38,7 @@
 
     <umb-load-indicator ng-if="loading"></umb-load-indicator>
 
-    <div class="umb-control-group" ng-show="!loading">
+    <div class="umb-control-group" ng-show="!loading && filtered.length > 0 ">
         <ul class="umb-iconpicker" ng-class="color" ng-show="icons">
             <li class="umb-iconpicker-item" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
                 <a href="#" title="{{icon}}" ng-click="selectIcon(icon, color)" prevent-default>
@@ -46,12 +46,11 @@
                 </a>
             </li>
         </ul>
-
-        <umb-empty-state
-            ng-if="filtered.length === 0"
-            position="center">
-            <localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
-        </umb-empty-state>
-
     </div>
+
+    <umb-empty-state
+        ng-if="filtered.length === 0"
+        position="center">
+        <localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
+    </umb-empty-state>
 </div>

From 0f8a13d60a5b99523f44d337557a0a4fecce553e Mon Sep 17 00:00:00 2001
From: Simon Busborg <simon@umbraco.com>
Date: Fri, 12 Feb 2016 10:17:42 +0100
Subject: [PATCH 3/3] 7 in a row instead of 8, bumped font-size on icons to 30

---
 .../src/less/components/umb-iconpicker.less                   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
index de9d26a2af..e0cdb7cac5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-iconpicker.less
@@ -9,7 +9,7 @@
 .umb-iconpicker-item {
     display: flex;
     flex-direction: row;
-    flex: 0 0 12.5%;
+    flex: 0 0 14.28%;
     justify-content: center;
     align-items: center;
 
@@ -42,5 +42,5 @@
 }
 
 .umb-iconpicker-item i {
-    font-size: 26px;
+    font-size: 30px;
 }