Przeglądaj źródła

Update background color to use splitbutton.

Mateusz Samsel 6 lat temu
rodzic
commit
6d2e332017

+ 15 - 10
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorui.js

@@ -8,11 +8,11 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
 
 import fontBackgroundColorIcon from '../../theme/icons/font-family.svg';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import { FONT_BACKGROUND_COLOR, normalizeOptions } from '../utils';
-import ColorTableView from '../ui/colortableview';
+import { FONT_BACKGROUND_COLOR, normalizeOptions, colorUI } from '../utils';
 export default class FontBackgroundColorUI extends Plugin {
 	/**
 	 * @inheritDoc
@@ -26,17 +26,17 @@ export default class FontBackgroundColorUI extends Plugin {
 
 		// Register UI component.
 		editor.ui.componentFactory.add( FONT_BACKGROUND_COLOR, locale => {
-			const dropdownView = createDropdown( locale );
-
-			const colorTableView = new ColorTableView( locale, {
-				colors: options.map( item => ( { name: item.label, color: item.model } ) )
-			} );
+			const dropdownView = createDropdown( locale, SplitButtonView );
+			const splitButtonView = dropdownView.buttonView;
+			const colorTableView = colorUI.addColorsToDropdown(
+				dropdownView,
+				options.map( item => ( { name: item.label, color: item.model } ) )
+			);
 			colorTableView.set( 'removeButtonTooltip', t( 'Remove background color' ) );
 
-			dropdownView.panelView.children.add( colorTableView );
-
 			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
-			colorTableView.delegate( 'colorPicked' ).to( dropdownView, 'execute' );
+
+			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ].model } );
 
 			dropdownView.buttonView.set( {
 				label: t( 'Font Background Color' ),
@@ -53,9 +53,14 @@ export default class FontBackgroundColorUI extends Plugin {
 			dropdownView.bind( 'isEnabled' ).to( command );
 
 			dropdownView.on( 'execute', ( evt, val ) => {
+				dropdownView.set( 'lastlySelectedColor', val );
 				editor.execute( FONT_BACKGROUND_COLOR, val );
 			} );
 
+			splitButtonView.on( 'execute', () => {
+				editor.execute( FONT_BACKGROUND_COLOR, dropdownView.lastlySelectedColor );
+			} );
+
 			return dropdownView;
 		} );
 	}

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

@@ -32,9 +32,9 @@ export default class FontColorUI extends Plugin {
 				dropdownView,
 				options.map( item => ( { name: item.label, color: item.model } ) )
 			);
+			colorTableView.set( 'removeButtonTooltip', t( 'Remove text color' ) );
 
 			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
-			colorTableView.set( 'removeButtonTooltip', t( 'Remove text color' ) );
 
 			dropdownView.set( 'lastlySelectedColor', { value: options[ 0 ].model } );