Migrate icons to material design icons

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

5 files changed, 165 insertions, 3 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 3708cc6f..e8a2d1bc 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -777,6 +777,7 @@ export default {
 // Container height fix for dropdowns
 .app-content-details {
 	min-height: calc(100vh - var(--header-height));
+	padding: 0 44px 80px 44px;
 }
 
 // List of all properties
@@ -827,4 +828,13 @@ section.contact-details {
 		}
 	}
 }
+.property--last {
+	margin-bottom: 40px;
+}
+.property {
+	position: relative;
+	width: 100%;
+	max-width: 414px;
+	justify-self: center;
+}
 </style>
diff --git a/src/components/Icons/IconAddressBook.vue b/src/components/Icons/IconAddressBook.vue
new file mode 100644
index 00000000..a15c81ad
--- /dev/null
+++ b/src/components/Icons/IconAddressBook.vue
@@ -0,0 +1,39 @@
+<template functional>
+	<span :aria-hidden="!props.title"
+		:aria-label="props.title"
+		:class="[data.class, data.staticClass]"
+		class="material-design-icon icon-address-book"
+		role="img"
+		v-bind="data.attrs"
+		v-on="listeners">
+		<svg :fill="props.fillColor"
+			class="material-design-icon__svg"
+			:width="props.size"
+			:height="props.size"
+			viewBox="0 0 1792 1792">
+			<path d="M0 0h24v24H0V0z" fill="none" />
+			<path d="M1703 478q40 57 18 129l-275 906q-19 64-76.5 107.5t-122.5 43.5h-923q-77 0-148.5-53.5t-99.5-131.5q-24-67-2-127 0-4 3-27t4-37q1-8-3-21.5t-3-19.5q2-11 8-21t16.5-23.5 16.5-23.5q23-38 45-91.5t30-91.5q3-10 .5-30t-.5-28q3-11 17-28t17-23q21-36 42-92t25-90q1-9-2.5-32t.5-28q4-13 22-30.5t22-22.5q19-26 42.5-84.5t27.5-96.5q1-8-3-25.5t-2-26.5q2-8 9-18t18-23 17-21q8-12 16.5-30.5t15-35 16-36 19.5-32 26.5-23.5 36-11.5 47.5 5.5l-1 3q38-9 51-9h761q74 0 114 56t18 130l-274 906q-36 119-71.5 153.5t-128.5 34.5h-869q-27 0-38 15-11 16-1 43 24 70 144 70h923q29 0 56-15.5t35-41.5l300-987q7-22 5-57 38 15 59 43zm-1064 2q-4 13 2 22.5t20 9.5h608q13 0 25.5-9.5t16.5-22.5l21-64q4-13-2-22.5t-20-9.5h-608q-13 0-25.5 9.5t-16.5 22.5zm-83 256q-4 13 2 22.5t20 9.5h608q13 0 25.5-9.5t16.5-22.5l21-64q4-13-2-22.5t-20-9.5h-608q-13 0-25.5 9.5t-16.5 22.5z" />
+		</svg>
+	</span>
+</template>
+
+<script>
+
+export default {
+	name: 'IconAddressBook',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		size: {
+			type: Number,
+			default: 20,
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+	},
+}
+</script>
diff --git a/src/components/Properties/PropertyActions.vue b/src/components/Properties/PropertyActions.vue
index 59b29f33..c604de86 100644
--- a/src/components/Properties/PropertyActions.vue
+++ b/src/components/Properties/PropertyActions.vue
@@ -22,7 +22,10 @@
 
 <template>
 	<Actions class="property__actions">
-		<ActionButton icon="icon-delete" @click="deleteProperty">
+		<ActionButton @click="deleteProperty">
+			<template #icon>
+				<IconDelete :size="20" />
+			</template>
 			{{ t('contacts', 'Delete') }}
 		</ActionButton>
 		<Actions :is="action"
@@ -34,6 +37,7 @@
 <script>
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import IconDelete from 'vue-material-design-icons/Delete'
 
 export default {
 	name: 'PropertyActions',
@@ -41,6 +45,7 @@ export default {
 	components: {
 		Actions,
 		ActionButton,
+		IconDelete,
 	},
 
 	props: {
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
index fcaa731a..c92a5414 100644
--- a/src/components/Properties/PropertyTitle.vue
+++ b/src/components/Properties/PropertyTitle.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<h3 class="property__title property__row">
-		<div :class="icon" class="property__label property__title--icon" />
+		<PropertyTitleIcon :icon="icon" />
 		<div class="property__value property__title--right">
 			{{ readableName }}
 		</div>
@@ -30,9 +30,12 @@
 </template>
 
 <script>
+import PropertyTitleIcon from './PropertyTitleIcon'
 export default {
 	name: 'PropertyTitle',
-
+	components: {
+		PropertyTitleIcon,
+	},
 	props: {
 		icon: {
 			type: String,
@@ -47,3 +50,16 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+.property__title {
+	display: flex;
+	align-items: center;
+	margin: 0;
+	user-select: none;
+	gap: 5px;
+}
+.property__title .property__title--right {
+	display: flex;
+	justify-content: space-between;
+}
+</style>
diff --git a/src/components/Properties/PropertyTitleIcon.vue b/src/components/Properties/PropertyTitleIcon.vue
new file mode 100644
index 00000000..efa31792
--- /dev/null
+++ b/src/components/Properties/PropertyTitleIcon.vue
@@ -0,0 +1,92 @@
+<!--
+  - @copyright Copyright (c) 2022 Greta Doci <gretadoci@gmail.com>
+  -
+  - @author Greta Doci
+  -
+  - @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>
+	<IconAdd v-if="icon === 'icon-add'" :size="20" />
+	<IconAddressBook v-else-if="icon === 'icon-address-book'" :size="20" />
+	<IconEmail v-else-if="icon === 'icon-mail'" :size="20" />
+	<IconPhone v-else-if="icon === 'icon-phone'" :size="20" />
+	<IconDelete v-else-if="icon === 'icon-delete'" :size="20" />
+	<IconUser v-else-if="icon === 'icon-user'" :size="20" />
+	<IconNotes v-else-if="icon === 'icon-rename'" :size="20" />
+	<IconGeo v-else-if="icon === 'icon-address'" :size="20" />
+	<IconGroup v-else-if="icon === 'icon-contacts-dark'" :size="20" />
+	<IconUrl v-else-if="icon === 'icon-public'" :size="20" />
+	<IconBday v-else-if="icon === 'icon-calendar-dark'" :size="20" />
+	<IconImpp v-else-if="icon === 'icon-comment'" :size="20" />
+	<IconSocialMedia v-else-if="icon === 'icon-social'" :size="20" />
+	<IconRelationship v-else-if="icon === 'icon-group'" :size="20" />
+	<IconTz v-else-if="icon === 'icon-timezone'" :size="20" />
+	<IconLang v-else-if="icon === 'icon-language'" :size="20" />
+</template>
+
+<script>
+import IconAdd from 'vue-material-design-icons/Plus'
+import IconAddressBook from '../Icons/IconAddressBook'
+import IconEmail from 'vue-material-design-icons/Email'
+import IconPhone from 'vue-material-design-icons/Cellphone'
+import IconDelete from 'vue-material-design-icons/Delete'
+import IconUser from 'vue-material-design-icons/Account'
+import IconNotes from 'vue-material-design-icons/Pencil'
+import IconGeo from 'vue-material-design-icons/MapMarker'
+import IconGroup from 'vue-material-design-icons/AccountMultiple'
+import IconUrl from 'vue-material-design-icons/Link'
+import IconBday from 'vue-material-design-icons/CalendarBlankOutline'
+import IconImpp from 'vue-material-design-icons/MessageReplyText'
+import IconSocialMedia from 'vue-material-design-icons/Heart'
+import IconRelationship from 'vue-material-design-icons/AccountSupervisor'
+import IconTz from 'vue-material-design-icons/Web'
+import IconLang from 'vue-material-design-icons/AccountVoice'
+export default {
+	name: 'PropertyTitleIcon',
+	components: {
+		IconAdd,
+		IconAddressBook,
+		IconEmail,
+		IconPhone,
+		IconDelete,
+		IconUser,
+		IconNotes,
+		IconGeo,
+		IconGroup,
+		IconUrl,
+		IconBday,
+		IconImpp,
+		IconSocialMedia,
+		IconRelationship,
+		IconTz,
+		IconLang,
+	},
+	props: {
+		icon: {
+			type: String,
+			default: '',
+			required: false,
+		},
+	},
+}
+</script>
+<style lang="scss" scope>
+.material-design-icon {
+	opacity: .7;
+}
+</style>