From 2dc6e395a83b9b5d87d5a50092a8dfc2f525c5a1 Mon Sep 17 00:00:00 2001
From: bjarnef <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 16 Nov 2015 01:15:51 +0100
Subject: [PATCH] Add more colors to icon-picker dialog

---
 .../src/less/property-editors.less            |  16 ++-
 .../src/less/variables.less                   |  25 +++-
 .../common/dialogs/iconpicker.controller.js   |   6 +-
 .../src/views/common/dialogs/iconpicker.html  | 119 ++++++++++--------
 4 files changed, 110 insertions(+), 56 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index be6b1d7b06..0ca44293f0 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -149,10 +149,22 @@ ul.color-picker li a  {
 
 
 
-.umb-thumbnails{
-  position: relative;
+.umb-thumbnails {
+    position: relative;
+    display: flex;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    justify-content: flex-start;
 }
 
+.umb-thumbnails > li.icon {
+    width: 14%;
+    text-align: center;
+}
 
 .umb-thumbnails i{margin: auto;}
 .umb-thumbnails a{
diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index ec73e62c0c..55f01ebbfe 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -38,11 +38,32 @@
 
 
 //icon colors for tree icons
-.color-red, .color-red i{color: #d90416 !important;}
+/*.color-red, .color-red i{color: #d90416 !important;}
 .color-blue, .color-blue i{color: #04bfbf !important;}
 .color-orange, .color-orange i{color: #d9631e !important;}
 .color-green, .color-green i{color: #04BF67 !important;}
-.color-yellow, .color-yellow i{color: #f28729 !important;}
+.color-yellow, .color-yellow i{color: #f28729 !important;}*/
+
+/* Colors based on http://zavoloklom.github.io/material-design-color-palette/colors.html */
+.color-black, .color-black i { color: #000 !important; }
+.color-blue-grey, .color-blue-grey i { color: #607d8b !important; }
+.color-grey, .color-grey i { color: #9e9e9e !important; }
+.color-brown, .color-brown i { color: #795548 !important; }
+.color-blue, .color-blue i { color: #2196f3 !important; }
+.color-light-blue, .color-light-blue i {color: #03a9f4 !important; }
+.color-cyan, .color-cyan i { color: #00bcd4 !important; }
+.color-green, .color-green i { color: #4caf50 !important; }
+.color-light-green, .color-light-green i {color: #8bc34a !important; }
+.color-lime, .color-lime i { color: #cddc39 !important; }
+.color-yellow, .color-yellow i { color: #ffeb3b !important; }
+.color-amber, .color-amber i { color: #ffc107 !important; }
+.color-orange, .color-orange i { color: #ff9800 !important; }
+.color-deep-orange, .color-deep-orange i { color: #ff5722 !important; }
+.color-red, .color-red i { color: #f44336 !important; }
+.color-pink, .color-pink i { color: #e91e63 !important; }
+.color-purple,.color-purple i { color: #9c27b0 !important; }
+.color-deep-purple, .color-deep-purple i { color: #673ab7 !important; }
+.color-indigo, .color-indigo i { color: #3f51b5 !important; }
 
 
 // Scaffolding
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.controller.js
index de71977ebe..7f7eed8e4c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/iconpicker.controller.js
@@ -8,10 +8,10 @@ angular.module("umbraco")
             });
 
 			$scope.submitClass = function(icon){
-				if($scope.color)
-				{
+				if($scope.color) {
 					$scope.submit(icon + " " + $scope.color);
-				}else{
+				}
+				else {
 					$scope.submit(icon);	
 				}
 			};
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..991165c5fa 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
@@ -1,63 +1,84 @@
 <div class="umb-panel" ng-controller="Umbraco.Dialogs.IconPickerController">
-	<div class="umb-panel-header">
-		<div class="umb-el-wrap umb-panel-buttons">
-	        <div class="form-search">
-                <i class="icon-search"></i>	                    
+    <div class="umb-panel-header">
+        <div class="umb-el-wrap umb-panel-buttons">
+            <div class="form-search">
+                <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>
+    </div>
+
+    <div class="umb-panel-body with-footer">
 
-	<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-orange">Orange</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>-->
+            <select ng-model="color" class="input-block-level">
+                <option value="color-black">Black</option>
+                <option value="color-blue-grey">Blue Grey</option>
+                <option value="color-grey">Grey</option>
+                <option value="color-brown">Brown</option>
+                <option value="color-blue">Blue</option>
+                <option value="color-light-blue">Light Blue</option>
+                <option value="color-cyan">Cyan</option>
+                <option value="color-green">Green</option>
+                <option value="color-light-green">Light Green</option>
+                <option value="color-lime">Lime</option>
+                <!--<option value="color-yellow">Yellow</option>-->
+                <option value="color-amber">Amber</option>
+                <option value="color-orange">Orange</option>
+                <option value="color-deep-orange">Deep Orange</option>
+                <option value="color-red">Red</option>
+                <option value="color-pink">Pink</option>
+                <option value="color-purple">Purple</option>
+                <option value="color-deep-purple">Deep Purple</option>
+                <option value="color-indigo">Indigo</option>
+            </select>
+            <!--<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-orange">Orange</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>
-		            </a>
-		        </li>
-		    </ul>
-		</div>
+            <ul class="umb-thumbnails thumbnails" ng-class="color">
+                <li class="icon" ng-repeat="icon in icons | filter:searchTerm track by $id(icon)">
+                    <a href="#" title="{{icon}}" class="thumbnail" ng-click="submitClass(icon)" prevent-default>
+                        <i class="{{icon}} large" style="font-size: 32px"></i>
+                    </a>
+                </li>
+            </ul>
+        </div>
 
-	</div>
-	
-	<div class="umb-panel-footer" >
-		<div class="umb-el-wrap umb-panel-buttons">
-	        <div class="btn-toolbar umb-btn-toolbar pull-right">
-	        	<a href ng-click="close()" class="btn btn-link">
-	        		<localize key="general_cancel">Cancel</localize>
-				</a>
-	        </div>
-		</div>
-	</div>
+    </div>
+
+    <div class="umb-panel-footer">
+        <div class="umb-el-wrap umb-panel-buttons">
+            <div class="btn-toolbar umb-btn-toolbar pull-right">
+                <a href="#" ng-click="close()" class="btn btn-link" prevent-default>
+                    <localize key="general_cancel">Cancel</localize>
+                </a>
+            </div>
+        </div>
+    </div>
 </div>