feat(contacts): implement final design enhancements from mockups
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
This commit is contained in:
parent
ec8315618c
commit
923d14b652
|
@ -116,6 +116,14 @@ $property-row-gap: $contact-details-row-gap;
|
|||
}
|
||||
}
|
||||
|
||||
// Mobile tweaks
|
||||
@media (max-width: 1024px) {
|
||||
// Left align labels on mobile
|
||||
&__label {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
// Show ext buttons on full row hover
|
||||
&:hover {
|
||||
.property__ext {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue