feat: improve collaborator style

Signed-off-by: Luka Trovic <luka@nextcloud.com>

Author: luka-nextcloud

src/components/EditorWrapper.vue

@@ -54,10 +54,17 @@
 					:autohide="autohide"
 					:loaded.sync="menubarLoaded">
 					<div class="text-editor__session-list">
-						<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass">
+						<div v-if="isMobile" v-tooltip="lastSavedStatusTooltip" :class="saveStatusClass" />
+						<div v-else
+							v-tooltip="lastSavedStatusTooltip"
+							class="save-status"
+							:class="lastSavedStatusClass">
 							{{ lastSavedStatus }}
 						</div>
 						<SessionList :sessions="filteredSessions">
+							<p slot="lastSaved" class="last-saved">
+								{{ t('text', 'Last saved') }}: {{ lastSavedString }}
+							</p>
 							<GuestNameDialog v-if="isPublic && !currentSession.userId" :session="currentSession" />
 						</SessionList>
 					</div>
@@ -323,6 +330,12 @@ export default {
 				},
 			}
 		},
+		saveStatusClass() {
+			if (this.syncError && this.lastSavedString !== '') {
+				return 'save-error'
+			}
+			return this.dirtyStateIndicator ? 'saving-status' : 'saved-status'
+		},
 	},
 	watch: {
 		displayed() {
@@ -925,4 +938,39 @@ export default {
 	#files-public-content {
 		height: 100%;
 	}
+
+	.saved-status,.saving-status {
+		display: inline-flex;
+		padding: 0;
+		text-overflow: ellipsis;
+		color: var(--color-text-lighter);
+		position: relative;
+		background-color: white;
+		width: 38px !important;
+		height: 38px !important;
+		left: 25%;
+		z-index: 2;
+		top: 0px;
+	}
+
+	.saved-status {
+		border: 2px solid #04AA6D;
+		border-radius: 50%;
+	}
+
+	.saving-status {
+		border: 2px solid #f3f3f3;
+		border-top: 2px solid #3498db;
+		border-radius: 50%;
+		animation: spin 2s linear infinite;
+	}
+
+	@keyframes spin {
+		0% { transform: rotate(0deg); }
+		100% { transform: rotate(360deg); }
+	}
+
+	.last-saved {
+		padding: 6px;
+	}
 </style>

src/components/SessionList.vue

@@ -33,12 +33,13 @@
 		</button>
 		<template #default>
 			<div class="session-menu">
+				<slot name="lastSaved" />
 				<ul>
 					<slot />
 					<li v-for="session in participantsPopover"
 						:key="session.id"
 						:style="avatarStyle(session)">
-						<AvatarWrapper :session="session" :size="32" />
+						<AvatarWrapper :session="session" :size="36" />
 						<span class="session-label">
 							{{ session.userId ? session.displayName : (session.guestName ? session.guestName : t('text', 'Guest')) }}
 						</span>
@@ -144,17 +145,19 @@ export default {
 		}
 
 		.avatar-wrapper {
-			margin: 0 -8px 0 0;
+			margin: 0 -18px 0 0;
 			z-index: 1;
 			border-radius: 50%;
 			overflow: hidden;
 			box-sizing: content-box !important;
+			height: 36px;
+			width: 36px;
 		}
 
 		.icon-more, .icon-group, .icon-settings-dark {
 			background-color: var(--color-background-dark);
-			width: 44px;
-			height: 44px;
+			width: 40px;
+			height: 40px;
 			margin: 0 6px 0 0;
 		}
 	}
@@ -170,8 +173,8 @@ export default {
 			padding: 6px;
 
 			.avatar-wrapper {
-				height: 32px;
-				width: 32px;
+				height: 36px;
+				width: 36px;
 				margin-right: 6px;
 			}