search

mu-editor / mu

A small, simple editor for beginner Python programmers. Written in Python and Qt5.
http://codewith.mu
GNU General Public License v3.0
1.41k stars 435 forks source link

Make shortcuts and command discoverable #653

Open aoloe opened 6 years ago

aoloe commented 6 years ago

The website has a list of shortcuts (and, indirectly, a list of available commands).

But it would be useful if Mu itself could show them.

On the one side, the tooltips on the buttons could have the shortcuts in them... that is pretty common in many programs.

After having read (parts of) #116 , i think i understand (and appreciate) your aim for a useful minimalism. still, i would welcome it to have some sort of menu with the list of all (or most) available commands and their shortcuts, like most browser have nowadays. a small button with three lines or three dots are probably enough. If it's not way too long, the list of the commands can be flat (not nested in file, edit, ...).

I like to teach the people to go through the menus and learn the shortcuts by not triggering them...

ntoll commented 6 years ago

@aoloe +1 on this. Good idea.

devdanzin commented 3 years ago

In discussing the Save As feature (#1131), adding a way to display a list of shortcuts seemed like it could help making that feature easier to discover.

We'd need a UI design and to choose whether to populate the list from a document or code introspection. Easiest path I see (and maybe good enough for a POC) is to add a 'shortcut cheatsheet' modal, showing a text document in a plain panel, maybe reachable from a small button with interrogation mark near the gear.

I'd like to wait a bit for more input, then try to add a simple version of this. Thoughts?

devdanzin commented 3 years ago

The shortcuts are already listed in the docs, with nice, accessible descriptions: https://codewith.mu/en/tutorials/1.1/shortcuts and https://github.com/mu-editor/mu-editor.github.io/blob/master/en/tutorials/1.1/shortcuts.md

Using that source and adapting the admin dialog code, we get a simple proof of concept: shortcuts_dialog_01

What would be the best way forward:

dybber commented 3 years ago

I think it would be nice if it was a bit more like the splashscreen, a very concise list. Something like this (from Onshape.com): image

Also, we need to provide different versions depending on OS, e.g. with CMD/⌘ instead of CTRL on Mac Os.

devdanzin commented 3 years ago

Thanks @dybber !

This uses an HTML file in a QTextBrowser, so creating the OS-specific versions should be as easy as some string interpolation. We could also generate the list from code instead of keeping it manually up-to-date. I'm assuming we'd like to keep this as structured text for accessibility reasons.

Making a compact list, splash-screen like version is simple (modulo figuring out what the content needs to be). Making it look real good seems a bit harder (limited CSS support): shortcuts_dialog_02

For comparison, here's the same content rendered by a browser: shortcuts_dialog_03_browser

I gotta say I like the verbose version more, it has the same welcoming tone of other in-app help messages. Once you know your way around Mu and just want a quick refresher, the compact view should work better, if only by avoiding the need to scroll. Maybe we could add a link to the website version?

devdanzin commented 3 years ago

Wait, maybe we could use real Qt UI elements for better looks, and even use the long help as tooltips on hover?

carlosperate commented 3 years ago

The shortcuts will also be slightly different in macOS, the Mu modifier I believe is just ctrl->cmd, but QScintilla might have other shortcuts changed.

devdanzin commented 3 years ago

Thanks @carlosperate ! It wouldn't be too hard to render (or even generate at build time) a version with Mac shortcuts, but for that we need a list of what changes.

I tried a quick and dirty "ask Mu about its shortcuts" script, results below. It is incomplete for shortcuts not added as actions (either from modes or the button bar), it seems we have few of those. But it has some new shortcuts (tidy, web mode) that the docs still haven't included.

And from that we get yet another good data source that could be used for the shortcuts help contents in some way.

Mode       Ctrl+Shift+M    Change Mu's mode of behaviour.
New        Ctrl+N          Create a new Python script.
Load       Ctrl+O          Load a Python script.
Save       Ctrl+S          Save the current Python script.
Run        F5              Run your Python script.
Debug      F6              Debug your Python script.
REPL       Ctrl+Shift+I    Use the REPL for live coding.
Plotter    Ctrl+Shift+P    Plot data from your script or the REPL.
Zoom-in    Ctrl++          Zoom in (to make the text bigger).
Zoom-out   Ctrl+-          Zoom out (to make the text smaller).
Theme      F1              Toggle theme between day, night or high contrast.
Check      F2              Check your code for mistakes.
Tidy       F10             Tidy up the layout of your code.
Help       Ctrl+H          Show help about Mu in a browser.
Quit       Ctrl+Q          Quit Mu.

Mode shortcuts
python          Create code using standard Python 3.
    Run:            F5              Run your Python script.
    Debug:          F6              Debug your Python script.
    REPL:           Ctrl+Shift+I    Use the REPL for live coding.
    Plotter:        CTRL+Shift+P    Plot data from your script or the REPL.

circuitpython   Write code for boards running CircuitPython.
    Serial:         CTRL+Shift+U    Open a serial connection to your device.
    Plotter:        CTRL+Shift+P    Plot incoming REPL data.

microbit        Write MicroPython for the BBC micro:bit.
    Flash:          F3              Flash your code onto the micro:bit.
    Files:          F4              Access the file system on the micro:bit.
    REPL:           Ctrl+Shift+I    Use the REPL to live-code on the micro:bit.
    Plotter:        CTRL+Shift+P    Plot incoming REPL data.

esp             Write MicroPython on ESP8266/ESP32 boards.
    Run:            F5              Run your code directly on the ESP8266/ESP32 via the REPL.
    Files:          F4              Access the file system on ESP8266/ESP32.
    REPL:           Ctrl+Shift+I    Use the REPL to live-code on the ESP8266/ESP32.
    Plotter:        CTRL+Shift+P    Plot incoming REPL data.

web             Build simple websites with the "Flask" web framework.
    Run:            F5              Run the web server.
    Browse:         Ctrl+Shift+B    Open your website in a browser.
    Templates:      Ctrl+Shift+T    Load HTML templates used by your website.
    CSS:            Ctrl+Shift+C    Load CSS files used by your website.
    Images:         Ctrl+Shift+I    Open the directory containing images used by your website.

pyboard         Use MicroPython on the Pyboard line of boards
    Serial:         CTRL+Shift+U    Open a serial connection to your device.
    Plotter:        CTRL+Shift+P    Plot incoming REPL data.

debugger        Debug your Python 3 code.
    Stop:           Shift+F5        Stop the running code.
    Continue:       F5              Continue to run your Python script.
    Step Over:      F10             Step over a line of code.
    Step In:        F11             Step into a function.
    Step Out:       Shift+F11       Step out of a function.

pygamezero      Make games with Pygame Zero.
    Play:           F5              Play your Pygame Zero game.
    Images:         Ctrl+Shift+I    Show the images used by Pygame Zero.
    Fonts:          Ctrl+Shift+F    Show the fonts used by Pygame Zero.
    Sounds:         Ctrl+Shift+N    Show the sounds used by Pygame Zero.
    Music:          Ctrl+Shift+M    Show the music used by Pygame Zero.