Merge pull request #17 from ckeditor/t/4

Feature: Implemented vertical inspector resizing. Closes #4.
ckeditor · Mar 11, 2019 · 97d56aa · 97d56aa
2 parents 6f7a3c4 + 84221fa
commit 97d56aa
Show file tree

Hide file tree

Showing 6 changed files with 1,226 additions and 540 deletions.
diff --git a/build/inspector.js b/build/inspector.js
diff --git a/package.json b/package.json
@@ -32,9 +32,9 @@
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.2.2",
     "@babel/preset-react": "^7.0.0",
+    "@ckeditor/ckeditor5-dev-env": "^13.0.2",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
-    "@ckeditor/ckeditor5-dev-env": "^13.0.2",
     "css-loader": "^2.1.0",
     "cssnano": "^4.1.10",
     "eslint": "^5.14.1",
@@ -43,6 +43,7 @@
     "postcss-nesting": "^7.0.0",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
+    "react-rnd": "^9.1.2",
     "style-loader": "^0.23.1",
     "webpack": "^4.29.3",
     "webpack-cli": "^3.2.3"

diff --git a/src/app.css b/src/app.css
@@ -3,26 +3,10 @@
  * For licensing, see LICENSE.md.
  */
 
-:root {
-	--ck-inspector-height: 500px;
-	--ck-inspector-color-border: #D0D0D0;
-}
-
 html body.ck-inspector-body-expanded {
 	margin-bottom: var(--ck-inspector-height);
 }
 
-.ck-inspector-wrapper {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-
-	background: var(--ck-inspector-color-background);
-	border-top: 1px solid var(--ck-inspector-color-border);
-	z-index: 9999;
-}
-
 .ck-inspector-wrapper * {
 	box-sizing: border-box;
 }
diff --git a/src/components/ui.css b/src/components/ui.css
@@ -10,6 +10,7 @@
 	--ck-inspector-color-link: #005CC6;
 	--ck-inspector-code-font-size: 11px;
 	--ck-inspector-code-font-family: monaco,Consolas,Lucida Console,monospace;
+	--ck-inspector-color-border: #D0D0D0;
 }
 
 /* Reset first */
@@ -36,18 +37,17 @@
 }
 
 .ck-inspector {
-	height: var(--ck-inspector-height);
 	overflow: hidden;
 	border-collapse: collapse;
 	color: var(--ck-inspector-color-black);
 	text-align: left;
 	white-space: normal;
 	cursor: auto;
 	float: none;
-}
 
-.ck-inspector.ck-inspector_collapsed {
-	height: 30px;
+	background: var(--ck-inspector-color-background);
+	border-top: 1px solid var(--ck-inspector-color-border);
+	z-index: 9999;
 }
 
 .ck-inspector.ck-inspector_collapsed > .ck-inspector-panes > .ck-inspector-panes__navigation .ck-inspector-tabs {

diff --git a/src/components/ui.js b/src/components/ui.js
@@ -6,6 +6,7 @@
 /* global document */
 
 import React, { Component } from 'react';
+import { Rnd } from 'react-rnd';
 
 import StorageManager from '../storage';
 import ModelPane from './model/pane';
@@ -17,21 +18,39 @@ import './ui.css';
 
 const LOCAL_STORAGE_ACTIVE_PANE = 'ck5-inspector-active-pane-name';
 const LOCAL_STORAGE_IS_COLLAPSED = 'ck5-inspector-is-collapsed';
+const LOCAL_STORAGE_INSPECTOR_HEIGHT = 'ck5-inspector-height';
+const INSPECTOR_MIN_HEIGHT = '100';
+const INSPECTOR_DEFAULT_HEIGHT = '400px';
+const INSPECTOR_COLLAPSED_HEIGHT = 30;
+
+const INSPECTOR_STYLES = {
+	position: 'fixed',
+	bottom: '0',
+	left: '0',
+	right: '0',
+	top: 'auto'
+};
 
 export default class InspectorUI extends Component {
 	constructor( props ) {
 		super( props );
 
+		const height = StorageManager.get( LOCAL_STORAGE_INSPECTOR_HEIGHT ) || INSPECTOR_DEFAULT_HEIGHT;
+
 		this.state = {
 			isCollapsed: StorageManager.get( LOCAL_STORAGE_IS_COLLAPSED ) === 'true',
+			height,
 			editors: null,
 			currentEditorName: null
 		};
 
+		updateBodyHeight( height );
+
 		this.panesRef = React.createRef();
 		this.handlePaneChange = this.handlePaneChange.bind( this );
 		this.handleEditorChange = this.handleEditorChange.bind( this );
 		this.handleToggleCollapseClick = this.handleToggleCollapseClick.bind( this );
+		this.handleInspectorResize = this.handleInspectorResize.bind( this );
 	}
 
 	componentDidMount() {
@@ -60,6 +79,17 @@ export default class InspectorUI extends Component {
 		} );
 	}
 
+	handleInspectorResize( evt, direction, ref ) {
+		this.setState( {
+			height: ref.style.height,
+		}, () => {
+			const height = ref.style.height;
+
+			StorageManager.set( LOCAL_STORAGE_INSPECTOR_HEIGHT, height );
+			updateBodyHeight( height );
+		} );
+	}
+
 	render() {
 		if ( this.state.isCollapsed ) {
 			document.body.classList.remove( 'ck-inspector-body-expanded' );
@@ -91,21 +121,39 @@ export default class InspectorUI extends Component {
 			onChange={( evt ) => this.handleEditorChange( evt.target.value )}
 		/>;
 
-		return <div className={`ck-inspector ${this.state.isCollapsed ? 'ck-inspector_collapsed' : ''}`}>
-			<Panes
-				ref={this.panesRef}
-				onPaneChange={this.handlePaneChange}
-				panesDefinitions={panesDefinitions}
-				initialActivePaneName="model"
-				contentBefore={<DocsButton />}
-				contentAfter={[
-					<div className="ck-inspector-editor-selector" key="editor-selector">
-						{currentEditorInstance ? editorInstanceSelector	: '' }
-					</div>,
-					<ToggleButton key="inspector-toggle" onClick={this.handleToggleCollapseClick} isUp={this.state.isCollapsed} />
-				]}
-			/>
-		</div>;
+		return <Rnd
+			bounds='window'
+			enableResizing={{ top: !this.state.isCollapsed }}
+			disableDragging={true}
+			minHeight={INSPECTOR_MIN_HEIGHT}
+			style={INSPECTOR_STYLES}
+			className={[
+				'ck-inspector',
+				this.state.isCollapsed ? 'ck-inspector_collapsed' : '',
+			].join( ' ' )}
+			position={{ x: 0, y: '100%' }}
+			size={{
+				width: '100%',
+				height: this.state.isCollapsed ? INSPECTOR_COLLAPSED_HEIGHT : this.state.height
+			}}
+			onResizeStop={this.handleInspectorResize}>
+				<Panes
+					ref={this.panesRef}
+					onPaneChange={this.handlePaneChange}
+					panesDefinitions={panesDefinitions}
+					initialActivePaneName="model"
+					contentBefore={<DocsButton />}
+					contentAfter={[
+						<div className="ck-inspector-editor-selector" key="editor-selector">
+							{currentEditorInstance ? editorInstanceSelector	: '' }
+						</div>,
+						<ToggleButton
+							key="inspector-toggle"
+							onClick={this.handleToggleCollapseClick}
+							isUp={this.state.isCollapsed} />
+					]}
+				/>
+			</Rnd>;
 	}
 
 	static getDerivedStateFromProps( props, state ) {
@@ -141,3 +189,8 @@ class ToggleButton extends Component {
 		</button>;
 	}
 }
+
+
+function updateBodyHeight( height ) {
+	document.body.style.setProperty( '--ck-inspector-height', height );
+}