Merge pull request #127 from ckeditor/i/126

Other: Added bottom margin to the `<body>` element when the inspector is collapsed to avoid covering the footer. Closes #126.
ckeditor · Oct 15, 2021 · 0324c24 · 0324c24
2 parents 75adce3 + 8e33bb0
commit 0324c24
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/src/ckeditorinspector.css b/src/ckeditorinspector.css
@@ -7,6 +7,10 @@ html body.ck-inspector-body-expanded {
 	margin-bottom: var(--ck-inspector-height);
 }
 
+html body.ck-inspector-body-collapsed {
+	margin-bottom: var(--ck-inspector-collapsed-height);
+}
+
 .ck-inspector-wrapper * {
 	box-sizing: border-box;
 }
diff --git a/src/ui.js b/src/ui.js
@@ -40,6 +40,7 @@ class InspectorUI extends Component {
 		super( props );
 
 		updateBodyHeight( this.props.height );
+		document.body.style.setProperty( '--ck-inspector-collapsed-height', `${ INSPECTOR_COLLAPSED_HEIGHT }px` );
 
 		this.handleInspectorResize = this.handleInspectorResize.bind( this );
 	}

diff --git a/tests/inspector/ui.js b/tests/inspector/ui.js
@@ -118,6 +118,29 @@ describe( '<InspectorUI />', () => {
 			expect( document.body.classList.contains( 'ck-inspector-body-collapsed' ) ).to.be.true;
 		} );
 
+		it( 'should define the margin-bottom on the `body` element with the height of the inspector container (non-collapsed)', () => {
+			expect( document.body.classList.contains( 'ck-inspector-body-expanded' ) ).to.be.true;
+			expect( document.body.classList.contains( 'ck-inspector-body-collapsed' ) ).to.be.false;
+
+			expect( window.getComputedStyle( document.body ).marginBottom ).to.equal( '123px' );
+		} );
+
+		it( 'should define the margin-bottom on the `body` element with the height of the inspector container (collapsed)', () => {
+			store.dispatch( {
+				type: 'testAction',
+				state: {
+					ui: {
+						isCollapsed: true
+					}
+				}
+			} );
+
+			expect( document.body.classList.contains( 'ck-inspector-body-expanded' ) ).to.be.false;
+			expect( document.body.classList.contains( 'ck-inspector-body-collapsed' ) ).to.be.true;
+
+			expect( window.getComputedStyle( document.body ).marginBottom ).to.equal( '30px' );
+		} );
+
 		describe( 'resizable container', () => {
 			it( 'should be rendered', () => {
 				expect( wrapper.find( Rnd ).first() ).to.have.lengthOf( 1 );