Improve the NewGroupConversation confirmation

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
nextcloud · Oct 5, 2023 · 8aea99d · 8aea99d
1 parent f402e2d
commit 8aea99d
Showing 1 changed file with 59 additions and 43 deletions.
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -22,9 +22,9 @@
 <template>
 	<div class="wrapper">
 		<!-- New group form -->
-		<NcModal v-if="modal"
+		<NcModal v-if="modal && page !== 2"
+			class="conversation-form"
 			:container="container"
-			size="normal"
 			@close="closeModal">
 			<h2 class="new-group-conversation__header">
 				{{ t('spreed', 'Create a new group conversation') }}
@@ -83,37 +83,6 @@
 				<SetContacts v-if="page === 1"
 					class="new-group-conversation__content"
 					:conversation-name="conversationNameTrimmed" />
-
-				<!-- Third page -->
-				<div v-else-if="page === 2" class="new-group-conversation__content">
-					<template v-if="isLoading && !error">
-						<template v-if="!success">
-							<div class="icon-loading confirmation__icon" />
-							<p class="confirmation__warning">
-								{{ t('spreed', 'Creating your conversation') }}
-							</p>
-						</template>
-						<template v-if="success && isPublic">
-							<div class="icon-checkmark confirmation__icon" />
-							<p class="confirmation__warning">
-								{{ t('spreed', 'All set') }}
-							</p>
-							<NcButton id="copy-link"
-								ref="copyLink"
-								type="secondary"
-								class="confirmation__copy-link"
-								@click="onClickCopyLink">
-								{{ t('spreed', 'Copy conversation link') }}
-							</NcButton>
-						</template>
-					</template>
-					<template v-else>
-						<div class="icon-error confirmation__icon" />
-						<p class="confirmation__warning">
-							{{ t('spreed', 'Error while creating the conversation') }}
-						</p>
-					</template>
-				</div>
 			</div>
 
 			<!-- Navigation: different buttons with different actions and
@@ -145,23 +114,58 @@
 					@click="handleCreateConversation">
 					{{ t('spreed', 'Create conversation') }}
 				</NcButton>
-				<!-- Third page -->
-				<NcButton v-if="page===2 && (error || isPublic)"
-					ref="closeButton"
-					type="primary"
-					class="new-group-conversation__button"
-					@click="closeModal">
-					{{ t('spreed', 'Close') }}
-				</NcButton>
 			</div>
 		</NcModal>
+
+		<!-- Third page : this is the confirmation page-->
+		<NcModal v-else-if="page === 2"
+			:container="container"
+			@close="closeModal">
+			<NcEmptyContent>
+				<template #icon>
+					<Check v-if="!error && success && isPublic" :size="64" />
+					<div v-if="isLoading && !error && !success" class="icon-loading spinner" />
+					<AlertCircle v-if="error" :size="64" />
+				</template>
+
+				<template #description>
+					<p v-if="isLoading && !error && !success" class="confirmation__warning">
+						{{ t('spreed', 'Creating the conversation …') }}
+					</p>
+					<p v-if="!error && success && isPublic" class="confirmation__warning">
+						{{ t('spreed', 'All set, the conversation "{conversationName}" was created.', { conversationName }) }}
+					</p>
+					<p v-if="error" class="confirmation__warning">
+						{{ t('spreed', 'Error while creating the conversation') }}
+					</p>
+				</template>
+
+				<template #action>
+					<NcButton v-if="error || isPublic"
+						ref="closeButton"
+						type="primary"
+						@click="closeModal">
+						{{ t('spreed', 'Close') }}
+					</NcButton>
+					<NcButton v-if="!error && success && isPublic"
+						id="copy-link"
+						ref="copyLink"
+						type="secondary"
+						@click="onClickCopyLink">
+						{{ t('spreed', 'Copy conversation link') }}
+					</NcButton>
+				</template>
+			</NcEmptyContent>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 
 import { getCapabilities } from '@nextcloud/capabilities'
 import { showError } from '@nextcloud/dialogs'
+import Check from 'vue-material-design-icons/Check.vue'
+import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
@@ -171,6 +175,7 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import ConversationAvatarEditor from '../../ConversationSettings/ConversationAvatarEditor.vue'
 import ListableSettings from '../../ConversationSettings/ListableSettings.vue'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import SetContacts from './SetContacts/SetContacts.vue'
 
 import { useIsInCall } from '../../../composables/useIsInCall.js'
@@ -204,10 +209,13 @@ export default {
 		ListableSettings,
 		NcButton,
 		NcCheckboxRadioSwitch,
+		NcEmptyContent,
 		NcModal,
 		NcPasswordField,
 		NcTextField,
 		SetContacts,
+		Check,
+		AlertCircle,
 	},
 
 	mixins: [participant],
@@ -263,6 +271,9 @@ export default {
 		selectedParticipants() {
 			return this.$store.getters.selectedParticipants
 		},
+		getSize() {
+			return this.page === 2 ? '' : 'normal'
+		}
 	},
 
 	watch: {
@@ -527,12 +538,13 @@ export default {
 		margin-left: auto;
 	}
 }
-
-:deep(.modal-wrapper .modal-container) {
+.conversation-form{
+	:deep(.modal-wrapper .modal-container) {
 	display: flex !important;
 	flex-direction: column;
 	height: 90%;
 	overflow: hidden !important;
+	}
 }
 
 :deep(.app-settings-section__hint) {
@@ -546,4 +558,8 @@ export default {
 	}
 }
 
+:deep(.empty-content__action) {
+	gap: 10px;
+}
+
 </style>