Fixup! nextcloud#7180 (review)

Signed-off-by: Mikhail Sazanov <m@sazanof.ru>
sazanof · Oct 15, 2022 · b120985 · b120985
1 parent b2b90c9
commit b120985
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 42 deletions.
diff --git a/src/components/NavigationOutbox.vue b/src/components/NavigationOutbox.vue
@@ -27,7 +27,7 @@
 		:title="t('mail', 'Outbox')"
 		:to="to">
 		<template #icon>
-			<IconLoading v-if="sending"
+			<NcLoadingIcon v-if="sending"
 				class="outbox-sending-icon"
 				:size="20" />
 			<IconOutbox v-else
@@ -45,7 +45,7 @@
 <script>
 import { NcAppNavigationItem as AppNavigationItem, NcCounterBubble as CounterBubble } from '@nextcloud/vue'
 import IconOutbox from 'vue-material-design-icons/InboxArrowUp'
-import IconLoading from 'vue-material-design-icons/Loading'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 
 const RETRY_COUNT = 5
 const RETRY_TIMEOUT = 10000
@@ -56,7 +56,7 @@ export default {
 		AppNavigationItem,
 		CounterBubble,
 		IconOutbox,
-		IconLoading,
+		NcLoadingIcon,
 	},
 	data() {
 		return {
@@ -124,7 +124,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.counter-bubble__counter) {
+::v-deep(.counter-bubble__counter) {
 	margin-right: 43px;
 }
 .outbox-opacity-icon {
@@ -134,15 +134,4 @@ export default {
 		opacity: 1;
 	}
 }
-.outbox-sending-icon {
-	animation:spin 0.4s linear infinite;
-}
-@keyframes spin {
-	0% {
-		transform: rotate(0deg)
-	}
-	100% {
-		transform: rotate(360deg)
-	}
-}
 </style>
diff --git a/src/components/Outbox.vue b/src/components/Outbox.vue
@@ -39,15 +39,12 @@
 						n('mail', 'Retrying send message', 'Retrying send {count} messages', failedMessages.length, {count: failedMessages.length})
 					}}
 				</div>
-				<NcButton
+				<span
 					class="outbox-retry--btn"
-					:title="t('mail', 'Send failed messages')"
-					:disabled="sending"
+					:class="{sending: sending}"
 					@click="sendFailedMessages">
-					<template #icon>
-						<EmailFastOutlineIcon :size="22" />
-					</template>
-				</NcButton>
+					{{ t('mail', 'Retry') }}
+				</span>
 			</div>
 			<!-- List -->
 			<AppContentList>
@@ -78,8 +75,6 @@ import EmptyMailbox from './EmptyMailbox'
 import OutboxMessageContent from './OutboxMessageContent'
 import OutboxMessageListItem from './OutboxMessageListItem'
 import NewMessageButtonHeader from './NewMessageButtonHeader'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
-import EmailFastOutlineIcon from 'vue-material-design-icons/EmailFastOutline'
 import logger from '../logger'
 
 export default {
@@ -93,8 +88,6 @@ export default {
 		OutboxMessageListItem,
 		OutboxMessageContent,
 		NewMessageButtonHeader,
-		NcButton,
-		EmailFastOutlineIcon,
 	},
 	data() {
 		return {
@@ -157,6 +150,9 @@ export default {
 			this.loading = false
 		},
 		sendFailedMessages() {
+			if (this.sending) {
+				return false
+			}
 			this.sending = true
 			const promises = []
 			this.failedMessages.map(async (msg) => {
@@ -207,7 +203,14 @@ export default {
 	}
 
 	.outbox-retry--btn {
-		margin-right: 8px;
+		cursor:pointer;
+		color: var(--color-primary-element);
+		font-weight: bold;
+		padding:0 8px;
+
+		&.sending {
+			opacity: 0.5;
+		}
 	}
 }
 

diff --git a/src/components/OutboxMessageListItem.vue b/src/components/OutboxMessageListItem.vue
@@ -33,19 +33,21 @@
 			{{ subjectForSubtitle }}
 		</template>
 		<template #indicator>
-			<IconAlertCircleOutline v-if="message.failed && !message.pending"
-				:title="details"
-				:size="20"
-				class="failed-icon error" />
-			<LoadingIcon v-else-if="message.failed && message.pending"
-				:title="details"
-				:size="20"
-				class="failed-icon pending" />
-			<div v-else-if="counter > 0 && !message?.aborted" class="failed-icon countdown">
-				<svg>
-					<circle r="12" cx="20" cy="20" />
-				</svg>
-				{{ counter }}
+			<div class="indicator">
+				<IconAlertCircleOutline v-if="message.failed && !message.pending"
+					:title="details"
+					:size="20"
+					class="failed-icon error" />
+				<NcLoadingIcon v-else-if="message.failed && message.pending"
+					:title="details"
+					:size="20"
+					class="failed-icon pending" />
+				<div v-else-if="counter > 0 && !message?.aborted" class="failed-icon countdown">
+					<svg>
+						<circle r="12" cx="20" cy="20" />
+					</svg>
+					{{ counter }}
+				</div>
 			</div>
 		</template>
 		<template v-if="!message.pending" slot="actions">
@@ -76,7 +78,7 @@ import { NcListItem as ListItem, NcActionButton as ActionButton } from '@nextclo
 import Avatar from './Avatar'
 import IconDelete from 'vue-material-design-icons/Delete'
 import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline'
-import LoadingIcon from 'vue-material-design-icons/Loading'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon'
 import { getLanguage, translate as t } from '@nextcloud/l10n'
 import OutboxAvatarMixin from '../mixins/OutboxAvatarMixin'
 import moment from '@nextcloud/moment'
@@ -95,7 +97,7 @@ export default {
 		ActionButton,
 		IconDelete,
 		IconAlertCircleOutline,
-		LoadingIcon,
+		NcLoadingIcon,
 		Send,
 	},
 	mixins: [
@@ -213,6 +215,11 @@ export default {
 <style lang="scss" scoped>
 .outbox-message {
 	list-style: none;
+
+	.indicator {
+		padding: 0 8px;
+	}
+
 	&.active {
 		background-color: var(--color-background-dark);
 		border-radius: 16px;