8
0
Quellcode durchsuchen

Added ColorGridView#selectedColor. Added an icon to the ColorTileView.

Aleksander Nowodzinski vor 6 Jahren
Ursprung
Commit
1be5faea91

+ 13 - 0
packages/ckeditor5-ui/src/colorgrid/colorgridview.js

@@ -40,6 +40,13 @@ export default class ColorGridView extends View {
 		}
 
 		/**
+		 * The color of the currently selected color tile in {@link #items}.
+		 *
+		 * @type {String}
+		 */
+		this.set( 'selectedColor' );
+
+		/**
 		 * Collection of the child tile views.
 		 *
 		 * @readonly
@@ -115,6 +122,12 @@ export default class ColorGridView extends View {
 				style: viewStyleAttribute
 			}
 		} );
+
+		this.on( 'change:selectedColor', ( evt, name, selectedColor ) => {
+			for ( const item of this.items ) {
+				item.isOn = item.color === selectedColor;
+			}
+		} );
 	}
 
 	/**

+ 5 - 0
packages/ckeditor5-ui/src/colorgrid/colortileview.js

@@ -8,6 +8,7 @@
  */
 
 import ButtonView from '../button/buttonview';
+import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 
 /**
  * This class represents a single color tile in the {@link module:ui/colorgrid/colorgrid~ColorGridView}.
@@ -22,6 +23,7 @@ export default class ColorTileView extends ButtonView {
 
 		/**
 		 * String representing a color shown as tile's background.
+		 *
 		 * @type {String}
 		 */
 		this.set( 'color' );
@@ -29,10 +31,13 @@ export default class ColorTileView extends ButtonView {
 		/**
 		 * A flag that toggles a special CSS class responsible for displaying
 		 * a border around the button.
+		 *
 		 * @type {Boolean}
 		 */
 		this.set( 'hasBorder' );
 
+		this.icon = checkIcon;
+
 		this.extendTemplate( {
 			attributes: {
 				style: {

+ 13 - 0
packages/ckeditor5-ui/tests/colorgrid/colorgridview.js

@@ -92,6 +92,19 @@ describe( 'ColorGridView', () => {
 			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
 		} );
 
+		it( 'reacts to changes in #selectedColor by setting the item#isOn', () => {
+			expect( view.items.map( item => item ).some( item => item.isOn ) ).to.be.false;
+
+			view.selectedColor = 'red';
+
+			expect( view.items.get( 2 ).isOn ).to.be.true;
+
+			view.selectedColor = 'rgb(255, 255, 255)';
+
+			expect( view.items.get( 1 ).isOn ).to.be.true;
+			expect( view.items.get( 2 ).isOn ).to.be.false;
+		} );
+
 		describe( 'add colors from definition as child items', () => {
 			it( 'has proper number of elements', () => {
 				expect( view.items.length ).to.equal( 3 );

+ 8 - 0
packages/ckeditor5-ui/tests/colorgrid/colortileview.js

@@ -5,6 +5,7 @@
 
 import ColorTileView from '../../src/colorgrid/colortileview';
 import ButtonView from '../../src/button/buttonview';
+import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 
 describe( 'ColorTileView', () => {
 	it( 'inherits from ButtonView', () => {
@@ -27,4 +28,11 @@ describe( 'ColorTileView', () => {
 		colorTile.set( 'hasBorder', true );
 		expect( colorTile.element.classList.contains( 'ck-color-table__color-tile_bordered' ) ).to.be.true;
 	} );
+
+	it( 'has a check icon', () => {
+		const colorTile = new ColorTileView();
+		colorTile.render();
+
+		expect( colorTile.icon ).to.equal( checkIcon );
+	} );
 } );