8
0
Эх сурвалжийг харах

Add support for recently used colors wihtout repetition.

Mateusz Samsel 6 жил өмнө
parent
commit
64d8952471

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

@@ -61,6 +61,9 @@ export default class FontColorUI extends Plugin {
 
 			dropdownView.on( 'execute', ( evt, val ) => {
 				dropdownView.set( 'lastlySelectedColor', val );
+				if ( val.value !== null ) {
+					colorTableView.recentlyUsedColors.add( { color: val.value, hasBorder: val.hasBorder }, 0 );
+				}
 				editor.execute( FONT_COLOR, val );
 			} );
 

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

@@ -26,6 +26,16 @@ export default class ColorTableView extends View {
 		this.set( 'recentlyUsedColors', new Collection() );
 		this.initRecentCollection();
 
+		this.recentlyUsedColors.on( 'add', ( evt, item ) => {
+			const duplicates = this.recentlyUsedColors.filter( element => element.color === item.color, this );
+			if ( duplicates.length === 2 ) {
+				this.recentlyUsedColors.remove( duplicates[ 1 ] );
+			}
+			if ( this.recentlyUsedColors.length > this.colorColumns ) {
+				this.recentlyUsedColors.remove( this.recentlyUsedColors.length - 1 );
+			}
+		} );
+
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
@@ -60,7 +70,7 @@ export default class ColorTableView extends View {
 			const colorTile = new ColorTile();
 			colorTile.set( {
 				color: item.color,
-				hasBorder: item.hasBorder
+				hasBorder: item.options.hasBorder
 			} );
 			colorTile.delegate( 'execute' ).to( this );
 			colorCollection.add( colorTile );
@@ -79,10 +89,10 @@ export default class ColorTableView extends View {
 		this.recentlyUsedViews = this.createCollection();
 
 		this.recentlyUsedViews.bindTo( this.recentlyUsedColors ).using(
-			storegColor => {
+			colorObj => {
 				const colorTile = new ColorTile();
 				colorTile.set( {
-					color: storegColor.color,
+					color: colorObj.color,
 					hasBorder: true
 				} );
 				colorTile.delegate( 'execute' ).to( this );

+ 1 - 1
packages/ckeditor5-font/src/ui/colortile.js

@@ -28,7 +28,7 @@ export default class ColorTile extends View {
 			},
 			on: {
 				click: bind.to( () => {
-					this.fire( 'execute', { value: this.color } );
+					this.fire( 'execute', { value: this.color, hasBorder: this.hasBorder } );
 				} )
 			}
 		} );