Skip to content

Commit 6ea9699

Browse files
author
Robert He
committed
MAGETWO-71622: [UI Component] Color Picker
 - implemented basic UI component Color Picker
1 parent 8eff496 commit 6ea9699

File tree

10 files changed

+63
-87
lines changed

10 files changed

+63
-87
lines changed

‎app/code/Magento/Ui/Model/ColorPicker/FullMode.php

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ public function getConfig()
2222
{
2323
return [
2424
'showInput' => true,
25-
'allowEmpty' => true,
2625
'showInitial' => false,
2726
'showPalette' => true,
2827
'showAlpha' => true,

‎app/code/Magento/Ui/Model/ColorPicker/NoAlphaMode.php

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ public function getConfig()
2222
{
2323
return [
2424
'showInput' => true,
25-
'allowEmpty' => false,
2625
'showInitial' => false,
2726
'showPalette' => true,
2827
'showAlpha' => false,

‎app/code/Magento/Ui/Model/ColorPicker/PaletteOnlyMode.php

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ public function getConfig()
2222
{
2323
return [
2424
'showInput' => false,
25-
'allowEmpty' => false,
2625
'showInitial' => false,
2726
'showPalette' => true,
2827
'showAlpha' => false,

‎app/code/Magento/Ui/Model/ColorPicker/SimpleMode.php

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ public function getConfig()
2222
{
2323
return [
2424
'showInput' => false,
25-
'allowEmpty' => false,
2625
'showInitial' => false,
2726
'showPalette' => false,
2827
'showAlpha' => false,

‎app/code/Magento/Ui/view/base/ui_component/etc/definition.xml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,8 +149,9 @@
149149
<initialMediaGalleryOpenSubpath>wysiwyg</initialMediaGalleryOpenSubpath>
150150
</settings>
151151
</imageUploader>
152-
<colorPicker class="Magento\Ui\Component\Form\Element\ColorPicker" component="Magento_Ui/js/form/element/colorPicker" template="ui/form/element/colorPicker">
152+
<colorPicker class="Magento\Ui\Component\Form\Element\ColorPicker" component="Magento_Ui/js/form/element/colorPicker" template="ui/form/field">
153153
<settings>
154+
<elementTmpl>ui/form/element/colorPicker</elementTmpl>
154155
<colorFormat>rgb</colorFormat>
155156
<colorPickerMode>full</colorPickerMode>
156157
</settings>

‎app/code/Magento/Ui/view/base/web/js/form/element/colorPicker.js

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -38,47 +38,15 @@ define([
3838
}
3939
},
4040

41-
initConfig: function (config) {
42-
this._super();
43-
44-
this.constructor.defaults.colorPickerConfig = Object.assign(this.constructor.defaults.colorPickerConfig, config.colorPickerConfig);
45-
return this;
46-
},
47-
48-
/**
49-
* Initializes observable properties of instance
50-
*
51-
* @returns {Abstract} Chainable.
52-
*/
53-
initObservable: function () {
54-
this._super()
55-
.observe('componentTemplate');
56-
return this;
57-
},
58-
5941
/**
6042
* Invokes initialize method of parent class,
6143
* contains initialization logic
6244
*/
6345
initialize: function () {
6446
this._super();
65-
47+
this.colorPickerConfig.value = this.value;
6648
return this;
67-
},
68-
69-
showColorPicker: function () {
70-
jQuery('#colorPicker-spectrum').spectrum("show");
71-
},
72-
73-
setInputValue: function() {
74-
var inputValue = jQuery('#colorPicker-input').val(),
75-
inputColor = tinycolor(inputValue);
76-
77-
if (inputColor.isValid()) {
78-
jQuery('#colorPicker-spectrum').spectrum("set", inputValue);
79-
}
8049
}
81-
8250
});
8351
});
8452

‎app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/colorPicker.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,19 @@ define([
2222
*/
2323
init: function (element, valueAccessor, allBindings, viewModel) {
2424
var config = valueAccessor();
25-
25+
config.change = function (value) {
26+
config.value(value.toString());
27+
};
28+
config.hide = function (value) {
29+
config.value(value.toString());
30+
};
2631
$(element).spectrum(config);
32+
},
33+
34+
update: function(element, valueAccessor, allBindings, viewModel) {
35+
var config = valueAccessor();
36+
console.log(config.value());
37+
$(element).spectrum("set", config.value());
2738
}
2839
};
2940

‎app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -967,8 +967,11 @@ define([
967967
],
968968
'validate-color': [
969969
function (value) {
970-
if (value === 'No Color')
971-
return tinycolor(value).isValid();
970+
if (value === '') {
971+
return true;
972+
} else {
973+
return tinycolor(value).isValid();
974+
}
972975
},
973976
$.mage.__('Wrong color format.')
974977
],

‎app/code/Magento/Ui/view/base/web/templates/form/element/colorPicker.html

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,12 @@
66
-->
77
<div class="admin__field"
88
visible="visible"
9-
attr="'data-index': index">
10-
<label class="admin__field-label" if="$data.label" visible="$data.labelVisible" attr="for: uid">
11-
<span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
12-
</label>
13-
<div class="admin__field-control"
14-
css="'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault">
15-
16-
<input type="hidden" id="colorPicker-spectrum" colorPicker="colorPickerConfig" ko-value="value" style="display: none"/>
17-
<input type="text" id="colorPicker-input" ko-value="value" data-bind="event: { focus: showColorPicker, mouseout: setInputValue }"/>
18-
19-
<label class="admin__field-error" if="error" attr="for: uid" text="error"/>
20-
</div>
21-
</div>
9+
css="$data.additionalClasses">
10+
<input type="hidden" class="colorpicker-spectrum" data-bind="
11+
colorPicker: colorPickerConfig,
12+
" style="display: none"/>
13+
<input type="text" class="colorpicker-input" data-bind="
14+
value: value,
15+
hasFocus: focused,
16+
" style="vertical-align: middle"/>
17+
</div>

‎app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module/spectrum.less

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ License: MIT
88

99
.sp-container {
1010
position:absolute;
11+
margin-top: 2px;
1112
top:0;
1213
left:0;
1314
display:inline-block;
@@ -94,10 +95,10 @@ License: MIT
9495
.sp-alpha {
9596
display: none;
9697
position: absolute;
97-
bottom: -14px;
98+
bottom: -20px;
9899
right: 0;
99100
left: 0;
100-
height: 8px;
101+
height: 14px;
101102
}
102103
.sp-alpha-inner {
103104
border: solid 1px #333;
@@ -285,16 +286,16 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
285286
}
286287
.sp-input {
287288
font-size: 12px !important;
288-
border: 1px inset;
289+
border: 1px solid #9d9d9d;
289290
padding: 4px 5px;
290-
margin: 0;
291+
margin: 5px 0px 0px 0px;
291292
width: 100%;
292293
background:transparent;
293294
border-radius: 3px;
294295
color: #222;
295296
}
296297
.sp-input:focus {
297-
border: 1px solid orange;
298+
border: 1px solid #1979c3;
298299
}
299300
.sp-input.sp-validation-error {
300301
border: 1px solid red;
@@ -360,19 +361,20 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
360361
.sp-palette-button-container,
361362
.sp-button-container {
362363
float: right;
364+
margin-top: 4px;
363365
}
364366

365367
/* Replacer (the little preview div that shows up instead of the <input>) */
366368
.sp-replacer {
367369
margin:0;
368370
overflow:hidden;
369371
cursor:pointer;
370-
padding: 4px;
372+
padding: 3px;
371373
display:inline-block;
372374
*zoom: 1;
373375
*display: inline;
374-
border: solid 1px #1979c3;
375-
background: #eee;
376+
border: solid 1px #9d9d9d;
377+
background: #eaeaea;
376378
color: #333;
377379
vertical-align: middle;
378380
}
@@ -396,7 +398,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
396398
position:relative;
397399
width:25px;
398400
height: 24px;
399-
border: solid 1px #1979c3;
401+
border: solid 1px #9d9d9d;
400402
float:left;
401403
z-index: 0;
402404
}
@@ -420,43 +422,43 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
420422

421423
/* Buttons: http://hellohappy.org/css3-buttons/ */
422424
.sp-container button {
423-
background-color: #eeeeee;
424-
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
425-
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
426-
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
427-
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
428-
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
429-
border: 1px solid #ccc;
430-
border-bottom: 1px solid #bbb;
431-
border-radius: 3px;
425+
background-color: #dcdcdc;
426+
//background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
427+
//background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
428+
//background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
429+
//background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
430+
//background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
431+
border: 1px solid #9f9d9c;
432+
//border-bottom: 1px solid #bbb;
433+
//border-radius: 3px;
432434
color: #333;
433435
font-size: 14px;
434436
line-height: 1;
435437
padding: 5px 4px;
436438
text-align: center;
437-
text-shadow: 0 1px 0 #eee;
439+
//text-shadow: 0 1px 0 #eee;
438440
vertical-align: middle;
439441
}
440442
.sp-container button:hover {
441443
background-color: #dddddd;
442-
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
443-
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
444-
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
445-
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
446-
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
447-
border: 1px solid #bbb;
444+
//background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
445+
//background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
446+
//background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
447+
//background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
448+
//background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
449+
border: 1px solid #9f9d9c;
448450
border-bottom: 1px solid #999;
449451
cursor: pointer;
450-
text-shadow: 0 1px 0 #ddd;
452+
//text-shadow: 0 1px 0 #ddd;
451453
}
452454
.sp-container button:active {
453455
border: 1px solid #aaa;
454-
border-bottom: 1px solid #888;
455-
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
456-
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
457-
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
458-
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
459-
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
456+
//border-bottom: 1px solid #888;
457+
//-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
458+
//-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
459+
//-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
460+
//-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
461+
//box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
460462
}
461463
.sp-cancel {
462464
font-size: 11px;
@@ -469,7 +471,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
469471

470472
}
471473
.sp-cancel:hover {
472-
color: #d93f3f !important;
473474
text-decoration: underline;
474475
}
475476

0 commit comments

Comments
 (0)