Skip to content

Commit a612b1a

Browse files
heyitsrobertheheyitsroberthe
authored
Merge pull request #2346 from magento-trigger/MAGETWO-71622-color_picker
[Team 3] [UI Component] Color Picker
2 parents 85e9f18 + d94646b commit a612b1a

File tree

28 files changed

+4747
-4
lines changed

28 files changed

+4747
-4
lines changed

‎app/code/Magento/Theme/view/base/requirejs-config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@ var config = {
4141
'prototype': 'legacy-build.min',
4242
'jquery/jquery-storageapi': 'jquery/jquery.storageapi.min',
4343
'text': 'mage/requirejs/text',
44-
'domReady': 'requirejs/domReady'
44+
'domReady': 'requirejs/domReady',
45+
'spectrum': 'jquery/spectrum/spectrum',
46+
'tinycolor': 'jquery/spectrum/tinycolor'
4547
},
4648
'deps': [
4749
'jquery/jquery-migrate'

‎app/code/Magento/Ui/Component/Form/Element/ColorPicker.php

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
declare(strict_types=1);
8+
9+
namespace Magento\Ui\Component\Form\Element;
10+
11+
use Magento\Ui\Model\ColorPicker\ColorModesProvider;
12+
use Magento\Framework\View\Element\UiComponentFactory;
13+
use Magento\Framework\View\Element\UiComponentInterface;
14+
use Magento\Framework\View\Element\UiComponent\ContextInterface;
15+
16+
/**
17+
* Prepares Color Picker UI component with mode and format
18+
*
19+
* @api
20+
*/
21+
class ColorPicker extends AbstractElement
22+
{
23+
const NAME = 'colorPicker';
24+
25+
const DEFAULT_MODE = 'full';
26+
27+
/**
28+
* Provides color picker modes configuration
29+
*
30+
* @var ColorModesProvider
31+
*/
32+
private $modesProvider;
33+
34+
/**
35+
* Constructor
36+
*
37+
* @param ContextInterface $context
38+
* @param ColorModesProvider $modesProvider
39+
* @param UiComponentFactory $uiComponentFactory
40+
* @param UiComponentInterface[] $components
41+
* @param array $data
42+
*/
43+
public function __construct(
44+
ContextInterface $context,
45+
ColorModesProvider $modesProvider,
46+
array $components = [],
47+
array $data = []
48+
) {
49+
$this->modesProvider = $modesProvider;
50+
parent::__construct($context, $components, $data);
51+
}
52+
53+
/**
54+
* Get component name
55+
*
56+
* @return string
57+
*/
58+
public function getComponentName(): string
59+
{
60+
return static::NAME;
61+
}
62+
63+
/**
64+
* Prepare component configuration
65+
*
66+
* @return void
67+
*/
68+
public function prepare() : void
69+
{
70+
$modes = $this->modesProvider->getModes();
71+
$colorPickerModeSetting = $this->getData('config/colorPickerMode');
72+
$colorFormatSetting = $this->getData('config/colorFormat');
73+
$colorPickerMode = $modes[$colorPickerModeSetting] ?? $modes[self::DEFAULT_MODE];
74+
$colorPickerMode['preferredFormat'] = $colorFormatSetting;
75+
$this->_data['config']['colorPickerConfig'] = $colorPickerMode;
76+
77+
parent::prepare();
78+
}
79+
}

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
declare(strict_types=1);
8+
9+
namespace Magento\Ui\Model\ColorPicker;
10+
11+
/**
12+
* Collect all modes by configuration
13+
*/
14+
class ColorModesProvider
15+
{
16+
/**
17+
* Stores color picker modes configuration
18+
*
19+
* @var array
20+
*/
21+
private $colorModes;
22+
23+
/**
24+
* Magento object manager
25+
*
26+
* @var \Magento\Framework\ObjectManagerInterface
27+
*/
28+
private $objectManager;
29+
30+
/**
31+
* @param array $colorModesPool
32+
* @param \Magento\Framework\ObjectManagerInterface $objectManager
33+
*/
34+
public function __construct(
35+
array $colorModesPool,
36+
\Magento\Framework\ObjectManagerInterface $objectManager
37+
) {
38+
$this->colorModes = $colorModesPool;
39+
$this->objectManager = $objectManager;
40+
}
41+
42+
/**
43+
* Return all available modes and their configuration
44+
*
45+
* @return array
46+
*/
47+
public function getModes(): array
48+
{
49+
$config = [];
50+
foreach ($this->colorModes as $modeName => $className) {
51+
$config[$modeName] = $this->createModeProvider($className)->getConfig();
52+
}
53+
54+
return $config;
55+
}
56+
57+
/**
58+
* Create mode provider
59+
*
60+
* @param string $instance
61+
* @return ModeInterface
62+
*/
63+
private function createModeProvider(string $instance): ModeInterface
64+
{
65+
return $this->objectManager->create($instance);
66+
}
67+
}

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
declare(strict_types=1);
8+
9+
namespace Magento\Ui\Model\ColorPicker;
10+
11+
/**
12+
* Returns config parameters for full mode
13+
*/
14+
class FullMode implements ModeInterface
15+
{
16+
/**
17+
* {@inheritdoc}
18+
*
19+
*/
20+
public function getConfig(): array
21+
{
22+
return [
23+
'showInput' => true,
24+
'showInitial' => false,
25+
'showPalette' => true,
26+
'showAlpha' => true,
27+
'showSelectionPalette' => true
28+
];
29+
}
30+
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
declare(strict_types=1);
8+
9+
namespace Magento\Ui\Model\ColorPicker;
10+
11+
/**
12+
* Mode interface for color modes
13+
*/
14+
interface ModeInterface
15+
{
16+
/**
17+
* Returns config parameters for spectrum library
18+
*
19+
* @return array
20+
*/
21+
public function getConfig() : array ;
22+
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
declare(strict_types=1);
8+
9+
namespace Magento\Ui\Model\ColorPicker;
10+
11+
/**
12+
* Returns config parameters for noalpha mode
13+
*/
14+
class NoAlphaMode implements ModeInterface
15+
{
16+
/**
17+
* {@inheritdoc}
18+
*
19+
* @return array
20+
*/
21+
public function getConfig(): array
22+
{
23+
return [
24+
'showInput' => true,
25+
'showInitial' => false,
26+
'showPalette' => true,
27+
'showAlpha' => false,
28+
'showSelectionPalette' => true
29+
];
30+
}
31+
}

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
declare(strict_types=1);
8+
9+
namespace Magento\Ui\Model\ColorPicker;
10+
11+
/**
12+
* Returns config parameters for palette only mode
13+
*/
14+
class PaletteOnlyMode implements ModeInterface
15+
{
16+
/**
17+
* {@inheritdoc}
18+
*
19+
* @return array
20+
*/
21+
public function getConfig(): array
22+
{
23+
return [
24+
'showInput' => false,
25+
'showInitial' => false,
26+
'showPalette' => true,
27+
'showPaletteOnly' => true,
28+
'showAlpha' => false,
29+
'showSelectionPalette' => false
30+
];
31+
}
32+
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
7+
declare(strict_types=1);
8+
9+
namespace Magento\Ui\Model\ColorPicker;
10+
11+
/**
12+
* Returns config parameters for simple mode
13+
*/
14+
class SimpleMode implements ModeInterface
15+
{
16+
/**
17+
* {@inheritdoc}
18+
*
19+
* @return array
20+
*/
21+
public function getConfig(): array
22+
{
23+
return [
24+
'showInput' => false,
25+
'showInitial' => false,
26+
'showPalette' => false,
27+
'showAlpha' => false,
28+
'showSelectionPalette' => true
29+
];
30+
}
31+
}

‎app/code/Magento/Ui/etc/adminhtml/di.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,16 @@
4444
</argument>
4545
</arguments>
4646
</type>
47+
<type name="Magento\Ui\Model\ColorPicker\ColorModesProvider">
48+
<arguments>
49+
<argument name="colorModesPool" xsi:type="array">
50+
<item name="full" xsi:type="string">Magento\Ui\Model\ColorPicker\FullMode</item>
51+
<item name="simple" xsi:type="string">Magento\Ui\Model\ColorPicker\SimpleMode</item>
52+
<item name="noalpha" xsi:type="string">Magento\Ui\Model\ColorPicker\NoAlphaMode</item>
53+
<item name="palette" xsi:type="string">Magento\Ui\Model\ColorPicker\PaletteOnlyMode</item>
54+
</argument>
55+
</arguments>
56+
</type>
4757
<type name="Magento\Ui\Model\UrlInput\LinksConfigProvider">
4858
<arguments>
4959
<argument name="linksConfiguration" xsi:type="array">

‎app/code/Magento/Ui/etc/ui_components.xsd

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/button.xsd"/>
1818
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/checkbox.xsd"/>
1919
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/checkboxset.xsd"/>
20+
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/colorPicker.xsd"/>
2021
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/column.xsd"/>
2122
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/columns.xsd"/>
2223
<xs:include schemaLocation="urn:magento:module:Magento_Ui:view/base/ui_component/etc/definition/columnsControls.xsd"/>

0 commit comments

Comments
 (0)