Skip to content

Commit 46d94b0

Browse files
AlberplzAlberplz
committed
1.2.0
Added optional cancel button Added optional showing input spinner and configurable steps Input numeric keyboard for iOS
1 parent 6de4d64 commit 46d94b0

File tree

7 files changed

+318
-121
lines changed

7 files changed

+318
-121
lines changed

‎README.md‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ AnguarJS colorpicker directive with no dependencies required.
44
# Demo page
55
http://alberplz.github.io/angular-colorpicker-directive/index.html
66

7-
# Installation
8-
bower install angular-colorpicker-directive
9-
107
# Usage
118
* Include color-picker.min.js and color-picker.min.css:
129
```html
@@ -45,7 +42,7 @@ If you want to change precaculated images for color picker sliders you can find
4542
<textarea></textarea>
4643
</div>
4744
```
48-
A bug in Firefox 44.0.2 for Linux shows url base64 images with small vertical lines.
45+
The images are not compressed.
4946

5047
* Demo:
5148
http://alberplz.github.io/angular-colorpicker-directive/slider-creator/slider-images.html

‎css/color-picker.css‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,19 @@
6767
text-align: center;
6868
font-size: 13px;
6969
height: 26px; }
70+
.color-picker input:invalid {
71+
box-shadow: none; }
72+
.color-picker input:-moz-submit-invalid {
73+
box-shadow: none; }
74+
.color-picker input:-moz-ui-invalid {
75+
box-shadow: none; }
76+
.color-picker button {
77+
position: absolute;
78+
top: 275px;
79+
left: 161px; }
80+
81+
.color-picker-extra-large {
82+
height: 316px !important; }
7083

7184
div.cursor-sv {
7285
cursor: default;
@@ -142,23 +155,29 @@ div.cursor {
142155

143156
.type-policy {
144157
position: absolute;
145-
top: 226px;
146-
left: 200px;
147-
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAABPgAAAT4BMmUKhwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAD2SURBVCiRjZCxSsRQFERnkpR5haQVxN4qeSGdBKyCoK21tZUsbLc/IAj7A/6DgljZpAuPdNvb2IpNqmzC2CSSXYl6mgtzD/fCUBJGsiyL+r5/9n3/vKqqjzH3MKHrugcA2TDxQ7LWLkgWAECysNYuxh0lIU3TE0kvAA4nB95JFs65DfM8D5qmeZV0ij1IlmEYnvlRFN0BuNoXBo7atg0DSW8kVzMSJH1yWsEc3p8GAMZxfEPy4Ld3AcljALezV8h7zxizJFnOCKUxZvmvMj0AcM5tAKwBbAdhC2A95NipIEmSR5IXkp7qur4c850KgiC4BlAN85svEbZkexWwDjwAAAAASUVORK5CYII=");
158+
top: 230px;
159+
left: 210px;
160+
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==");
148161
background-repeat: no-repeat;
149-
width: 9px;
162+
background-size: 8px 16px;
163+
-moz-background-size: 8px 16px;
164+
-webkit-background-size: 8px 16px;
165+
-o-background-size: 8px 16px;
166+
width: 8px;
150167
height: 16px; }
151168

152169
.hsla-text {
153170
position: absolute;
154171
top: 220px;
155-
left: 20px; }
172+
left: 18px; }
156173
.hsla-text input {
174+
margin: 0px;
157175
float: left;
158-
width: 40px; }
176+
width: 46px;
177+
font-size: 12px; }
159178
.hsla-text div {
160179
float: left;
161-
width: 40px;
180+
width: 46px;
162181
font-size: 11px;
163182
text-align: center;
164183
color: #555; }
@@ -168,13 +187,15 @@ div.cursor {
168187
.rgba-text {
169188
position: absolute;
170189
top: 220px;
171-
left: 20px; }
190+
left: 18px; }
172191
.rgba-text input {
192+
margin: 0px;
173193
float: left;
174-
width: 40px; }
194+
width: 46px;
195+
font-size: 12px; }
175196
.rgba-text div {
176197
float: left;
177-
width: 40px;
198+
width: 46px;
178199
font-size: 11px;
179200
text-align: center;
180201
color: #555; }
@@ -184,7 +205,7 @@ div.cursor {
184205
.hex-text {
185206
position: absolute;
186207
top: 220px;
187-
left: 20px; }
208+
left: 30px; }
188209
.hex-text input {
189210
float: left;
190211
width: 160px; }
@@ -196,10 +217,8 @@ div.cursor {
196217
clear: left;
197218
width: 160px; }
198219

199-
input[type=number]::-webkit-inner-spin-button,
200-
input[type=number]::-webkit-outer-spin-button {
201-
-webkit-appearance: none;
202-
margin: 0; }
203-
204-
input[type=number] {
220+
.color-picker-input-spinner {
205221
-moz-appearance: textfield; }
222+
.color-picker-input-spinner::-webkit-inner-spin-button, .color-picker-input-spinner::-webkit-outer-spin-button {
223+
-webkit-appearance: none;
224+
margin: 0; }

‎css/color-picker.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 79 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
$scope.var3 = '#ff2e00';
1717
$scope.var4 = '#e6ff00';
1818
$scope.var5 = '#db00ff';
19+
$scope.var6 = '#03ff8b';
20+
$scope.var7 = '#008fff';
1921
}]);
2022
</script>
2123
<div class="container" ng-app="app" ng-controller="AppCtrl">
@@ -115,6 +117,50 @@ <h4><b>by Alberto Pujante</b></h4>
115117
</div>
116118
</div>
117119

120+
<hr>
121+
<div class="row">
122+
<div class="col-md-5">
123+
<input color-picker
124+
color-picker-model="var6"
125+
color-picker-show-input-spinner="true"
126+
color-picker-spinner-rgba-steps="5;5;5;0.1"
127+
color-picker-spinner-hsla-steps="5;5;5;0.1"
128+
ng-style="{background: var6}"/>
129+
</div>
130+
<div class="col-md-7">
131+
<p>You can show input spinner and change the step:</p>
132+
<pre>
133+
&lt;input color-picker
134+
color-picker-model="var"
135+
color-picker-show-input-spinner="true"
136+
color-picker-spinner-rgba-steps="5;5;5;0.1"
137+
color-picker-spinner-hsla-steps="5;5;5;0.1"
138+
ng-style="{background:var}"/&gt;
139+
</pre>
140+
</div>
141+
</div>
142+
143+
<hr>
144+
<div class="row">
145+
<div class="col-md-5">
146+
<input color-picker
147+
color-picker-model="var7"
148+
color-picker-show-cancel-button="true"
149+
color-picker-cancel-button-class="btn btn-default btn-xs"
150+
ng-style="{background: var7}"/>
151+
</div>
152+
<div class="col-md-7">
153+
<p>Cancel button:</p>
154+
<pre>
155+
&lt;input color-picker
156+
color-picker-model="var"
157+
color-picker-show-cancel-button="true"
158+
color-picker-cancel-button-class="btn btn-default btn-xs"
159+
ng-style="{background:var}"/&gt;
160+
</pre>
161+
</div>
162+
</div>
163+
118164
<hr>
119165
<br>
120166
<div class="row">
@@ -150,7 +196,38 @@ <h4><b>by Alberto Pujante</b></h4>
150196
<td>
151197
true, <b>false</b>
152198
</td>
153-
</tr>
199+
</tr>
200+
<tr>
201+
<td>color-picker-show-input-spinner</td>
202+
<td>
203+
true, <b>false</b>
204+
</td>
205+
</tr>
206+
<tr>
207+
<td>color-picker-spinner-rgba-steps</td>
208+
<td>
209+
A semicolon separated list with the steps, <b>default: 1;1;1;0.1</b>
210+
</td>
211+
</tr>
212+
<tr>
213+
<td>color-picker-spinner-hsla-steps</td>
214+
<td>
215+
A semicolon separated list with the steps, <b>default: 1;1;1;0.1</b>
216+
</td>
217+
</tr>
218+
<tr>
219+
<td>color-picker-show-cancel-button</td>
220+
<td>
221+
true, <b>false</b>
222+
</td>
223+
</tr>
224+
<tr>
225+
<td>color-picker-cancel-button-class</td>
226+
<td>
227+
Your custom class for cancel button
228+
</td>
229+
</tr>
230+
154231
</tbody>
155232
</table>
156233
</div>
@@ -159,4 +236,4 @@ <h4><b>by Alberto Pujante</b></h4>
159236
<footer class="footer">&copy; Alberto Pujante 2016 | <a href="https://github.com/Alberplz/angular-colorpicker-directive">Angular Color Picker Directive</a></footer>
160237
</div>
161238
</body>
162-
</html>
239+
</html>

0 commit comments

Comments
 (0)