diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue index ccf0dc4bdf..33ea44e13a 100644 --- a/src/components/ContactsList.vue +++ b/src/components/ContactsList.vue @@ -5,32 +5,81 @@ + + {{ t('contacts', 'Are you sure you want to proceed?') }} + + + + + + + + + + + + + + + :extra-props="{reloadBus, onSelectMultipleFromParent: onSelectMultiple, onSelectRangeFromParent: onSelectRange }" /> @@ -175,4 +332,25 @@ export default { padding: 0 var(--default-grid-baseline); } +.contacts-list__multiselect-header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: var(--color-main-background-translucent); + position: sticky; + height: calc(var(--default-grid-baseline) * 12); + z-index: 100; +} + +.contacts-list__multiselect-header-enter-active, .contacts-list__multiselect-header-leave-active { + transition: all calc(var(--animation-slow) / 2); +} + +.contacts-list__multiselect-header-enter, +.contacts-list__multiselect-header-leave-to { + opacity: 0; + height: 0; + transform: scaleY(0); +} diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue index 20366b2f94..55cfabb9cd 100644 --- a/src/components/ContactsList/ContactsListItem.vue +++ b/src/components/ContactsList/ContactsListItem.vue @@ -5,7 +5,8 @@ + @dragstart="startDrag($event, source)" + @click.shift.exact.prevent="onSelectMultipleRange"> - - + + + @@ -34,6 +44,7 @@ import { NcListItem as ListItem, NcAvatar as BaseAvatar, } from '@nextcloud/vue' +import CheckIcon from 'vue-material-design-icons/Check.vue' export default { name: 'ContactsListItem', @@ -41,6 +52,7 @@ export default { components: { ListItem, BaseAvatar, + CheckIcon, }, props: { @@ -56,10 +68,15 @@ export default { type: Object, required: true, }, + onSelectMultipleFromParent: { + type: Function, + default: () => {}, + }, }, data() { return { avatarUrl: undefined, + hoveringAvatar: false, } }, @@ -156,13 +173,20 @@ export default { params: { selectedGroup: this.selectedGroup, selectedContact: this.source.key }, }) }, + onSelectMultiple() { + // This weirdness of passing a function as a prop is because the VirtualList extra-props prop object does not support listening to custom events (afaik) + this.onSelectMultipleFromParent(this.source, this.index) + }, + onSelectMultipleRange() { + this.onSelectMultipleFromParent(this.source, this.index, true) + }, }, }