浏览代码

Merge pull request #17 from ckeditor/t/ckeditor5-ui/403

Internal: Aligned the UIs to the new architecture of the `addListToDropdown` helper (see ckeditor/ckeditor5-ui#402).

Also:
* Updated the UIs to consider `ListItemView` just a container for buttons.
Maciej 7 年之前
父节点
当前提交
a5a56fd23d

+ 15 - 11
packages/ckeditor5-font/src/fontfamily/fontfamilyui.js

@@ -94,24 +94,28 @@ export default class FontFamilyUI extends Plugin {
 // @param {Array.<module:font/fontsize~FontSizeOption>} options
 // @param {module:font/fontsize/fontsizecommand~FontSizeCommand} command
 function _prepareListOptions( options, command ) {
-	const dropdownItems = new Collection();
+	const itemDefinitions = new Collection();
 
 	// Create dropdown items.
 	for ( const option of options ) {
-		const itemModel = new Model( {
-			commandName: 'fontFamily',
-			commandParam: option.model,
-			label: option.title
-		} );
-
-		itemModel.bind( 'isActive' ).to( command, 'value', value => value === option.model );
+		const def = {
+			type: 'button',
+			model: new Model( {
+				commandName: 'fontFamily',
+				commandParam: option.model,
+				label: option.title,
+				withText: true
+			} )
+		};
+
+		def.model.bind( 'isOn' ).to( command, 'value', value => value === option.model );
 
 		// Try to set a dropdown list item style.
 		if ( option.view && option.view.styles ) {
-			itemModel.set( 'style', `font-family: ${ option.view.styles[ 'font-family' ] }` );
+			def.model.set( 'labelStyle', `font-family: ${ option.view.styles[ 'font-family' ] }` );
 		}
 
-		dropdownItems.add( itemModel );
+		itemDefinitions.add( def );
 	}
-	return dropdownItems;
+	return itemDefinitions;
 }

+ 16 - 12
packages/ckeditor5-font/src/fontsize/fontsizeui.js

@@ -109,29 +109,33 @@ export default class FontSizeUI extends Plugin {
 // @param {Array.<module:font/fontsize~FontSizeOption>} options
 // @param {module:font/fontsize/fontsizecommand~FontSizeCommand} command
 function _prepareListOptions( options, command ) {
-	const dropdownItems = new Collection();
+	const itemDefinitions = new Collection();
 
 	for ( const option of options ) {
-		const itemModel = new Model( {
-			commandName: 'fontSize',
-			commandParam: option.model,
-			label: option.title,
-			class: 'ck-fontsize-option'
-		} );
+		const def = {
+			type: 'button',
+			model: new Model( {
+				commandName: 'fontSize',
+				commandParam: option.model,
+				label: option.title,
+				class: 'ck-fontsize-option',
+				withText: true
+			} )
+		};
 
 		if ( option.view && option.view.styles ) {
-			itemModel.set( 'style', `font-size:${ option.view.styles[ 'font-size' ] }` );
+			def.model.set( 'labelStyle', `font-size:${ option.view.styles[ 'font-size' ] }` );
 		}
 
 		if ( option.view && option.view.classes ) {
-			itemModel.set( 'class', `${ itemModel.class } ${ option.view.classes }` );
+			def.model.set( 'class', `${ def.model.class } ${ option.view.classes }` );
 		}
 
-		itemModel.bind( 'isActive' ).to( command, 'value', value => value === option.model );
+		def.model.bind( 'isOn' ).to( command, 'value', value => value === option.model );
 
 		// Add the option to the collection.
-		dropdownItems.add( itemModel );
+		itemDefinitions.add( def );
 	}
 
-	return dropdownItems;
+	return itemDefinitions;
 }

+ 3 - 3
packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js

@@ -94,13 +94,13 @@ describe( 'FontFamilyUI', () => {
 			command.value = undefined;
 
 			// The first item is 'default' font family.
-			expect( listView.items.map( item => item.isActive ) )
+			expect( listView.items.map( item => item.children.first.isOn ) )
 				.to.deep.equal( [ true, false, false, false, false, false, false, false, false ] );
 
 			command.value = 'Arial';
 
 			// The second item is 'Arial' font family.
-			expect( listView.items.map( item => item.isActive ) )
+			expect( listView.items.map( item => item.children.first.isOn ) )
 				.to.deep.equal( [ false, true, false, false, false, false, false, false, false ] );
 		} );
 
@@ -129,7 +129,7 @@ describe( 'FontFamilyUI', () => {
 			it( 'works for the listView#items in the panel', () => {
 				const listView = dropdown.listView;
 
-				expect( listView.items.map( item => item.label ) ).to.deep.equal( [
+				expect( listView.items.map( item => item.children.first.label ) ).to.deep.equal( [
 					'Domyślna',
 					'Arial'
 				] );

+ 6 - 6
packages/ckeditor5-font/tests/fontsize/fontsizeui.js

@@ -100,12 +100,12 @@ describe( 'FontSizeUI', () => {
 			command.value = undefined;
 
 			// The third item is 'default' font size.
-			expect( listView.items.map( item => item.isActive ) ).to.deep.equal( [ false, false, true, false, false ] );
+			expect( listView.items.map( item => item.children.first.isOn ) ).to.deep.equal( [ false, false, true, false, false ] );
 
 			command.value = 'tiny';
 
 			// The first item is 'tiny' font size.
-			expect( listView.items.map( item => item.isActive ) ).to.deep.equal( [ true, false, false, false, false ] );
+			expect( listView.items.map( item => item.children.first.isOn ) ).to.deep.equal( [ true, false, false, false, false ] );
 		} );
 
 		describe( 'model to command binding', () => {
@@ -141,7 +141,7 @@ describe( 'FontSizeUI', () => {
 				it( 'adds css class to listView#items in the panel', () => {
 					const listView = dropdown.listView;
 
-					expect( listView.items.map( item => item.class ) ).to.deep.equal( [
+					expect( listView.items.map( item => item.children.first.class ) ).to.deep.equal( [
 						'ck-fontsize-option text-tiny',
 						'ck-fontsize-option text-small',
 						'ck-fontsize-option',
@@ -172,7 +172,7 @@ describe( 'FontSizeUI', () => {
 				it( 'adds css class to listView#items in the panel', () => {
 					const listView = dropdown.listView;
 
-					expect( listView.items.map( item => item.class ) ).to.deep.equal( [
+					expect( listView.items.map( item => item.children.first.class ) ).to.deep.equal( [
 						'ck-fontsize-option',
 						'ck-fontsize-option',
 						'ck-fontsize-option',
@@ -184,7 +184,7 @@ describe( 'FontSizeUI', () => {
 				it( 'adds font-size style to listView#items in the panel', () => {
 					const listView = dropdown.listView;
 
-					expect( listView.items.map( item => item.style ) ).to.deep.equal( [
+					expect( listView.items.map( item => item.children.first.labelStyle ) ).to.deep.equal( [
 						'font-size:10px',
 						'font-size:12px',
 						undefined,
@@ -220,7 +220,7 @@ describe( 'FontSizeUI', () => {
 			it( 'works for the listView#items in the panel', () => {
 				const listView = dropdown.listView;
 
-				expect( listView.items.map( item => item.label ) ).to.deep.equal( [
+				expect( listView.items.map( item => item.children.first.label ) ).to.deep.equal( [
 					'Tyci',
 					'Mały',
 					'Domyślny',