8
0
Просмотр исходного кода

Fix test, add option to give amount of columns from JS.

Mateusz Samsel 6 лет назад
Родитель
Сommit
5bf86b51c3

+ 5 - 2
packages/ckeditor5-font/src/ui/colorgrid.js

@@ -27,7 +27,7 @@ export default class ColorGrid extends View {
 	 * @param {Array.<module:font/ui/colorgrid~ColorDefinition>} colorsDefinition Array with definitions
 	 * required to build {@link module:font/ui/colortile~ColorTile}.
 	 */
-	constructor( locale, { colorsDefinition = [] } = {} ) {
+	constructor( locale, { colorsDefinition = [], colorColumns } = {} ) {
 		super( locale );
 
 		/**
@@ -96,7 +96,10 @@ export default class ColorGrid extends View {
 			tag: 'div',
 			children: this.items,
 			attributes: {
-				class: 'ck-color-table__grid-container'
+				class: 'ck-color-table__grid-container',
+				style: {
+					gridTemplateColumns: `repeat( ${ colorColumns }, 1fr)`
+				}
 			}
 		} );
 	}

+ 5 - 2
packages/ckeditor5-font/src/ui/colortableview.js

@@ -151,7 +151,10 @@ export default class ColorTableView extends View {
 	 * @private
 	 */
 	createStaticColorTable() {
-		const colorGrid = new ColorGrid( this.locale, { colorsDefinition: this.colorsDefinition } );
+		const colorGrid = new ColorGrid( this.locale, {
+			colorsDefinition: this.colorsDefinition,
+			colorColumns: this.colorColumns
+		} );
 		colorGrid.delegate( 'execute' ).to( this );
 		return colorGrid;
 	}
@@ -161,7 +164,7 @@ export default class ColorTableView extends View {
 	 * @private
 	 */
 	recentlyUsed() {
-		const recentViews = new ColorGrid( this.locale );
+		const recentViews = new ColorGrid( this.locale, { colorColumns: this.colorColumns } );
 
 		recentViews.items.bindTo( this.recentlyUsedColors ).using(
 			colorObj => {

+ 1 - 1
packages/ckeditor5-font/tests/ui/colorui.js

@@ -218,7 +218,7 @@ describe( 'ColorUI', () => {
 						color: '#000',
 						label: '#000'
 					}, {
-						color: 'rgb(255, 255, 255)',
+						color: 'rgb(255,255,255)',
 						label: 'Biały'
 					}, {
 						color: 'red',

+ 0 - 1
packages/ckeditor5-font/theme/fontcolor.css

@@ -14,7 +14,6 @@
 
 .ck .ck-color-table__grid-container {
 	display: grid;
-	grid-template-columns: repeat( var(--ck-table-color-max-columns), 1fr);
 	grid-gap: calc( var(--ck-table-color-padding) / 2 );
 	padding: var(--ck-table-color-padding);
 }