Simplify sync button to reduce distractions

Features
1

The synchronize button is distracting because it has an animated icon and a large amount of debugging text that appears above it (and can significantly change). The button simply needs to communicate if a sync is needed, in progress, or done/successful. If it isn’t successful or if debugging information is needed, it should be accessible via Sync status in the Help menu.

The button should continue to let me trigger a sync or cancel a sync.

If the animated icon is deemed necessary/beneficial, it should not be animated if an OS level “prefers reduced motion” is selected. Or, be a built-in option to prefer reduced motion in Joplin for platforms that might lack such a setting.

This is an accessibility matter for some: ”For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.” Understanding Success Criterion 2.2.2: Pause, Stop, Hide | WAI | W3C

4 Likes
2

I'm linking to a pull request that should partially resolve this issue:

2 Likes
3

Thanks for making it possible to disable the animation.

Depending on which of the two lines you use in the "stylesheet for Joplin-wide app styles" below, you can either hide the debug messages entirely or change the messages so they do not wrap. Hiding the text means you may receive no indication when an error occurs.

If you do not want to hide the text, you can make the debug message not wrap by swapping which line is commented out in the CSS below. By default, Joplin wraps the debug text and that can cause the debug text to take a lot of space in the notebook sidebar when it is resized to be narrow. If there is an error, it is then easy enough to resize the sidebar to see the message.

There really should be a better way to communicate a sync error than small, low-contrast debug text.

.sidebar > div:last-of-type > div:first-of-type {
    /*text-wrap: nowrap; */
  display: none;
}