jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-12 13:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sketchbook icons colors (#1095)

Browse Source
This commit is contained in:
Francesco Spissu 2022-06-29 16:51:48 +02:00 committed by GitHub
parent 1e469627b4
commit 5499c25528
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 77 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon-filled.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.27 20H2.58C1.80648 17.3894 1.80648 14.6106 2.58 12H7.27C7.08644 13.3254 6.99622 14.662 7 16C6.99622 17.338 7.08644 18.6746 7.27 20Z" fill="black"/>
<path d="M7.63999 22C8.12954 24.499 9.15286 26.8629 10.64 28.93C7.43807 27.5988 4.84154 25.1305 3.34999 22H7.63999Z" fill="black"/>
<path d="M7.63999 9.99982H3.34999C4.84154 6.86936 7.43807 4.40106 10.64 3.06982C9.15286 5.13697 8.12954 7.50082 7.63999 9.99982Z" fill="black"/>
<path d="M15 2.1499V9.9999H9.7C10.71 5.8999 12.69 2.8399 15 2.1499Z" fill="black"/>
<path d="M9.29999 12H15V20H9.29999C8.90004 17.3483 8.90004 14.6517 9.29999 12Z" fill="black"/>
<path d="M9.7 22H15V29.85C12.69 29.16 10.71 26.1 9.7 22Z" fill="black"/>
<path d="M22.3 22C21.3 26.1 19.3 29.16 17 29.85V22H22.3Z" fill="black"/>
<path d="M22.3 9.9999H17V2.1499C19.31 2.8399 21.29 5.8999 22.3 9.9999Z" fill="black"/>
<path d="M22.7 20H17V12H22.7C22.8985 13.3241 22.9987 14.6611 23 16C22.9987 17.3389 22.8985 18.6759 22.7 20Z" fill="black"/>
<path d="M24.36 22H28.65C27.1584 25.1305 24.5619 27.5988 21.36 28.93C22.8471 26.8629 23.8704 24.499 24.36 22Z" fill="black"/>
<path d="M24.36 9.99982C23.8704 7.50082 22.8471 5.13697 21.36 3.06982C24.5619 4.40106 27.1584 6.86936 28.65 9.99982H24.36Z" fill="black"/>
<path d="M30 16C30.0023 17.3545 29.8069 18.702 29.42 20H24.73C24.9136 18.6746 25.0038 17.338 25 16C25.0038 14.662 24.9136 13.3254 24.73 12H29.42C29.8069 13.298 30.0023 14.6455 30 16Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

15
arduino-ide-extension/src/browser/style/cloud-sketchbook-tree-icon.svg
View File

@ -1,14 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.54383 11.5H0.612583C0.129139 9.86839 0.129139 8.13161 0.612583 6.5H3.54383C3.42911 7.32835 3.37272 8.16374 3.37508 9C3.37272 9.83626 3.42911 10.6716 3.54383 11.5Z" fill="#616161"/>
<path d="M3.775 12.75C4.08097 14.3119 4.72054 15.7893 5.65 17.0812C3.6488 16.2492 2.02597 14.7065 1.09375 12.75H3.775Z" fill="#616161"/>
<path d="M3.775 5.25001H1.09375C2.02597 3.29347 3.6488 1.75079 5.65 0.918762C4.72054 2.21073 4.08097 3.68814 3.775 5.25001Z" fill="#616161"/>
<path d="M8.375 0.34375V5.25H5.0625C5.69375 2.6875 6.93125 0.775 8.375 0.34375Z" fill="#616161"/>
<path d="M4.81248 6.5H8.37498V11.5H4.81248C4.56251 9.84271 4.56251 8.15729 4.81248 6.5Z" fill="#616161"/>
<path d="M5.0625 12.75H8.375V17.6562C6.93125 17.225 5.69375 15.3125 5.0625 12.75Z" fill="#616161"/>
<path d="M12.9375 12.75C12.3125 15.3125 11.0625 17.225 9.625 17.6562V12.75H12.9375Z" fill="#616161"/>
<path d="M12.9375 5.25H9.625V0.34375C11.0688 0.775 12.3063 2.6875 12.9375 5.25Z" fill="#616161"/>
<path d="M13.1875 11.5H9.625V6.5H13.1875C13.3115 7.32757 13.3742 8.16318 13.375 9C13.3742 9.83682 13.3115 10.6724 13.1875 11.5Z" fill="#616161"/>
<path d="M14.2251 12.75H16.9063C15.9741 14.7065 14.3513 16.2492 12.3501 17.0812C13.2796 15.7893 13.9191 14.3119 14.2251 12.75Z" fill="#616161"/>
<path d="M14.2251 5.25001C13.9191 3.68814 13.2796 2.21073 12.3501 0.918762C14.3513 1.75079 15.9741 3.29347 16.9063 5.25001H14.2251Z" fill="#616161"/>
<path d="M17.7503 9C17.7517 9.84653 17.6296 10.6887 17.3878 11.5H14.4565C14.5713 10.6716 14.6277 9.83626 14.6253 9C14.6277 8.16374 14.5713 7.32835 14.4565 6.5H17.3878C17.6296 7.31126 17.7517 8.15347 17.7503 9Z" fill="#616161"/>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 0C11.2311 0 8.52431 0.821086 6.22202 2.35943C3.91973 3.89777 2.12532 6.08427 1.06569 8.64243C0.00606596 11.2006 -0.271181 14.0155 0.269012 16.7313C0.809205 19.447 2.14258 21.9416 4.10051 23.8995C6.05845 25.8574 8.55301 27.1908 11.2687 27.731C13.9845 28.2712 16.7994 27.9939 19.3576 26.9343C21.9157 25.8747 24.1022 24.0803 25.6406 21.778C27.1789 19.4757 28 16.7689 28 14C28 10.287 26.525 6.72601 23.8995 4.1005C21.274 1.475 17.713 0 14 0ZM8.91001 3.13C7.72372 4.90553 6.90746 6.90195 6.51001 9H3.09001C4.2822 6.42178 6.34208 4.34421 8.91001 3.13ZM2.00001 14C1.9988 12.9879 2.12649 11.9798 2.38001 11H6.18001C5.94001 12.9928 5.94001 15.0072 6.18001 17H2.38001C2.12649 16.0202 1.9988 15.0121 2.00001 14ZM3.09001 19H6.51001C6.90746 21.0981 7.72372 23.0945 8.91001 24.87C6.34208 23.6558 4.2822 21.5782 3.09001 19ZM13 25.82C11.06 25.14 9.40001 22.5 8.58001 19H13V25.82ZM13 17H8.21001C7.92996 15.0098 7.92996 12.9902 8.21001 11H13V17ZM13 9H8.58001C9.40001 5.5 11.06 2.86 13 2.18V9ZM24.91 9H21.49C21.0926 6.90195 20.2763 4.90553 19.09 3.13C21.6579 4.34421 23.7178 6.42178 24.91 9ZM15 2.18C16.94 2.86 18.6 5.5 19.43 9H15V2.18ZM15 11H19.79C20.0701 12.9902 20.0701 15.0098 19.79 17H15V11ZM15 25.82V19H19.43C18.6 22.5 16.94 25.14 15 25.82ZM19.09 24.87C20.2763 23.0945 21.0926 21.0981 21.49 19H24.91C23.7178 21.5782 21.6579 23.6558 19.09 24.87ZM21.82 17C21.9418 16.0047 22.002 15.0028 22 14C22.002 12.9972 21.9418 11.9953 21.82 11H25.62C26.1281 12.9677 26.1281 15.0323 25.62 17H21.82Z" fill="black"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

33
arduino-ide-extension/src/browser/style/cloud-sketchbook.css
View File

@ -13,12 +13,23 @@
margin-bottom: 20px;
}
.cloud-sketchbook-tree-icon {
background: url("./cloud-sketchbook-tree-icon.svg") center center no-repeat;
.p-TabBar-tabIcon.cloud-sketchbook-tree-icon {
background-color: var(--theia-foreground);
-webkit-mask: url(./cloud-sketchbook-tree-icon.svg);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
width: var(--theia-icon-size);
height: var(--theia-icon-size);
background-size: auto 90%;
-webkit-mask-size: 100%;
}
.p-mod-current
.cloud-sketchbook-tree-icon {
background-color: var(--theia-foreground);
-webkit-mask: url(./cloud-sketchbook-tree-icon-filled.svg);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
}
.sketchbook-trees-container
@ -65,7 +76,7 @@
.p-Widget.p-TabBar.p-DockPanel-tabBar
> ul
> li.p-TabBar-tab.p-mod-current {
border-bottom: 2px solid var(--theia-statusBar-background);
border-bottom: 2px solid var(--theia-activityBar-activeBorder);
}
.sketchbook-trees-container .center {
@ -89,13 +100,19 @@
}
.pull-sketch-icon {
background: url("./pull-sketch-icon.svg") center center no-repeat;
background-color: var(--theia-foreground);
-webkit-mask: url(./pull-sketch-icon.svg);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
width: var(--theia-icon-size);
height: var(--theia-icon-size);
}
.push-sketch-icon {
background: url("./push-sketch-icon.svg") center center no-repeat;
background-color: var(--theia-foreground);
-webkit-mask: url(./push-sketch-icon.svg);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
width: var(--theia-icon-size);
height: var(--theia-icon-size);
}
@ -181,4 +198,4 @@
.arduino-share-sketch-dialog .sketch-link-embed textarea {
width: 100%;
}
}

4
arduino-ide-extension/src/browser/style/sketchbook-tree-icon-filled.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27 6H5.00002C4.73504 6.00077 4.48113 6.10637 4.29376 6.29374C4.10639 6.48111 4.00079 6.73502 4.00002 7V19H28V7C27.9993 6.73502 27.8937 6.48111 27.7063 6.29374C27.5189 6.10637 27.265 6.00077 27 6ZM9.29002 10.29L10.29 9.29C10.4786 9.10297 10.7336 8.99826 10.9992 8.9988C11.2648 8.99934 11.5193 9.10509 11.7071 9.29289C11.8949 9.4807 12.0007 9.73526 12.0012 10.0008C12.0018 10.2664 11.8971 10.5214 11.71 10.71L10.71 11.71C10.5204 11.8959 10.2655 12 10 12C9.73452 12 9.4796 11.8959 9.29002 11.71C9.10267 11.5212 8.99754 11.266 8.99754 11C8.99754 10.734 9.10267 10.4788 9.29002 10.29ZM16.71 11.71L12.71 15.71C12.5204 15.8959 12.2655 16 12 16C11.7345 16 11.4796 15.8959 11.29 15.71C11.1027 15.5212 10.9975 15.266 10.9975 15C10.9975 14.734 11.1027 14.4788 11.29 14.29L15.29 10.29C15.4786 10.103 15.7336 9.99826 15.9992 9.9988C16.2648 9.99934 16.5193 10.1051 16.7071 10.2929C16.8949 10.4807 17.0007 10.7353 17.0012 11.0008C17.0018 11.2664 16.8971 11.5214 16.71 11.71Z" fill="black"/>
<path d="M30.89 25.4516C30.8063 25.616 30.679 25.7543 30.5221 25.8513C30.3651 25.9482 30.1845 26.0003 30 26.0016H2.00002C1.81552 26.0003 1.63493 25.9482 1.47798 25.8513C1.32102 25.7543 1.19374 25.616 1.11002 25.4516C1.02538 25.2856 0.988954 25.0993 1.00486 24.9137C1.02077 24.7281 1.08838 24.5507 1.20002 24.4016L3.75002 21.0016H28.25L30.8 24.4016C30.9117 24.5507 30.9793 24.7281 30.9952 24.9137C31.0111 25.0993 30.9747 25.2856 30.89 25.4516Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

14
arduino-ide-extension/src/browser/style/sketchbook-tree-icon.svg
View File

@ -1,11 +1,5 @@
<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.2492 12.2509L17.4992 9.9197V1.37595C17.4987 1.21033 17.4327 1.05164 17.3156 0.934533C17.1985 0.817426 17.0398 0.751424 16.8742 0.750946H3.12422C2.95861 0.751441 2.79992 0.817448 2.68282 0.934551C2.56572 1.05165 2.49971 1.21034 2.49922 1.37595V9.9197L0.749217 12.2509C0.679462 12.3442 0.637219 12.455 0.627276 12.571C0.617334 12.687 0.640091 12.8035 0.692967 12.9072C0.745302 13.0099 0.824858 13.0964 0.922952 13.157C1.02105 13.2176 1.13391 13.2501 1.24922 13.2509H18.7492C18.8645 13.2501 18.9774 13.2176 19.0755 13.157C19.1736 13.0964 19.2531 13.0099 19.3055 12.9072C19.3583 12.8035 19.3811 12.687 19.3712 12.571C19.3612 12.455 19.319 12.3442 19.2492 12.2509ZM3.74922 2.00095H16.2492V9.50095H3.74922V2.00095ZM2.49922 12.0009L3.43672 10.7509H16.5617L17.4992 12.0009H2.49922Z"
fill="#616161" />
<path
d="M7.49987 7.62501C7.37627 7.62498 7.25546 7.58831 7.15271 7.51964C7.04995 7.45096 6.96986 7.35336 6.92257 7.23917C6.87527 7.12498 6.8629 6.99934 6.887 6.87812C6.91111 6.7569 6.97061 6.64554 7.05799 6.55814L9.55799 4.05814C9.67587 3.94429 9.83374 3.88129 9.99762 3.88271C10.1615 3.88414 10.3182 3.94987 10.4341 4.06575C10.55 4.18163 10.6157 4.33839 10.6172 4.50226C10.6186 4.66613 10.5556 4.82401 10.4417 4.94189L7.94174 7.44189C7.88379 7.50002 7.81491 7.54612 7.73908 7.57755C7.66325 7.60898 7.58195 7.62511 7.49987 7.62501Z"
fill="#616161" />
<path
d="M6.24987 5.12501C6.12627 5.12498 6.00546 5.08831 5.90271 5.01964C5.79995 4.95096 5.71986 4.85336 5.67257 4.73917C5.62527 4.62498 5.6129 4.49934 5.637 4.37812C5.66111 4.2569 5.72061 4.14554 5.80799 4.05814L6.43299 3.43314C6.55087 3.31929 6.70874 3.25629 6.87262 3.25771C7.03649 3.25914 7.19325 3.32487 7.30913 3.44075C7.42501 3.55663 7.49074 3.71339 7.49216 3.87726C7.49359 4.04113 7.43059 4.19901 7.31674 4.31688L6.69174 4.94189C6.63379 5.00002 6.56491 5.04612 6.48908 5.07755C6.41325 5.10898 6.33195 5.12511 6.24987 5.12501Z"
fill="#616161" />
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.7985 24.4015L27.9985 20.6715V7.00153C27.9977 6.73654 27.8921 6.48264 27.7048 6.29526C27.5174 6.10789 27.2635 6.00229 26.9985 6.00153H4.9985C4.73353 6.00232 4.47964 6.10793 4.29227 6.29529C4.10491 6.48266 3.99929 6.73655 3.9985 7.00153V20.6715L1.1985 24.4015C1.0869 24.5507 1.01931 24.7281 1.0034 24.9137C0.98749 25.0992 1.0239 25.2856 1.1085 25.4515C1.19224 25.6159 1.31953 25.7542 1.47648 25.8512C1.63343 25.9482 1.81401 26.0002 1.9985 26.0015H29.9985C30.183 26.0002 30.3636 25.9482 30.5205 25.8512C30.6775 25.7542 30.8048 25.6159 30.8885 25.4515C30.9731 25.2856 31.0095 25.0992 30.9936 24.9137C30.9777 24.7281 30.9101 24.5507 30.7985 24.4015ZM5.9985 8.00153H25.9985V20.0015H5.9985V8.00153ZM3.9985 24.0015L5.4985 22.0015H26.4985L27.9985 24.0015H3.9985Z" fill="black"/>
<path d="M12 17C11.8023 17 11.609 16.9413 11.4445 16.8314C11.2801 16.7216 11.152 16.5654 11.0763 16.3827C11.0007 16.2 10.9808 15.999 11.0194 15.805C11.058 15.6111 11.1532 15.4329 11.293 15.293L15.293 11.293C15.4816 11.1109 15.7342 11.0101 15.9964 11.0124C16.2586 11.0146 16.5094 11.1198 16.6948 11.3052C16.8802 11.4906 16.9854 11.7414 16.9877 12.0036C16.99 12.2658 16.8892 12.5184 16.707 12.707L12.707 16.707C12.6143 16.8001 12.5041 16.8738 12.3827 16.9241C12.2614 16.9744 12.1313 17.0002 12 17Z" fill="black"/>
<path d="M10 13C9.80225 13 9.60895 12.9413 9.44454 12.8314C9.28013 12.7216 9.15199 12.5654 9.07632 12.3827C9.00065 12.2 8.98085 11.999 9.01942 11.805C9.05798 11.6111 9.15319 11.4329 9.293 11.293L10.293 10.293C10.4816 10.1109 10.7342 10.0101 10.9964 10.0124C11.2586 10.0146 11.5094 10.1198 11.6948 10.3052C11.8802 10.4906 11.9854 10.7414 11.9877 11.0036C11.99 11.2658 11.8892 11.5184 11.707 11.707L10.707 12.707C10.6143 12.8001 10.5041 12.8738 10.3827 12.9241C10.2614 12.9744 10.1313 13.0002 10 13Z" fill="black"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

40
arduino-ide-extension/src/browser/style/sketchbook.css
View File

@ -1,27 +1,43 @@
.sketchbook-tab-icon {
-webkit-mask: url('./sketchbook.svg');
mask: url('./sketchbook.svg');
-webkit-mask: url('./sketchbook.svg');
mask: url('./sketchbook.svg');
}
.sketch-folder-icon {
background: url('./sketch-folder-icon.svg') center center no-repeat;
background-position-x: 1px;
width: var(--theia-icon-size);
height: var(--theia-icon-size);
background: url('./sketch-folder-icon.svg') center center no-repeat;
background-position-x: 1px;
width: var(--theia-icon-size);
height: var(--theia-icon-size);
}
.p-TabBar-tabIcon.sketchbook-tree-icon {
background-color: var(--theia-foreground);
-webkit-mask: url(./sketchbook-tree-icon.svg);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
width: 19px !important;
height: var(--theia-icon-size);
-webkit-mask-size: 100%;
}
.p-mod-current
.sketchbook-tree-icon {
background: url('./sketchbook-tree-icon.svg') center center no-repeat;
width: 19px !important;
height: var(--theia-icon-size);
background-color: var(--theia-foreground);
-webkit-mask: url(./sketchbook-tree-icon-filled.svg);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
}
.sketchbook-trees-container {
height: 100%;
height: 100%;
}
.sketchbook-tree__opts {
background: url('./sketchbook-opts-icon.svg') center center no-repeat;
background-color: var(--theia-foreground);
-webkit-mask: url(./sketchbook-opts-icon.svg);
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
width: var(--theia-icon-size);
height: var(--theia-icon-size);
}
@ -44,4 +60,4 @@
.theia-TreeNode:hover .sketchbook-commands-icons,
.theia-TreeNode.theia-mod-selected .sketchbook-commands-icons {
display: block;
}
}