Merge pull request #155 from arduino/feature/icons-update

ubidefeo · web-flow · commit 78cd3dabc177 · 2024-12-10T11:22:11.000+01:00
Feature/icons update
diff --git a/ui/arduino/media/board.svg b/ui/arduino/media/board.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;">
+    <g transform="matrix(1,0,0,1,0,0.0003)">
+        <g transform="matrix(1.04918,0,0,0.989691,-4.19672,-77.1962)">
+            <rect x="4" y="78" width="61" height="64.667" style="fill:none;"/>
+        </g>
+        <g transform="matrix(1.19998,0,0,1.19998,-5.59986,-6.7324)">
+            <g transform="matrix(-2,0,0,2,68,2.27374e-13)">
+                <rect x="7" y="6" width="20" height="20" style="fill:none;stroke:black;stroke-width:1.67px;"/>
+            </g>
+            <g transform="matrix(-2,0,0,2,80,2.27374e-13)">
+                <rect x="17" y="13" width="6" height="6" style="fill:none;stroke:black;stroke-width:1.67px;"/>
+            </g>
+            <g transform="matrix(-2,0,0,2,26,2.27374e-13)">
+                <rect x="4" y="13" width="5" height="6" style="fill:white;stroke:black;stroke-width:1.67px;"/>
+            </g>
+            <g transform="matrix(2,0,0,2,30.0006,47.9994)">
+                <path d="M0,2L0,0L0,2Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0,2,2,0,32,50)">
+                <path d="M-1,-1L1,-1" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.67px;"/>
+            </g>
+            <g transform="matrix(2,0,0,2,21.9996,47.9994)">
+                <path d="M0,2L0,0L0,2Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0,2,2,0,24,50)">
+                <path d="M-1,-1L1,-1" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.67px;"/>
+            </g>
+            <g transform="matrix(2,0,0,2,37.9998,47.9994)">
+                <path d="M0,2L0,0L0,2Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0,2,2,0,40,50)">
+                <path d="M-1,-1L1,-1" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.67px;"/>
+            </g>
+            <g transform="matrix(2,0,0,2,46.0008,47.9994)">
+                <path d="M0,2L0,0L0,2Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0,2,2,0,48,50)">
+                <path d="M-1,-1L1,-1" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.67px;"/>
+            </g>
+            <g transform="matrix(2,0,0,2,30.0006,11.9994)">
+                <path d="M0,2L0,0L0,2Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0,2,2,0,32,14)">
+                <path d="M-1,-1L1,-1" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.67px;"/>
+            </g>
+            <g transform="matrix(2,0,0,2,21.9996,11.9994)">
+                <path d="M0,2L0,0L0,2Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0,2,2,0,24,14)">
+                <path d="M-1,-1L1,-1" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.67px;"/>
+            </g>
+            <g transform="matrix(2,0,0,2,37.9998,11.9994)">
+                <path d="M0,2L0,0L0,2Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0,2,2,0,40,14)">
+                <path d="M-1,-1L1,-1" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.67px;"/>
+            </g>
+            <g transform="matrix(2,0,0,2,46.0008,11.9994)">
+                <path d="M0,2L0,0L0,2Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(0,2,2,0,48,14)">
+                <path d="M-1,-1L1,-1" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:1.67px;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/ui/arduino/media/computer.svg b/ui/arduino/media/computer.svg
@@ -1,3 +1,26 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M45.3125 4.68982H4.6875C4.27348 4.69107 3.87677 4.85608 3.58402 5.14883C3.29125 5.4416 3.12623 5.8383 3.125 6.25233V34.3774C3.12623 34.7913 3.29125 35.188 3.58402 35.4808C3.87677 35.7736 4.27348 35.9386 4.6875 35.9399H17.1875V42.1899H15.625C15.2106 42.1899 14.8132 42.3544 14.5201 42.6475C14.2271 42.9405 14.0625 43.3378 14.0625 43.7524C14.0625 44.1668 14.2271 44.5641 14.5201 44.8572C14.8132 45.1502 15.2106 45.3149 15.625 45.3149H34.375C34.7894 45.3149 35.1869 45.1502 35.4798 44.8572C35.7728 44.5641 35.9375 44.1668 35.9375 43.7524C35.9375 43.3378 35.7728 42.9405 35.4798 42.6475C35.1869 42.3544 34.7894 42.1899 34.375 42.1899H32.8125V35.9399H45.3125C45.7266 35.9386 46.1233 35.7736 46.4159 35.4808C46.7087 35.188 46.8738 34.7913 46.875 34.3774V6.25233C46.8738 5.8383 46.7087 5.4416 46.4159 5.14883C46.1233 4.85608 45.7266 4.69107 45.3125 4.68982ZM29.6875 42.1899H20.3125V35.9399H29.6875V42.1899ZM43.75 32.8149H6.25V7.81483H43.75V32.8149ZM22.9844 18.2991L15.1719 26.1116C14.8757 26.4021 14.4774 26.5647 14.0625 26.5647C13.6477 26.5647 13.2493 26.4021 12.9531 26.1116C12.6604 25.8166 12.4961 25.4179 12.4961 25.0022C12.4961 24.5866 12.6604 24.1879 12.9531 23.8929L20.7656 16.0804C20.9111 15.9336 21.0841 15.8172 21.2747 15.7375C21.4653 15.6578 21.6698 15.6167 21.8764 15.6163C22.083 15.6158 22.2875 15.6563 22.4784 15.735C22.6694 15.8139 22.8428 15.9297 22.9889 16.0758C23.135 16.2219 23.2508 16.3954 23.3297 16.5863C23.4084 16.7772 23.4489 16.9818 23.4484 17.1883C23.448 17.3949 23.4069 17.5994 23.3272 17.79C23.2475 17.9807 23.1311 18.1536 22.9844 18.2991ZM10.0696 18.4864C10.3265 18.6582 10.6285 18.7499 10.9375 18.7499C11.1427 18.7502 11.346 18.7099 11.5355 18.6313C11.7251 18.5527 11.8973 18.4374 12.0422 18.2921L15.1672 15.1671C15.4518 14.8724 15.6093 14.4777 15.6057 14.068C15.6022 13.6584 15.4379 13.2665 15.1482 12.9768C14.8585 12.6871 14.4666 12.5227 14.0569 12.5192C13.6472 12.5156 13.2525 12.6731 12.9578 12.9577L9.83281 16.0827C9.61436 16.3013 9.46559 16.5796 9.40534 16.8827C9.34508 17.1857 9.37602 17.4999 9.49425 17.7854C9.61248 18.0708 9.8127 18.3147 10.0696 18.4864Z" fill="black"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;">
+    <g transform="matrix(1,0,0,1,1.06581e-14,-78.6667)">
+        <g transform="matrix(1.04918,0,0,0.989691,-4.19672,1.47079)">
+            <rect x="4" y="78" width="61" height="64.667" style="fill:none;"/>
+        </g>
+        <g>
+            <g transform="matrix(-2,0,0,2,64,66.6667)">
+                <rect x="3" y="10" width="26" height="18" style="fill:none;stroke:black;stroke-width:2px;"/>
+            </g>
+            <g transform="matrix(-2,0,0,2,64,114.667)">
+                <rect x="12" y="4" width="8" height="6" style="fill:none;stroke:black;stroke-width:2px;"/>
+            </g>
+            <g transform="matrix(2,0,0,2,20,134.667)">
+                <path d="M0,0L12,0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
+            </g>
+            <g transform="matrix(1.41421,-1.41421,-1.41421,-1.41421,16,101.495)">
+                <path d="M-0.414,1L2.414,1" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
+            </g>
+            <g transform="matrix(1.41421,-1.41421,-1.41421,-1.41421,23,112.738)">
+                <path d="M-1.036,2.5L6.036,2.5" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
+            </g>
+        </g>
+    </g>
 </svg>
diff --git a/ui/arduino/media/editor.svg b/ui/arduino/media/editor.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;">
+    <g transform="matrix(1,0,0,1,-74.3338,0.0003)">
+        <g transform="matrix(1.04918,0,0,0.989691,70.137,-77.1962)">
+            <rect x="4" y="78" width="61" height="64.667" style="fill:none;"/>
+        </g>
+        <g transform="matrix(-2,0,0,2,102.334,25.9998)">
+            <path d="M-13,0L0,0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
+        </g>
+        <g transform="matrix(-2,0,0,2,84.3344,14.0008)">
+            <path d="M-22,0L0,0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
+        </g>
+        <g transform="matrix(-2,0,0,2,102.334,37.9996)">
+            <path d="M-13,0L0,0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
+        </g>
+        <g transform="matrix(-2,0,0,2,84.3344,50.0008)">
+            <path d="M-22,0L0,0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
+        </g>
+        <g transform="matrix(2,0,0,2,84.3338,40)">
+            <path d="M0,-8L4,-4L0,0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
+        </g>
+    </g>
+</svg>
diff --git a/ui/arduino/media/files.svg b/ui/arduino/media/files.svg
@@ -1,4 +1,3 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.7129 37.0465C10.2985 37.0465 9.90107 36.882 9.60804 36.5888C9.31502 36.2958 9.15039 35.8985 9.15039 35.484V7.35901C9.15039 6.94461 9.31502 6.54718 9.60804 6.25416C9.90107 5.96113 10.2985 5.79651 10.7129 5.79651H21.6504C22.0648 5.79651 22.4622 5.96113 22.7552 6.25416C23.0483 6.54718 23.2129 6.94461 23.2129 7.35901C23.2129 7.77341 23.0483 8.17083 22.7552 8.46386C22.4622 8.75688 22.0648 8.92151 21.6504 8.92151H12.2754V35.484C12.2754 35.8985 12.1108 36.2958 11.8177 36.5888C11.5247 36.882 11.1273 37.0465 10.7129 37.0465Z" fill="black"/>
-<path d="M39.9471 24.9996L27.4473 12.4996C27.1494 12.2117 26.7521 12.0495 26.3379 12.0465H16.9629C16.5489 12.0477 16.1521 12.2127 15.8594 12.5055C15.5666 12.7982 15.4016 13.195 15.4004 13.609V41.734C15.4016 42.148 15.5666 42.5448 15.8594 42.8375C16.1521 43.1303 16.5489 43.2953 16.9629 43.2965H38.8379C39.2519 43.2953 39.6486 43.1303 39.9414 42.8375C40.2341 42.5448 40.3991 42.148 40.4004 41.734V26.109C40.3974 25.6948 40.2351 25.2976 39.9471 24.9996ZM27.9004 17.3746L35.0254 24.4996L27.9004 24.5465V17.3746ZM37.2754 40.1715H18.5254V15.1715H24.7754V26.109C24.7784 26.5233 24.9407 26.9205 25.2285 27.2184C25.5241 27.5098 25.9228 27.6728 26.3379 27.6715L37.2754 27.6246V40.1715Z" fill="black"/>
+<svg width="50" height="50" viewBox="-1 0 25 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.95 7.6C23.8685 7.49128 23.7629 7.40305 23.6414 7.34229C23.5198 7.28154 23.3859 7.24994 23.25 7.25H21.5V4.625C21.4993 4.39314 21.4069 4.17097 21.243 4.00702C21.079 3.84307 20.8569 3.75067 20.625 3.75H11.3587L8.12125 0.50375C7.95444 0.342525 7.73199 0.251665 7.5 0.25H1.375C1.14314 0.250669 0.92097 0.343072 0.757021 0.507021C0.593072 0.67097 0.500669 0.893141 0.5 1.125V16.875C0.500669 17.1069 0.593072 17.329 0.757021 17.493C0.92097 17.6569 1.14314 17.7493 1.375 17.75H20.625C20.8129 17.7494 20.9958 17.6888 21.1468 17.5771C21.2979 17.4653 21.4094 17.3083 21.465 17.1287L24.09 8.37875C24.1287 8.24698 24.1361 8.10802 24.1118 7.97286C24.0875 7.83771 24.0321 7.71005 23.95 7.6ZM2.25 2H7.14125L10.3787 5.24625C10.5456 5.40747 10.768 5.49834 11 5.5H19.75V7.25H4C3.81207 7.25059 3.62925 7.31117 3.47815 7.42292C3.32706 7.53466 3.2156 7.69174 3.16 7.87125L2.25 10.9075V2ZM19.9775 16H2.5475L4.6475 9H22.0775L19.9775 16Z" fill="black"/>
 </svg>
diff --git a/ui/arduino/media/folder.svg b/ui/arduino/media/folder.svg
@@ -1,3 +1,15 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M42.1875 15.625H25.6406L19.8594 9.82815C19.7134 9.68334 19.5402 9.56876 19.3498 9.49101C19.1595 9.41325 18.9556 9.37384 18.75 9.37503H7.8125C7.39809 9.37503 7.00067 9.53964 6.70764 9.83267C6.41463 10.1257 6.25 10.5231 6.25 10.9375V39.0625C6.25 39.4769 6.41463 39.8744 6.70764 40.1673C7.00067 40.4605 7.39809 40.625 7.8125 40.625H42.1875C42.6019 40.625 42.9994 40.4605 43.2923 40.1673C43.5853 39.8744 43.75 39.4769 43.75 39.0625V17.1875C43.75 16.7731 43.5853 16.3756 43.2923 16.0827C42.9994 15.7897 42.6019 15.625 42.1875 15.625ZM9.375 12.5H18.1094L21.2344 15.625H9.375V12.5ZM40.625 37.5H9.375V18.75H40.625V37.5Z" fill="black"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;">
+    <g transform="matrix(1,0,0,1,-84,-78.6667)">
+        <g transform="matrix(1.04918,0,0,0.989691,79.8033,1.47079)">
+            <rect x="4" y="78" width="61" height="64.667" style="fill:white;"/>
+        </g>
+        <g transform="matrix(2,0,0,2,94,92.6667)">
+            <path d="M0,18L0,0L7,0L11,4L22,4L22,8" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
+        </g>
+        <g transform="matrix(2,0,0,2,100,128.667)">
+            <path d="M0,-10L22,-10L19,0L-3,0L0,-10Z" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
+        </g>
+    </g>
 </svg>
diff --git a/ui/arduino/views/components/tabs.js b/ui/arduino/views/components/tabs.js
@@ -4,7 +4,7 @@ function Tabs(state, emit) {
       ${state.openFiles.map((file) => {
         return Tab({
           text: file.fileName,
-          icon: file.source === 'board'? 'connect.svg': 'computer.svg',
+          icon: file.source === 'board'? 'board.svg': 'computer.svg',
           active: file.id === state.editingFile,
           renaming: file.id === state.renamingTab,
           hasChanges: file.hasChanges,
diff --git a/ui/arduino/views/components/toolbar.js b/ui/arduino/views/components/toolbar.js
@@ -52,7 +52,7 @@ function Toolbar(state, emit) {
       <div class="separator"></div>
 
       ${Button({
-        icon: 'console.svg',
+        icon: 'editor.svg',
         tooltip: 'Editor and REPL',
         active: state.view === 'editor',
         onClick: () => emit('change-view', 'editor')
diff --git a/ui/arduino/views/file-manager.js b/ui/arduino/views/file-manager.js
@@ -12,7 +12,7 @@ function FileManagerView(state, emit) {
       <div id="file-manager">
         <div id="board-files">
           <div class="device-header">
-            <img class="icon" src="media/${state.isConnected?'connect':'disconnect'}.svg" />
+            <img class="icon" src="media/${state.isConnected?'board':'disconnect'}.svg" />
             <div onclick=${() => emit('open-connection-dialog')} class="text">
               <span>${boardFullPath}</span>
             </div>
