Skip to content

Commit 4acab8e

Browse files
AlberplzAlberplz
committed
1.2.0
Added output-format option
1 parent a049ad1 commit 4acab8e

File tree

7 files changed

+220
-162
lines changed

7 files changed

+220
-162
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,14 @@ Default option is the first item.
2525
<input color-picker
2626
color-picker-model="var"
2727
color-picker-show-value="true, false"
28+
color-picker-output-format="'rgba', 'hsla', 'hex'"
2829
color-picker-position="right, left, top, bottom"
2930
color-picker-fixed-position="false, true"
3031
color-picker-show-input-spinner="true"
3132
color-picker-spinner-rgba-steps="1;1;1;0.1"
3233
color-picker-spinner-hsla-steps="1;1;1;0.1"
3334
color-picker-show-cancel-button="false, true"
34-
color-picker-cancel-button-class="btn btn-default btn-xs"
35+
color-picker-cancel-button-class="your custom class"
3536
/>
3637
```
3738

‎css/color-picker.css‎

Lines changed: 28 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
.color-picker {
4848
margin-left: 10px;
4949
width: 232px;
50-
height: 300px;
50+
height: 290px;
5151
border: #777 solid 1px;
5252
left: 30px;
5353
top: 250px;
@@ -79,7 +79,7 @@
7979
left: 161px; }
8080

8181
.color-picker-extra-large {
82-
height: 316px !important; }
82+
height: 320px !important; }
8383

8484
div.cursor-sv {
8585
cursor: default;
@@ -155,67 +155,57 @@ div.cursor {
155155

156156
.type-policy {
157157
position: absolute;
158-
top: 230px;
159-
left: 210px;
158+
top: 226px;
159+
left: 206px;
160160
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==");
161161
background-repeat: no-repeat;
162+
background-position: center;
162163
background-size: 8px 16px;
163164
-moz-background-size: 8px 16px;
164165
-webkit-background-size: 8px 16px;
165166
-o-background-size: 8px 16px;
166-
width: 8px;
167-
height: 16px; }
168-
169-
.hsla-text {
170-
position: absolute;
171-
top: 220px;
172-
left: 18px; }
173-
.hsla-text input {
174-
margin: 0px;
175-
float: left;
176-
width: 46px;
177-
font-size: 12px; }
178-
.hsla-text div {
179-
float: left;
180-
width: 46px;
181-
font-size: 11px;
182-
text-align: center;
183-
color: #555; }
184-
.hsla-text div:nth-child(5) {
185-
clear: left; }
167+
width: 16px;
168+
height: 24px; }
186169

187-
.rgba-text {
170+
.hsla-text, .rgba-text {
188171
position: absolute;
189172
top: 220px;
190-
left: 18px; }
191-
.rgba-text input {
173+
left: 12px;
174+
font-size: 11px; }
175+
.hsla-text input, .rgba-text input {
192176
margin: 0px;
193177
float: left;
194-
width: 46px;
195-
font-size: 12px; }
196-
.rgba-text div {
178+
width: 40px;
179+
margin-left: 7px;
180+
border: #a9a9a9 solid 1px;
181+
padding: 1px; }
182+
.hsla-text div, .rgba-text div {
197183
float: left;
198-
width: 46px;
199-
font-size: 11px;
184+
width: 40px;
200185
text-align: center;
201-
color: #555; }
202-
.rgba-text div:nth-child(5) {
186+
color: #555;
187+
margin-left: 7px;
188+
margin-top: 4px; }
189+
.hsla-text div:nth-child(5), .rgba-text div:nth-child(5) {
203190
clear: left; }
204191

205192
.hex-text {
206193
position: absolute;
207194
top: 220px;
208-
left: 30px; }
195+
left: 30px;
196+
font-size: 11px; }
209197
.hex-text input {
210198
float: left;
211-
width: 160px; }
199+
width: 160px;
200+
border: #a9a9a9 solid 1px;
201+
padding: 1px; }
212202
.hex-text div {
213-
font-size: 11px;
214203
text-align: center;
215204
color: #555;
216205
float: left;
217206
clear: left;
218-
width: 160px; }
207+
width: 160px;
208+
margin-top: 4px; }
219209

220210
.color-picker-input-spinner {
221211
-moz-appearance: textfield; }

‎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: 56 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
8-
<link rel="stylesheet" type="text/css" href="css/color-picker.min.css" />
8+
<link rel="stylesheet" type="text/css" href="css/color-picker.min.css" />
9+
<style>
10+
input[color-picker]{
11+
margin-bottom: 10px;
12+
width: 182px;
13+
}
14+
</style>
915
</head>
1016
<body>
1117
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
@@ -18,6 +24,8 @@
1824
$scope.var5 = '#db00ff';
1925
$scope.var6 = '#03ff8b';
2026
$scope.var7 = '#008fff';
27+
$scope.var8 = '#ff2e00';
28+
$scope.var9 = '#e6ff00';
2129
}]);
2230
</script>
2331
<div class="container" ng-app="app" ng-controller="AppCtrl">
@@ -59,13 +67,36 @@ <h4><b>by Alberto Pujante</b></h4>
5967

6068
</div>
6169

70+
<div class="row">
71+
<hr>
72+
<div class="col-md-5">
73+
<input color-picker
74+
color-picker-model="var3"
75+
color-picker-output-format="'rgba'"
76+
ng-style="{background: var3}"/><br><br>
77+
<input color-picker
78+
color-picker-model="var4"
79+
color-picker-output-format="'hsla'"
80+
ng-style="{background: var4}"/>
81+
</div>
82+
<div class="col-md-7">
83+
<p>Output format:</p>
84+
<pre>
85+
&lt;input color-picker
86+
color-picker-model="var"
87+
color-picker-output-format="'rgba'"
88+
ng-style="{background: var}"/&gt;
89+
</pre>
90+
</div>
91+
</div>
92+
6293
<hr>
6394
<div class="row">
6495
<div class="col-md-5">
6596
<input color-picker
6697
color-picker-show-value="false"
67-
color-picker-model="var3"
68-
ng-style="{background: var3}"/>
98+
color-picker-model="var5"
99+
ng-style="{background: var5}"/>
69100
</div>
70101
<div class="col-md-7">
71102
<p>Hiding output text color. When user introduces a value the output color is showed, use a no editable html element if you want to avoid this behaviour:</p>
@@ -83,9 +114,9 @@ <h4><b>by Alberto Pujante</b></h4>
83114
<div class="row">
84115
<div class="col-md-5">
85116
<input color-picker
86-
color-picker-model="var4"
117+
color-picker-model="var6"
87118
color-picker-position="bottom"
88-
ng-style="{background: var4}"/>
119+
ng-style="{background: var6}"/>
89120
</div>
90121
<div class="col-md-7">
91122
<p>You can change the color picker position, </p>
@@ -102,9 +133,9 @@ <h4><b>by Alberto Pujante</b></h4>
102133
<div class="row">
103134
<div class="col-md-5">
104135
<input color-picker
105-
color-picker-model="var5"
136+
color-picker-model="var7"
106137
color-picker-fixed-position="true"
107-
ng-style="{background: var5}"/>
138+
ng-style="{background: var7}"/>
108139
</div>
109140
<div class="col-md-7">
110141
<p>or put it in a fixed position:</p>
@@ -121,11 +152,11 @@ <h4><b>by Alberto Pujante</b></h4>
121152
<div class="row">
122153
<div class="col-md-5">
123154
<input color-picker
124-
color-picker-model="var6"
155+
color-picker-model="var8"
125156
color-picker-show-input-spinner="true"
126157
color-picker-spinner-rgba-steps="5;5;5;0.1"
127158
color-picker-spinner-hsla-steps="5;5;5;0.1"
128-
ng-style="{background: var6}"/>
159+
ng-style="{background: var8}"/>
129160
</div>
130161
<div class="col-md-7">
131162
<p>You can show input spinner and change the step:</p>
@@ -144,10 +175,10 @@ <h4><b>by Alberto Pujante</b></h4>
144175
<div class="row">
145176
<div class="col-md-5">
146177
<input color-picker
147-
color-picker-model="var7"
178+
color-picker-model="var9"
148179
color-picker-show-cancel-button="true"
149180
color-picker-cancel-button-class="btn btn-default btn-xs"
150-
ng-style="{background: var7}"/>
181+
ng-style="{background: var9}"/>
151182
</div>
152183
<div class="col-md-7">
153184
<p>Cancel button:</p>
@@ -159,7 +190,7 @@ <h4><b>by Alberto Pujante</b></h4>
159190
ng-style="{background:var}"/&gt;
160191
</pre>
161192
</div>
162-
</div>
193+
</div>
163194

164195
<hr>
165196
<br>
@@ -176,7 +207,7 @@ <h4><b>by Alberto Pujante</b></h4>
176207
<tr>
177208
<td>color-picker-model</td>
178209
<td>
179-
Variable with de color value
210+
Variable with the color value.
180211
</td>
181212
</tr>
182213
<tr>
@@ -185,6 +216,14 @@ <h4><b>by Alberto Pujante</b></h4>
185216
<b>true</b>, false
186217
</td>
187218
</tr>
219+
<tr>
220+
<td>color-picker-output-format</td>
221+
<td>
222+
'rgba', 'hsla', <b>'hex'</b><br>
223+
Don't forget single quotes. Notice that you can use a variable to control output format,<br>
224+
for example, to let users change output format from interface.
225+
</td>
226+
</tr>
188227
<tr>
189228
<td>color-picker-position</td>
190229
<td>
@@ -200,7 +239,8 @@ <h4><b>by Alberto Pujante</b></h4>
200239
<tr>
201240
<td>color-picker-show-input-spinner</td>
202241
<td>
203-
true, <b>false</b>
242+
true, <b>false</b><br>
243+
With false value you can still change values with the cursor.
204244
</td>
205245
</tr>
206246
<tr>
@@ -224,7 +264,7 @@ <h4><b>by Alberto Pujante</b></h4>
224264
<tr>
225265
<td>color-picker-cancel-button-class</td>
226266
<td>
227-
Your custom class for cancel button
267+
Your custom class for cancel button.
228268
</td>
229269
</tr>
230270

@@ -234,6 +274,7 @@ <h4><b>by Alberto Pujante</b></h4>
234274
</div>
235275
<hr>
236276
<footer class="footer">&copy; Alberto Pujante 2016 | <a href="https://github.com/Alberplz/angular-colorpicker-directive">Angular Color Picker Directive</a></footer>
277+
<br>
237278
</div>
238279
</body>
239280
</html>

0 commit comments

Comments
 (0)