Merge pull request #105 from arduino/feature/resize-panel

Feature/resize panel

Author: murilopolese

ui/arduino/main.css

@@ -1,10 +1,18 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
+@font-face {
+  font-family: "RobotoMono", monospace;
+  src:
+    url("media/roboto-mono-latin-ext-400-normal.woff"),
+    url("media/roboto-mono-latin-ext-400-normal.woff2");
+  font-weight: normal;
+  font-style: normal;
+}
 
 * {
   /* box-sizing: border-box; */
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
+  font-family: "RobotoMono", monospace;
 }
 
 body, html {
@@ -31,6 +39,7 @@ button {
   border-radius: 45px;
   background: rgba(255, 255, 255, 0.8);
   cursor: pointer;
+  transition: all 0.1s;
 }
 button.small {
   width: 28px;
@@ -99,7 +108,7 @@ button.small .icon {
   height: 100%;
   justify-content: center;
   align-items: center;
-  font-family: Roboto Mono;
+  font-family: "RobotoMono", monospace;
   overflow: hidden;
 }
 
@@ -141,6 +150,7 @@ button.small .icon {
   cursor: pointer;
   background: #DAE3E3;
   overflow: hidden;
+  transition: all 0.1s;
 }
 
 .tab:hover {
@@ -259,12 +269,18 @@ button.small .icon {
   transition: height 0.15s;
 }
 
-#panel.closed {
-  height: 45px;
+#panel {
+  min-height: 45px;
+}
+
+#panel #drag-handle {
+  width: 100%;
+  height: 100%;
+  cursor: grab;
 }
 
-#panel.open {
-  height: 320px;
+#panel #drag-handle:active {
+  cursor: grabbing;
 }
 
 .panel-bar {
@@ -290,6 +306,7 @@ button.small .icon {
 .panel-bar .term-operations.hidden {
   opacity: 0;
   transition-delay: 0.15s;
+  pointer-events: none;
 }
 .panel-bar .term-operations.visible {
   opacity: 1;
@@ -445,7 +462,7 @@ button.small .icon {
   position: relative;
   cursor: pointer;
   color: #000;
-  font-family: Roboto Mono;
+  font-family: "RobotoMono", monospace;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -472,7 +489,7 @@ button.small .icon {
   width: 30px;
   height: 100%;
   background: linear-gradient(0.25turn, white 25%, rgba(0, 0, 0, 0));
-  z-index: 99;
+  z-index: 98;
 }
 
 .file-list {
@@ -504,6 +521,7 @@ button.small .icon {
   align-items: center;
   gap: 10px;
   align-self: stretch;
+  transition: all 0.1s;
 }
 
 .file-list .item.selected,
@@ -512,14 +530,16 @@ button.small .icon {
 }
 
 .file-list .item .options {
-  display: none;
+  display: flex;
+  opacity: 0;
   align-items: center;
   align-self: stretch;
   cursor: pointer;
+  transition: all 0.1s;
 }
 
 .file-list .item:hover .options {
-  display: flex;
+  opacity: 1;
 }
 
 .file-list .item .icon {
@@ -528,7 +548,7 @@ button.small .icon {
 }
 .file-list .item .text {
   color: #000;
-  font-family: Roboto Mono;
+  font-family: "RobotoMono", monospace;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;

ui/arduino/main.js

@@ -1,4 +1,6 @@
-const PANEL_HEIGHT = 320
+const PANEL_CLOSED = 45
+const PANEL_TOO_SMALL = 65
+const PANEL_DEFAULT = 320
 
 function App(state, emit) {
   if (state.diskNavigationRoot == null) {

ui/arduino/media/roboto-mono-latin-ext-400-normal.woff

@@ -33,8 +33,6 @@ async function store(state, emitter) {
   state.isConnected = false
   state.connectedPort = null
 
-
-  state.isPanelOpen = false
   state.isSaving = false
   state.savingProgress = 0
   state.isTransferring = false
@@ -53,6 +51,18 @@ async function store(state, emitter) {
   state.openFiles.push(newFile)
   state.editingFile = newFile.id
 
+  state.savedPanelHeight = PANEL_DEFAULT
+  state.panelHeight = PANEL_CLOSED
+  state.resizePanel = function(e) {
+    state.panelHeight = (PANEL_CLOSED/2) + document.body.clientHeight - e.clientY
+    if (state.panelHeight <= PANEL_CLOSED) {
+      state.savedPanelHeight = PANEL_DEFAULT
+    } else {
+      state.savedPanelHeight = state.panelHeight
+    }
+    emitter.emit('render')
+  }
+
   // START AND BASIC ROUTING
   emitter.on('select-disk-navigation-root', async () => {
     const folder = await selectDiskFolder()
@@ -110,8 +120,8 @@ async function store(state, emitter) {
     // Connected and ready
     state.isConnecting = false
     state.isConnected = true
-    if (state.view === 'editor') {
-      state.isPanelOpen = true
+    if (state.view === 'editor' && state.panelHeight <= PANEL_CLOSED) {
+      state.panelHeight = state.savedPanelHeight
     }
     state.connectedPort = path
 
@@ -138,7 +148,7 @@ async function store(state, emitter) {
   emitter.on('disconnect', async () => {
     await serial.disconnect()
     state.isConnected = false
-    state.isPanelOpen = false
+    state.panelHeight = PANEL_CLOSED
     state.boardFiles = []
     state.boardNavigationPath = '/'
     emitter.emit('refresh-files')
@@ -155,9 +165,9 @@ async function store(state, emitter) {
   // CODE EXECUTION
   emitter.on('run', async () => {
     log('run')
-    state.isPanelOpen = true
     const openFile = state.openFiles.find(f => f.id == state.editingFile)
     const code = openFile.editor.editor.state.doc.toString()
+    emitter.emit('open-panel')
     emitter.emit('render')
     try {
       await serial.get_prompt()
@@ -168,13 +178,19 @@ async function store(state, emitter) {
   })
   emitter.on('stop', async () => {
     log('stop')
-    state.isPanelOpen = true
+    if (state.panelHeight <= PANEL_CLOSED) {
+      state.panelHeight = state.savedPanelHeight
+    }
+    emitter.emit('open-panel')
     emitter.emit('render')
     await serial.get_prompt()
   })
   emitter.on('reset', async () => {
     log('reset')
-    state.isPanelOpen = true
+    if (state.panelHeight <= PANEL_CLOSED) {
+      state.panelHeight = state.savedPanelHeight
+    }
+    emitter.emit('open-panel')
     emitter.emit('render')
     await serial.reset()
     emitter.emit('update-files')
@@ -183,16 +199,37 @@ async function store(state, emitter) {
 
   // PANEL
   emitter.on('open-panel', () => {
-    state.isPanelOpen = true
+    emitter.emit('stop-resizing-panel')
+    state.panelHeight = state.savedPanelHeight
     emitter.emit('render')
+    setTimeout(() => {
+      state.cache(XTerm, 'terminal').resizeTerm()
+    }, 200)
   })
   emitter.on('close-panel', () => {
-    state.isPanelOpen = false
+    emitter.emit('stop-resizing-panel')
+    state.savedPanelHeight = state.panelHeight
+    state.panelHeight = 0
     emitter.emit('render')
   })
   emitter.on('clear-terminal', () => {
     state.cache(XTerm, 'terminal').term.clear()
   })
+  emitter.on('start-resizing-panel', () => {
+    log('start-resizing-panel')
+    window.addEventListener('mousemove', state.resizePanel)
+    // Stop resizing when mouse leaves window or enters the tabs area
+    document.body.addEventListener('mouseleave', () => {
+      emitter.emit('stop-resizing-panel')
+    }, { once: true })
+    document.querySelector('#tabs').addEventListener('mouseenter', () => {
+      emitter.emit('stop-resizing-panel')
+    }, { once: true })
+  })
+  emitter.on('stop-resizing-panel', () => {
+    log('stop-resizing-panel')
+    window.removeEventListener('mousemove', state.resizePanel)
+  })
 
   // SAVING
   emitter.on('save', async () => {

ui/arduino/media/roboto-mono-latin-ext-400-normal.woff2

@@ -21,12 +21,13 @@ class XTerm extends Component {
   }
 
   resizeTerm() {
+    // XXX: This should not be querying the DOM like that :o
     if (document.querySelector('#panel')) {
-      let handleSize = 45
       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) - 6
-      const rows = Math.floor((PANEL_HEIGHT-handleSize) / this.term._core._renderService.dimensions.actualCellHeight) - 2
+      const rows = Math.floor((parentHeight-PANEL_CLOSED) / this.term._core._renderService.dimensions.actualCellHeight) - 2
       this.term.resize(cols, rows)
     }
   }

ui/arduino/store.js

@@ -1,25 +1,27 @@
 function ReplPanel(state, emit) {
-  let height = state.isPanelOpen ? PANEL_HEIGHT : 45
-
   const onToggle = () => {
-    if (state.isPanelOpen) {
+    if (state.panelHeight > PANEL_CLOSED) {
       emit('close-panel')
     } else {
       emit('open-panel')
     }
   }
   const panelOpenClass = state.isPanelOpen ? 'open' : 'closed'
-  const termOperationsVisibility = state.isPanelOpen ? 'visible' : 'hidden'
+  const termOperationsVisibility = state.panelHeight > PANEL_TOO_SMALL ? 'visible' : 'hidden'
   const terminalDisabledClass = state.isConnected ? 'terminal-enabled' : 'terminal-disabled'
 
   return html`
-    <div id="panel" class="${panelOpenClass}">
+    <div id="panel" style="height: ${state.panelHeight}px">
       <div class="panel-bar">
+        <div id="drag-handle"
+          onmousedown=${() => emit('start-resizing-panel')}
+          onmouseup=${() => emit('stop-resizing-panel')}
+          ></div>
         <div class="term-operations ${termOperationsVisibility}">
           ${ReplOperations(state, emit)}
         </div>
         ${Button({
-          icon: `arrow-${state.isPanelOpen ? 'down' : 'up'}.svg`,
+          icon: `arrow-${state.panelHeight > PANEL_CLOSED ? 'down' : 'up'}.svg`,
           size: 'small',
           onClick: onToggle
         })}