web-cat / pythy

Pythy – the Cloud-Based IDE for Novice Python Programmers
18 stars 3 forks source link

Save indicator (or button) needed in code editor #51

Closed s-edwards closed 10 years ago

s-edwards commented 11 years ago

Students (and instructors) do not always know whether or not the code currently visible in the code editor has been saved or not. Some visible state indicator that confirms changes have been saved would help alleviate this issue. Alternatively, a user suggested providing an explicit "save" button for student peace of mind.

I'm not sure a "save" button is a good idea (if it does nothing). Instead, my opinion is that correct auto-saving behavior together with a meaningful/valid state indicator would be preferable. Of course, if we have a visible state indicator, it could very well be a clickable control as well (that explicitly requests a "save"), maybe with modal feedback indicating whether unsaved changes were successfully saved, or no unsaved changes were present, or something else (e.g., if network connectivity problems are preventing saves).

allevato commented 11 years ago

The old version before the summer UI overhaul actually had a "Saved" span that burst in and faded out after a second every time the code was sent to the server. Some of the code might still be in code.js -- if the jQuery selector doesn't find the node then it just does nothing.

I never put it back in when I changed the toolbar to be the vertical one, but it should be easy to just re-add the element somewhere else.

On Friday, September 20, 2013, Stephen Edwards wrote:

Students (and instructors) do not always know whether or not the code currently visible in the code editor has been saved or not. Some visible state indicator that confirms changes have been saved would help alleviate this issue. Alternatively, a user suggested providing an explicit "save" button for student peace of mind.

I'm not sure a "save" button is a good idea (if it does nothing). Instead, my opinion is that correct auto-saving behavior together with a meaningful/valid state indicator would be preferable. Of course, if we have a visible state indicator, it could very well be a clickable control as well (that explicitly requests a "save"), maybe with modal feedback indicating whether unsaved changes were successfully saved, or no unsaved changes were present, or something else (e.g., if network connectivity problems are preventing saves).

— Reply to this email directly or view it on GitHubhttps://github.com/web-cat/pythy/issues/51 .

Tony Allevato Sent from my phone—pardon the typos

ArturAguiar commented 10 years ago

Yes, I found that the /code/update.js.coffee was already expecting an element with id "save-indicator". I put one in place. It works, but it doesn't look that good at the moment. Any input on how to make it look/feel better?

ArturAguiar commented 10 years ago

The save indicator now has a 'saved' as well as a 'saving' state. The 'saving' state has a rotating loading icon while the 'saved' state has a check icon.

Would a 'dirty' or 'unsaved' state be necessary? I realized that this extra state can be very useful if the user has connectivity problems. But I'm still trying to figure out how to implement it.

ArturAguiar commented 10 years ago

Save indicator is now fully functional and includes a "not saved" sate.