Merge pull request #41 from arduino/bugfix/ui-updates

Update UI elements and renamed button component file

Author: murilopolese

ui/arduino/components/toolbar_button.js renamed to ui/arduino/components/button.js

@@ -8,10 +8,12 @@ function Button(param) {
     selected = false
   } = param || {}
   return html`
-    <div class="toolbar-button-wrapper ${disabled ? 'disabled' : ''} ${selected ? 'selected' : ''}">
+    <div
+      class="toolbar-button-wrapper ${disabled ? 'disabled' : ''} ${selected ? 'selected' : ''}"
+      onclick=${onclick}
+      >
       <button
         class="toolbar-button"
-        onclick=${onclick}
         disabled=${disabled}
         >
         ${Icon(icon)}

ui/arduino/components/panel_terminal.js

@@ -26,12 +26,12 @@ class XTerm extends Component {
   }
 
   resizeTerm() {
-    let handleSize = 2 * 0.0225 * window.innerHeight
+    let handleSize = 36
     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-handleSize) / this.term._core._renderService.dimensions.actualCellHeight)
+    const rows = Math.floor((parentHeight-handleSize) / this.term._core._renderService.dimensions.actualCellHeight) - 1
     this.term.resize(cols, rows)
   }
 }

ui/arduino/index.html

@@ -17,7 +17,7 @@
 
     <!-- Components -->
     <script type="text/javascript" src="components/icon.js" charset="utf-8"></script>
-    <script type="text/javascript" src="components/toolbar_button.js" charset="utf-8"></script>
+    <script type="text/javascript" src="components/button.js" charset="utf-8"></script>
     <script type="text/javascript" src="components/toolbar.js" charset="utf-8"></script>
     <script type="text/javascript" src="components/filename.js" charset="utf-8"></script>
     <script type="text/javascript" src="components/editor.js" charset="utf-8"></script>

ui/arduino/store.js

@@ -69,6 +69,7 @@ function store(state, emitter) {
     state.isTerminalOpen = false
     state.serialFiles = []
     emitter.emit('render')
+    resizeEditor(state)
   })
   emitter.on('connect', async (path) => {
     log('connect')

ui/arduino/theme.css

@@ -59,6 +59,7 @@ img {
   justify-content: center;
   align-items: center;
   margin: 0 0.2rem;
+  cursor: pointer;
 }
 
 .toolbar-button-wrapper.selected .toolbar-button {
@@ -184,7 +185,7 @@ img {
 }
 #panel #handle {
   position: relative;
-  height: 2rem;
+  height: 2.5rem;
   background: var(--teal);
   cursor: n-resize;
   display: flex;
@@ -205,7 +206,8 @@ img {
   user-select: none;
   width: 1.5rem;
   height: 1.5rem;
-  line-height: 1rem;
+  border-radius: 100%;
+  line-height: 1.75rem;
   background: var(--white-faded);
   margin: 0 0.25rem;
 }
@@ -215,6 +217,7 @@ img {
   width: 100vw;
   height: 100%;
   background: black;
+  padding: 0 0.5rem;
 }
 
 #files {
@@ -223,24 +226,26 @@ img {
   background: var(--white);
   display: flex;
   flex-direction: row;
-  padding: 1rem;
+  padding: 0.5rem 1rem 1rem 1rem;
   overflow: hidden;
 }
 
 #files .file-list {
   width: 100%;
   display: flex;
   flex-direction: column;
-  padding: 1rem;
+  padding: 0 1rem 1rem 1rem;
   width: 45%;
 }
 
 #files .file-list .path {
-  height: 2.5rem;
+  /* height: 2.5rem; */
   color: var(--black);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-size: 0.5rem;
+  padding: 0.25rem 0;
 }
 
 #files .toolbar-label {
@@ -279,8 +284,9 @@ img {
 }
 
 #files .file-controls .toolbar-button {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
 }
 
 #message {