Przeglądaj źródła

Removed FloatingToolbarView. Used ToolbarView in FloatingPanelView combo instead.

Aleksander Nowodzinski 8 lat temu
rodzic
commit
931ebe3abd

+ 3 - 3
packages/ckeditor5-editor-inline/src/inlineeditorui.js

@@ -47,9 +47,9 @@ export default class InlineEditorUI {
 		 */
 		this.focusTracker = new FocusTracker();
 
-		// Set–up the toolbar.
-		view.toolbar.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
-		view.toolbar.targetElement = view.editableElement;
+		// Set–up the view#panel.
+		view.panel.bind( 'isActive' ).to( this.focusTracker, 'isFocused' );
+		view.panel.targetElement = view.editableElement;
 
 		// Setup the editable.
 		const editingRoot = editor.editing.createRoot( view.editableElement );

+ 28 - 4
packages/ckeditor5-editor-inline/src/inlineeditoruiview.js

@@ -9,7 +9,9 @@
 
 import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
-import FloatingToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/floating/floatingtoolbarview';
+import FloatingPanelView from '@ckeditor/ckeditor5-ui/src/panel/floating/floatingpanelview';
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
 
 /**
  * Inline editor UI view. Uses inline editable and floating toolbar.
@@ -29,9 +31,23 @@ export default class InlineEditorUIView extends EditorUIView {
 		 * A floating toolbar view instance.
 		 *
 		 * @readonly
-		 * @member {module:ui/toolbar/floating/floatingtoolbarview~FloatingToolbarView}
+		 * @member {module:ui/toolbar/toolbarview~ToolbarView}
 		 */
-		this.toolbar = new FloatingToolbarView( locale );
+		this.toolbar = new ToolbarView( locale );
+
+		/**
+		 * A floating panel view instance.
+		 *
+		 * @readonly
+		 * @member {module:ui/panel/floating/floatingpanelview~FloatingPanelView}
+		 */
+		this.panel = new FloatingPanelView( locale );
+
+		Template.extend( this.panel.template, {
+			attributes: {
+				class: 'ck-toolbar__container'
+			}
+		} );
 
 		/**
 		 * Editable UI view.
@@ -41,13 +57,21 @@ export default class InlineEditorUIView extends EditorUIView {
 		 */
 		this.editable = new InlineEditableUIView( locale, editableElement );
 
-		this.body.add( this.toolbar );
+		this.body.add( this.panel );
 		this.addChildren( this.editable );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
+	init() {
+		return super.init()
+			.then( () => this.panel.content.add( this.toolbar ) );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
 	get editableElement() {
 		return this.editable.element;
 	}

+ 6 - 6
packages/ckeditor5-editor-inline/tests/inlineeditorui.js

@@ -56,17 +56,17 @@ describe( 'InlineEditorUI', () => {
 			expect( ui.focusTracker ).to.be.instanceOf( FocusTracker );
 		} );
 
-		describe( 'toolbar', () => {
-			it( 'binds view.toolbar#isActive to editor.ui#focusTracker', () => {
+		describe( 'panel', () => {
+			it( 'binds view.panel#isActive to editor.ui#focusTracker', () => {
 				ui.focusTracker.isFocused = false;
-				expect( view.toolbar.isActive ).to.be.false;
+				expect( view.panel.isActive ).to.be.false;
 
 				ui.focusTracker.isFocused = true;
-				expect( view.toolbar.isActive ).to.be.true;
+				expect( view.panel.isActive ).to.be.true;
 			} );
 
-			it( 'sets view.toolbar#targetElement', () => {
-				expect( view.toolbar.targetElement ).to.equal( view.editableElement );
+			it( 'sets view.panel#targetElement', () => {
+				expect( view.panel.targetElement ).to.equal( view.editableElement );
 			} );
 		} );
 

+ 32 - 5
packages/ckeditor5-editor-inline/tests/inlineeditoruiview.js

@@ -4,7 +4,8 @@
  */
 
 import InlineEditorUIView from '../src/inlineeditoruiview';
-import FloatingToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/floating/floatingtoolbarview';
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
+import FloatingPanelView from '@ckeditor/ckeditor5-ui/src/panel/floating/floatingpanelview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
@@ -19,15 +20,29 @@ describe( 'InlineEditorUIView', () => {
 	describe( 'constructor()', () => {
 		describe( '#toolbar', () => {
 			it( 'is created', () => {
-				expect( view.toolbar ).to.be.instanceof( FloatingToolbarView );
+				expect( view.toolbar ).to.be.instanceof( ToolbarView );
 			} );
 
-			it( 'is given a locate object', () => {
+			it( 'is given a locale object', () => {
 				expect( view.toolbar.locale ).to.equal( locale );
 			} );
+		} );
+
+		describe( '#panel', () => {
+			it( 'is created', () => {
+				expect( view.panel ).to.be.instanceof( FloatingPanelView );
+			} );
+
+			it( 'is given a locale object', () => {
+				expect( view.panel.locale ).to.equal( locale );
+			} );
+
+			it( 'is given the right CSS class', () => {
+				expect( view.panel.element.classList.contains( 'ck-toolbar__container' ) ).to.be.true;
+			} );
 
-			it( 'is put into the "top" collection', () => {
-				expect( view.body.get( 0 ) ).to.equal( view.toolbar );
+			it( 'is put into the #body collection', () => {
+				expect( view.body.get( 0 ) ).to.equal( view.panel );
 			} );
 		} );
 
@@ -52,6 +67,18 @@ describe( 'InlineEditorUIView', () => {
 		} );
 	} );
 
+	describe( 'init', () => {
+		it( 'appends #toolbar to panel#content', () => {
+			expect( view.panel.content ).to.have.length( 0 );
+
+			return view.init()
+				.then( () => {
+					expect( view.panel.content.get( 0 ) ).to.equal( view.toolbar );
+				} )
+				.then( () => view.destroy() );
+		} );
+	} );
+
 	describe( 'editableElement', () => {
 		it( 'returns editable\'s view element', () => {
 			return view.init()