Parcourir la source

Enhancement: Use ButtonDropdown to aggregate alignment buttons.

Maciej Gołaszewski il y a 8 ans
Parent
commit
3aae363744

+ 18 - 1
packages/ckeditor5-alignment/src/alignmentui.js

@@ -16,6 +16,8 @@ import alignRightIcon from '../theme/icons/align-right.svg';
 import alignCenterIcon from '../theme/icons/align-center.svg';
 import alignJustifyIcon from '../theme/icons/align-justify.svg';
 import AlignmentEditing, { isSupported } from './alignmentediting';
+import createButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/button/createbuttondropdown';
+import Model from '../../ckeditor5-ui/src/model';
 
 const icons = new Map( [
 	[ 'left', alignLeftIcon ],
@@ -75,11 +77,26 @@ export default class AlignmentUI extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
-		const styles = this.editor.config.get( 'alignment.styles' );
+		const editor = this.editor;
+		const componentFactory = editor.ui.componentFactory;
+		const t = editor.t;
+		const styles = editor.config.get( 'alignment.styles' );
 
 		styles
 			.filter( isSupported )
 			.forEach( style => this._addButton( style ) );
+
+		componentFactory.add( 'alignmentDropdown', locale => {
+			const buttons = styles.map( style => componentFactory.create( AlignmentEditing.commandName( style ) ) );
+
+			const model = new Model( {
+				label: t( 'Text alignment' ),
+				withText: false,
+				isVertical: true
+			} );
+
+			return createButtonDropdown( model, buttons, locale );
+		} );
 	}
 
 	/**

+ 1 - 4
packages/ckeditor5-alignment/tests/manual/alignment.js

@@ -12,10 +12,7 @@ import Alignment from '../../src/alignment';
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ ArticlePluginSet, Alignment ],
-		toolbar: [
-			'headings', 'bold', 'italic', 'link', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'bulletedList', 'numberedList',
-			'blockQuote', 'undo', 'redo'
-		]
+		toolbar: [ 'headings', 'bold', 'italic', 'link', 'alignmentDropdown', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ]
 	} )
 	.then( editor => {
 		window.editor = editor;

+ 1 - 1
packages/ckeditor5-alignment/tests/manual/alignmentconfig.js

@@ -13,7 +13,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ ArticlePluginSet, Alignment ],
 		toolbar: [
-			'headings', 'bold', 'italic', 'link', 'alignCenter', 'alignJustify', 'bulletedList', 'numberedList',
+			'headings', 'bold', 'italic', 'link', 'alignmentDropdown', 'bulletedList', 'numberedList',
 			'blockQuote', 'undo', 'redo'
 		],
 		alignment: { styles: [ 'center', 'justify' ] }