Explorar el Código

Changed: Rename button dropdown to toolbar dropdown.

Maciej Gołaszewski hace 8 años
padre
commit
38b1765237

+ 5 - 9
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -16,6 +16,9 @@ import ToolbarView from '../toolbar/toolbarview';
 import ListView from '../list/listview';
 import ListView from '../list/listview';
 import ListItemView from '../list/listitemview';
 import ListItemView from '../list/listitemview';
 
 
+// TODO: This should be per-component import AFAIK. It will result in smaller builds that don't use dropdown with toolbar.
+import '../../theme/components/dropdown/toolbardropdown.css';
+
 /**
 /**
  * Adds a behavior to a dropdownView that focuses dropdown panel view contents on keystrokes.
  * Adds a behavior to a dropdownView that focuses dropdown panel view contents on keystrokes.
  *
  *
@@ -196,9 +199,6 @@ export function addListViewToDropdown( dropdownView, model, locale ) {
 	return listView;
 	return listView;
 }
 }
 
 
-// TODO: where I go??? Make something smart since
-import '../../theme/components/dropdown/buttondropdown.css';
-
 /**
 /**
  * Creates an instance of {@link module:ui/dropdown/button/buttondropdownview~ButtonDropdownView} class using
  * Creates an instance of {@link module:ui/dropdown/button/buttondropdownview~ButtonDropdownView} class using
  * a provided {@link module:ui/dropdown/button/buttondropdownmodel~ButtonDropdownModel}.
  * a provided {@link module:ui/dropdown/button/buttondropdownmodel~ButtonDropdownModel}.
@@ -235,19 +235,17 @@ import '../../theme/components/dropdown/buttondropdown.css';
 export function addToolbarToDropdown( dropdownView, model ) {
 export function addToolbarToDropdown( dropdownView, model ) {
 	const toolbarView = dropdownView.toolbarView = new ToolbarView();
 	const toolbarView = dropdownView.toolbarView = new ToolbarView();
 
 
-	// TODO verify className binding
 	toolbarView.bind( 'isVertical' ).to( model, 'isVertical' );
 	toolbarView.bind( 'isVertical' ).to( model, 'isVertical' );
 
 
-	// TODO: verify class names
 	dropdownView.extendTemplate( {
 	dropdownView.extendTemplate( {
 		attributes: {
 		attributes: {
-			class: [ 'ck-buttondropdown' ]
+			class: [ 'ck-toolbar-dropdown' ]
 		}
 		}
 	} );
 	} );
 
 
 	dropdownView.panelView.children.add( toolbarView );
 	dropdownView.panelView.children.add( toolbarView );
 
 
-	// TODO: make it as 'items', 'views' ???
+	// TODO: make it as 'items', 'views' or pass them as parameter???
 	model.buttons.map( view => toolbarView.items.add( view ) );
 	model.buttons.map( view => toolbarView.items.add( view ) );
 
 
 	return toolbarView;
 	return toolbarView;
@@ -298,6 +296,4 @@ export function getBindingTargets( buttons, attribute ) {
  * @param {module:ui/dropdown/dropdownmodel~DropdownModel} model Model of this dropdown.
  * @param {module:ui/dropdown/dropdownmodel~DropdownModel} model Model of this dropdown.
  * @param {module:utils/locale~Locale} locale The locale instance.
  * @param {module:utils/locale~Locale} locale The locale instance.
  * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
  * @returns {module:ui/dropdown/dropdownview~DropdownView} The dropdown view instance.
- *
- * TODO: only used in tests.
  */
  */

+ 1 - 1
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.html

@@ -16,4 +16,4 @@
 
 
 <h2>ButtonDropdown</h2>
 <h2>ButtonDropdown</h2>
 
 
-<div id="button-dropown" class="ck-reset_all"></div>
+<div id="dropdown-toolbar" class="ck-reset_all"></div>

+ 7 - 7
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.js

@@ -29,7 +29,7 @@ const ui = testUtils.createTestUIView( {
 	listDropdown: '#list-dropdown',
 	listDropdown: '#list-dropdown',
 	dropdownShared: '#dropdown-shared',
 	dropdownShared: '#dropdown-shared',
 	dropdownLabel: '#dropdown-label',
 	dropdownLabel: '#dropdown-label',
-	buttonDropdown: '#button-dropown'
+	toolbarDropdown: '#dropdown-toolbar'
 } );
 } );
 
 
 function testEmpty() {
 function testEmpty() {
@@ -138,20 +138,20 @@ function testButton() {
 			return buttonView;
 			return buttonView;
 		} );
 		} );
 
 
-	const buttonDropdownModel = new Model( {
+	const toolbarDropdownModel = new Model( {
 		isVertical: true,
 		isVertical: true,
 		buttons: buttonViews
 		buttons: buttonViews
 	} );
 	} );
 
 
-	const buttonDropdown = createSingleButtonDropdown( buttonDropdownModel, {} );
+	const toolbarDropdown = createSingleButtonDropdown( toolbarDropdownModel, {} );
 
 
-	addToolbarToDropdown( buttonDropdown, buttonDropdownModel );
-	addDefaultBehavior( buttonDropdown );
+	addToolbarToDropdown( toolbarDropdown, toolbarDropdownModel );
+	addDefaultBehavior( toolbarDropdown );
 
 
-	ui.buttonDropdown.add( buttonDropdown );
+	ui.toolbarDropdown.add( toolbarDropdown );
 
 
 	window.buttons = buttons;
 	window.buttons = buttons;
-	window.buttonDropdownModel = buttonDropdownModel;
+	window.toolbarDropdownModel = toolbarDropdownModel;
 }
 }
 
 
 testEmpty();
 testEmpty();

+ 2 - 2
packages/ckeditor5-ui/tests/dropdown/manual/dropdown.md

@@ -29,7 +29,7 @@ listDropdownCollection.add(
 );
 );
 ```
 ```
 
 
-## Button Dropdown
+## Toolbar Dropdown
 1. Play with `buttons[ n ].isOn` to control buttonDropdown active icon.
 1. Play with `buttons[ n ].isOn` to control buttonDropdown active icon.
 2. Play with `buttons[ n ].isEnabled` to control buttonDropdown disabled state (all buttons must be set to `false`).
 2. Play with `buttons[ n ].isEnabled` to control buttonDropdown disabled state (all buttons must be set to `false`).
-3. Play with `buttonDropdownModel.isVertical` to control buttonDropdown vertical/horizontal alignment.
+3. Play with `toolbarDropdownModel.isVertical` to control buttonDropdown vertical/horizontal alignment.

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

@@ -435,6 +435,10 @@ describe( 'utils', () => {
 			expect( dropdownView.locale ).to.equal( locale );
 			expect( dropdownView.locale ).to.equal( locale );
 		} );
 		} );
 
 
+		it( 'sets view class', () => {
+			expect( dropdownView.element.classList.contains( 'ck-toolbar-dropdown' ) ).to.be.true;
+		} );
+
 		describe( 'view#toolbarView', () => {
 		describe( 'view#toolbarView', () => {
 			it( 'is created', () => {
 			it( 'is created', () => {
 				const panelChildren = dropdownView.panelView.children;
 				const panelChildren = dropdownView.panelView.children;

+ 1 - 1
packages/ckeditor5-ui/theme/components/dropdown/buttondropdown.css → packages/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  * For licensing, see LICENSE.md.
  */
  */
 
 
-.ck-buttondropdown {
+.ck-toolbar-dropdown {
 	& .ck-toolbar {
 	& .ck-toolbar {
 		flex-wrap: nowrap;
 		flex-wrap: nowrap;