Sfoglia il codice sorgente

Feature: Implemented list component separators (see ckeditor/ckeditor5-table#24).

Aleksander Nowodzinski 7 anni fa
parent
commit
1f814afa63

+ 10 - 3
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -13,6 +13,7 @@ import DropdownButtonView from './button/dropdownbuttonview';
 import ToolbarView from '../toolbar/toolbarview';
 import ListView from '../list/listview';
 import ListItemView from '../list/listitemview';
+import ListSeparatorView from '../list/listseparatorview';
 
 import clickOutsideHandler from '../bindings/clickoutsidehandler';
 
@@ -173,10 +174,16 @@ export function addListToDropdown( dropdownView, items ) {
 	const listView = dropdownView.listView = new ListView( locale );
 
 	listView.items.bindTo( items ).using( itemModel => {
-		const item = new ListItemView( locale );
+		let item;
 
-		// Bind all attributes of the model to the item view.
-		item.bind( ...Object.keys( itemModel ) ).to( itemModel );
+		if ( itemModel.separator ) {
+			item = new ListSeparatorView( locale );
+		} else {
+			item = new ListItemView( locale );
+
+			// Bind all attributes of the model to the item view.
+			item.bind( ...Object.keys( itemModel ) ).to( itemModel );
+		}
 
 		return item;
 	} );

+ 34 - 0
packages/ckeditor5-ui/src/list/listseparatorview.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ui/list/listseparatorview
+ */
+
+import View from '../view';
+
+/**
+ * The list separator view class.
+ *
+ * @extends module:ui/view~View
+ */
+export default class ListSeparatorView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		this.setTemplate( {
+			tag: 'span',
+			attributes: {
+				class: [
+					'ck',
+					'ck-list__separator'
+				]
+			}
+		} );
+	}
+}

+ 9 - 0
packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -19,6 +19,7 @@ import View from '../../src/view';
 import ToolbarView from '../../src/toolbar/toolbarview';
 import { createDropdown, addToolbarToDropdown, addListToDropdown } from '../../src/dropdown/utils';
 import ListItemView from '../../src/list/listitemview';
+import ListSeparatorView from '../../src/list/listseparatorview';
 import ListView from '../../src/list/listview';
 
 const assertBinding = utilsTestUtils.assertBinding;
@@ -349,6 +350,14 @@ describe( 'utils', () => {
 
 				dropdownView.listView.items.get( 0 ).fire( 'execute' );
 			} );
+
+			it( 'is filled with separators', () => {
+				const itemModel = new Model( { separator: true } );
+
+				items.add( itemModel );
+
+				expect( dropdownView.listView.items.get( 0 ) ).to.be.instanceOf( ListSeparatorView );
+			} );
 		} );
 	} );
 } );

+ 24 - 0
packages/ckeditor5-ui/tests/list/listseparatorview.js

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import ListSeparatorView from '../../src/list/listseparatorview';
+
+describe( 'ListSeparatorView', () => {
+	let view;
+
+	beforeEach( () => {
+		view = new ListSeparatorView();
+
+		view.render();
+	} );
+
+	describe( 'template', () => {
+		it( 'should create element from template', () => {
+			expect( view.element.tagName ).to.equal( 'SPAN' );
+			expect( view.element.classList.contains( 'ck' ) ).to.true;
+			expect( view.element.classList.contains( 'ck-list__separator' ) ).to.true;
+		} );
+	} );
+} );

+ 4 - 0
packages/ckeditor5-ui/theme/components/list/list.css

@@ -19,4 +19,8 @@
 			z-index: var(--ck-z-default);
 		}
 	}
+
+	& .ck-list__separator {
+		display: block;
+	}
 }