Migrate icons to material design icons

Signed-off-by: greta <gretadoci@gmail.com>
nextcloud · Aug 24, 2022 · 253f93b · 253f93b
1 parent ca3f929
commit 253f93b
Show file tree

Hide file tree

Showing 27 changed files with 419 additions and 370 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue
@@ -220,23 +220,29 @@
 			</Tab>
 		</Tabs>
 		<div class="account-form__submit-buttons">
-			<button v-if="mode === 'auto'"
-				class="primary account-form__submit-button"
-				type="submit"
+			<ButtonVue v-if="mode === 'auto'"
+				class="account-form__submit-button"
+				type="primary"
+				native-type="submit"
 				:disabled="isDisabledAuto"
 				@click.prevent="onSubmit">
-				<span v-if="loading" class="icon-loading-small account-form__submit-button__spinner" />
+				<IconLoading v-if="loading" :size="20" />
+				<IconCheck v-else :size="20" />
 				{{ submitButtonText }}
-			</button>
+			</ButtonVue>
 
-			<button v-else-if="mode === 'manual'"
-				class="primary account-form__submit-button"
-				type="submit"
+			<ButtonVue v-else-if="mode === 'manual'"
+				class="account-form__submit-button"
+				type="primary"
+				native-type="submit"
 				:disabled="isDisabledManual"
 				@click.prevent="onSubmit">
-				<span v-if="loading" class="icon-loading-small account-form__submit-button__spinner" />
+				<template #icon>
+					<IconLoading v-if="loading" :size="20" />
+					<IconCheck v-else :size="20" />
+				</template>
 				{{ submitButtonText }}
-			</button>
+			</ButtonVue>
 		</div>
 		<div v-if="feedback" class="account-form--feedback">
 			{{ feedback }}
@@ -246,6 +252,9 @@
 
 <script>
 import { Tab, Tabs } from 'vue-tabs-component'
+import ButtonVue from '@nextcloud/vue/dist/Components/NcButton'
+import IconLoading from '@nextcloud/vue/dist/Components/NcLoadingIcon'
+import IconCheck from 'vue-material-design-icons/Check'
 import { translate as t } from '@nextcloud/l10n'
 
 import logger from '../logger'
@@ -256,6 +265,9 @@ export default {
 	components: {
 		Tab,
 		Tabs,
+		ButtonVue,
+		IconLoading,
+		IconCheck,
 	},
 	props: {
 		displayName: {
@@ -610,11 +622,6 @@ input[type='radio'][disabled] + label {
 	display: flex;
 	align-items: center;
 }
-.account-form__submit-button__spinner {
-	margin: 0 10px 0 0;
-	height: auto;
-	width: auto;
-}
 .account-form--feedback {
 	color: var(--color-text-maxcontrast);
 	margin-top: 5px;

diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue
@@ -111,6 +111,7 @@ import TrustedSenders from './TrustedSenders'
 import SieveAccountForm from './SieveAccountForm'
 import SieveFilterForm from './SieveFilterForm'
 import Logger from '../logger'
+
 export default {
 	name: 'AccountSettings',
 	components: {