Improved styling of saving indicator

[susnux]

• Target version: master

Summary

Improved the styling of the saving indicator on small screen sizes, previously the contributors menu was overlapped by the saving indicator. Also on dark color mode the saving indicator was inconveniently sticking out by its bright (white) background color, it is now set to the main background color.

Note the overlapping of the indicator and menu and the background color of the saving indicator on lower screen width: Before

https://user-images.githubusercontent.com/1855448/179947888-e0177b7b-0b9d-456e-a6c0-74e9ef11898b.mp4

After

https://user-images.githubusercontent.com/1855448/179947973-d149c688-447d-43bc-a362-a575a2142507.mp4

[susnux]

If your browser does not support mp4, this is the important part (screenshots): Before:

After:

[susnux]

/compile

[juliusknorr]

@jancborchardt I'm wondering if we should fine-tune the circle indicator a bit. It doesn't seem to obvious what it is about in its current state. The original design spec is from https://github.com/nextcloud/text/issues/2211

Could be combined with participants, showing a circle indicator on unsaved changes, and in the participants menu we can show extra text for "Last saved x minutes ago" on top of the participant list → let’s do this one

[susnux]

If understand that correctly there should be only one button / icon (the participants menu) with the saved indicator as the outline?

Or a check mark icon within the saved indicator?

[mejo-]

If understand that correctly there should be only one button / icon (the participants menu) with the saved indicator as the outline?

Or a check mark icon within the saved indicator?

From https://github.com/nextcloud/text/issues/2211 my understanding would be that we want an outline around the avatar as a saved indicator. Additionally, a text "Last saved x minutes ago" on the top of the participants list.

Not sure whether all the stacked avatars should have the outline though. I guess it looks weird if only one has it.

[susnux]

To visualize:

Or a check mark icon within the saved indicator?

If understand that correctly there should be only one button / icon (the participants menu) with the saved indicator as the outline?

Additionally, a text "Last saved x minutes ago" on the top of the participants list.

This is already implemented

[mejo-]

If understand that correctly there should be only one button / icon (the participants menu) with the saved indicator as the outline?

Thanks for the screenshots @susnux! How would this look like with several participants being active in the document?

[susnux]

How would this look like with several participants being active in the document?

I would say like this:

[juliusknorr]

Looks good to me, @jancborchardt what do you think?

[jancborchardt]

I'd say for consistency it would be nice to use the same icon as we use in Office. :) It has a little dot indicator which is a bit more widely known and we can use it instead of the color border.

• Saved indicator: https://fonts.google.com/icons?selected=Material%20Icons%3Acheck%3A
• For unsaved changes: https://gitlab.collabora.com/productivity/online-branding/-/blob/master/themes/nextcloud/images/lc_savemodified_branding.svg

<svg width="24px" height="24px" fill="#000000" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/><circle cx="18" cy="18" r="3" fill="#0082c9" style="paint-order:markers fill stroke"/></svg> 

[mejo-]

Let's get this merged as it fixes the ugly white filled circle in dark mode. It doesn't replace the "saved" indicator with an icon (as suggested in https://github.com/nextcloud/text/pull/2734#issuecomment-1195291454), though. Let's tackle this in a follow-up PR - it's also tracked in https://github.com/nextcloud/text/issues/2836.

[mejo-]

/compile

[mejo-]

/backport to stable25

[mejo-]

/compile

[mejo-]

/backport 6bef7e69d559a3be961d353d1e8686402bcbea97 to stable25

[backportbot-nextcloud[bot]]

The backport to stable25 failed. Please do this backport manually.