Resizeable panel

Author: murilopolese

ui/arduino/components/panel.js

@@ -1,7 +1,10 @@
 function Panel(state, emit) {
-  let openClass = state.isTerminalOpen || state.isFilesOpen ? 'open' : ''
+  let open = state.isTerminalOpen || state.isFilesOpen
+  let openClass = open ? 'open' : ''
+  let panelHeight = open ? `height: ${state.panelHeight}` : ''
   return html`
-    <div id="panel" class=${openClass}>
+    <div id="panel" class=${openClass} style="${panelHeight}">
+      ${open ? html`<div id="handle" onmousedown=${() => emit('start-resizing-panel')}></div>` : null}
       ${state.isTerminalOpen ? PanelTerminal(state, emit) : null}
       ${state.isFilesOpen ? PanelFiles(state, emit) : null}
     </div>

ui/arduino/components/panel_terminal.js

@@ -26,11 +26,12 @@ class XTerm extends Component {
   }
 
   resizeTerm() {
+    let handleSize = 2 * 0.0225 * window.innerHeight
     const parentStyle = window.getComputedStyle(document.querySelector('#panel'))
     const parentWidth = parseInt(parentStyle.getPropertyValue('width'))
     const parentHeight = parseInt(parentStyle.getPropertyValue('height'))
     const cols = Math.floor(parentWidth / this.term._core._renderService.dimensions.actualCellWidth)
-    const rows = Math.floor(parentHeight / this.term._core._renderService.dimensions.actualCellHeight)
+    const rows = Math.floor((parentHeight-handleSize) / this.term._core._renderService.dimensions.actualCellHeight)
     this.term.resize(cols, rows)
   }
 }

ui/arduino/store.js

@@ -23,6 +23,7 @@ function store(state, emitter) {
   state.messageTimeout = 0
 
   state.isTerminalBound = false // XXX
+  state.panelHeight = null
 
   // SERIAL CONNECTION
   emitter.on('load-ports', async () => {
@@ -204,6 +205,7 @@ function store(state, emitter) {
   // PANEL MANAGEMENT
   emitter.on('show-terminal', () => {
     log('show-terminal')
+    if (state.panelHeight === null) state.panelHeight = '50%'
     state.isTerminalOpen = !state.isTerminalOpen
     state.isFilesOpen = false
     emitter.emit('render')
@@ -220,6 +222,19 @@ function store(state, emitter) {
     state.isFilesOpen = false
     emitter.emit('render')
   })
+  emitter.on('start-resizing-panel', () => {
+    console.log('start-resizing-panel')
+    function handleMouseMove(e) {
+      // console.log('mouse move', e)
+      let height = window.innerHeight - e.clientY
+      state.panelHeight = `${height}px`
+      emitter.emit('render')
+    }
+    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener('mouseup', (e) => {
+      window.removeEventListener('mousemove', handleMouseMove)
+    }, { once: true })
+  })
 
   // NAMING/RENAMING FILE
   emitter.on('save-filename', async (filename) => {

ui/arduino/theme.css

@@ -174,7 +174,17 @@ img {
   overflow: hidden;
 }
 #panel.open {
-  height: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 50%;
+  z-index: 99;
+}
+#panel #handle {
+  padding: 1rem;
+  background: var(--teal);
+  cursor: n-resize;
 }
 
 #terminal {
@@ -186,11 +196,12 @@ img {
 
 #files {
   width: 100%;
-  height: 100%;
-  background: var(--teal);
+  height: calc(100% - 2rem);
+  background: var(--white);
   display: flex;
   flex-direction: row;
   padding: 1rem;
+  overflow: hidden;
 }
 
 #files .file-list {
@@ -203,13 +214,18 @@ img {
 
 #files .file-list .path {
   height: 2.5rem;
-  color: var(--white);
+  color: var(--black);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+#files .toolbar-label {
+  color: var(--black);
+}
+
 #files .file-list ul {
+  border: solid 0.1rem var(--teal);
   width: 100%;
   height: 100%;
   padding: 0.5rem;