Skip to content
Permalink
Browse files

MAGETWO-71622: [UI Component] Color Picker

 - implemented basic UI component Color Picker
  • Loading branch information...
heyitsroberthe committed Mar 26, 2018
1 parent 3b79188 commit fcecfe2a820cefb134175ef8e05eaea7fb17d29c
@@ -17,6 +17,7 @@
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/button.xsd"/>
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/checkbox.xsd"/>
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/checkboxset.xsd"/>
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/colorPicker.xsd"/>
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/column.xsd"/>
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/columns.xsd"/>
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/columnsControls.xsd"/>
@@ -19,6 +19,7 @@
<xs:element ref="button" maxOccurs="unbounded"/>
<xs:element ref="checkbox" maxOccurs="unbounded"/>
<xs:element ref="checkboxset" maxOccurs="unbounded"/>
<xs:element ref="colorPicker" maxOccurs="unbounded"/>
<xs:element ref="component" maxOccurs="unbounded"/>
<xs:element ref="container" maxOccurs="unbounded"/>
<xs:element ref="dataSource" maxOccurs="unbounded"/>
@@ -65,6 +66,7 @@
<xs:element ref="button" maxOccurs="unbounded"/>
<xs:element ref="checkbox" maxOccurs="unbounded"/>
<xs:element ref="checkboxset" maxOccurs="unbounded"/>
<xs:element ref="colorPicker" maxOccurs="unbounded"/>
<xs:element ref="column" maxOccurs="unbounded"/>
<xs:element ref="columns" maxOccurs="unbounded"/>
<xs:element ref="columnsControls" maxOccurs="unbounded"/>
@@ -157,6 +159,7 @@
<xs:element ref="button" maxOccurs="unbounded"/>
<xs:element ref="checkbox" maxOccurs="unbounded"/>
<xs:element ref="checkboxset" maxOccurs="unbounded"/>
<xs:element ref="colorPicker" maxOccurs="unbounded"/>
<xs:element ref="column" maxOccurs="unbounded"/>
<xs:element ref="columns" maxOccurs="unbounded"/>
<xs:element ref="columnsControls" maxOccurs="unbounded"/>
@@ -780,4 +783,11 @@
</xs:documentation>
</xs:annotation>
</xs:element>
<xs:element name="colorPicker" type="componentColorPicker">
<xs:annotation>
<xs:documentation>
ColorPicker
</xs:documentation>
</xs:annotation>
</xs:element>
</xs:schema>
@@ -28,6 +28,7 @@
<xs:element name="button" type="componentButton"/>
<xs:element name="checkbox" type="componentCheckbox"/>
<xs:element name="checkboxset" type="componentCheckboxset"/>
<xs:element name="colorPicker" type="componentColorPicker"/>
<xs:element name="column" type="componentColumn"/>
<xs:element name="columns" type="componentColumns"/>
<xs:element name="columnsControls" type="componentColumnsControls"/>
@@ -12,6 +12,7 @@ var config = {
paths: {
'ui/template': 'Magento_Ui/templates',
'tinymce4': 'tiny_mce_4/tinymce.min',
'spectrum': 'jquery/spectrum',
'wysiwygAdapter': 'mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter'
},
map: {
@@ -103,6 +103,15 @@
</argument>
</schema>
</component>
<component name="colorPicker" include="abstractSettings">
<schema name="current">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="initialColor" type="string" xsi:type="xpath">settings/initialCOlor</item>
</item>
</argument>
</schema>
</component>
<component name="column" include="uiElementSettings">
<schema name="current">
<argument name="data" xsi:type="array">
@@ -149,6 +149,7 @@
<initialMediaGalleryOpenSubpath>wysiwyg</initialMediaGalleryOpenSubpath>
</settings>
</imageUploader>
<colorPicker class="Magento\Ui\Component\Form\Element\Input" component="Magento_Ui/js/form/element/colorPicker" template="ui/form/element/colorPicker"/>
<!-- Form elements -->

<!-- Form element data types -->
@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<!-- Include section -->
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/ui_component.xsd"/>

<xs:complexType name="componentColorPicker">
<xs:sequence>
<xs:group ref="configurable" minOccurs="0" maxOccurs="unbounded"/>
<xs:element name="settings" minOccurs="0" maxOccurs="1">
<xs:complexType>
<xs:choice minOccurs="0" maxOccurs="unbounded">
<xs:group ref="dataTypeTextSettings"/>
</xs:choice>
</xs:complexType>
</xs:element>
</xs:sequence>
<xs:attributeGroup ref="ui_element_attributes"/>
</xs:complexType>

<xs:group name="dataTypeTextSettings">
<xs:choice>
<xs:group ref="abstractSettings"/>
</xs:choice>
</xs:group>
</xs:schema>
@@ -0,0 +1,67 @@

/**
* @api
*/
define([
'jquery',
'underscore',
'uiLayout',
'mage/translate',
'Magento_Ui/js/form/element/abstract',
'spectrum'
], function ($, _, layout, $t, Abstract, spectrum) {
'use strict';

var defaultColorPalette = [
['rgb(0,0,0)', 'rgb(52,52,52)', 'rgb(83,83,83)', 'rgb(135,135,135)', 'rgb(193,193,193)', 'rgb(234,234,234)', 'rgb(240,240,240)', 'rgb(255,255,255)'],
['rgb(252,0,9)', 'rgb(253,135,10)', 'rgb(255,255,13)', 'rgb(35,255,9)', 'rgb(33,255,255)', 'rgb(0,0,254)', 'rgb(132,0,254)', 'rgb(251,0,255)'],
['rgb(240,192,194)', 'rgb(251,223,194)', 'rgb(255,241,193)', 'rgb(210,230,201)', 'rgb(199,217,220)', 'rgb(197,219,240)', 'rgb(208,200,227)', 'rgb(229,199,212)'],
['rgb(228,133,135)', 'rgb(246,193,139)', 'rgb(254,225,136)', 'rgb(168,208,152)', 'rgb(146,184,190)', 'rgb(143,184,227)', 'rgb(165,148,204)', 'rgb(202,147,175)'],
['rgb(214,78,83)', 'rgb(243,163,88)', 'rgb(254,211,83)', 'rgb(130,187,106)', 'rgb(99,149,159)', 'rgb(93,150,211)', 'rgb(123,100,182)', 'rgb(180,100,142)'],
['rgb(190,0,5)', 'rgb(222,126,44)', 'rgb(236,183,39)', 'rgb(89,155,61)', 'rgb(55,110,123)', 'rgb(49,112,185)', 'rgb(83,55,150)', 'rgb(147,55,101)'],
['rgb(133,0,3)', 'rgb(163,74,10)', 'rgb(177,127,7)', 'rgb(45,101,23)', 'rgb(18,62,74)', 'rgb(14,62,129)', 'rgb(40,15,97)', 'rgb(95,16,55)'],
['rgb(81,0,1)', 'rgb(100,48,7)', 'rgb(107,78,3)', 'rgb(31,63,16)', 'rgb(13,39,46)', 'rgb(10,40,79)', 'rgb(24,12,59)', 'rgb(59,10,36)']
];

return Abstract.extend({

defaults: {
colorPickerConfig: {
showInput: true,
allowEmpty: true,
showInitial: false,
showPalette: true,
showAlpha: true,
chooseText: "Apply",
cancelText: "Cancel",
showSelectionPalette: true,
maxSelectionSize: 64,
preferredFormat: "rgb",
palette: defaultColorPalette
}
},

/**
* Initializes observable properties of instance
*
* @returns {Abstract} Chainable.
*/
initObservable: function () {
this._super()
.observe('componentTemplate');
return this;
},

/**
* Invokes initialize method of parent class,
* contains initialization logic
*/
initialize: function () {
this._super();

return this;
}

});
});

@@ -37,6 +37,7 @@ define(function (require) {
bindHtml: require('./bind-html'),
tooltip: require('./tooltip'),
repeat: require('knockoutjs/knockout-repeat'),
fastForEach: require('knockoutjs/knockout-fast-foreach')
fastForEach: require('knockoutjs/knockout-fast-foreach'),
colorPicker: require('./colorPicker')
};
});
@@ -0,0 +1,31 @@
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'ko',
'jquery',
'../template/renderer',
'spectrum'
], function (ko, $, renderer, spectrum) {
'use strict';

ko.bindingHandlers.colorPicker = {

/**
* Binding init callback.
*
* @param {*} element
* @param {Function} valueAccessor
* @param {Function} allBindings
* @param {Object} viewModel
*/
init: function (element, valueAccessor, allBindings, viewModel) {
var config = valueAccessor();

$(element).spectrum(config);
}
};

renderer.addAttribute('colorPicker');
});
@@ -0,0 +1,19 @@
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="admin__field"
visible="visible"
attr="'data-index': index">
<label class="admin__field-label" if="$data.label" visible="$data.labelVisible" attr="for: uid">
<span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
</label>
<div class="admin__field-control"
css="'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault">

<input type="hidden" colorPicker="colorPickerConfig" ko-value="value" style="display: none"/>
<input type="text" ko-value="value"/>
</div>
</div>
@@ -4,3 +4,4 @@
// */

@import 'module/_data-grid.less';
@import 'module/spectrum.less';

0 comments on commit fcecfe2

Please sign in to comment.
You can’t perform that action at this time.