jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-11-16 21:59:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: new UX for the boards/library manager widgets

Browse Source 
Closes #19
Closes #781
Closes #1591
Closes #1607
Closes #1697
Closes #1707
Closes #1924
Closes #1941

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
This commit is contained in:
Akos Kitta
2023-03-01 18:02:45 +01:00
committed by Akos Kitta
parent 58aac236bf
commit 2aad0e3b16
29 changed files with 1409 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
arduino-ide-extension/src/browser/style/boards-config-dialog.css
View File

@@ -165,7 +165,7 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
border: 1px solid var(--theia-arduino-toolbar-dropdown-border);
display: flex;
gap: 10px;
height: 28px;
height: var(--arduino-button-height);
margin: 0 4px;
overflow: hidden;
padding: 0 10px;

6
arduino-ide-extension/src/browser/style/dialogs.css
View File

@@ -12,7 +12,7 @@
min-width: 424px;
max-height: 560px;
padding: 0 28px;
padding: 0 var(--arduino-button-height);
}
.p-Widget.dialogOverlay .dialogBlock .dialogTitle {
@@ -35,7 +35,7 @@
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent > input {
margin-bottom: 28px;
margin-bottom: var(--arduino-button-height);
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent > div {
@@ -43,7 +43,7 @@
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection {
margin-top: 28px;
margin-top: var(--arduino-button-height);
}
.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection:first-child {
margin-top: 0;

5
arduino-ide-extension/src/browser/style/fonts.css
View File

@@ -1,5 +1,10 @@
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans-Regular-webfont.woff') format('woff');
}
@font-face {
font-family: 'Open Sans Bold';
src: url('fonts/OpenSans-Bold-webfont.woff') format('woff');
}

4
arduino-ide-extension/src/browser/style/ide-updater-dialog.css
View File

@@ -15,7 +15,7 @@
}
.ide-updater-dialog--logo-container {
margin-right: 28px;
margin-right: var(--arduino-button-height);
}
.ide-updater-dialog--logo {
@@ -76,7 +76,7 @@
.ide-updater-dialog .buttons-container {
display: flex;
justify-content: flex-end;
margin-top: 28px;
margin-top: var(--arduino-button-height);
}
.ide-updater-dialog .buttons-container a.theia-button {

18
arduino-ide-extension/src/browser/style/index.css
View File

@@ -20,6 +20,10 @@
@import './progress-bar.css';
@import './settings-step-input.css';
:root {
--arduino-button-height: 28px;
}
/* Revive of the `--theia-icon-loading`. The variable has been removed from Theia while IDE2 still uses is. */
/* The SVG icons are still part of Theia (1.31.1) */
/* https://github.com/arduino/arduino-ide/pull/1662#issuecomment-1324997134 */
@@ -64,9 +68,9 @@ body.theia-dark {
/* Makes the sidepanel a bit wider when opening the widget */
.p-DockPanel-widget {
min-width: 200px;
min-width: 220px;
min-height: 20px;
height: 200px;
height: 220px;
}
/* Overrule the default Theia CSS button styles. */
@@ -74,9 +78,9 @@ button.theia-button,
.theia-button {
align-items: center;
display: flex;
font-family: 'Open Sans',sans-serif;
font-family: 'Open Sans Bold',sans-serif;
font-style: normal;
font-weight: 700;
font-weight: 700;
font-size: 14px;
justify-content: center;
cursor: pointer;
@@ -95,7 +99,7 @@ button.theia-button,
}
button.theia-button {
height: 28px;
height: var(--arduino-button-height);
max-width: none;
}
@@ -154,10 +158,6 @@ button.theia-button.message-box-dialog-button {
font-size: 14px;
}
.uppercase {
text-transform: uppercase;
}
/* High Contrast Theme rules */
/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
.hc-black.hc-theia.theia-hc button.theia-button:hover,

184
arduino-ide-extension/src/browser/style/list-widget.css
View File

@@ -44,102 +44,152 @@
height: 100%; /* This has top be 100% down to the `scrollContainer`. */
}
.filterable-list-container .items-container > div > div:nth-child(odd) {
background-color: var(--theia-sideBar-background);
filter: contrast(105%);
}
.filterable-list-container .items-container > div > div:nth-child(even) {
background-color: var(--theia-sideBar-background);
filter: contrast(95%);
}
.filterable-list-container .items-container > div > div:hover {
background-color: var(--theia-sideBar-background);
filter: contrast(90%);
}
.component-list-item {
padding: 10px 10px 10px 15px;
font-size: var(--theia-ui-font-size1);
}
.component-list-item:hover {
cursor: pointer;
padding: 20px 15px 25px;
}
.component-list-item .header {
padding-bottom: 2px;
display: flex;
flex-direction: column;
min-height: var(--theia-statusBar-height);
}
.component-list-item .header .version-info {
.component-list-item .header > div {
display: flex;
}
.component-list-item .header > div .p-TabBar-toolbar {
align-self: start;
padding: unset;
margin-right: unset;
}
.component-list-item:hover .header > div .p-TabBar-toolbar > div {
visibility: visible;
}
.component-list-item .header > div .p-TabBar-toolbar > div {
visibility: hidden;
}
.component-list-item .header .title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
}
.component-list-item .header .title .name {
font-family: 'Open Sans Bold';
font-style: normal;
font-weight: 700;
font-size: 14px;
}
.component-list-item .header .version {
display: flex;
justify-content: space-between;
align-items: center;
}
.component-list-item .header .name {
font-weight: bold;
}
.component-list-item .header .author {
font-weight: bold;
color: var(--theia-panelTitle-inactiveForeground);
}
.component-list-item:hover .header .author {
color: var(--theia-foreground);
}
.component-list-item .header .version {
color: var(--theia-panelTitle-inactiveForeground);
padding-top: 4px;
}
.component-list-item .footer .theia-button.install {
height: auto; /* resets the default Theia button height in the filterable list widget */
}
.component-list-item .header .installed:before {
margin-left: 4px;
.component-list-item .header .installed-version:before {
min-width: 79px;
display: inline-block;
justify-self: end;
background-color: var(--theia-button-background);
text-align: center;
background-color: var(--theia-arduino-toolbar-dropdown-option-backgroundHover);
padding: 2px 4px 2px 4px;
font-size: 10px;
font-weight: bold;
font-size: 12px;
max-height: calc(1em + 4px);
color: var(--theia-button-foreground);
content: attr(install);
}
.component-list-item .header .installed:hover:before {
background-color: var(--theia-button-foreground);
color: var(--theia-button-background);
content: attr(uninstall);
content: attr(version);
cursor: pointer;
border-radius: 4px;
}
.component-list-item[min-width~="170px"] .footer {
padding: 5px 5px 0px 0px;
min-height: 35px;
.component-list-item .header .installed-version:hover:before {
content: attr(remove);
text-transform: uppercase;
}
.component-list-item .content {
display: flex;
flex-direction: row-reverse;
flex-direction: column;
padding-top: 4px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
}
.component-list-item .content > p {
margin-block-start: unset;
margin-block-end: unset;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.component-list-item .content > .info {
white-space: nowrap;
}
.component-list-item .footer {
flex-direction: column-reverse;
padding-top: 8px;
}
.component-list-item .footer > * {
display: inline-block;
margin: 5px 0px 0px 10px;
}
.filterable-list-container .separator {
display: flex;
flex-direction: row;
}
.filterable-list-container .separator :last-child,
.filterable-list-container .separator :first-child {
min-height: 8px;
max-height: 8px;
min-width: 8px;
max-width: 8px;
}
div.filterable-list-container > div > div > div > div:nth-child(1) > div.separator :first-child,
div.filterable-list-container > div > div > div > div:nth-child(1) > div.separator :last-child {
display: none;
}
.filterable-list-container .separator .line {
max-height: 1px;
height: 1px;
background-color: var(--theia-activityBar-inactiveForeground);
flex: 1 1 auto;
}
.component-list-item:hover .footer > label {
display: inline-block;
align-self: center;
margin: 5px 0px 0px 10px;
}
.component-list-item .info a {
@@ -151,13 +201,33 @@
text-decoration: underline;
}
/* High Contrast Theme rules */
/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
.hc-black.hc-theia.theia-hc .component-list-item .header .installed:hover:before {
background-color: transparent;
outline: 1px dashed var(--theia-focusBorder);
.component-list-item .theia-button.secondary.no-border {
border: 2px solid var(--theia-button-foreground)
}
.hc-black.hc-theia.theia-hc .component-list-item .header .installed:before {
.component-list-item .theia-button.secondary.no-border:hover {
border: 2px solid var(--theia-secondaryButton-foreground)
}
.component-list-item .theia-button {
margin-left: 12px;
}
.component-list-item .theia-select {
height: var(--arduino-button-height);
min-height: var(--arduino-button-height);
width: 65px;
min-width: 65px;
}
/* High Contrast Theme rules */
/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
.hc-black.hc-theia.theia-hc .component-list-item .header .installed-version:hover:before {
background-color: transparent;
outline: 1px dashed var(--theia-focusBorder);
}
.hc-black.hc-theia.theia-hc .component-list-item .header .installed-version:before {
color: var(--theia-button-background);
border: 1px solid var(--theia-button-border);
}

8
arduino-ide-extension/src/browser/style/main.css
View File

@@ -28,8 +28,8 @@
display: flex;
justify-content: center;
align-items: center;
height: 28px;
width: 28px;
height: var(--arduino-button-height);
width: var(--arduino-button-height);
}
.p-TabBar-toolbar .item.arduino-tool-item .arduino-upload-sketch--toolbar,
@@ -66,8 +66,8 @@
}
.arduino-tool-icon {
height: 28px;
width: 28px;
height: var(--arduino-button-height);
width: var(--arduino-button-height);
}
.arduino-verify-sketch--toolbar-icon {