浏览代码

Merge branch 'master' into t/ckeditor5/550

Piotrek Koszuliński 7 年之前
父节点
当前提交
b8ef0868e2

+ 2 - 1
packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js

@@ -109,7 +109,8 @@ export default class SplitButtonView extends View {
 			attributes: {
 				class: [
 					'ck-splitbutton',
-					bind.if( 'isVisible', 'ck-hidden', value => !value )
+					bind.if( 'isVisible', 'ck-hidden', value => !value ),
+					this.arrowView.bindTemplate.if( 'isOn', 'ck-splitbutton_open' )
 				]
 			},
 

+ 2 - 1
packages/ckeditor5-ui/src/panel/balloon/contextualballoon.js

@@ -61,7 +61,8 @@ export default class ContextualBalloon extends Plugin {
 		 */
 		this.positionLimiter = () => {
 			const view = this.editor.editing.view;
-			const editableElement = view.selection.editableElement;
+			const viewDocument = view.document;
+			const editableElement = viewDocument.selection.editableElement;
 
 			if ( editableElement ) {
 				return view.domConverter.mapViewToDom( editableElement.root );

+ 9 - 9
packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js

@@ -53,7 +53,6 @@ export default class BalloonToolbar extends Plugin {
 		this.toolbarView.extendTemplate( {
 			attributes: {
 				class: [
-					'ck-editor-toolbar',
 					'ck-toolbar_floating'
 				]
 			}
@@ -129,7 +128,7 @@ export default class BalloonToolbar extends Plugin {
 	 */
 	_handleSelectionChange() {
 		const selection = this.editor.model.document.selection;
-		const editingView = this.editor.editing.view;
+		const viewDocument = this.editor.editing.view.document;
 
 		this.listenTo( selection, 'change:range', ( evt, data ) => {
 			// When the selection is not changed by a collaboration and when is not collapsed.
@@ -145,7 +144,7 @@ export default class BalloonToolbar extends Plugin {
 		// Hide the toolbar when the selection stops changing.
 		this.listenTo( this, '_selectionChangeDebounced', () => {
 			// This implementation assumes that only non–collapsed selections gets the contextual toolbar.
-			if ( editingView.isFocused && !editingView.selection.isCollapsed ) {
+			if ( viewDocument.isFocused && !viewDocument.selection.isCollapsed ) {
 				this.show();
 			}
 		} );
@@ -168,7 +167,7 @@ export default class BalloonToolbar extends Plugin {
 			return;
 		}
 
-		// Update the toolbar position upon #render (e.g. external document changes)
+		// Update the toolbar position upon change (e.g. external document changes)
 		// while it's visible.
 		this.listenTo( this.editor.editing.view, 'render', () => {
 			this._balloon.updatePosition( this._getBalloonPositionData() );
@@ -178,7 +177,7 @@ export default class BalloonToolbar extends Plugin {
 		this._balloon.add( {
 			view: this.toolbarView,
 			position: this._getBalloonPositionData(),
-			balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container'
+			balloonClassName: 'ck-toolbar-container'
 		} );
 	}
 
@@ -201,10 +200,11 @@ export default class BalloonToolbar extends Plugin {
 	 */
 	_getBalloonPositionData() {
 		const editor = this.editor;
-		const editingView = editor.editing.view;
+		const view = editor.editing.view;
+		const viewDocument = view.document;
 
 		// Get direction of the selection.
-		const isBackward = editingView.selection.isBackward;
+		const isBackward = viewDocument.selection.isBackward;
 
 		return {
 			// Because the target for BalloonPanelView is a Rect (not DOMRange), it's geometry will stay fixed
@@ -212,8 +212,8 @@ export default class BalloonToolbar extends Plugin {
 			// computed and hence, the target is defined as a function instead of a static value.
 			// https://github.com/ckeditor/ckeditor5-ui/issues/195
 			target: () => {
-				const range = editingView.selection.getFirstRange();
-				const rangeRects = Rect.getDomRangeRects( editingView.domConverter.viewRangeToDom( range ) );
+				const range = viewDocument.selection.getFirstRange();
+				const rangeRects = Rect.getDomRangeRects( view.domConverter.viewRangeToDom( range ) );
 
 				// Select the proper range rect depending on the direction of the selection.
 				if ( isBackward ) {

+ 1 - 1
packages/ckeditor5-ui/src/view.js

@@ -184,7 +184,7 @@ export default class View {
 		 */
 
 		/**
-		 * Cached {@link @link module:ui/template~BindChain bind chain} object created by the
+		 * Cached {@link module:ui/template~BindChain bind chain} object created by the
 		 * {@link #template}. See {@link #bindTemplate}.
 		 *
 		 * @private

+ 1 - 1
packages/ckeditor5-ui/src/viewcollection.js

@@ -53,7 +53,7 @@ export default class ViewCollection extends Collection {
 	/**
 	 * Creates a new instance of the {@link module:ui/viewcollection~ViewCollection}.
 	 *
-	 * @param {module:utils/locale~Locale} [locale] The {@link module:core/editor~Editor editor's locale} instance.
+	 * @param {module:utils/locale~Locale} [locale] The {@link module:core/editor/editor~Editor editor's locale} instance.
 	 */
 	constructor( locale ) {
 		super( {

+ 8 - 0
packages/ckeditor5-ui/tests/dropdown/button/splitbuttonview.js

@@ -52,6 +52,14 @@ describe( 'SplitButtonView', () => {
 			expect( view.actionView.element.classList.contains( 'ck-hidden' ) ).to.be.false;
 		} );
 
+		it( 'binds arrowView#isOn to the template', () => {
+			view.arrowView.isOn = true;
+			expect( view.element.classList.contains( 'ck-splitbutton_open' ) ).to.be.true;
+
+			view.arrowView.isOn = false;
+			expect( view.element.classList.contains( 'ck-splitbutton_open' ) ).to.be.false;
+		} );
+
 		describe( 'activates keyboard navigation for the toolbar', () => {
 			it( 'so "arrowright" on view#arrowView does nothing', () => {
 				const keyEvtData = {

+ 5 - 4
packages/ckeditor5-ui/tests/panel/balloon/contextualballoon.js

@@ -74,18 +74,19 @@ describe( 'ContextualBalloon', () => {
 		} );
 
 		describe( 'positionLimiter', () => {
-			let model, viewDocument, root;
+			let model, view, viewDocument, root;
 
 			beforeEach( () => {
 				model = editor.model;
-				viewDocument = editor.editing.view;
+				view = editor.editing.view;
+				viewDocument = view.document;
 				root = viewDocument.getRoot();
 			} );
 
 			it( 'obtains the root of the selection', () => {
 				setModelData( model, '<paragraph>[]bar</paragraph>' );
 
-				expect( balloon.positionLimiter() ).to.equal( viewDocument.domConverter.mapViewToDom( root ) );
+				expect( balloon.positionLimiter() ).to.equal( view.domConverter.mapViewToDom( root ) );
 			} );
 
 			it( 'does not fail if selection has no #editableElement', () => {
@@ -114,7 +115,7 @@ describe( 'ContextualBalloon', () => {
 
 				setModelData( model, '<widget><nestedEditable>[]foo</nestedEditable></widget>' );
 
-				expect( balloon.positionLimiter() ).to.equal( viewDocument.domConverter.mapViewToDom( root ) );
+				expect( balloon.positionLimiter() ).to.equal( view.domConverter.mapViewToDom( root ) );
 			} );
 		} );
 

+ 9 - 10
packages/ckeditor5-ui/tests/toolbar/contextual/contextualtoolbar.js

@@ -47,7 +47,7 @@ describe( 'BalloonToolbar', () => {
 				sandbox.stub( balloon.view, 'pin' ).returns( {} );
 
 				// Focus the engine.
-				editingView.isFocused = true;
+				editingView.document.isFocused = true;
 				editingView.getDomRoot().focus();
 
 				// Remove all selection ranges from DOM before testing.
@@ -66,7 +66,6 @@ describe( 'BalloonToolbar', () => {
 		expect( balloonToolbar ).to.instanceOf( Plugin );
 		expect( balloonToolbar ).to.instanceOf( BalloonToolbar );
 		expect( balloonToolbar.toolbarView ).to.instanceof( ToolbarView );
-		expect( balloonToolbar.toolbarView.element.classList.contains( 'ck-editor-toolbar' ) ).to.be.true;
 		expect( balloonToolbar.toolbarView.element.classList.contains( 'ck-toolbar_floating' ) ).to.be.true;
 	} );
 
@@ -171,7 +170,7 @@ describe( 'BalloonToolbar', () => {
 			] );
 
 			balloonAddSpy = sandbox.spy( balloon, 'add' );
-			editingView.isFocused = true;
+			editingView.document.isFocused = true;
 		} );
 
 		it( 'should add #toolbarView to the #_balloon and attach the #_balloon to the selection for the forward selection', () => {
@@ -183,7 +182,7 @@ describe( 'BalloonToolbar', () => {
 
 			sinon.assert.calledWith( balloonAddSpy, {
 				view: balloonToolbar.toolbarView,
-				balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container',
+				balloonClassName: 'ck-toolbar-container',
 				position: {
 					target: sinon.match.func,
 					positions: [
@@ -226,7 +225,7 @@ describe( 'BalloonToolbar', () => {
 
 			sinon.assert.calledWithExactly( balloonAddSpy, {
 				view: balloonToolbar.toolbarView,
-				balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container',
+				balloonClassName: 'ck-toolbar-container',
 				position: {
 					target: sinon.match.func,
 					positions: [
@@ -243,7 +242,7 @@ describe( 'BalloonToolbar', () => {
 			expect( balloonAddSpy.firstCall.args[ 0 ].position.target() ).to.deep.equal( backwardSelectionRect );
 		} );
 
-		it( 'should update balloon position on ViewDocument#render event while balloon is added to the #_balloon', () => {
+		it( 'should update balloon position on view#change event while balloon is added to the #_balloon', () => {
 			setData( model, '<paragraph>b[a]r</paragraph>' );
 
 			const spy = sandbox.spy( balloon, 'updatePosition' );
@@ -297,7 +296,7 @@ describe( 'BalloonToolbar', () => {
 
 			it( 'should not be called when the editor is not focused', () => {
 				setData( model, '<paragraph>b[a]r</paragraph>' );
-				editingView.isFocused = false;
+				editingView.document.isFocused = false;
 
 				balloonToolbar.fire( '_selectionChangeDebounced' );
 				sinon.assert.notCalled( showSpy );
@@ -312,7 +311,7 @@ describe( 'BalloonToolbar', () => {
 
 			it( 'should be called when the selection is not collapsed and editor is focused', () => {
 				setData( model, '<paragraph>b[a]r</paragraph>' );
-				editingView.isFocused = true;
+				editingView.document.isFocused = true;
 
 				balloonToolbar.fire( '_selectionChangeDebounced' );
 				sinon.assert.calledOnce( showSpy );
@@ -325,7 +324,7 @@ describe( 'BalloonToolbar', () => {
 
 		beforeEach( () => {
 			removeBalloonSpy = sandbox.stub( balloon, 'remove' ).returns( {} );
-			editingView.isFocused = true;
+			editingView.document.isFocused = true;
 		} );
 
 		it( 'should remove #toolbarView from the #_balloon', () => {
@@ -337,7 +336,7 @@ describe( 'BalloonToolbar', () => {
 			sinon.assert.calledWithExactly( removeBalloonSpy, balloonToolbar.toolbarView );
 		} );
 
-		it( 'should stop update balloon position on ViewDocument#render event', () => {
+		it( 'should stop update balloon position on ViewDocument#change event', () => {
 			setData( model, '<paragraph>b[a]r</paragraph>' );
 
 			const spy = sandbox.spy( balloon, 'updatePosition' );

+ 7 - 0
packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+@import "../tooltip/mixins/_tooltip.css";
+
 .ck-splitbutton {
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	font-size: inherit;
@@ -11,3 +13,8 @@
 		z-index: calc(var(--ck-z-default) + 1);
 	}
 }
+
+/* Disable tooltips for the buttons when the button is "open" */
+.ck-splitbutton.ck-splitbutton_open > .ck-button {
+	@mixin ck-tooltip_disabled;
+}