Procházet zdrojové kódy

Improved BlockToolbar vertical aligning.

Oskar Wróbel před 7 roky
rodič
revize
a955e4e704

+ 6 - 3
packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js

@@ -299,11 +299,14 @@ export default class BlockToolbar extends Plugin {
 	 * @param {HTMLElement} targetElement Target element.
 	 */
 	_attachButtonToElement( targetElement ) {
-		const contentComputedStyles = window.getComputedStyle( targetElement );
+		const contentStyles = window.getComputedStyle( targetElement );
 
 		const editableRect = new Rect( this.editor.ui.view.editableElement );
-		const contentPaddingTop = parseInt( contentComputedStyles.paddingTop, 10 );
-		const contentLineHeight = parseInt( contentComputedStyles.lineHeight, 10 ) || parseInt( contentComputedStyles.fontSize, 10 );
+		const contentPaddingTop = parseInt( contentStyles.paddingTop, 10 );
+
+		// When line height is not an integer then thread it as "normal".
+		// MDN says that 'normal' == ~1.2 on desktop browsers.
+		const contentLineHeight = parseInt( contentStyles.lineHeight, 10 ) || parseInt( contentStyles.fontSize, 10 ) * 1.2;
 
 		const position = getOptimalPosition( {
 			element: this.buttonView.element,

+ 0 - 5
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.html

@@ -48,12 +48,7 @@
 
 <style>
 	#editor {
-		padding-left: 70px;
 		margin: 0 auto;
 		max-width: 800px;
 	}
-
-	.ck-block-toolbar-button {
-		transform: translateX( 20px );
-	}
 </style>

+ 2 - 2
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.js

@@ -20,9 +20,9 @@ class CustomBlockToolbar extends BlockToolbar {
 		super.init();
 
 		this.on( 'checkAllowed', ( evt, args ) => {
-			const viewElement = args[ 0 ];
+			const modelElement = args[ 0 ];
 
-			if ( viewElement.name === 'h2' ) {
+			if ( modelElement && modelElement.name === 'heading1' ) {
 				evt.return = false;
 			}
 		} );

+ 2 - 1
packages/ckeditor5-ui/tests/toolbar/block/blocktoolbar.js

@@ -292,6 +292,7 @@ describe( 'BlockToolbar', () => {
 			const styleMock = testUtils.sinon.stub( window, 'getComputedStyle' );
 
 			styleMock.withArgs( target ).returns( {
+				lineHeight: 'normal',
 				fontSize: '20px',
 				paddingTop: '10px'
 			} );
@@ -314,7 +315,7 @@ describe( 'BlockToolbar', () => {
 
 			editor.editing.view.fire( 'render' );
 
-			expect( blockToolbar.buttonView.top ).to.equal( 470 );
+			expect( blockToolbar.buttonView.top ).to.equal( 472 );
 			expect( blockToolbar.buttonView.left ).to.equal( 100 );
 		} );