1.2.0

Added optional cancel button Added optional showing input spinner and configurable steps Input numeric keyboard for iOS
Alberplz · Feb 23, 2016 · 46d94b0 · 46d94b0
1 parent 6de4d64
commit 46d94b0
Show file tree

Hide file tree

Showing 7 changed files with 318 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -4,9 +4,6 @@ AnguarJS colorpicker directive with no dependencies required.
 # Demo page
 http://alberplz.github.io/angular-colorpicker-directive/index.html
 
-# Installation
-bower install angular-colorpicker-directive
-
 # Usage
 * Include color-picker.min.js and color-picker.min.css:
 ```html
@@ -45,7 +42,7 @@ If you want to change precaculated images for color picker sliders you can find
      <textarea></textarea>
 </div>
 ```
-A bug in Firefox 44.0.2 for Linux shows url base64 images with small vertical lines.
+The images are not compressed.
 
 * Demo:
 http://alberplz.github.io/angular-colorpicker-directive/slider-creator/slider-images.html

diff --git a/css/color-picker.css b/css/color-picker.css
@@ -67,6 +67,19 @@
     text-align: center;
     font-size: 13px;
     height: 26px; }
+    .color-picker input:invalid {
+      box-shadow: none; }
+    .color-picker input:-moz-submit-invalid {
+      box-shadow: none; }
+    .color-picker input:-moz-ui-invalid {
+      box-shadow: none; }
+  .color-picker button {
+    position: absolute;
+    top: 275px;
+    left: 161px; }
+
+.color-picker-extra-large {
+  height: 316px !important; }
 
 div.cursor-sv {
   cursor: default;
@@ -142,23 +155,29 @@ div.cursor {
 
 .type-policy {
   position: absolute;
-  top: 226px;
-  left: 200px;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAABPgAAAT4BMmUKhwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAD2SURBVCiRjZCxSsRQFERnkpR5haQVxN4qeSGdBKyCoK21tZUsbLc/IAj7A/6DgljZpAuPdNvb2IpNqmzC2CSSXYl6mgtzD/fCUBJGsiyL+r5/9n3/vKqqjzH3MKHrugcA2TDxQ7LWLkgWAECysNYuxh0lIU3TE0kvAA4nB95JFs65DfM8D5qmeZV0ij1IlmEYnvlRFN0BuNoXBo7atg0DSW8kVzMSJH1yWsEc3p8GAMZxfEPy4Ld3AcljALezV8h7zxizJFnOCKUxZvmvMj0AcM5tAKwBbAdhC2A95NipIEmSR5IXkp7qur4c850KgiC4BlAN85svEbZkexWwDjwAAAAASUVORK5CYII=");
+  top: 230px;
+  left: 210px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACewAAAnsB01CO3AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAIASURBVEiJ7ZY9axRRFIafsxMStrLQJpAgpBFhi+C9w1YSo00I6RZ/g9vZpBf/QOr4GyRgkSKNSrAadsZqQGwCkuAWyRZJsySwvhZ7N/vhzrgbLH3Ld8597jlzz50zJokyxXH8DqDVar0qi6v8BbItqSGpEcfxdlmsFWXkvX8AfAVWg3UKPEnT9GKujMzsAFgZsVaCN1VTQd77XUnrgE1kv+6935268WRpzrnHZvYRWC7YvC3pRZZl3wozqtVqiyH9IgjAspkd1Gq1xUJQtVrdB9ZKIAOthdg/Qc65LUk7wNIMoCVJO865rYFhkqjX6/d7vV4GPJwBMqofURS5JEk6FYBer/eeYb/Mo9WwFnPOvQbeAvfuAAK4BN4sAJtAG/gJIElmNuiJyba3EGNmZiPeZuEVmVell/Y/6N+CzDn3AXhEOOo7Hv/3BeAz8IzQkMPnJbuPx1wC+yYJ7/0nYIP5S/0FHKdp+rwCEEXRS/rf5Hl1Gtb2M0iSpCOpCZzPATmX1EySpHMLAsiy7MjMDoHrGSDXZnaYZdnRwBh7J91utwmczAA6CbG3GgPleX4jqUH/a1CktqRGnuc3hSCAMB32gKspkCtgb3KCQMmkjeP4WNJThrNNZval1WptTIsv7JtQ4tmIdRa8qSoEpWl6YWZNoAN0zKxZNPehpLSBZv2t+Q0CJ9lLnARQLAAAAABJRU5ErkJggg==");
   background-repeat: no-repeat;
-  width: 9px;
+  background-size: 8px 16px;
+  -moz-background-size: 8px 16px;
+  -webkit-background-size: 8px 16px;
+  -o-background-size: 8px 16px;
+  width: 8px;
   height: 16px; }
 
 .hsla-text {
   position: absolute;
   top: 220px;
-  left: 20px; }
+  left: 18px; }
   .hsla-text input {
+    margin: 0px;
     float: left;
-    width: 40px; }
+    width: 46px;
+    font-size: 12px; }
   .hsla-text div {
     float: left;
-    width: 40px;
+    width: 46px;
     font-size: 11px;
     text-align: center;
     color: #555; }
@@ -168,13 +187,15 @@ div.cursor {
 .rgba-text {
   position: absolute;
   top: 220px;
-  left: 20px; }
+  left: 18px; }
   .rgba-text input {
+    margin: 0px;
     float: left;
-    width: 40px; }
+    width: 46px;
+    font-size: 12px; }
   .rgba-text div {
     float: left;
-    width: 40px;
+    width: 46px;
     font-size: 11px;
     text-align: center;
     color: #555; }
@@ -184,7 +205,7 @@ div.cursor {
 .hex-text {
   position: absolute;
   top: 220px;
-  left: 20px; }
+  left: 30px; }
   .hex-text input {
     float: left;
     width: 160px; }
@@ -196,10 +217,8 @@ div.cursor {
     clear: left;
     width: 160px; }
 
-input[type=number]::-webkit-inner-spin-button,
-input[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0; }
-
-input[type=number] {
+.color-picker-input-spinner {
   -moz-appearance: textfield; }
+  .color-picker-input-spinner::-webkit-inner-spin-button, .color-picker-input-spinner::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0; }
diff --git a/css/color-picker.min.css b/css/color-picker.min.css
diff --git a/index.html b/index.html
@@ -16,6 +16,8 @@
                 $scope.var3 = '#ff2e00';
                 $scope.var4 = '#e6ff00';
                 $scope.var5 = '#db00ff';
+                $scope.var6 = '#03ff8b';
+                $scope.var7 = '#008fff';
             }]);
         </script>
         <div class="container" ng-app="app" ng-controller="AppCtrl">
@@ -115,6 +117,50 @@ <h4><b>by Alberto Pujante</b></h4>
                 </div>                
             </div>
 
+            <hr>
+            <div class="row">
+                <div class="col-md-5">                    
+                    <input color-picker
+                   color-picker-model="var6"
+                   color-picker-show-input-spinner="true"
+                   color-picker-spinner-rgba-steps="5;5;5;0.1"
+                   color-picker-spinner-hsla-steps="5;5;5;0.1"
+                   ng-style="{background: var6}"/>
+                </div>
+                <div class="col-md-7">
+                    <p>You can show input spinner and change the step:</p>
+                    <pre>
+&lt;input color-picker
+color-picker-model="var"
+color-picker-show-input-spinner="true"
+color-picker-spinner-rgba-steps="5;5;5;0.1"
+color-picker-spinner-hsla-steps="5;5;5;0.1"
+ng-style="{background:var}"/&gt;
+                     </pre>
+                </div>                
+            </div>
+
+            <hr>
+            <div class="row">   
+                <div class="col-md-5">
+                    <input color-picker                            
+                           color-picker-model="var7"
+                           color-picker-show-cancel-button="true"
+                           color-picker-cancel-button-class="btn btn-default btn-xs"
+                           ng-style="{background: var7}"/>                    
+                </div>
+                <div class="col-md-7">  
+                    <p>Cancel button:</p>
+                    <pre>
+&lt;input color-picker 
+color-picker-model="var"
+color-picker-show-cancel-button="true"
+color-picker-cancel-button-class="btn btn-default btn-xs"
+ng-style="{background:var}"/&gt;
+                     </pre>
+                </div>
+            </div>
+
             <hr>
             <br>
             <div class="row">
@@ -150,7 +196,38 @@ <h4><b>by Alberto Pujante</b></h4>
                                 <td>
                                     true, <b>false</b>
                                 </td>
-                            </tr>                    
+                            </tr>
+                            <tr>
+                                <td>color-picker-show-input-spinner</td>
+                                <td>
+                                    true, <b>false</b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>color-picker-spinner-rgba-steps</td>
+                                <td>
+                                    A semicolon separated list with the steps, <b>default: 1;1;1;0.1</b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>color-picker-spinner-hsla-steps</td>
+                                <td>
+                                    A semicolon separated list with the steps, <b>default: 1;1;1;0.1</b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>color-picker-show-cancel-button</td>
+                                <td>
+                                    true, <b>false</b>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>color-picker-cancel-button-class</td>
+                                <td>
+                                    Your custom class for cancel button
+                                </td>
+                            </tr>
+
                         </tbody>
                     </table>
                 </div>
@@ -159,4 +236,4 @@ <h4><b>by Alberto Pujante</b></h4>
             <footer class="footer">&copy; Alberto Pujante 2016 | <a href="https://github.com/Alberplz/angular-colorpicker-directive">Angular Color Picker Directive</a></footer>
         </div>        
     </body>
-</html>
+</html>