Updated menu changes in new PR

[IsaacAbrahamson]

Continues https://github.com/no-stack-dub-sack/cs-playground-react/pull/54

I gitignored the vs folder in various ways and deleted it as well. I hope this will update it.

[IsaacAbrahamson]

I'll leave this one for you, you can add commits here or do so after merge:

• Fix icons issue (e.currentTarget) see above comment. Looks like you got this figured out anyway!

I'll look at these now:

• .sidebar--menu--header { border-top: 2px solid black } rule needs to be removed (legacy from original styles)
• margins and width
• Apply a min-height to menu items (or just manually set height on "Sorting algos benchmarks" item which has a smaller heigh since no icons)

[IsaacAbrahamson]

Alright. Made some changes. 20px margin top, 92% width. I think it is the most consistent yet out of everything. Still has just enough space for my liking. Space on sides and in-between is close to the space inside the details themselves.

Check it out: http://playground.isaacabrahamson.com/

I like the margins and everything. I'm not sure I personally would like it better any closer, but I'll respect your opinion.

[IsaacAbrahamson]

Just a thought. Themes could customize this spacing as well. Might solve the debate 🤣

[no-stack-dub-sack]

Just a thought. Themes could customize this spacing as well. Might solve the debate rofl

Haha! That's an excellent idea!!! Because I think what we've figured out here, is this is 100% a preference thing, so there will almost certainly be those out there that like it one way and those that like it the other (we can't possibly be the only ones)

I honestly think this is the perfect solution.

No matter what though, I don't think I would go 100% width on any themes at this point, I really love just the tiniest bit of space.

Which themes are your favorites? My two favs are Tomorrow Night Eighties and Paraiso Light. Looks like you're partial to cobalt?

P.S. thanks for the new PR! this fixed the vscode thing.

[no-stack-dub-sack]

Check it out: http://playground.isaacabrahamson.com/

this is blocked at work due to the insecure connection but will check it out as soon as I get home. I feel like with the additional work done this is mostly good to go though. Thanks for taking care of those few extras. Once I fix the icon / solution issue and apply theme spacing, we'll be good to go!

Everyone I've showed the new menu style to has loved it so far btw, great job with this :+1:

[IsaacAbrahamson]

Which themes are your favorites? My two favs are Tomorrow Night Eighties and Paraiso Light. Looks like you're partial to cobalt?

Not sure I would label it as my favorite, but I like the color contrasts. It's similar to another theme I use in vscode which I may eventually add to the app. I have a soft spot for the eclipse theme. Gives some nostalgia from when I used to build Minecraft mods as a sixteen-year-old with no Java experience and just tried to piece together everything I knew that carried over from C#. I like parisio as well. Not too big of a fan of the darker themes, I'm not sure why.

this is blocked at work due to the insecure connection but will check it out as soon as I get home.

Whoops. I keep forgetting surge doesn't have secure connections for free. I moved it over to Netlify, try it now: https://cs.isaacabrahamson.com/

Everyone I've showed the new menu style to has loved it so far btw, great job with this 👍

Awesome 😄

[IsaacAbrahamson]

How would you add a theme? I tried adding to reducers/theme.js and adding the styles in theme.css but it doesn't show the theme when scrolling through them.

[no-stack-dub-sack]

@IsaacAbrahamson hmmm, for some reason I still can't access it. I think it must just scrape the web for known domains or something? Not sure...

I keep forgetting surge doesn't have secure connections for free.

Surge, like surge.sh? Is that what the first site was deployed with? Do you mean it doesn't have secure connections for free when you use a totally custom domain? That's why I went with a sort of custom domain for this project but still with the surge.sh domain (which does offer free https). I didn't know you could do completely custom free domains with them though, that's cool.

For this site, if traffic ever picks up enough, I will eventually move it over to a fully custom deployment. But that remains to be seen...

I usually like the darker themes better, and still do I guess, of the light ones, I really only like Paraiso.

[no-stack-dub-sack]

@IsaacAbrahamson

How would you add a theme?

So... adding a truly custom theme that will style the editor contents as well is not that easy. All of these themes are direct from CodeMirror, and I've only added CSS on top of that to style the non-editor UI components that surround the editor.

You can check out all of the available codemirror themes here: https://codemirror.net/demo/theme.html

If you see one you like, you can add it to the array in the reducer like you said, but it also has to be imported from codemirror here. Then, I've just been inspecting different elements to pull out colors from the editor theme that I like, and adding the custom css with the theme name as the class modifier (or just checking out the theme's source).

If you were actually interested in creating a fully custom theme, the codemirror docs have some information on particular class names and such that get applied to variables, keywords, backgrounds, etc in the editor, and you can check out the css source files for an example or 2 in node_modules/codemirror/theme/ or here. They're actually not that complex for the most part, so probably wouldn't be too hard to do. There might be some trickery to actually getting the themes to apply correctly, but where there's a will there's a way :smile:

So not sure if you're talking about creating an all new one, or just adding another codemirror one, but hopefully this answers your question either way...

[no-stack-dub-sack]

Also, this is pretty cool: https://fcc.im/2o8NbFN

Seems like variables in CSS are now a thing natively, which could be pretty helpful here. I've been thinking about Sass or something for a while, but variables would be the big win there with the fairly simple CSS that we're using here.

I wonder if this would just work and is supported by all browsers now?

[IsaacAbrahamson]

Seems like variables in CSS are now a thing natively, which could be pretty helpful here. I've been thinking about Sass or something for a while, but variables would be the big win there with the fairly simple CSS that we're using here.

Was just thinking about those the other day, I need to try them out sometime.

I wonder if this would just work and is supported by all browsers now?

Should. I don't consider IE a browser, and most people who are interested in computer science algorithms won't either.

https://caniuse.com/#feat=css-variables

[IsaacAbrahamson]

If you see one you like, you can add it to the array in the reducer like you said, but it also has to be imported from codemirror here. Then, I've just been inspecting different elements to pull out colors from the editor theme that I like, and adding the custom css with the theme name as the class modifier (or just checking out the theme's source).

That didn't work. I tried importing dracula and yeti and adding them to the reducers but it wouldn't toggle them. I also removed all the imports for the other themes and removed them from the array in themes.js, but the editor still tried to toggle through those. weird.

[no-stack-dub-sack]

@IsaacAbrahamson let me pull down your code and see if I can reproduce this, it could be something is up, or it could be I'm forgetting a step or explaining it wrong.

edit: oh, it's because the reducer state is rehydrated from local storage post-first visit. So you'd have to go into local storage and delete the themes object, and then this will work (as originally described). However, if we want the ability to add themes later, we can just add the following right here (between defaultState declaration and the export default which starts the reducer logic:

if (!isEqual(defaultState.themes, initialState.themes)) {
  defaultState.themes = initialState.themes
}

oh, and make sure to import isEqual from lodash at the top:

import { head, indexOf, last, isEqual } from 'lodash'

I'll end up adding this when this gets merged in and if I make changes, but if you want to start playing around, that's all you'll need to do.

[IsaacAbrahamson]

Thanks @no-stack-dub-sack 😄