diff options
author | Richard Steinmetz <richard@steinmetz.cloud> | 2023-05-03 09:36:06 +0200 |
---|---|---|
committer | Richard Steinmetz <richard@steinmetz.cloud> | 2023-05-03 13:29:03 +0200 |
commit | 923d14b652e121b260ebad5cf1dfb9094ea257ba (patch) | |
tree | 4b8261f5a6849480d78c62b986b03d7173e9d710 /src | |
parent | ec8315618c14cd018d30743710d18320e72dd05a (diff) |
feat(contacts): implement final design enhancements from mockups
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ContactDetails.vue | 7 | ||||
-rw-r--r-- | src/components/DetailsHeader.vue | 22 | ||||
-rw-r--r-- | src/components/Properties/PropertyTitle.vue | 15 |
3 files changed, 35 insertions, 9 deletions
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index edd84c71..97a2fcec 100644 --- a/src/components/ContactDetails.vue +++ b/src/components/ContactDetails.vue @@ -121,7 +121,7 @@ <!-- edit and save buttons --> <template v-if="!addressbookIsReadOnly"> <NcButton v-if="!editMode" - type="tertiary" + :type="isMobile ? 'secondary' : 'tertiary'" @click="editMode = true"> <template #icon> <PencilIcon :size="20" /> @@ -129,7 +129,7 @@ {{ t('contacts', 'Edit') }} </NcButton> <NcButton v-else - type="primary" + type="secondary" :disabled="loadingUpdate" @click="onSave"> <template #icon> @@ -286,6 +286,7 @@ import { NcMultiselect as Multiselect, NcLoadingIcon as IconLoading, NcButton, + isMobile, } from '@nextcloud/vue' import IconContact from 'vue-material-design-icons/AccountMultiple.vue' import IconDownload from 'vue-material-design-icons/Download.vue' @@ -312,6 +313,8 @@ import PropertySelect from './Properties/PropertySelect.vue' export default { name: 'ContactDetails', + mixins: [isMobile], + components: { ActionButton, ActionLink, diff --git a/src/components/DetailsHeader.vue b/src/components/DetailsHeader.vue index 6f0a705b..762372b9 100644 --- a/src/components/DetailsHeader.vue +++ b/src/components/DetailsHeader.vue @@ -89,23 +89,32 @@ $top-padding: 50px; // Header with avatar, name, position, actions... .contact-header { display: flex; - flex-wrap: wrap; align-items: center; padding: $top-padding 0 20px; gap: $contact-details-row-gap; - // Top padding of 44px is already included in AppContent by default on mobile @media (max-width: 1024px) { + // Top padding of 44px is already included in AppContent by default on mobile padding-top: calc($top-padding - 44px); + + // Wrap actions on mobile + flex-wrap: wrap; + &__no-wrap { + width: 100%; + } + &__infos { + // Account for nonexistent actions menu + width: calc($contact-details-value-max-width + $contact-details-row-gap + 44px) !important; + } + &__actions { + justify-content: space-between; + } } &__no-wrap { display: flex; - flex: 9999 1 auto; gap: $contact-details-row-gap; align-items: center; - - // Wrap actions to next line before shrinking min-width: 0; } @@ -126,7 +135,7 @@ $top-padding: 50px; // Global single column layout display: flex; flex: 0 1 auto; - width: calc($contact-details-value-max-width + $contact-details-row-gap + 44px); + width: $contact-details-value-max-width; min-width: 0; // Has to be zero unless we implement wrapping &-title, @@ -153,7 +162,6 @@ $top-padding: 50px; &__actions { display: flex; flex: 1 0 auto; - justify-content: space-between; } } </style> diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue index ec17f730..b3e42b91 100644 --- a/src/components/Properties/PropertyTitle.vue +++ b/src/components/Properties/PropertyTitle.vue @@ -101,3 +101,18 @@ export default { }, } </script> + +<style lang="scss" scoped> +.property { + // Left align icon and title on mobile + @media (max-width: 1024px) { + &__label { + width: unset; + } + } + + &__value { + font-weight: bold; + } +} +</style> |