Explorar el Código

Replace regular button with splitbutton for dropdown. Preserve lastly used color to be applied by splitbutton.

Mateusz Samsel hace 6 años
padre
commit
8f2b50ed7e

+ 10 - 1
packages/ckeditor5-font/src/fontcolor/fontcolorui.js

@@ -8,6 +8,7 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 
 import fontColorIcon from '../../theme/icons/font-family.svg';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
@@ -25,7 +26,8 @@ export default class FontColorUI extends Plugin {
 
 		// Register UI component.
 		editor.ui.componentFactory.add( FONT_COLOR, locale => {
-			const dropdownView = createDropdown( locale );
+			const dropdownView = createDropdown( locale, SplitButtonView );
+			const splitButtonView = dropdownView.buttonView;
 			const colorTableView = colorUI.addColorsToDropdown(
 				dropdownView,
 				options.map( item => ( { name: item.label, color: item.model } ) )
@@ -34,6 +36,8 @@ export default class FontColorUI extends Plugin {
 			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
 			colorTableView.set( 'removeButtonTooltip', t( 'Remove text color' ) );
 
+			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ].model } );
+
 			dropdownView.buttonView.set( {
 				label: t( 'Font Color' ),
 				icon: fontColorIcon,
@@ -49,9 +53,14 @@ export default class FontColorUI extends Plugin {
 			dropdownView.bind( 'isEnabled' ).to( command );
 
 			dropdownView.on( 'execute', ( evt, val ) => {
+				dropdownView.set( 'lastlySelectedColor', val );
 				editor.execute( FONT_COLOR, val );
 			} );
 
+			splitButtonView.on( 'execute', () => {
+				editor.execute( FONT_COLOR, dropdownView.lastlySelectedColor );
+			} );
+
 			return dropdownView;
 		} );
 	}

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

@@ -44,7 +44,7 @@ export default class ColorTableView extends View {
 		btnView.bind( 'tooltip' ).to( this, 'removeButtonTooltip' );
 		btnView.class = 'ck-color-table__remove-color';
 		btnView.on( 'execute', () => {
-			this.fire( 'colorPicked', { value: null } );
+			this.fire( 'execute', { value: null } );
 		} );
 		return btnView;
 	}
@@ -93,7 +93,7 @@ export default class ColorTableView extends View {
 				},
 				on: {
 					click: bind.to( () => {
-						this.fire( 'colorPicked', { value: this.colorsDefinition[ index * this.COLUMNS + i ].color } );
+						this.fire( 'execute', { value: this.colorsDefinition[ index * this.COLUMNS + i ].color } );
 					} ),
 					mouseover: bind.to( () => {
 						this.set( 'hoveredColor', this.colorsDefinition[ index * this.COLUMNS + i ].name );

+ 1 - 1
packages/ckeditor5-font/src/utils.js

@@ -86,7 +86,7 @@ export const colorUI = {
 
 		dropdownView.panelView.children.add( colorTableView );
 
-		colorTableView.delegate( 'colorPicked' ).to( dropdownView, 'execute' );
+		colorTableView.delegate( 'execute' ).to( dropdownView, 'execute' );
 		return colorTableView;
 	}
 };