8
0
Pārlūkot izejas kodu

Added a 50px gap between the bottom of the toolbar and the bottom of the editable before the toolbar gets positioned below the editable.

Aleksander Nowodzinski 8 gadi atpakaļ
vecāks
revīzija
07d415d692

+ 1 - 1
packages/ckeditor5-editor-inline/src/inlineeditoruiview.js

@@ -163,7 +163,7 @@ function getPanelPositionTop( editableRect, panelRect ) {
 
 	if ( editableRect.top > panelRect.height ) {
 		top = editableRect.top - panelRect.height;
-	} else if ( editableRect.bottom > panelRect.height ) {
+	} else if ( editableRect.bottom > panelRect.height + 50 ) {
 		top = 0;
 	} else {
 		top = editableRect.bottom;

+ 51 - 9
packages/ckeditor5-editor-inline/tests/inlineeditoruiview.js

@@ -126,7 +126,7 @@ describe( 'InlineEditorUIView', () => {
 			it( 'positions the panel above editable when there\'s enough space', () => {
 				const position = view.panelPositions[ positionIndex ];
 				const editableRect = {
-					top: 100, // !
+					top: 101, // !
 					bottom: 200,
 					left: 100,
 					right: 100,
@@ -135,7 +135,7 @@ describe( 'InlineEditorUIView', () => {
 				};
 				const panelRect = {
 					width: 50,
-					height: 99 // !
+					height: 100 // !
 				};
 
 				const { top, left } = position( editableRect, panelRect );
@@ -144,15 +144,57 @@ describe( 'InlineEditorUIView', () => {
 				expect( left ).to.equal( expectedLeft );
 			} );
 
-			it( 'positions the panel over the editable when there\'s not enough space above', () => {
+			it( 'positions the panel over the editable when there\'s not enough space above (1)', () => {
+				const position = view.panelPositions[ positionIndex ];
+				const editableRect = {
+					top: 100, // !
+					bottom: 300,
+					left: 100,
+					right: 100,
+					width: 100,
+					height: 200
+				};
+				const panelRect = {
+					width: 50,
+					height: 100 // !
+				};
+
+				const { top, left } = position( editableRect, panelRect );
+
+				expect( top ).to.equal( 0 );
+				expect( left ).to.equal( expectedLeft );
+			} );
+
+			it( 'positions the panel over the editable when there\'s not enough space above (2)', () => {
 				const position = view.panelPositions[ positionIndex ];
 				const editableRect = {
 					top: 99, // !
-					bottom: 199,
+					bottom: 399,
 					left: 100,
 					right: 100,
 					width: 100,
-					height: 100
+					height: 200
+				};
+				const panelRect = {
+					width: 50,
+					height: 100 // !
+				};
+
+				const { top, left } = position( editableRect, panelRect );
+
+				expect( top ).to.equal( 0 );
+				expect( left ).to.equal( expectedLeft );
+			} );
+
+			it( 'positions the panel over the editable when there\'s not enough space above (3)', () => {
+				const position = view.panelPositions[ positionIndex ];
+				const editableRect = {
+					top: 51, // !
+					bottom: 399,
+					left: 100,
+					right: 100,
+					width: 100,
+					height: 200
 				};
 				const panelRect = {
 					width: 50,
@@ -168,12 +210,12 @@ describe( 'InlineEditorUIView', () => {
 			it( 'positions the panel below the editable when there\'s not enough space above/over', () => {
 				const position = view.panelPositions[ positionIndex ];
 				const editableRect = {
-					top: 0,
-					bottom: 99, // !
+					top: 50,
+					bottom: 150, // !
 					left: 100,
 					right: 100,
 					width: 100,
-					height: 99
+					height: 100
 				};
 				const panelRect = {
 					width: 50,
@@ -182,7 +224,7 @@ describe( 'InlineEditorUIView', () => {
 
 				const { top, left } = position( editableRect, panelRect );
 
-				expect( top ).to.equal( 99 );
+				expect( top ).to.equal( 150 );
 				expect( left ).to.equal( expectedLeft );
 			} );
 		}