Migrate icons to material design icons

Signed-off-by: greta <gretadoci@gmail.com>

package.json

@@ -42,7 +42,7 @@
     "@nextcloud/logger": "^2.2.1",
     "@nextcloud/moment": "^1.2.1",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^5.4.0",
+    "@nextcloud/vue": "^6.0.0-beta.1",
     "@nextcloud/vue-dashboard": "^2",
     "@riophae/vue-treeselect": "^0.4.0",
     "@vue/babel-preset-app": "^5.0.6",

src/components/AccountSettings.vue

@@ -102,6 +102,8 @@ import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSectio
 import TrustedSenders from './TrustedSenders'
 import SieveAccountForm from './SieveAccountForm'
 import SieveFilterForm from './SieveFilterForm'
+import Logger from '../logger'
+
 export default {
 	name: 'AccountSettings',
 	components: {
@@ -155,6 +157,19 @@ export default {
 		},
 	},
 	methods: {
+		onAccountUpdated(data) {
+			Logger.log('saving data', { data })
+			return this.$store
+				.dispatch('updateAccount', {
+					...data,
+					accountId: this.account.id,
+				})
+				.then((account) => account)
+				.catch((error) => {
+					Logger.error('account update failed:', { error })
+					throw error
+				})
+		},
 		handleClick() {
 			this.$refs.accountForm.$el.scrollIntoView({
 				behavior: 'smooth',

src/components/AliasSettings.vue

@@ -38,34 +38,35 @@
 		</ul>
 
 		<div v-if="!account.provisioningId">
-			<button v-if="!showForm" class="primary icon-add" @click="showForm = true">
+			<Button v-if="!showForm" class="primary icon-add" @click="showForm = true">
 				{{ t('mail', 'Add alias') }}
-			</button>
+			</Button>
 
-			<button v-if="showForm"
+			<Button v-if="showForm"
 				class="primary"
 				:class="loading ? 'icon-loading-small-dark' : 'icon-checkmark-white'"
 				type="submit"
 				form="createAliasForm"
 				:disabled="loading">
 				{{ t('mail', 'Create alias') }}
-			</button>
-			<button v-if="showForm"
+			</Button>
+			<Button v-if="showForm"
 				class="button-text"
 				@click="resetCreate">
 				{{ t("mail", "Cancel") }}
-			</button>
+			</Button>
 		</div>
 	</div>
 </template>
 
 <script>
+import Button from '@nextcloud/vue/dist/Components/Button'
 import logger from '../logger'
 import AliasForm from './AliasForm'
 
 export default {
 	name: 'AliasSettings',
-	components: { AliasForm },
+	components: { AliasForm, Button },
 	props: {
 		account: {
 			type: Object,
@@ -140,7 +141,4 @@ input {
 	width: 195px;
 }
 
-.icon-add {
-	background-image: var(--icon-add-fff);
-}
 </style>

src/components/AppSettingsMenu.vue

@@ -1,11 +1,12 @@
 <template>
 	<div>
-		<router-link to="/setup" class="icon-add-white app-settings-button button primary new-button">
+		<router-link to="/setup" class="app-settings-button button primary new-button">
+			<IconAdd :size="20" />
 			{{ t('mail', 'Add mail account') }}
 		</router-link>
 
 		<p v-if="loadingOptOutSettings" class="app-settings">
-			<span class="icon-loading-small" />
+			<IconLoading :size="20" />
 			{{ optOutSettingsText }}
 		</p>
 		<p v-else class="app-settings">
@@ -19,7 +20,7 @@
 		</p>
 
 		<p v-if="toggleAutoTagging" class="app-settings">
-			<span class="icon-loading-small" />
+			<IconLoading :size="20" />
 			{{ autoTaggingText }}
 		</p>
 		<p v-else class="app-settings">
@@ -33,7 +34,7 @@
 		</p>
 
 		<p v-if="loadingAvatarSettings" class="app-settings avatar-settings">
-			<span class="icon-loading-small" />
+			<IconLoading :size="20" />
 			{{ t('mail', 'Use Gravatar and favicon avatars') }}
 		</p>
 		<p v-else class="app-settings">
@@ -47,7 +48,7 @@
 		</p>
 
 		<p v-if="loadingReplySettings" class="app-settings reply-settings">
-			<span class="icon-loading-small" />
+			<IconLoading :size="20" />
 			{{ replySettingsText }}
 		</p>
 		<p v-else class="app-settings">
@@ -98,6 +99,8 @@ import { showError } from '@nextcloud/dialogs'
 import Button from '@nextcloud/vue/dist/Components/Button'
 
 import IconInfo from 'vue-material-design-icons/Information'
+import IconAdd from 'vue-material-design-icons/Plus'
+import IconLoading from '@nextcloud/vue/dist/Components/LoadingIcon'
 import IconEmail from 'vue-material-design-icons/Email'
 import Logger from '../logger'
 import KeyboardShortcuts from '../views/KeyboardShortcuts'
@@ -109,6 +112,8 @@ export default {
 		KeyboardShortcuts,
 		IconInfo,
 		IconEmail,
+		IconAdd,
+		IconLoading,
 	},
 	data() {
 		return {
@@ -230,7 +235,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-p.app-settings span.icon-loading-small {
+p.app-settings span.loading-icon {
 	display: inline-block;
 	vertical-align: middle;
 	padding: 5px 0;
@@ -239,7 +244,7 @@ p.app-settings {
 	padding: 10px 0;
 }
 .app-settings-button {
-	display: block;
+	display: inline-flex;
 width: 100%;
 	background-position: 10px center;
 	text-align: left;
@@ -249,6 +254,7 @@ width: 100%;
 	color: var(--color-main-background);
 	//this style will be removed after we migrate also the  'add mail account' to material design
 	padding-left: 34px;
+	gap: 4px;
 }
 .app-settings-link {
 	text-decoration: underline;

src/components/Envelope.vue

@@ -639,7 +639,7 @@ export default {
 .junk-icon-style {
 	opacity: .2;
 	display: flex;
-	top: 17px;
+	top: 9px;
 	left: 34px;
 	background-size: 16px;
 	height: 20px;
@@ -739,14 +739,14 @@ list-item-style.draft .app-content-list-item-line-two {
 }
 ::v-deep.icon-important.app-content-list-item-star {
 	position: absolute;
-	top: 17px;
+	top: 9px;
 	z-index: 1;
 }
 .app-content-list-item-star.favorite-icon-style {
 	display: inline-block;
 	position: absolute;
-	margin-bottom: 28px;
-	margin-left: 28px;
+	margin-bottom: 25px;
+	margin-left: 27px;
 	cursor: pointer;
 	z-index: 1;
 	&:hover {

src/components/MailboxPicker.vue

@@ -49,16 +49,19 @@
 				<h2>{{ t('mail', 'No more submailboxes in here') }}</h2>
 			</div>
 			<div class="buttons">
-				<button class="primary" :disabled="loading || (!allowRoot && !selectedMailboxId)" @click="onSelect">
-					<span v-if="loading" class="icon-loading-small spinner" />
+				<Button type="primary" :disabled="loading || (!allowRoot && !selectedMailboxId)" @click="onSelect">
+					<span v-if="loading" class="spinner">
+						<IconLoading> :size="20" />
+						</iconloading></span>
 					{{ loading ? labelSelectLoading : labelSelect }}
-				</button>
+				</Button>
 			</div>
 		</div>
 	</Modal>
 </template>
 <script>
 import Modal from '@nextcloud/vue/dist/Components/Modal'
+import IconLoading from '@nextcloud/vue/dist/Components/LoadingIcon'
 import IconBreadcrumb from 'vue-material-design-icons/ChevronRight'
 import IconInbox from 'vue-material-design-icons/Home'
 import IconDraft from 'vue-material-design-icons/Pencil'
@@ -81,6 +84,7 @@ export default {
 		IconTrash,
 		IconFolder,
 		IconBreadcrumb,
+		IconLoading,
 	},
 	props: {
 		account: {

src/components/MessageAttachment.vue

@@ -34,28 +34,41 @@
 			<ActionButton
 				v-if="isCalendarEvent"
 				class="attachment-import calendar"
-				:icon="{'icon-add': !loadingCalendars, 'icon-loading-small': loadingCalendars}"
 				:disabled="loadingCalendars"
 				@click.stop="loadCalendars">
+				<template #icon>
+					<IconAdd v-if="!loadingCalendars" :size="20" />
+					<IconLoading v-if-else="loadingCalendars" :size="20" />
+				</template>
 				{{ t('mail', 'Import into calendar') }}
 			</ActionButton>
-			<ActionButton icon="icon-download"
+			<ActionButton
 				class="attachment-download"
 				@click="download">
+				<template #icon>
+					<IconDownload :size="20" />
+				</template>
 				{{ t('mail', 'Download attachment') }}
 			</ActionButton>
 			<ActionButton
 				class="attachment-save-to-cloud"
-				:icon="{'icon-folder': !savingToCloud, 'icon-loading-small': savingToCloud}"
 				:disabled="savingToCloud"
 				@click.stop="saveToCloud">
+				<template #Icon>
+					<IconSave v-if="!savingToCloud" :size="20" />
+					<IconLoading v-if-else="savingToCloud" :size="20" />
+				</template>
 				{{ t('mail', 'Save to Files') }}
 			</ActionButton>
 			<div
 				v-on-click-outside="closeCalendarPopover"
 				class="popovermenu bubble attachment-import-popover hidden"
 				:class="{open: showCalendarPopover}">
-				<PopoverMenu :menu="calendarMenuEntries" />
+				<PopoverMenu :menu="calendarMenuEntries">
+					<template #icon>
+						<IconAdd :size="20" />
+					</template>
+				</PopoverMenu>
 			</div>
 		</Actions>
 	</div>
@@ -70,7 +83,9 @@ import { mixin as onClickOutside } from 'vue-on-click-outside'
 import PopoverMenu from '@nextcloud/vue/dist/Components/PopoverMenu'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
-
+import IconLoading from '@nextcloud/vue/dist/Components/LoadingIcon'
+import IconAdd from 'vue-material-design-icons/Plus'
+import IconSave from 'vue-material-design-icons/ContentSave'
 import Logger from '../logger'
 
 import { downloadAttachment, saveAttachmentToFiles } from '../service/AttachmentService'
@@ -82,6 +97,9 @@ export default {
 		PopoverMenu,
 		Actions,
 		ActionButton,
+		IconAdd,
+		IconLoading,
+		IconSave,
 	},
 	mixins: [onClickOutside],
 	props: {
@@ -143,7 +161,6 @@ export default {
 		calendarMenuEntries() {
 			return this.calendars.map((cal) => {
 				return {
-					icon: 'icon-add',
 					text: cal.displayname,
 					action: this.importCalendar(cal.url),
 				}

src/components/MessageHTMLBody.vue

@@ -20,7 +20,7 @@
 				</ActionButton>
 			</Actions>
 		</div>
-		<div v-if="loading" class="icon-loading" />
+		<IconLoading v-if="loading" />
 		<div id="message-container" :class="{hidden: loading, scroll: !fullHeight}">
 			<iframe ref="iframe"
 				class="message-frame"
@@ -38,6 +38,7 @@ import PrintScout from 'printscout'
 import { trustSender } from '../service/TrustedSenderService'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
+import IconLoading from '@nextcloud/vue/dist/Components/LoadingIcon'
 
 import logger from '../logger'
 import MdnRequest from './MdnRequest'
@@ -49,6 +50,7 @@ export default {
 		MdnRequest,
 		Actions,
 		ActionButton,
+		IconLoading,
 	},
 	props: {
 		url: {

src/components/NavigationMailbox.vue

@@ -122,7 +122,11 @@
 						:size="20" />
 				</template>
 			</ActionInput>
-			<ActionText v-if="showSaving" icon="icon-loading-small">
+			<ActionText v-if="showSaving">
+				<template #icon>
+					<IconLoading
+						:size="20" />
+				</template>
 				{{ t('mail', 'Saving') }}
 			</ActionText>
 			<ActionButton v-if="!account.isUnified && hasDelimiter && !mailbox.specialRole && !hasSubMailboxes"
@@ -214,6 +218,7 @@ import IconInbox from 'vue-material-design-icons/Home'
 import IconAllInboxes from 'vue-material-design-icons/InboxMultiple'
 import ImportantIcon from './icons/ImportantIcon'
 import IconSend from 'vue-material-design-icons/Send'
+import IconLoading from '@nextcloud/vue/dist/Components/LoadingIcon'
 import MoveMailboxModal from './MoveMailboxModal'
 import { UNIFIED_INBOX_ID } from '../store/constants'
 
@@ -250,6 +255,7 @@ export default {
 		IconArchive,
 		IconInbox,
 		ImportantIcon,
+		IconLoading,
 		MoveMailboxModal,
 	},
 	directives: {