Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enh(core): move all contacts menu features to unified settings #42662

Closed
wants to merge 3 commits into from
Closed

enh(core): move all contacts menu features to unified settings #42662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
544ff20
feat(core): removed contacts from header
emoral435 Jan 3, 2024
726eb3d
feat(search): moved contact menu to unified search
emoral435 Jan 5, 2024
2974e33
feat(core): added actions to contact section within unified search
emoral435 Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 0 additions & 41 deletions core/src/components/ContactsMenu.js
View file
Open in desktop

This file was deleted.

112 changes: 50 additions & 62 deletions core/src/components/ContactsMenu/Contact.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,49 +20,48 @@
-->

<template>
<li class="contact">
<NcAvatar class="contact__avatar"
:size="44"
:user="contact.isUser ? contact.uid : undefined"
:is-no-user="!contact.isUser"
<li :title="contact.displayName"
role="button"
class="contact">
<NcAvatar :user="contact.user"
:show-user-status="false"
:hide-favorite="false"
:disable-menu="true"
:display-name="contact.avatarLabel"
:preloaded-user-status="preloadedUserStatus" />
<a class="contact__body"
:href="contact.profileUrl || contact.topAction?.hyperlink">
<div class="contact__body__full-name">{{ contact.fullName }}</div>
<div v-if="contact.lastMessage" class="contact__body__last-message">{{ contact.lastMessage }}</div>
<div v-if="contact.statusMessage" class="contact__body__status-message">{{ contact.statusMessage }}</div>
<div v-else class="contact__body__email-address">{{ contact.emailAddresses[0] }}</div>
</a>
<NcActions v-if="actions.length"
:inline="contact.topAction ? 1 : 0">
<template v-for="(action, idx) in actions">
<NcActionLink v-if="action.hyperlink !== '#'"
:key="idx"
:href="action.hyperlink"
class="other-actions">
<template #icon>
<img class="contact__action__icon" :src="action.icon">
class="contact__avatar" />
<div class="contact__body">
<div>{{ contact.displayName }}</div>
<div @click.stop="(event) => event">
<NcActions v-if="actions.length"
:inline="contact.topAction ? 1 : 0">
<template v-for="(action, idx) in actions">
<NcActionLink v-if="action.hyperlink !== '#'"
:key="idx"
:href="action.hyperlink"
class="other-actions"
@click.stop="(event) => event">
<template #icon>
<img class="contact__action__icon" :src="action.icon">
</template>
{{ action.title }}
</NcActionLink>
<NcActionText v-else
:key="idx"
class="other-actions"
@click.stop="(event) => event">
<template #icon>
<img class="contact__action__icon" :src="action.icon">
</template>
{{ action.title }}
</NcActionText>
</template>
{{ action.title }}
</NcActionLink>
<NcActionText v-else :key="idx" class="other-actions">
<template #icon>
<img class="contact__action__icon" :src="action.icon">
</template>
{{ action.title }}
</NcActionText>
</template>
</NcActions>
</NcActions>
</div>
</div>
</li>
</template>

<script>
import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
import { NcActionLink, NcActionText, NcActions, NcAvatar } from '@nextcloud/vue'

export default {
name: 'Contact',
Expand All @@ -85,16 +84,6 @@ export default {
}
return this.contact.actions
},
preloadedUserStatus() {
if (this.contact.status) {
return {
status: this.contact.status,
message: this.contact.statusMessage,
icon: this.contact.statusIcon,
}
}
return undefined
}
},
}
</script>
Expand All @@ -104,7 +93,15 @@ export default {
display: flex;
position: relative;
align-items: center;
justify-content: start;
padding: 3px 3px 3px 10px;
cursor: pointer;

&:hover {
background: var(--color-background-hover);
border-radius: var(--border-radius-pill);
cursor: pointer;
}

&__action {
&__icon {
Expand All @@ -115,35 +112,25 @@ export default {
}
}

&__avatar-wrapper {
}

&__avatar {
display: inherit;
cursor: pointer;
}

&__body {
flex-grow: 1;
padding-left: 10px;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 10px;
min-width: 0;
cursor: pointer;

div {
position: relative;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
margin: -1px 0;
}
div:first-of-type {
margin-top: 0;
}
div:last-of-type {
margin-bottom: 0;
}

&__last-message, &__status-message, &__email-address {
color: var(--color-text-maxcontrast);
}

&:focus-visible {
Expand All @@ -163,6 +150,7 @@ export default {
}

button.other-actions {
cursor: pointer;
width: 44px;

&:focus {
Expand Down
28 changes: 9 additions & 19 deletions core/src/components/UnifiedSearch/SearchableList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,21 +36,11 @@
@trailing-button-click="clearSearch">
<Magnify :size="20" />
</NcTextField>
<ul v-if="filteredList.length > 0" class="searchable-list__list">
<li v-for="element in filteredList"
:key="element.id"
:title="element.displayName"
role="button">
<NcButton alignment="start"
type="tertiary"
:wide="true"
@click="itemSelected(element)">
<template #icon>
<NcAvatar :user="element.user" :show-user-status="false" :hide-favorite="false" />
</template>
{{ element.displayName }}
</NcButton>
</li>
<ul v-if="filteredContactList.length > 0" class="searchable-list__list">
<Contact v-for="contact in filteredContactList"
:key="contact.id"
:contact="contact"
@click.native="itemSelected(contact)" />
</ul>
<div v-else class="searchable-list__empty-content">
<NcEmptyContent :name="emptyContentText">
Expand All @@ -64,7 +54,8 @@
</template>

<script>
import { NcPopover, NcTextField, NcAvatar, NcEmptyContent, NcButton } from '@nextcloud/vue'
import { NcPopover, NcTextField, NcEmptyContent } from '@nextcloud/vue'
import Contact from '../ContactsMenu/Contact.vue'

import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
import Magnify from 'vue-material-design-icons/Magnify.vue'
Expand All @@ -77,9 +68,8 @@ export default {
NcTextField,
Magnify,
AlertCircleOutline,
NcAvatar,
NcEmptyContent,
NcButton,
Contact,
},

props: {
Expand Down Expand Up @@ -108,7 +98,7 @@ export default {
},

computed: {
filteredList() {
filteredContactList() {
return this.searchList.filter((element) => {
if (!this.searchTerm.toLowerCase().length) {
return true
Expand Down
3 changes: 1 addition & 2 deletions core/src/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* @author John Molakvoæ <skjnldsv@protonmail.com>
* @author nacho <nacho@ownyourbits.com>
* @author Vincent Petry <vincent@nextcloud.com>
* @author Eduardo Morales <emoral435@gmail.com>
*
* @license AGPL-3.0-or-later
*
Expand All @@ -31,7 +32,6 @@ import moment from 'moment'

import { initSessionHeartBeat } from './session-heartbeat.js'
import OC from './OC/index.js'
import { setUp as setUpContactsMenu } from './components/ContactsMenu.js'
import { setUp as setUpMainMenu } from './components/MainMenu.js'
import { setUp as setUpUserMenu } from './components/UserMenu.js'
import { interceptRequests } from './utils/xhr-request.js'
Expand Down Expand Up @@ -125,7 +125,6 @@ export const initCore = () => {

setUpMainMenu()
setUpUserMenu()
setUpContactsMenu()

// just add snapper for logged in users
// and if the app doesn't handle the nav slider itself
Expand Down
Loading
Loading