UI font update, CSS update, labels.

ubidefeo · ubidefeo · commit 49d3ec82c4d1 · 2024-12-20T19:28:11.000+01:00
Signed-off-by: ubi de feo &lt;me@ubidefeo.com&gt;
diff --git a/ui/arduino/main.css b/ui/arduino/main.css
@@ -7,11 +7,18 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "OpenSans";
+  src: url("media/open-sans_5.0.29_latin-wght-normal.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
 * {
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  font-family: "RobotoMono", monospace;
+  font-family: "OpenSans", sans-serif;
 }
 
 body, html {
@@ -78,14 +85,19 @@ button.small .icon {
   align-content: space-between;
   align-items: center;
   gap: 10px;
+  width: 50px
+}
+.button.first{
+  width:80px;
 }
 .button .label {
   text-align: center;
   color: #eee;
-  opacity: 50%;
+  opacity: 0.5;
+  font-family: "OpenSans", sans-serif;
 }
 .button .label.active {
-  opacity: 100%;
+  opacity: 1;
 }
 .button .tooltip {
   opacity: 0;
@@ -147,6 +159,7 @@ button.small .icon {
   min-width: 1px;
   flex-basis: fit-content;
   background: #fff;
+  opacity: 0.7;
   position: relative;
   margin-left: 0.5em;
   margin-right: 0.5em;
@@ -236,8 +249,12 @@ button.small .icon {
   font-size: 16px;
   height: 100%;
   overflow: hidden;
+  
 }
 
+#code-editor * {
+  font-family: "RobotoMono", monospace;
+}
 #code-editor .cm-editor {
   width: 100%;
   height: 100%;
@@ -411,9 +428,10 @@ button.small .icon {
   /* width: 100%; */
 }
 
-.dialog .dialog-content input {
-  font-size: 1.4em;
+.dialog .dialog-content #file-name {
+  font-size: 1.1em;
   width:100%;
+  font-family: "RobotoMono", monospace;
 }
 
 .dialog .dialog-content input:focus {
@@ -439,18 +457,18 @@ button.small .icon {
   flex-direction: row;
   justify-content: center;
   width: 100%;
-  gap: 20px;
+  gap: 12px;
 }
 .dialog .buttons-horizontal .item {
-  flex-basis: 40%;
+  flex-basis: 50%;
   align-items: center;
   background-color: #eee;;
 }
 
 .dialog-title{
   width: 100%;
   font-size: 0.8em;
-  padding: 0.7em;
+  padding: 0;
   margin: 0;
   flex-basis: max-content;
 }
diff --git a/ui/arduino/media/open-sans_5.0.29_latin-wght-normal.woff2 b/ui/arduino/media/open-sans_5.0.29_latin-wght-normal.woff2
diff --git a/ui/arduino/store.js b/ui/arduino/store.js
@@ -1567,7 +1567,10 @@ async function store(state, emitter) {
       const confirmation = confirmDialog(`File ${newFile.fileName} already exists on ${source}. Please choose another name.`, 'OK')
       return false
     }
+    // LEAK > listeners keep getting added and not removed when tabs are closed
+    // additionally I found that closing a tab has actually added an extra listener
     newFile.editor.onChange = function() {
+      console.log('editor has changes')
       newFile.hasChanges = true
       emitter.emit('render')
     }
diff --git a/ui/arduino/views/components/elements/button.js b/ui/arduino/views/components/elements/button.js
@@ -7,7 +7,8 @@ function Button(args) {
     active = false,
     label,
     tooltip,
-    background
+    background,
+    first
   } = args
   let tooltipEl = html``
   if (tooltip) {
@@ -16,8 +17,9 @@ function Button(args) {
   let activeClass = active ? 'active' : ''
   let backgroundClass = background ? 'inverted' : ''
   let labelActiveClass = disabled ? '' : 'active'
+  let buttonFirstClass = first ? 'first' : ''
   return html`
-    <div class="button">
+    <div class="button ${buttonFirstClass}">
       <button class="${size} ${activeClass} ${backgroundClass}" onclick=${onClick} disabled=${disabled}>
         <img class="icon" src="media/${icon}" />
       </button>
diff --git a/ui/arduino/views/components/toolbar.js b/ui/arduino/views/components/toolbar.js
@@ -18,7 +18,8 @@ function Toolbar(state, emit) {
         label: state.isConnected ? 'Disconnect' : 'Connect',
         tooltip: state.isConnected ? `Disconnect (${metaKeyString}+Shift+D)` : `Connect (${metaKeyString}+Shift+C)`,
         onClick: () => state.isConnected ? emit('disconnect') : emit('open-connection-dialog'),
-        active: state.isConnected
+        active: state.isConnected,
+        first: true
       })}
 
       <div class="separator"></div>

Original file line number	Diff line number	Diff line change
`@@ -1567,7 +1567,10 @@ async function store(state, emitter) {`
`1567`	`1567`	const confirmation = confirmDialog(`File ${newFile.fileName} already exists on ${source}. Please choose another name.`, 'OK')
`1568`	`1568`	`return false`
`1569`	`1569`	`}`
	`1570`	`+ // LEAK > listeners keep getting added and not removed when tabs are closed`
	`1571`	`+ // additionally I found that closing a tab has actually added an extra listener`
`1570`	`1572`	`newFile.editor.onChange = function() {`
	`1573`	`+ console.log('editor has changes')`
`1571`	`1574`	`newFile.hasChanges = true`
`1572`	`1575`	`emitter.emit('render')`
`1573`	`1576`	`}`