Use saving indicator as used in the office app

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

src/components/Editor/Status.vue

@@ -23,9 +23,8 @@
 <template>
 	<div class="text-editor__session-list">
 		<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="saveStatusClass">
-			<CheckIcon v-if="saveStatusClass === 'saved'" />
-			<CircleIcon v-else-if="saveStatusClass === 'saving'" />
-			<WarnIcon v-else />
+			<SavingIndicator :saving="saveStatusClass === 'saving'"
+				:error="saveStatusClass === 'error'" />
 		</div>
 		<SessionList :sessions="sessions">
 			<p slot="lastSaved" class="last-saved">
@@ -38,8 +37,8 @@
 
 <script>
 
+import SavingIndicator from '../SavingIndicator.vue'
 import { ERROR_TYPE } from './../../services/SyncService.js'
-import { Check as CheckIcon, CircleMedium as CircleIcon, Warn as WarnIcon } from '../icons.js'
 import { Tooltip } from '@nextcloud/vue'
 import {
 	useIsMobileMixin,
@@ -50,9 +49,7 @@ export default {
 	name: 'Status',
 
 	components: {
-		CheckIcon,
-		CircleIcon,
-		WarnIcon,
+		SavingIndicator,
 		SessionList: () => import(/* webpackChunkName: "editor-collab" */'./SessionList.vue'),
 		GuestNameDialog: () => import(/* webpackChunkName: "editor-guest" */'./GuestNameDialog.vue'),
 	},
@@ -156,10 +153,6 @@ export default {
 		&:hover {
 			background-color: var(--color-background-hover);
 		}
-
-		&.error {
-			color: var(--color-error)
-		}
 	}
 
 	.last-saved {

src/components/SavingIndicator.vue

@@ -0,0 +1,76 @@
+<!--
+  - @copyright Copyright (c) 2022
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<span class="material-design-icon">
+		<CheckIcon />
+		<span class="saving-indicator-container" :class="{error, saving}">
+			<CircleMedium class="saving-indicator" />
+		</span>
+	</span>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { Check as CheckIcon, CircleMedium } from './icons.js'
+
+export default defineComponent({
+	name: 'SavingIndicator',
+	components: {
+		CheckIcon,
+		CircleMedium,
+	},
+	props: {
+		saving: {
+			type: Boolean,
+			default: false,
+			required: false,
+		},
+		error: {
+			type: Boolean,
+			default: false,
+			required: false,
+		},
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.saving-indicator-container {
+	display: none;
+	position: absolute;
+
+	&.error,&.saving {
+		display: inline;
+		>span {
+			position: relative;
+			top: 6px;
+			left: 6px;
+		}
+	}
+
+	&.saving > span {
+		color: var(--color-primary);
+	}
+	&.error > span {
+		color: var(--color-error);
+	}
+}
+</style>