Any CSS color format is valid. If using a hex code, be sure to include the "#" prefix.
7 |
You can use any colors you want, but pastels (light colors) tend to look better.
8 |
9 |
10 |
11 |
12 | {% css %}
13 | .settings-tips ul {
14 | list-style: disc;
15 | margin: 2px 0;
16 | }
17 | {% endcss %}
18 |
--------------------------------------------------------------------------------
/src/models/Settings.php:
--------------------------------------------------------------------------------
1 | sourcePath = '@doublesecretagency/matrixcolors/resources';
31 |
32 | $this->js = [
33 | 'js/settings.js',
34 | ];
35 | }
36 |
37 | }
38 |
--------------------------------------------------------------------------------
/src/web/assets/ColorsAssets.php:
--------------------------------------------------------------------------------
1 | sourcePath = '@doublesecretagency/matrixcolors/resources';
32 | $this->depends = [CpAsset::class];
33 |
34 | $this->js = [
35 | 'js/matrixcolors.js',
36 | ];
37 | }
38 |
39 | }
40 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) Double Secret Agency
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "doublesecretagency/craft-matrixcolors",
3 | "description": "Identify your matrix blocks by giving each type a different color.",
4 | "type": "craft-plugin",
5 | "version": "3.0.0",
6 | "keywords": [
7 | "craft",
8 | "cms",
9 | "craftcms",
10 | "craft-plugin",
11 | "matrix-colors",
12 | "matrix",
13 | "colors",
14 | "colours"
15 | ],
16 | "support": {
17 | "docs": "https://github.com/doublesecretagency/craft-matrixcolors/blob/v2/README.md",
18 | "issues": "https://github.com/doublesecretagency/craft-matrixcolors/issues"
19 | },
20 | "license": "MIT",
21 | "authors": [
22 | {
23 | "name": "Double Secret Agency",
24 | "homepage": "https://www.doublesecretagency.com/plugins"
25 | }
26 | ],
27 | "require": {
28 | "craftcms/cms": "^4.0.0"
29 | },
30 | "autoload": {
31 | "psr-4": {
32 | "doublesecretagency\\matrixcolors\\": "src/"
33 | }
34 | },
35 | "extra": {
36 | "name": "Matrix Colors",
37 | "handle": "matrix-colors",
38 | "schemaVersion": "2.0.0",
39 | "changelogUrl": "https://raw.githubusercontent.com/doublesecretagency/craft-matrixcolors/v2/CHANGELOG.md",
40 | "class": "doublesecretagency\\matrixcolors\\MatrixColors"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## 3.0.0 - 2022-12-31
4 |
5 | ### Added
6 | - Added full support for Neo block types. (thanks @ttempleton)
7 |
8 | ### Changed
9 | - Improved images and instructions in README.
10 |
11 | ## 2.1.0 - 2022-03-26
12 |
13 | ### Added
14 | - Craft 4 compatibility.
15 |
16 | ## 2.0.1 - 2017-12-30
17 |
18 | ### Changed
19 | - Now references `hasCpSettings` from PHP instead of Composer.
20 |
21 | ## 2.0.0 - 2017-12-08
22 |
23 | ### Added
24 | - Craft 3 compatibility.
25 |
26 | ## 1.1.3 - 2016-06-23
27 |
28 | ### Added
29 | - Ensures block type is in the color list.
30 |
31 | ## 1.1.2 - 2016-06-11
32 |
33 | ### Added
34 | - Colorizes gear icon menu items.
35 | - Allow comma-separated block type handle specifications.
36 |
37 | ## 1.1.1 - 2015-12-27
38 |
39 | ### Changed
40 | - Improved color handling behavior.
41 |
42 | ## 1.1.0 - 2015-11-30
43 |
44 | ### Added
45 | - Craft 2.5 compatibility.
46 |
47 | ## 1.0.4 - 2014-12-02
48 |
49 | ### Fixed
50 | - Fixed 2.3 compatibility issue.
51 |
52 | ## 1.0.3 - 2014-11-27
53 |
54 | ### Added
55 | - Craft 2.3 compatibility.
56 |
57 | ## 1.0.2 - 2014-08-07
58 |
59 | ### Added
60 | - Colorizes new block buttons.
61 | - Colorizes new blocks upon creation.
62 |
63 | ### Fixed
64 | - Fixed a bug.
65 |
66 | ## 1.0.1 - 2014-05-13
67 |
68 | ### Fixed
69 | - Fixed CP detection bug.
70 |
71 | ## 1.0.0 - 2014-05-13
72 |
73 | ### Fixed
74 | - Ensures JS is only loaded in CP.
75 |
76 | ## 0.9.9 - 2014-05-09
77 |
78 | Initial release.
79 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Matrix Colors plugin for Craft CMS 4
4 |
5 | **Identify your Matrix blocks by giving each type a different color.**
6 |
7 | ---
8 |
9 | ## ⭐️ MATRIX COLORS HAS BEEN RETIRED ⭐️
10 |
11 | Matrix Colors will not be ported to Craft 5, because it is no longer necessary! The new overhauled Matrix field UX now provides native colors for your Matrix block types. 👏
12 |
13 | See our [blog post](https://www.doublesecretagency.com/blog/craft-5-plugin-retirements) for more information.
14 |
15 | ### Still available & supported for Craft 3 & 4 ✅
16 |
17 | ---
18 |
19 | ## How to Install
20 |
21 | See official installation instructions on the [Craft CMS Plugin Store...](https://plugins.craftcms.com/matrix-colors?craft4)
22 |
23 | ## Managing Block Colors
24 |
25 | Once the plugin is installed, manage the colors of your Matrix block types (or Neo block types) by going to:
26 |
27 |
28 | Settings > Plugins > Matrix Colors
29 |
30 |
31 |
32 |
33 |
34 |
35 | ## Basic Usage
36 |
37 | To set the background color of a Matrix (or Neo) block type, enter the **block type handle** and desired **CSS color**.
38 |
39 |
40 |
41 |
42 |
43 | Here's what that looks like in a Matrix field...
44 |
45 |
46 |
47 |
48 |
49 | Repeat for every block type which you'd like to assign a color to.
50 |
51 | You can use any colors you want, but pastels (lighter colors) tend to look better.
52 |
53 | ## Shared Colors for Multiple Block Types
54 |
55 | You can easily specify the same color for multiple block types. Either give each block type its own row, or list them all together using commas to separate each block type handle.
56 |
57 |
58 |
59 |
60 |
61 | ## Neo Support
62 |
63 | If you are also using the [Neo](https://plugins.craftcms.com/neo) plugin, you can similarly color your Neo blocks.
64 |
65 | Simply declare your Neo block type handles alongside their assigned colors, just as you would with Matrix block type handles.
66 |
67 |
68 | ---
69 |
70 | ## Anything else?
71 |
72 | We've got other plugins too!
73 |
74 | Check out the full catalog at [plugins.doublesecretagency.com](https://plugins.doublesecretagency.com)
75 |
76 | **On behalf of Double Secret Agency, thanks for checking out our plugin!** 🍺
77 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/src/resources/js/matrixcolors.js:
--------------------------------------------------------------------------------
1 | // ==================================================================== //
2 | // BEHAVIOR
3 |
4 | function _colorizeBlocks(blockClass, blockTitlebarClass) {
5 | var blockType;
6 | $(blockClass).each(function () {
7 | blockType = $(this).find('input[type="hidden"][name*="][type]"]').val();
8 | // If block type is in the color list
9 | if (-1 < colorList.indexOf(blockType)) {
10 | $(this).addClass('mc-solid-'+blockType);
11 | $(this).find(blockTitlebarClass).css({'background-color':'rgba(255, 255, 255, 0.5)'});
12 | }
13 | });
14 | }
15 |
16 | // Find all matrix blocks, add specified background color
17 | function colorizeMatrixBlocks() {
18 | _colorizeBlocks('.matrixblock', '.titlebar');
19 | }
20 |
21 | // Find buttons related to Matrix, update background color
22 | function colorizeMatrixButtons() {
23 | for (var i in colorList) {
24 | $('.matrix').find('.btn[data-type="'+colorList[i]+'"]').addClass('mc-gradient-'+colorList[i]);
25 | }
26 | }
27 |
28 | // Find list items in menus related to Matrix, update background color
29 | function colorizeMatrixMenus() {
30 | for (var i in colorList) {
31 | $('.menu').find('a[data-type="'+colorList[i]+'"]').addClass('mc-solid-'+colorList[i]);
32 | }
33 | }
34 |
35 | // Find all Neo blocks, add specified background color
36 | function colorizeNeoBlocks() {
37 | _colorizeBlocks('.ni_block', '.ni_block_topbar');
38 | }
39 |
40 | // Find buttons related to Neo, update background color
41 | function colorizeNeoButtons() {
42 | for (var i in colorList) {
43 | $('.neo-input').find('.btn[data-neo-bn-info="'+colorList[i]+'"]').addClass('mc-gradient-'+colorList[i]);
44 | }
45 | }
46 |
47 | // Find list items in menus related to Neo, update background color
48 | function colorizeNeoMenus() {
49 | for (var i in colorList) {
50 | $('.menu').find('a[data-neo-bn-info="'+colorList[i]+'"]').addClass('mc-solid-'+colorList[i]);
51 | }
52 | }
53 |
54 | // Colorize all components
55 | function colorizeAll() {
56 | colorizeMatrixBlocks();
57 | colorizeMatrixButtons();
58 | colorizeMatrixMenus();
59 | colorizeNeoBlocks();
60 | colorizeNeoButtons();
61 | colorizeNeoMenus();
62 | }
63 |
64 | // Refresh colorization over a timed period
65 | function timedRefresh() {
66 | var counter = 1;
67 | var maxLoops = 10;
68 | var loop = setInterval(function () {
69 | colorizeAll();
70 | if (maxLoops <= counter++) {
71 | clearInterval(loop);
72 | }
73 | }, 200);
74 | }
75 |
76 | // ==================================================================== //
77 | // TRIGGERS
78 |
79 | // On load, colorize blocks
80 | $(function () {
81 | colorizeAll();
82 | // Colorize existing menus and Neo buttons
83 | var observer = new MutationObserver(function() {
84 | colorizeMatrixMenus();
85 | colorizeNeoButtons();
86 | colorizeNeoMenus();
87 | });
88 | observer.observe(document.body, {childList: true});
89 | });
90 |
91 | // Listen for new Matrix blocks
92 | $(document).on(
93 | 'click',
94 | '.matrix .btn, .menu ul li a',
95 | function () {
96 | colorizeMatrixBlocks();
97 | colorizeMatrixMenus();
98 | }
99 | );
100 |
101 | // Listen for new Neo blocks
102 | $(document).on(
103 | 'click',
104 | '.neo-input .btn, a[data-neo-bn="button.addBlock"], .menu ul li a[data-action="add"]',
105 | function () {
106 | colorizeNeoBlocks();
107 | colorizeNeoButtons();
108 | colorizeNeoMenus();
109 | }
110 | );
111 |
112 | // Listen for changed entry type
113 | $(document).on('change', '#entryType', function () {
114 | timedRefresh();
115 | });
116 |
117 | // Listen for new Super Table rows
118 | $(document).on('click', '.superTableContainer .btn', function () {
119 | timedRefresh();
120 | });
121 |
--------------------------------------------------------------------------------
/src/MatrixColors.php:
--------------------------------------------------------------------------------
1 | getRequest()->getIsCpRequest()) {
55 | $this->_colorBlocks();
56 | }
57 | }
58 |
59 | /**
60 | * @inheritdoc
61 | */
62 | protected function createSettingsModel(): Settings
63 | {
64 | return new Settings();
65 | }
66 |
67 | /**
68 | * @inheritdoc
69 | */
70 | protected function settingsHtml(): string
71 | {
72 | // Get view
73 | $view = Craft::$app->getView();
74 | // If not set, create a default row
75 | if (!$this->_matrixBlockColors) {
76 | $this->_matrixBlockColors = [['blockType' => '', 'backgroundColor' => '']];
77 | }
78 | // Generate table
79 | $matrixBlockColorsTable = Cp::editableTableFieldHtml([
80 | 'label' => Craft::t('matrix-colors', "Block Type Colors"),
81 | 'instructions' => Craft::t('matrix-colors', "Add background colors to your Matrix block types (or Neo block types)."),
82 | 'id' => 'matrixBlockColors',
83 | 'name' => 'matrixBlockColors',
84 | 'cols' => [
85 | 'blockType' => [
86 | 'heading' => Craft::t('matrix-colors', 'Block Type Handle'),
87 | 'type' => 'singleline',
88 | ],
89 | 'backgroundColor' => [
90 | 'heading' => Craft::t('matrix-colors', 'CSS Background Color'),
91 | 'type' => 'singleline',
92 | 'class' => 'code',
93 | ],
94 | ],
95 | 'rows' => $this->_matrixBlockColors,
96 | 'addRowLabel' => Craft::t('matrix-colors', 'Add a block type color'),
97 | 'allowAdd' => true,
98 | 'allowReorder' => true,
99 | 'allowDelete' => true,
100 | ]);
101 | // Settings JS
102 | $view->registerAssetBundle(SettingsAssets::class);
103 | // Output settings template
104 | return $view->renderTemplate('matrix-colors/settings', [
105 | 'matrixBlockColorsTable' => Template::raw($matrixBlockColorsTable),
106 | ]);
107 | }
108 |
109 | // ========================================================================= //
110 |
111 | /**
112 | * Register the CSS and JS necessary to colorize Matrix blocks.
113 | *
114 | * @throws InvalidConfigException
115 | */
116 | private function _colorBlocks(): void
117 | {
118 | // Get settings
119 | $settings = $this->getSettings();
120 |
121 | // Get colors from settings
122 | $this->_matrixBlockColors = ($settings->matrixBlockColors ?? []);
123 |
124 | // If no colors specified, bail
125 | if (!$this->_matrixBlockColors) {
126 | return;
127 | }
128 |
129 | // Whether the Neo plugin is being used
130 | $usingNeo = Craft::$app->getPlugins()->isPluginEnabled('neo');
131 |
132 | // Initialize the CSS and color list
133 | $css = '';
134 | $colorList = [];
135 |
136 | // Loop through block colors
137 | foreach ($this->_matrixBlockColors as $row) {
138 | // Get background color
139 | $color = $row['backgroundColor'];
140 | // Get block types
141 | $types = explode(',', $row['blockType']);
142 | // Loop over each block type
143 | foreach ($types as $type) {
144 | // Trim the type
145 | $type = trim($type);
146 | // Ignore empty strings
147 | if (!$type) {
148 | continue;
149 | }
150 | // Add type to color list
151 | $colorList[] = $type;
152 | // Set CSS for Matrix block type
153 | $css .= $this->_matrixBlockCss($type, $color);
154 | // If using Neo
155 | if ($usingNeo) {
156 | // Set CSS for Neo block type
157 | $css .= $this->_neoBlockCss($type, $color);
158 | }
159 | }
160 | }
161 |
162 | // Get view services
163 | $view = Craft::$app->getView();
164 |
165 | // Pass color list to JavaScript
166 | $js = 'var colorList = '.Json::encode($colorList).';';
167 |
168 | // Load assets
169 | $view->registerAssetBundle(ColorsAssets::class);
170 | $view->registerCss($css);
171 | $view->registerJs($js, View::POS_HEAD);
172 | }
173 |
174 | /**
175 | * Generate CSS to colorize a Matrix block type.
176 | *
177 | * @param $type
178 | * @param $color
179 | * @return string
180 | */
181 | private function _matrixBlockCss($type, $color): string
182 | {
183 | return "
184 | .mc-solid-{$type} {background-color: {$color};}
185 | .btngroup .btn.mc-gradient-{$type} {background-image: linear-gradient(white,{$color});}";
186 | }
187 |
188 | /**
189 | * Generate CSS to colorize a Neo block type.
190 | *
191 | * @param $type
192 | * @param $color
193 | * @return string
194 | */
195 | private function _neoBlockCss($type, $color): string
196 | {
197 | return "
198 | .ni_block.is-level-even.mc-solid-{$type}, .ni_block .matrix .mc-solid-{$type} {background-color: {$color};}
199 | .ni_block.is-level-even.mc-solid-{$type} > .ni_block_body {background-color: rgba(255, 255, 255, 0.5);}";
200 | }
201 |
202 | }
203 |
--------------------------------------------------------------------------------
33 | 
2 |
3 | # Matrix Colors plugin for Craft CMS 4
4 |
5 | **Identify your Matrix blocks by giving each type a different color.**
6 |
7 | ---
8 |
9 | ## ⭐️ MATRIX COLORS HAS BEEN RETIRED ⭐️
10 |
11 | Matrix Colors will not be ported to Craft 5, because it is no longer necessary! The new overhauled Matrix field UX now provides native colors for your Matrix block types. 👏
12 |
13 | See our [blog post](https://www.doublesecretagency.com/blog/craft-5-plugin-retirements) for more information.
14 |
15 | ### Still available & supported for Craft 3 & 4 ✅
16 |
17 | ---
18 |
19 | ## How to Install
20 |
21 | See official installation instructions on the [Craft CMS Plugin Store...](https://plugins.craftcms.com/matrix-colors?craft4)
22 |
23 | ## Managing Block Colors
24 |
25 | Once the plugin is installed, manage the colors of your Matrix block types (or Neo block types) by going to:
26 |
27 | 
41 | 
47 | 
59 | 
80 |