diff options
author | greta <gretadoci@gmail.com> | 2022-06-29 18:31:35 +0200 |
---|---|---|
committer | greta <gretadoci@gmail.com> | 2022-07-01 16:46:45 +0200 |
commit | 789152bb07013cf649c31630ed0fafc24ddd2634 (patch) | |
tree | 345315b4eb2dbc6c4e37fe72d43d37d2a04dc451 /src/components | |
parent | 9d1a7cf81a5420ddb9d6ea8961931d046b3e6e2b (diff) |
Migrate icons to material design icons
Signed-off-by: greta <gretadoci@gmail.com>
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/ContactDetails.vue | 10 | ||||
-rw-r--r-- | src/components/Icons/IconAddressBook.vue | 39 | ||||
-rw-r--r-- | src/components/Properties/PropertyActions.vue | 7 | ||||
-rw-r--r-- | src/components/Properties/PropertyTitle.vue | 20 | ||||
-rw-r--r-- | src/components/Properties/PropertyTitleIcon.vue | 92 |
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> |