Merge branch 't/16733'

CHANGES.md

@@ -3,6 +3,10 @@
 
 ## CKEditor 4.6.2
 
+New Features:
+
+* [#16733](http://dev.ckeditor.com/ticket/16733): Added new color palette for [Color Button](http://ckeditor.com/addon/colorbutton) plugin and added [`config.colorButton_colorsPerRow`](http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-colorButton_colorsPerRow) option.
+
 Fixed Issues:
 
 * [#10373](http://dev.ckeditor.com/ticket/10373): Fixed: Context menu items can be dragged into the editor.

dev/langtool/meta/ckeditor.plugin-colorbutton/meta.txt

@@ -1,8 +1,8 @@
 # Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 # For licensing, see LICENSE.md or http://ckeditor.com/license
 
-auto = 
-bgColorTitle = 
+auto =
+bgColorTitle =
 colors.000 = Tooltip with a human-readable name for the #000 color.
 colors.800000 = Tooltip with a human-readable name for the #800000 color.
 colors.8B4513 = Tooltip with a human-readable name for the #8B4513 color.
@@ -43,6 +43,28 @@ colors.F0FFFF = Tooltip with a human-readable name for the #F0FFFF color.
 colors.F0F8FF = Tooltip with a human-readable name for the #F0F8FF color.
 colors.E6E6FA = Tooltip with a human-readable name for the #E6E6FA color.
 colors.FFF = Tooltip with a human-readable name for the #FFF color.
-more = 
-panelTitle = 
-textColorTitle = 
+colors.1ABC9C = Tooltip with a human-readable name for Strong Cyan (#1ABC9C) color.
+colors.2ECC71 = Tooltip with a human-readable name for Emerald (#2ECC71) color.
+colors.3498DB = Tooltip with a human-readable name for Bright Blue (#3498DB) color.
+colors.9B59B6 = Tooltip with a human-readable name for Amethyst (#9B59B6) color.
+colors.4E5F70 = Tooltip with a human-readable name for Grayish Blue (#4E5F70) color.
+colors.F1C40F = Tooltip with a human-readable name for Vivid Yellow (#F1C40F) color.
+colors.16A085 = Tooltip with a human-readable name for Dark Cyan (#16A085) color.
+colors.27AE60 = Tooltip with a human-readable name for Dark Emerald (#27AE60) color.
+colors.2980B9 = Tooltip with a human-readable name for Strong Blue (#2980B9) color.
+colors.8E44AD = Tooltip with a human-readable name for Dark Violet (#8E44AD) color.
+colors.2C3E50 = Tooltip with a human-readable name for Desaturated Blue (#2C3E50) color.
+colors.F39C12 = Tooltip with a human-readable name for Orange (#F39C12) color.
+colors.E67E22 = Tooltip with a human-readable name for Carrot (#E67E22) color.
+colors.E74C3C = Tooltip with a human-readable name for Pale Red (#E74C3C) color.
+colors.ECF0F1 = Tooltip with a human-readable name for Bright Silver (#ECF0F1) color.
+colors.95A5A6 = Tooltip with a human-readable name for Light Grayish Cyan (#95A5A6) color.
+colors.DDD = Tooltip with a human-readable name for Light Gray (#DDD) color.
+colors.D35400 = Tooltip with a human-readable name for Pumpkin (#D35400) color.
+colors.C0392B = Tooltip with a human-readable name for Strong Red (#C0392B) color.
+colors.BDC3C7 = Tooltip with a human-readable name for Silver (#BDC3C7) color.
+colors.7F8C8D = Tooltip with a human-readable name for Grayish Cyan (#7F8C8D) color.
+colors.999 = Tooltip with a human-readable name for Dark Gray (#999) color.
+more =
+panelTitle =
+textColorTitle =

plugins/colorbutton/lang/en.js

@@ -1,4 +1,4 @@
-/*
+/*
 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
 */
@@ -45,7 +45,29 @@ CKEDITOR.plugins.setLang( 'colorbutton', 'en', {
 		F0FFFF: 'Azure',
 		F0F8FF: 'Alice Blue',
 		E6E6FA: 'Lavender',
-		FFF: 'White'
+		FFF: 'White',
+		'1ABC9C': 'Strong Cyan',
+		'2ECC71': 'Emerald',
+		'3498DB': 'Bright Blue',
+		'9B59B6': 'Amethyst',
+		'4E5F70': 'Grayish Blue',
+		'F1C40F': 'Vivid Yellow',
+		'16A085': 'Dark Cyan',
+		'27AE60': 'Dark Emerald',
+		'2980B9': 'Strong Blue',
+		'8E44AD': 'Dark Violet',
+		'2C3E50': 'Desaturated Blue',
+		'F39C12': 'Orange',
+		'E67E22': 'Carrot',
+		'E74C3C': 'Pale Red',
+		'ECF0F1': 'Bright Silver',
+		'95A5A6': 'Light Grayish Cyan',
+		'DDD': 'Light Gray',
+		'D35400': 'Pumpkin',
+		'C0392B': 'Strong Red',
+		'BDC3C7': 'Silver',
+		'7F8C8D': 'Grayish Cyan',
+		'999': 'Dark Gray'
 	},
 	more: 'More Colors...',
 	panelTitle: 'Colors',

plugins/colorbutton/plugin.js

@@ -165,6 +165,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
 		function renderColors( panel, type, colorBoxId ) {
 			var output = [],
 				colors = config.colorButton_colors.split( ',' ),
+				colorsPerRow = config.colorButton_colorsPerRow || 6,
 				// Tells if we should include "More Colors..." button.
 				moreColorsEnabled = editor.plugins.colordialog && config.colorButton_enableMore !== false,
 				// aria-setsize and aria-posinset attributes are used to indicate size of options, because
@@ -226,10 +227,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
 					' role="option" aria-posinset="1" aria-setsize="', total, '">' +
 						'<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
 							'<tr>' +
-								'<td>' +
-									'<span class="cke_colorbox" id="', colorBoxId, '"></span>' +
-								'</td>' +
-								'<td colspan=7 align=center>', lang.auto, '</td>' +
+								'<td colspan="' + colorsPerRow + '" align="center"><span class="cke_colorbox" id="', colorBoxId, '"></span>', lang.auto, '</td>' +
 							'</tr>' +
 						'</table>' +
 					'</a>' );
@@ -238,7 +236,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
 
 			// Render the color boxes.
 			for ( var i = 0; i < colors.length; i++ ) {
-				if ( ( i % 8 ) === 0 )
+				if ( ( i % colorsPerRow ) === 0 )
 					output.push( '</tr><tr>' );
 
 				var parts = colors[ i ].split( '/' ),
@@ -267,7 +265,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
 			if ( moreColorsEnabled ) {
 				output.push( '</tr>' +
 					'<tr>' +
-						'<td colspan=8 align=center>' +
+						'<td colspan="' + colorsPerRow + '" align="center">' +
 							'<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
 								' title="', lang.more, '"' +
 								' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +
@@ -306,6 +304,9 @@ CKEDITOR.plugins.add( 'colorbutton', {
  * a name and the slash character. For example, `'FontColor1/FF9900'` will be
  * displayed as the color `#FF9900` in the selector, but will be output as `'FontColor1'`.
  *
+ * **Since 4.6.2:** The default color palette has change. It contains less colors and in more
+ * pastel shades than the previous one.
+ *
  * Read more in the [documentation](#!/guide/dev_colorbutton)
  * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
  *
@@ -317,11 +318,10 @@ CKEDITOR.plugins.add( 'colorbutton', {
  * @cfg {String} [colorButton_colors=see source]
  * @member CKEDITOR.config
  */
-CKEDITOR.config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
-	'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
-	'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
-	'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
-	'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';
+CKEDITOR.config.colorButton_colors = '1ABC9C,2ECC71,3498DB,9B59B6,4E5F70,F1C40F,' +
+	'16A085,27AE60,2980B9,8E44AD,2C3E50,F39C12,' +
+	'E67E22,E74C3C,ECF0F1,95A5A6,DDD,FFF,' +
+	'D35400,C0392B,BDC3C7,7F8C8D,999,000';
 
 /**
  * Stores the style definition that applies the text foreground color.
@@ -378,6 +378,19 @@ CKEDITOR.config.colorButton_backStyle = {
  * @member CKEDITOR.config
  */
 
+/**
+ * Defines how many colors will be shown per row in the color selectors.
+ *
+ * Read more in the [documentation](#!/guide/dev_colorbutton)
+ * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
+ *
+ *		config.colorButton_colorsPerRow = 8;
+ *
+ * @since 4.6.2
+ * @cfg {Number} [colorButton_colorsPerRow=6]
+ * @member CKEDITOR.config
+ */
+
 /**
  * Whether the plugin should convert `background` CSS properties with color only, to a `background-color` property,
  * allowing the [Color Button](http://ckeditor.com/addon/colorbutton) plugin to edit these styles.

tests/plugins/colorbutton/manual/colorsPerRow.html

@@ -0,0 +1,16 @@
+<p>Editor 1</p>
+<textarea cols="80" id="editor1" name="editor1" rows="10">
+	<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+</textarea>
+
+<p>Editor 2</p>
+<div contenteditable="true" id="editor2">
+	<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
+</div>
+
+<script>
+	CKEDITOR.replace( 'editor1', {
+		colorButton_colorsPerRow: 10
+	} );
+	CKEDITOR.inline( 'editor2' );
+</script>

tests/plugins/colorbutton/manual/colorsPerRow.md

@@ -0,0 +1,17 @@
+@bender-tags: 16733, tc, 4.6.2, config
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, colorbutton, colordialog, floatingspace
+
+### Scenario 1:
+
+1. Click *Text Color* button in Editor 1.
+	* **Expected**: It has 10 colors in each row (except the last one which has 4).
+1. Click *Background Color* button in Editor 1.
+	* **Expected**: It has 10 colors in each row (except the last one which has 4).
+
+### Scenario 2:
+
+1. Click *Text Color* button in Editor 2.
+	* **Expected**: It has 6 colors in each row.
+1. Click *Background Color* button in Editor 2.
+	* **Expected**: It has 6 colors in each row.