Allow user to hide "All changes saved" / "Saving..." Text

[bearMountain]

I understand the value of that text to the user, but I request the ability to hide that.

Request:

• When user hovers over "All changes saved", it changes to "Hide" hyperlink.
• If user clicks on "Hide", this text will no longer dynamically display the saved status it will just say "Save Status: Hidden"
• Click on "Save Status: Hidden" to reenable dynamic status display

Reasoning:

• For me, it is very distracting to try to type where there is something changes on and off depending of if I pause when typing. It makes me anxious :)

Note:

• I'm not married to the UX that I proposed above. Anything that would allow me to disable that dynamic text would be fine. I just wanted to at least give a proposal.

[moughxyz]

Hmm. True that it is kind of anxiety-producing. But it can also have the opposite effect because of peace of mind. An option would be good. I'll leave this open so I can implement something like this when I can. For now, I've dimmed the color of it a little bit so it's not as visible.

(For desktop clients, the app downloads the source code every time you open it, so you should see this change automatically on next launch)

[bearMountain]

I love to try a fix on my fork. If you get a moment to point me in the right direction of where to make a change, I'll give it a try.

[moughxyz]

Do you want to run the web app locally? Or a forked version of the Electron app? Because currently the Electron app downloads the latest JS/CSS from the production server.

In terms of running the web app locally, I'll update the readme right now with directions on how to do that.

In terms of where the change would be, you'd edit around here:

https://github.com/standardnotes/web/blob/master/app/assets/templates/frontend/editor.html.haml#L8

Perhaps you'd change:

.save-status {{ctrl.noteStatus}}

to:

.save-status{"ng-click" => "ctrl.hideSaveStatus()", "ng-if" => "ctrl.showSaveStatus"} {{ctrl.noteStatus}}

and then in editor.js, somewhere around here: https://github.com/standardnotes/web/blob/master/app/assets/javascripts/app/frontend/controllers/editor.js#L68

you'd implement the function as well as read from local storage:

this.showSaveStatus = localStorage.getItem("showSaveStatus") || true;

this.hideSaveStatus = function() {
     this.showSaveStatus = false;
     localStorage.setItem("showSaveStatus", this.showSaveStatus);
}

[moughxyz]

Updated the readme with instructions on running locally.

[mbigras]

Has an option to hide the "All changes saved" and "Saving..." text been implemented?

[arielsvg]

We've added a "No distractions" theme that strips away all these status indicators if that's what you're looking for!