Use vscode styles #455
Use vscode styles #455
Conversation
| @@ -0,0 +1,55 @@ | |||
| const applyVsCodeStyling = () => { | |||
There was a problem hiding this comment.
I think this would be cleaner/simpler if you had static .css files that you included in the webviews like in this example:
https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/media/reset.css
https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/media/vscode.css
And include them in the webviews like this: https://github.com/microsoft/vscode-extension-samples/blob/main/webview-sample/src/extension.ts#L201
Or maybe you can put those files in a vscode-wpilib/resources/css folder and include them into webviews like projectcreator.html by adding this to the <head> tag:
<link href="../css/reset.css" rel="stylesheet">
<link href="../css/vscode.css" rel="stylesheet">
There was a problem hiding this comment.
I tried going this way but using the relative path doesn't seem to work for me.
I think maybe we should use the styling from these files, but keep the way it is currently set up.
What do you think?
There was a problem hiding this comment.
Did you get some sort of console error? I'm not too familiar with this extension so I'd have to run it myself to see what the issue might be.
It looks like they're updating urls by replacing text in the html: https://github.com/wpilibsuite/vscode-wpilib/blob/main/vscode-wpilib/src/webviews/webviewbase.ts#L52
So I guess you can do something similar to what they do here? https://github.com/wpilibsuite/vscode-wpilib/blob/main/vscode-wpilib/resources/webviews/projectcreator.html#L18
So something like:
<link href="replaceresource/resources/css/reset.css" rel="stylesheet">
<link href="replaceresource/resources/css/vscode.css" rel="stylesheet">
This basically uses VSCode's button styling (and can probably add more similar styling)
I.e. the RioLog looks like this
when previously it looked like this
Similarly:
PS. I didn't want to bombard with PRs but the RioLog page is missing the WPILib logo. A suggested fix can be found here.