search

no-stack-dub-sack / cs-playground-react

In-Browser Algorithm and Data Structures Practice
http://cs-playground-react.surge.sh/
MIT License
520 stars 91 forks source link

add hamburger menu and keybindings modal #73

Closed no-stack-dub-sack closed 6 years ago

no-stack-dub-sack commented 6 years ago

@mansisce here's the last feature I want to implement before pushing all this new code to production. With all these new features (especially including the last big update) there are a ton of new key bindings (for the editor and for the app itself) that I'm afraid people won't know about, since they are only talked about on the welcome screen and in the docs (for example, did you know you could change themes CMD/CTRL+ALT+{ OR }?).

I would love to add a hamburger menu in place of the current share link button:

image

When expanded, the hamburger menu could include a "Get Share Link" button (either icon or text), which would have the same behavior as the current button, and a "View Key Bindings" button, which would open a modal that listed all the applications key bindings including all those listed below. This would also give us a place to eventually add additional links, such as the "Settings" menu (#65), which would link to a different route.

Is this something you would be interested in taking on? No worries if not, but thought I'd ask before I jumped in! If so, the latest code is on the staging branch, not master, so you'd have to pull that down.

Key Bindings / Application Shortcut Keys:

mansisce commented 6 years ago

Is this something you would be interested in taking on? No worries if not, but thought I'd ask before I jumped in! If so, the latest code is on the staging branch, not master, so you'd have to pull that down. @no-stack-dub-sack Yes, i like to take this up.

mansisce commented 6 years ago

@no-stack-dub-sack I'm wondering I don't see current share link button as mentioned below.

I would love to add a hamburger menu in place of the current share link button:

Is this the right place to add the hamburger menu. I feel we should have one hamburger menu on top left corner where there is Menu currently. Inside that we can have other things as you mentioned plus the menu itself we can have inside that. What do you suggest.

mansisce commented 6 years ago

(for example, did you know you could change themes CMD/CTRL+ALT+{ OR }?).

@no-stack-dub-sack No, I was not knowing this. There are so many themes i can choose from. Simply awesome!

no-stack-dub-sack commented 6 years ago

@mansisce Glad you like the themes! And this is a perfect example of why we need this feature :smile:

If you don't see the share button, it's probably because you need to check out and pull down the staging branch (the master branch does not reflect the current deployment on https://cs-playground-react.surge.sh but it is behind the staging branch by several commits, most of the changes on the staging branch are deployed at https://questionable-number.surge.sh which is just a test deployment to test out new changes).

I'm open to suggestions about where the menu goes, but if we put it there, I'd want to leave the share button where it is, meaning the only item in the hamburger menu for the time being would be the key bindings modal button. Which is fine, we can add more to it later, when more items become available.

The main "Contents" menu, I think should remain where it is, rather than inside the hamburger menu, otherwise, that space would be very empty when the menu was completely closed.

Maybe before the logic actually gets implemented, you can post a screen shot of what it would look like the way you are currently picturing it, and we can decide from there. What do you think?

Thanks again for your help!

mansisce commented 6 years ago

@no-stack-dub-sack I am going with your suggestion as of now. Please find the rough screenshot attached. Let me know if that is fine with you. Note: This is WIP screenshot.

screen shot 2018-03-14 at 12 56 22 am

no-stack-dub-sack commented 6 years ago

@mansisce that's perfect! let's use the Menu icon component from React feather for the hamburger icon, and instead of a bulleted list, lets match the style of the sidebar menu a bit more and just do something closer to this:

image

I know you said this is just a rough idea anyway, but just thought I'd show you what I was thinking - this is actually the code from the main menu, just modified with the browser's dev tools to hide the trash can icons and to center the text. I wonder if we can find a way to make the code in the renderMenuItemmethod from MenuMap.js reusable for this purpose? (that could come later though)

Let me know how you make out! Sorry there's such a delay between our communications, we must be in different time zones, though if you reach me on Gitter I may be able to communicate during work when you're usually online. Do you use Gitter at all? If so, we might be able to shorten the feedback loop so we don't have to slow things down...

no-stack-dub-sack commented 6 years ago

@mansisce also, just so you know, I'm going on holiday starting this Friday, and I won't be back until the 26th, so I probably won't be around as much, but I will do my best to check in on this when I can. I'm really looking forward to seeing what you come up with!

mansisce commented 6 years ago

@no-stack-dub-sack https://github.com/no-stack-dub-sack sorry for the huge delay is the response. I was very busy with office work. I have a couple of days time now. If this is not done then I will continue.

Yes, I do have Gitter account. I have just pinged you there.

Do you use Gitter at all? If so, we might be able to shorten the feedback loop so we don't have to slow things down...

On Thu, Mar 15, 2018 at 8:14 AM, Peter Weinberg notifications@github.com wrote:

@mansisce https://github.com/mansisce also, just so you know, I'm going on holiday starting this Friday, and I won't be back until the 26th, so I probably won't be around as much, but I will do my best to check in on this when I can. I'm really looking forward to seeing what you come up with!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/no-stack-dub-sack/cs-playground-react/issues/73#issuecomment-373242261, or mute the thread https://github.com/notifications/unsubscribe-auth/AFSxy09IFUTCF4XH1Gzelh7YEJgN4Z9zks5tedWEgaJpZM4SlX86 .

no-stack-dub-sack commented 6 years ago

@mansisce no worries at all! I've been away until now anyway, so nothing has gotten done on my end. It's yours if you still want it, but no pressure, only if you have the time and are excited about it :smile: