Browse Source

Flat color structure. to better work with grid.

Mateusz Samsel 6 years ago
parent
commit
ff5c050ace

+ 15 - 21
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -22,27 +22,21 @@ export default class FontBackgroundColorEditing extends Plugin {
 
 		editor.config.define( FONT_BACKGROUND_COLOR, {
 			colors: [
-				[
-					'hsl(0, 0%, 0%)',
-					'hsl(0, 0%, 30%)',
-					'hsl(0, 0%, 60%)',
-					'hsl(0, 0%, 90%)',
-					'hsl(0, 0%, 100%)'
-				],
-				[
-					'hsl(360, 75%, 60%)',
-					'hsl(30, 75%, 60%)',
-					'hsl(60, 75%, 60%)',
-					'hsl(90, 75%, 60%)',
-					'hsl(120, 75%, 60%)'
-				],
-				[
-					'hsl(150, 75%, 60%)',
-					'hsl(180, 75%, 60%)',
-					'hsl(210, 75%, 60%)',
-					'hsl(240, 75%, 60%)',
-					'hsl(270, 75%, 60%)'
-				]
+				'hsl(0, 0%, 0%)',
+				'hsl(0, 0%, 30%)',
+				'hsl(0, 0%, 60%)',
+				'hsl(0, 0%, 90%)',
+				'hsl(0, 0%, 100%)',
+				'hsl(360, 75%, 60%)',
+				'hsl(30, 75%, 60%)',
+				'hsl(60, 75%, 60%)',
+				'hsl(90, 75%, 60%)',
+				'hsl(120, 75%, 60%)',
+				'hsl(150, 75%, 60%)',
+				'hsl(180, 75%, 60%)',
+				'hsl(210, 75%, 60%)',
+				'hsl(240, 75%, 60%)',
+				'hsl(270, 75%, 60%)'
 			]
 		} );
 

+ 3 - 3
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -30,14 +30,14 @@ export default class FontBackgroundColorUI extends Plugin {
 			const splitButtonView = dropdownView.buttonView;
 			const colorTableView = colorUI.addColorsToDropdown(
 				dropdownView,
-				options.map( row => row.map( element => ( { name: element.label, color: element.model } ) ) )
+				options.map( element => ( { name: element.label, color: element.model } ) )
 			);
 			colorTableView.set( 'removeButtonTooltip', t( 'Remove background color' ) );
 
 			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
 
 			// Preselect first element on color list.
-			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ][ 0 ].model } );
+			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ].model } );
 
 			dropdownView.buttonView.set( {
 				label: t( 'Font Background Color' ),
@@ -79,7 +79,7 @@ export default class FontBackgroundColorUI extends Plugin {
 	 */
 	_getLocalizedOptions() {
 		const editor = this.editor;
-		const colors = editor.config.get( `${ FONT_BACKGROUND_COLOR }.colors` ).map( colorRow => normalizeOptions( colorRow ) );
+		const colors = normalizeOptions( editor.config.get( `${ FONT_BACKGROUND_COLOR }.colors` ) );
 		return colors;
 	}
 }

+ 15 - 21
packages/ckeditor5-font/src/fontcolor/fontcolorediting.js

@@ -22,27 +22,21 @@ export default class FontColorEditing extends Plugin {
 
 		editor.config.define( FONT_COLOR, {
 			colors: [
-				[
-					'hsl(0, 0%, 0%)',
-					'hsl(0, 0%, 30%)',
-					'hsl(0, 0%, 60%)',
-					'hsl(0, 0%, 90%)',
-					'hsl(0, 0%, 100%)'
-				],
-				[
-					'hsl(360, 75%, 60%)',
-					'hsl(30, 75%, 60%)',
-					'hsl(60, 75%, 60%)',
-					'hsl(90, 75%, 60%)',
-					'hsl(120, 75%, 60%)'
-				],
-				[
-					'hsl(150, 75%, 60%)',
-					'hsl(180, 75%, 60%)',
-					'hsl(210, 75%, 60%)',
-					'hsl(240, 75%, 60%)',
-					'hsl(270, 75%, 60%)'
-				]
+				'hsl(0, 0%, 0%)',
+				'hsl(0, 0%, 30%)',
+				'hsl(0, 0%, 60%)',
+				'hsl(0, 0%, 90%)',
+				'hsl(0, 0%, 100%)',
+				'hsl(360, 75%, 60%)',
+				'hsl(30, 75%, 60%)',
+				'hsl(60, 75%, 60%)',
+				'hsl(90, 75%, 60%)',
+				'hsl(120, 75%, 60%)',
+				'hsl(150, 75%, 60%)',
+				'hsl(180, 75%, 60%)',
+				'hsl(210, 75%, 60%)',
+				'hsl(240, 75%, 60%)',
+				'hsl(270, 75%, 60%)'
 			]
 		} );
 

+ 3 - 3
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -30,14 +30,14 @@ export default class FontColorUI extends Plugin {
 			const splitButtonView = dropdownView.buttonView;
 			const colorTableView = colorUI.addColorsToDropdown(
 				dropdownView,
-				options.map( row => row.map( element => ( { name: element.label, color: element.model } ) ) )
+				options.map( element => ( { name: element.label, color: element.model } ) )
 			);
 			colorTableView.set( 'removeButtonTooltip', t( 'Remove text color' ) );
 
 			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
 
 			// Preselect first element on color list.
-			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ][ 0 ].model } );
+			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ].model } );
 
 			dropdownView.buttonView.set( {
 				label: t( 'Font Color' ),
@@ -79,7 +79,7 @@ export default class FontColorUI extends Plugin {
 	 */
 	_getLocalizedOptions() {
 		const editor = this.editor;
-		const colors = editor.config.get( `${ FONT_COLOR }.colors` ).map( colorRow => normalizeOptions( colorRow ) );
+		const colors = normalizeOptions( editor.config.get( `${ FONT_COLOR }.colors` ) );
 		return colors;
 	}
 }

+ 13 - 20
packages/ckeditor5-font/src/ui/colortableview.js

@@ -47,38 +47,31 @@ export default class ColorTableView extends View {
 
 	createColorTableTemplate() {
 		return new Template( {
-			tag: 'table',
-			children: this._colorRows( this.colorsDefinition ),
+			tag: 'div',
+			children: this._colorElements( this.colorsDefinition ),
 			attributes: {
-				class: 'ck-color-table__table'
+				class: 'ck-color-table__main-container'
 			}
 		} );
 	}
 
-	_colorRows( colorTable ) {
-		return colorTable.map( rowArr => new Template( {
-			tag: 'tr',
-			children: this._colorElements( rowArr )
-		} ) );
-	}
+	// _colorRows( colorTable ) {
+	// 	return colorTable.map( rowArr => new Template( {
+	// 		tag: 'tr',
+	// 		children: this._colorElements( rowArr )
+	// 	} ) );
+	// }
 
-	_colorElements( rowArr ) {
+	_colorElements( colorArr ) {
 		const bind = this.bindTemplate;
-		return rowArr.map( element => new Template( {
-			tag: 'td',
+		return colorArr.map( element => new Template( {
+			tag: 'span',
 			attributes: {
 				style: {
 					backgroundColor: element.color
 				},
 				class: [
-					'ck-color-table__cell-color',
-					bind.if(
-						'selectedColor',
-						'ck-color-table__cell-color_active',
-						value => {
-							return value === element.color;
-						}
-					)
+					'ck-color-table__cell-color'
 				]
 			},
 			on: {

+ 3 - 3
packages/ckeditor5-font/theme/fontcolor.css

@@ -5,14 +5,14 @@
 
 .ck-color-table .ck-color-table__table {
 	margin: 0.5em 0.5em 0 0.5em;
-	width: 14em;
+	width: 100%;
 	border-collapse: separate;
 	border-spacing: 0.2em;
 }
 
 .ck-color-table .ck-color-table__cell-color {
-	width: 2em;
-	height: 2em;
+	width: 20px;
+	height: 20px;
 	border: 0.1em solid #000;
 	transition-property: border-width;
 	transition-duration: 0.1s;