refactor: replace tabs with arrows [IDE-294] #540
Conversation
cat2608
force-pushed
the
refactor/IDE-294-replace-tabs-with-arrows
branch
from
48fa526 to
aa4fd53
Compare
cat2608
force-pushed
the
refactor/IDE-294-replace-tabs-with-arrows
branch
from
aa4fd53 to
c9c5b5b
Compare
cat2608
force-pushed
the
refactor/IDE-294-replace-tabs-with-arrows
branch
from
c704bd2 to
cd1fe53
Compare
- Moved arrows left and right SVG variations to be reusable by AI Fix and Fix Code Examples
- Converted example commits to JSON and embedded in the script using `template.JS`
- Constants, variables, and functions are defined in a logical order - Moved DOM-dependent functions inside the DOMContentLoaded event listener - Event listeners init after DOM content is fully loaded
cat2608
force-pushed
the
refactor/IDE-294-replace-tabs-with-arrows
branch
from
7d862d9 to
7e4f576
Compare
| {{.ArrowLeftDark}} | ||
| {{.ArrowLeftLight}} |
There was a problem hiding this comment.
Still need to work on showing the arrow based on the theme.
There was a problem hiding this comment.
I think you could do this by applying styles to the svg, since it looks like the only difference between them is the colour stroke
There was a problem hiding this comment.
You are right! This seems the change we need: snyk/vscode-extension#472 (IntelliJ also need its set of rules. WIP)
There was a problem hiding this comment.
What about my suggestion to do the stroke colour in snyk-ls? Or do you think it'll be different across IntelliJ and VSCode?
| const exampleCommitFixes = JSON.parse("{{.CommitFixes}}" || '[]'); | ||
|
|
||
| // Functions dependent on the DOM | ||
| function showCurrentExample() { |
There was a problem hiding this comment.
This is great! How about I raise a ticket to improve the code in here and vscode-extension by doing #527 (comment)? Basically we could expose these functions on the window and then both Example fixes and AI fixes will use the same functionality to move between tabs (in both VSCode and eventually IntelliJ).
There was a problem hiding this comment.
Yes! That's a great idea! Please! 💪
There was a problem hiding this comment.
infrastructure/code/code_html.go
Outdated
| @@ -65,7 +65,7 @@ var globalTemplate *template.Template | |||
|
|
|||
| func init() { | |||
| funcMap := template.FuncMap{ | |||
| "vendorIconSvg": getVendorIconSvg, | |||
| "githubIcon": getGitHubIconSvg, | |||
There was a problem hiding this comment.
Question: What do you need this for?
There was a problem hiding this comment.
No need 🧹 Removing it. Thank you :)
- Added CSS rules to toggle arrow icons based on the IDE theme. - Fixes code diff color for high contrast themes. Related to the migration from tab-based to arrow-based navigation for Code Issue panel (see PR [#540](snyk/snyk-ls#540)).
- Added CSS rules to toggle arrow icons based on the IDE theme. - Fixes code diff color for high contrast themes. Related to the migration from tab-based to arrow-based navigation for Code Issue panel (see PR [#540](snyk/snyk-ls#540)).
Description
This PR refactors the layout of fixed code examples by replacing the tab-based navigation with arrow-based navigation. It also includes several styling and script improvements.
DOMContentLoaded.Checklist
🚨After having merged, please update the CLI go.mod to pull in latest language server.
Screenshots / GIFs