Replace "Saved" indicator with an icon #3572

susnux · 2022-12-14T00:36:47Z

📝 Summary

Part of Menu bar redesign #2836

Replaces the saving indicator with an icon, like the "active" users next to it. This also unifies the look on desktop and mobile devices.

🖼️ Screenshots

🏚️ Before	🏡 After

mobile	same as above

🏁 Checklist

Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
Sign-off message is added to all commits
Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
Documentation (README or documentation) has been updated or is not required

susnux · 2022-12-14T00:37:57Z

/compile

cypress · 2022-12-14T00:47:36Z

Test summary

115 • 0 • 0 • 0 • 1

Run details


Project	Text
Status	Passed
Commit	`69fdf6d`
Started	Dec 16, 2022 2:06 PM
Ended	Dec 16, 2022 2:11 PM
Duration	05:02 💡
OS	Linux Ubuntu -
Browser	Electron 106

View run in Cypress Dashboard ➡️

Flakiness

	cypress/e2e/nodes/Links.spec.js		1
1	test link marks > link preview > shows a link preview

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

raimund-schluessler · 2022-12-15T08:39:00Z

src/components/Editor/Status.vue

-			{{ lastSavedStatus }}
+		<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="saveStatusClass">
+			<CheckIcon v-if="saveStatusClass === 'saved'" />
+			<Loading v-else-if="saveStatusClass === 'saving'" />


We have a loading icon in the vue-components. It resembles the style of the legacy loading icon used all over Nextcloud. Might be good to use it here, to keep it uniform.

See https://nextcloud-vue-components.netlify.app/#/Components/NcLoadingIcon

Maybe we should then replace also the other usages of the loading icon within text with the icon from nextcloud-vue :)
But probably better on a follow up PR.

nimishavijay · 2022-12-15T09:27:29Z

This is a great improvement! One suggestion: we can remove the background and make it look visually similar to the formatting options.

I'm also thinking instead of the loading indicator we can use the floppy disk symbol, making it look the same as the save indicator on Office.

susnux · 2022-12-15T09:35:37Z

This is a great improvement! One suggestion: we can remove the background and make it look visually similar to the formatting options.

I added it to make it look similar to the active user list right to it, but maybe we should remove the background there too?

I'm also thinking instead of the loading indicator we can use the floppy disk symbol, making it look the same as the save indicator on Office.

Used the check icon following this comment by @jancborchardt #2734 (comment)

susnux · 2022-12-15T10:18:18Z

I pushed a commit to unify the look of the menu bar with the status & active user indicators:

Set same size as menu bar entries: 44px
Align icons vertically with menu bar
Remove background and add background when hovering like menu bar

It looks now like this:

voko.mp4

And BTW on error it would look like this:

raimund-schluessler · 2022-12-15T10:36:57Z

Would be nice to align the saving indicator with the three-dots-button above.

max-nextcloud

Code looks good to me. From my point of view this is quite a big improvement.
I'd say this can be merged as is. Aligning the icons would be nice but i don't think it should block this. Using NcLoadingIcon everywhere was already postponed to a follow up PR.

mejo- · 2022-12-15T13:47:35Z

Looks great, thanks a lot @susnux. Given that sometimes it takes quite some time until the status is saved, I wonder whether the current rotating loading spinner is a bit too annoying for something that should be safe to ignore in most cases. What do you think=

mejo- · 2022-12-15T13:47:57Z

But I'm also fine with discussing this in a follow-up issue/PR.

max-nextcloud · 2022-12-15T13:57:21Z

Looks great, thanks a lot @susnux. Given that sometimes it takes quite some time until the status is saved, I wonder whether the current rotating loading spinner is a bit too annoying for something that should be safe to ignore in most cases. What do you think=

Actually this is a good point. I think right now we only save every now and then to not overwhelm the server. So actually there are three states:

saved
modified but not saving yet
saving right now

I think modified is currently treated as saving and shows the spinning wheel. Maybe we could show a pencil instead. Since that requires some additional logic i'd also opt for a follow up issue / pr.

susnux · 2022-12-15T14:22:28Z

@mejo- Good point!
And after reading the comment by @jancborchardt mentioned above again, he already proposed using the dot indicator for unsaved changes.

Fixed this with the latest commit, it now looks like this:

vokoscreenNG-2022-12-15_15-20-03.mp4

nimishavijay · 2022-12-15T14:24:48Z

I think modified is currently treated as saving and shows the spinning wheel. Maybe we could show a pencil instead.

Suggestion: this icon used in Office

I can't find the MDI icon for this as it seems to be a custom icon, but it was suggested in the same comment by Jan that @susnux linked. We are trying to move towards MDI icons but this is used in Office and seems quite fitting as well :)
cc @jancborchardt

susnux · 2022-12-15T15:32:48Z

Would be nice to align the saving indicator with the three-dots-button above.

@raimund-schluessler While this is possible, it might be better to exchange the positions of the current users and the saving indicator and align the saving with the close and the current users with the ... menu.
Because the current user button expands to the left if an user joins the session, so the alignment would be useless:

(Nevertheless I aligned both button with the upper ones in the latest commit)

susnux · 2022-12-15T15:48:24Z

@nimishavijay Ok I think I misunderstood the comment, I thought we should use a check mark for saved and a dot for unsaved. But it should look like this (?):

vokoscreenNG-2022-12-15_16-44-59.mp4

nimishavijay

That is perfect, super nice! :) 🚀

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

* Set same size as menu bar entries: 44px * Align icons vertically with menu bar * Remove background and add background when hovering like menu bar Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

susnux · 2022-12-16T14:01:45Z

/compile

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

susnux added enhancement New feature or request design Experience, interaction, interface, … 3. to review labels Dec 14, 2022

susnux requested review from nimishavijay and max-nextcloud December 14, 2022 00:36

max-nextcloud force-pushed the enh/saving-indicator branch 2 times, most recently from 75043a0 to 06fcf14 Compare December 14, 2022 05:56

raimund-schluessler reviewed Dec 15, 2022

View reviewed changes

susnux force-pushed the enh/saving-indicator branch from 06fcf14 to 4ca72f3 Compare December 15, 2022 10:10

max-nextcloud approved these changes Dec 15, 2022

View reviewed changes

susnux force-pushed the enh/saving-indicator branch from 4ca72f3 to 72ed469 Compare December 15, 2022 14:22

susnux force-pushed the enh/saving-indicator branch from c657879 to 7a8cd45 Compare December 15, 2022 15:45

susnux requested a review from raimund-schluessler December 15, 2022 16:04

nimishavijay approved these changes Dec 16, 2022

View reviewed changes

susnux added 3 commits December 16, 2022 15:01

Replace "Saved" indicator with an icon

7f6f9c8

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

Unify status icon and session list with menu bar icons

6f30fbc

* Set same size as menu bar entries: 44px * Align icons vertically with menu bar * Remove background and add background when hovering like menu bar Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

Align active users button with close button above

90cff34

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

Use saving indicator as used in the office app

20825cf

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

susnux force-pushed the enh/saving-indicator branch from 7a8cd45 to 20825cf Compare December 16, 2022 14:01

Compile assets

69fdf6d

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

susnux mentioned this pull request Dec 16, 2022

Add NcSavingIndicatorIcon nextcloud-libraries/nextcloud-vue#3575

Merged

max-nextcloud merged commit 90b66ad into master Dec 16, 2022

delete-merged-branch bot deleted the enh/saving-indicator branch December 16, 2022 17:33

blizzz mentioned this pull request Feb 9, 2023

25.0.4 RC1 nextcloud/server#36560

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace "Saved" indicator with an icon #3572

Replace "Saved" indicator with an icon #3572

susnux commented Dec 14, 2022

susnux commented Dec 14, 2022

cypress bot commented Dec 14, 2022 •

edited

Loading

raimund-schluessler Dec 15, 2022

susnux Dec 15, 2022

nimishavijay commented Dec 15, 2022

susnux commented Dec 15, 2022

susnux commented Dec 15, 2022

raimund-schluessler commented Dec 15, 2022

max-nextcloud left a comment

mejo- commented Dec 15, 2022

mejo- commented Dec 15, 2022

max-nextcloud commented Dec 15, 2022

susnux commented Dec 15, 2022 •

edited

Loading

nimishavijay commented Dec 15, 2022

susnux commented Dec 15, 2022 •

edited

Loading

susnux commented Dec 15, 2022

nimishavijay left a comment

susnux commented Dec 16, 2022

Replace "Saved" indicator with an icon #3572

Replace "Saved" indicator with an icon #3572

Conversation

susnux commented Dec 14, 2022

📝 Summary

🖼️ Screenshots

🏁 Checklist

susnux commented Dec 14, 2022

cypress bot commented Dec 14, 2022 • edited Loading

Test summary

Run details

Flakiness

raimund-schluessler Dec 15, 2022

Choose a reason for hiding this comment

susnux Dec 15, 2022

Choose a reason for hiding this comment

nimishavijay commented Dec 15, 2022

susnux commented Dec 15, 2022

susnux commented Dec 15, 2022

raimund-schluessler commented Dec 15, 2022

max-nextcloud left a comment

Choose a reason for hiding this comment

mejo- commented Dec 15, 2022

mejo- commented Dec 15, 2022

max-nextcloud commented Dec 15, 2022

susnux commented Dec 15, 2022 • edited Loading

nimishavijay commented Dec 15, 2022

susnux commented Dec 15, 2022 • edited Loading

susnux commented Dec 15, 2022

nimishavijay left a comment

Choose a reason for hiding this comment

susnux commented Dec 16, 2022

cypress bot commented Dec 14, 2022 •

edited

Loading

susnux commented Dec 15, 2022 •

edited

Loading

susnux commented Dec 15, 2022 •

edited

Loading