Reworking the code editor save/close system

jstrout

Right now our code editor looks like this:

There are two buttons at the bottom:

Cancel: throws out any edits made this edit session, leaving your code in memory exactly as it was, and closes the editor.
Save & Close: applies your edits to the code in memory and closes the editor.

These have the shortcuts ^C (control-C) and ^S (control-S) respectively. But this doesn't work well on Windows, where ^C should do Copy instead. And newbies quite reasonably think that "Save & Close" means their work has been saved to disk, which is not the case.

So after many deep and profound brain-things in my head, I think I'm going to change these to:

Save [^S]: saves your changes to disk, same as the save command on the command line without an argument. If you don't have a current disk file yet, it'll ask you for a save path.
Close [^W]: closes the editor, applying your edits to the code in memory.

This more or less matches the standard behavior of other desktop editors. On the Mac, I'll probably allow you to use command-S or control-S for Save, and similar for Close. So typity typity, then ^S ^W will be your standard habit to save and exit. Unless you're doing something dicey and you really want to try it out before saving, in which case you can just do ^W, try it out, and if you like it do a manual save (or edit again to use ^S).

Note that what we lose with this change is the ability to revert your changes entirely. Probably OK though since we have unlimited Undo (^Z).

The other possibility, since I'm reworking all this anyway, would be to remove the two buttons at the bottom, and instead put a proper menu bar at the top. My original intent was to keep it simple, but it should also be discoverable, and I don't much like that there are hidden shortcuts for all the editing commands (select all/cut/copy/paste/undo/redo). And if we had a proper menu bar, then I could add Revert in there, getting back the functionality we had lost. There would be the possibility (and temptation) to add other functionality too... maybe some simple refactoring tools, or code templates, etc. But I dunno... this is Mini Micro, maybe we should just keep it simple?

Any opinions on these changes are very welcome!

SynapticBytes

Without giving it too much thought, remember touch interfaces. Shortcuts generally don’t work, and menus can be problematic as well. Many websites I try to use menus on with my ipad, refresh the page as soon as I click the top level of the menu, as they think of it as a mouse click, instead of a hover.

So buttons work everywhere with a touch
interface, where other fancy UI elements may not.

Russell.

jstrout

Yes, that's a good point. There's no reason why menus can't work properly with touch; I've seen it done well. But it does require some attention.

On the other hand, menus that pop open when you hover (instead of on mouse-down) are an abomination anyway. 😉

jstrout

So another alternative is a toolbar of buttons. These can be faster/easier to use than menus, especially on a touch interface. The main drawback is they don't scale well to lots of commands.

So how many commands do we need? Since considering the idea of menus, here's what I've come up with so far...

File: Save, Save As, Close, Revert
Edit: Undo, Redo, Cut, Copy, Paste, Find/Replace
Code: (various templates/snippets, loaded from files in /sys and /usr)
Help (opens a little reference panel below the code editor)

Clearly "Code" would need to be a menu, but of course we can attach a menu to a button. The rest maybe could be just buttons, rather than tucking them away under menus.

jstrout

Here's a quick sketch of a possible toolbar layout.

Close: save edits to memory and close the editor. Shortcut: ^W.
Save: save edits to memory and to disk. Shortcut: ^S. Long-press to do "Save As" (specify a different save path) (shortcut: shift-^S)
Revert: load last saved version of the code from disk into the editor. No shortcut.
Undo/Redo: self-explanatory. Shortcuts ^Z and shift-^Z.
Cut, Copy, Paste: standard clipboard operations.
Find: shows a find/replace panel, similar to that in the Xojo IDE, below the editor (hiding Help if open).
Jump: presents menu with "Line number...", and then major points in the code (mostly function assignments)
Insert: presents menu with "Color..." and then a bunch of snippets defined by files in /sys somewhere, such as "if ... then", "for ... end for", "while ... end while", etc.
Help: shows the help panel below the editor, with reference info on the MiniScript language and all APIs.

I think this works. No need for a fancier desktop-style menu system. The buttons will be bright and friendly, and less hidden than menu commands.

One other button I haven't decided on is an "Options" button that lets you tweak font size, set the toolbar to auto-hide except when you mouse to the top of the screen, etc. But I'm not a fan of too many options, in general, so I don't know if that's needed or not.

The other thing we might add, since we have some room, is a little panel that displays the current file name/path. Might be helpful if you forgot what file you're editing.

As always, feedback is welcome!

SynapticBytes

What about a Replace option? global search & replace can be a pain if you decide you want to rename a variable for example.

Not sure the filename is needed, but if you have room, it can't hurt I suppose.

jstrout

Replace would be part of the Find panel, and lets you choose which instances to replace. The Find/Replace panel in the Xojo IDE (which I have in mind to mostly copy... after all, I mostly designed Xojo's in the first place 😛) is simple and powerful. Trust me, you're going to love it. 😊

jstrout

New toolbar is starting to shape up...

I'm using help tags that appear on mouse over, rather than persistent captions, since that also gives me a convenient place to put the keyboard shortcut. This also keeps the UI from being too cluttered, and gives you a few extra pixels for the code.

SynapticBytes

Icons look good.