Skip to content

Commit

Permalink
Update RISC-V button with new style and placement
Browse files Browse the repository at this point in the history 
Signed-off-by: paulober <[email protected]>
  • Loading branch information
@paulober
paulober committed Sep 9, 2024
1 parent ae8eda4 commit 3a0cb66
Show file tree
Hide file tree
Showing 8 changed files with 568 additions and 8 deletions.
55 changes: 50 additions & 5 deletions src/webview/newProjectPanel.mts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1253,6 +1253,39 @@ export class NewProjectPanel {
Uri.joinPath(this._extensionUri, "web", "raspberrypi-nav-header-dark.svg")
);

const riscvWhiteSvgUri = webview.asWebviewUri(
Uri.joinPath(
this._extensionUri,
"web",
"riscv",
"RISC-V_Horizontal_White.svg"
)
);
const riscvWhiteYellowSvgUri = webview.asWebviewUri(
Uri.joinPath(
this._extensionUri,
"web",
"riscv",
"RISC-V_Horizontal_White_Yellow.svg"
)
);
const riscvBlackSvgUri = webview.asWebviewUri(
Uri.joinPath(
this._extensionUri,
"web",
"riscv",
"RISC-V_Horizontal_Black.svg"
)
);
const riscvColorSvgUri = webview.asWebviewUri(
Uri.joinPath(
this._extensionUri,
"web",
"riscv",
"RISC-V_Horizontal_Color.svg"
)
);

this._versionBundlesLoader = new VersionBundlesLoader(this._extensionUri);

// construct auxiliar html
Expand Down Expand Up @@ -1427,6 +1460,12 @@ export class NewProjectPanel {
}
var doProjectImport = ${this._isProjectImport};
var forceCreateFromExample = ${forceCreateFromExample};
// riscv logos
const riscvWhiteSvgUri = "${riscvWhiteSvgUri.toString()}";
const riscvWhiteYellowSvgUri = "${riscvWhiteYellowSvgUri.toString()}";
const riscvBlackSvgUri = "${riscvBlackSvgUri.toString()}";
const riscvColorSvgUri = "${riscvColorSvgUri.toString()}";
</script>
</head>
<body class="scroll-smooth w-screen">
Expand Down Expand Up @@ -1530,7 +1569,8 @@ export class NewProjectPanel {
</p>
</div>
<div>
<div id="board-type-riscv-grid" class="grid gap-6 grid-cols-2">
<div>
<label for="sel-board-type" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Board type</label>
<select id="sel-board-type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option id="option-board-type-${
Expand All @@ -1548,6 +1588,14 @@ export class NewProjectPanel {
BoardType.other
}" value="${BoardType.other}">Other</option>
</select>
</div>
<div class="use-riscv text-sm font-medium text-gray-900 dark:text-white" hidden>
<label for="riscvToggle" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Architecture (Pico 2)</label>
<div class="flex items-center justify-between p-2 bg-gray-100 rounded-lg dark:bg-gray-700">
<input type="checkbox" id="sel-riscv" class="ms-2" />
<img id="riscvIcon" src="${riscvColorSvgUri.toString()}" alt="RISC-V Logo" class="h-6 mx-auto w-28">
</div>
</div>
</div>
</div>`
: `<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
Expand Down Expand Up @@ -1630,10 +1678,7 @@ export class NewProjectPanel {
${picoSDKsHtml}
</select>
</div>
<div class="use-riscv text-sm font-medium text-gray-900 dark:text-white" hidden>
<label for="sel-riscv">Use RISC-V</label>
<input type="checkbox" id="sel-riscv">
</div>
<div class="advanced-option" hidden>
<label for="sel-toolchain" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select ARM/RISCV Embeded Toolchain version</label>
<select id="sel-toolchain" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
Expand Down
6 changes: 5 additions & 1 deletion web/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,4 +124,8 @@ ul#examples-list {
.examples-list-suggestion:hover:not(.unhovered) {
background-color: var(--vscode-inputOption-hoverBackground);
/* background-color: var(--vscode-button-hoverBackground); */
}
}

image {
-webkit-user-drag: none;
}
60 changes: 58 additions & 2 deletions web/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -430,15 +430,35 @@ var isPicoWireless = false;
break;
case CMD_SET_THEME:
console.log("[raspberry-pi-pico] Set theme mode to:", message.theme);

// get riscv image
const riscvIcon = document.getElementById('riscvIcon');

// update UI
if (message.theme == "dark") {
// explicitly choose dark mode
localStorage.theme = 'dark'
document.body.classList.add('dark')
// riscv toggle button concept
/*if (riscvIcon.getAttribute('data-selected') === 'false') {
riscvIcon.src = riscvWhiteSvgUri;
} else {
riscvIcon.src = riscvWhiteYellowSvgUri;
}*/
// set riscv icon variant to white
riscvIcon.src = riscvWhiteSvgUri;
} else if (message.theme == "light") {
document.body.classList.remove('dark')
// explicitly choose light mode
localStorage.theme = 'light'
// riscv toggle button concept
/*if (riscvIcon.getAttribute('data-selected') === 'false') {
riscvIcon.src = riscvBlackSvgUri;
} else {
riscvIcon.src = riscvColorSvgUri;
}*/
// set riscv icon variant to black
riscvIcon.src = riscvBlackSvgUri;
}
break;
case CMD_VERSION_BUNDLE_AVAILABLE_TEST:
Expand Down Expand Up @@ -483,18 +503,30 @@ var isPicoWireless = false;
}

if (!doProjectImport) {
const riscv = document.getElementById("sel-riscv").checked;
const board = document.getElementById('sel-board-type').value;
const riscvSelected = document.getElementById('sel-riscv').checked;

if (board !== "pico2") {
// ui update to account for hidden elements
const boardTypeRiscvGrid = document.getElementById("board-type-riscv-grid");
// remove grid-cols-2 class
boardTypeRiscvGrid.classList.remove("grid-cols-2");

// hide elements
for (let i = 0; i < useRiscv.length; i++) {
useRiscv[i].hidden = true;
}
} else {
// ui update to account for next unhidden elements
const boardTypeRiscvGrid = document.getElementById("board-type-riscv-grid");
// add grid-cols-2 class
boardTypeRiscvGrid.classList.add("grid-cols-2");

// show elements again
for (let i = 0; i < useRiscv.length; i++) {
useRiscv[i].hidden = false;
}
if (riscv) {
if (riscvSelected) {
selectedIndex = getIndexByValue(toolchainSelector, result.riscvToolchainVersion);
}
}
Expand Down Expand Up @@ -656,6 +688,30 @@ var isPicoWireless = false;
value: sdkVersion.replace("v", "")
});
});
// used for riscv toggle button concept, also requires changes in the setTheme command receiver
/*document.getElementById('riscvToggle').addEventListener('click', function () {
const riscvIcon = document.getElementById('riscvIcon');
const isSelected = riscvIcon.getAttribute('data-selected') === 'true';
if (isSelected) {
// Unselect (switch to black or white in dark mode)
if (localStorage.theme === "dark") {
riscvIcon.src = riscvWhiteSvgUri; // Dark mode
} else {
riscvIcon.src = riscvBlackSvgUri; // Light mode
}
riscvIcon.setAttribute('data-selected', 'false');
} else {
// Select (switch to color)
if (localStorage.theme === "dark") {
riscvIcon.src = riscvWhiteYellowSvgUri; // Dark mode
} else {
riscvIcon.src = riscvColorSvgUri; // Light mode
}
riscvIcon.setAttribute('data-selected', 'true');
}
});*/

document.getElementById('sel-riscv').addEventListener('change', function () {
const sdkVersion = document.getElementById('sel-pico-sdk').value;
// send message to extension
Expand Down
Loading

0 comments on commit 3a0cb66

Please sign in to comment.