Add dark theme and improve scrolling experience
Description:
This PR adds a dark theme to the editor and makes the editor and results elements share a common scrollbar.
There is still quite a bit of hacky stuff going on, but I am trying to read up on the ace editor documentation before doing anything major.
Changes:
- I have replaces some hard coded colors in the
editor.cssfile with variables to make it easy to switch colors for each theme. - A button has been added to the UI for toggling themes.
- Two svg icons have been added from the open source and MIT licensed library feather icons.
- The code for calculating offsets in the
interpretfunction ineditor.jshas been changed a bit to make the input of each part easier to identify in the html, to avoid calling the numbat.interpret function on empty input and similar minor changes. - The scroll behavior has been changed to make it so after interpretation only one scrollbar will be present ensuring results and editor always has the same scroll.
- Fixes some of the error formatting issues
To do's:
- [x] Fix the carret in the editor not changing color with the theme
- [x] Fix the highlighting of text in dark mode making the text unreadable
- [x] Make the gutter image stay in the middle of the screen no matter the number of lines and scroll
- [x] Make a responsive padding on both sides of screen to move code and results closer together on wider screens
- [x] Fix the error
<input:lineNumber>part of errors being mistaken for an input HTML tag
Thank you very much, this looks promising.
The scroll behavior has been changed to make it so after interpretation only one scrollbar will be present ensuring results and editor always has the same scroll.
Nice!
I can't really figure out which values are appropriate and at which screen sizes, but I have added some responsive margins and change the font depending on the view port size as well. The font size changing, is mostly meant for making it a little better for phones and tablets, but for completeness of the example it also gets larger on larger displays.
Feel free to let me know if I should change the cutoff points for the changes or the font-size/margin values. Other than that, I think it is merge ready unless something is found in review.
I have worked a bit on correcting the positioning of output when errors occur on an earlier line. I have put my worn on it on a different branch, but I was wondering if you would like it in this PR or as a separate one later on. If you want to see what the changes are about before deciding it can be found here on the numbat-editor-result-positioning branch.
I have worked a bit on correcting the positioning of output when errors occur on an earlier line. I have put my worn on it on a different branch, but I was wondering if you would like it in this PR or as a separate one later on. If you want to see what the changes are about before deciding it can be found here on the numbat-editor-result-positioning branch.
Let's merge this — this is great. If you have further changes, let's look at them in a new PR.