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

feat: Add search message tab to the right sidebar #14125

Merged
merged 9 commits into from
Jan 16, 2025
+632 −88
Merged

feat: Add search message tab to the right sidebar #14125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f985963
fix: Add search message tab to the right sidebar
JungleDruid Dec 23, 2024
26a0e1f
fix: Change the component structure to Vue 3 setup and TypeScript
JungleDruid Dec 23, 2024
2e94f03
fix: change to button trigger for search messages instead of an addit…
DorraJaouad Jan 13, 2025
9233d79
fix: rename icons with Icon*
DorraJaouad Jan 13, 2025
a9503cd
fix(SearchMessagesTab): Remove the date limitation and change to date…
DorraJaouad Jan 13, 2025
b449d0a
fix(SearchMessagesTab): improve UI and correct some logical conditions
DorraJaouad Jan 13, 2025
3a40407
feat(SearchMessagesTab): show applied filters in chips
DorraJaouad Jan 13, 2025
88b5b19
fix: handle in call routing
DorraJaouad Jan 13, 2025
d302936
fix: use talk-message-current instead
DorraJaouad Jan 16, 2025
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
12 changes: 8 additions & 4 deletions src/components/MessagesList/MessagesList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1157,10 +1157,14 @@ export default {

// TODO: doesn't work if chat is hidden. Need to store
// delayed 'shouldScroll' and call after chat is visible
scrollElement.scrollIntoView({
behavior: smooth ? 'smooth' : 'auto',
block: 'center',
inline: 'nearest',
// FIXME: because scrollToBottom is also triggered and it is wrapped in $nextTick
// We need to trigger this at the same time (nextTick) to avoid focusing and then scrolling to bottom
this.$nextTick(() => {
DorraJaouad marked this conversation as resolved.
Show resolved Hide resolved
scrollElement.scrollIntoView({
behavior: smooth ? 'smooth' : 'auto',
block: 'center',
inline: 'nearest',
})
})

if (this.$refs.scroller && !smooth) {
Expand Down
213 changes: 129 additions & 84 deletions src/components/RightSidebar/RightSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<template>
<NcAppSidebar v-if="isSidebarAvailable"
:open="opened"
:name="conversation.displayName"
:title="conversation.displayName"
:name="sidebarTitle"
:title="sidebarTitle"
:active.sync="activeTab"
:class="'active-tab-' + activeTab"
:toggle-classes="{ 'chat-button-sidebar-toggle': isInCall }"
Expand All @@ -17,97 +17,128 @@
@closed="handleClosed">
<!-- Use a custom icon when sidebar is used for chat messages during the call -->
<template v-if="isInCall" #toggle-icon>
<MessageText :size="20" />
<IconMessageText :size="20" />
<span v-if="unreadMessagesCounter > 0" class="chat-button-unread-marker" />
</template>
<!-- search in messages button-->
<template v-if="!showSearchMessagesTab && getUserId" #secondary-actions>
<NcActionButton type="tertiary"
:title="t('spreed', 'Search messages')"
@click="showSearchMessagesTab = true">
<template #icon>
<IconMagnify :size="20" />
</template>
</NcActionButton>
</template>
<template v-else-if="getUserId" #tertiary-actions>
<NcButton type="tertiary"
:title="t('spreed', 'Back')"
@click="showSearchMessagesTab = false">
<template #icon>
<IconArrowLeft :size="20" />
DorraJaouad marked this conversation as resolved.
Show resolved Hide resolved
</template>
</NcButton>
</template>
<template #description>
<InternalSignalingHint />
<LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" />
</template>
<NcAppSidebarTab v-if="isInCall"
id="chat"
key="chat"
:order="1"
:name="t('spreed', 'Chat')">
<template #icon>
<Message :size="20" />
</template>
<ChatView :is-visible="opened" is-sidebar />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showParticipantsTab"
id="participants"
key="participants"
ref="participantsTab"
:order="2"
:name="participantsText">
<template #icon>
<AccountMultiple :size="20" />
</template>
<ParticipantsTab :is-active="activeTab === 'participants'"
:can-search="canSearchParticipants"
:can-add="canAddParticipants" />
<NcAppSidebarTab v-if="showSearchMessagesTab"
id="search-messages"
key="search-messages"
:order="0"
:name="t('spreed', 'Search messages')">
<SearchMessagesTab @close="showSearchMessagesTab = false" />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showBreakoutRoomsTab"
id="breakout-rooms"
key="breakout-rooms"
ref="breakout-rooms"
:order="3"
:name="breakoutRoomsText">
<template #icon>
<DotsCircle :size="20" />
</template>
<BreakoutRoomsTab :main-token="mainConversationToken"
:main-conversation="mainConversation"
:is-active="activeTab === 'breakout-rooms'" />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showDetailsTab"
id="details-tab"
key="details-tab"
:order="4"
:name="t('spreed', 'Details')">
<template #icon>
<InformationOutline :size="20" />
</template>
<SetGuestUsername v-if="!getUserId" />
<SipSettings v-if="showSIPSettings" :conversation="conversation" />
<div v-if="!getUserId" id="app-settings">
<div id="app-settings-header">
<NcButton type="tertiary" @click="showSettings">
<template #icon>
<CogIcon :size="20" />
</template>
{{ t('spreed', 'Settings') }}
</NcButton>
<template v-else>
<NcAppSidebarTab v-if="isInCall"
id="chat"
key="chat"
:order="1"
:name="t('spreed', 'Chat')">
<template #icon>
<IconMessage :size="20" />
</template>
<ChatView :is-visible="opened" is-sidebar />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showParticipantsTab"
id="participants"
key="participants"
ref="participantsTab"
:order="2"
:name="participantsText">
<template #icon>
<IconAccountMultiple :size="20" />
</template>
<ParticipantsTab :is-active="activeTab === 'participants'"
:can-search="canSearchParticipants"
:can-add="canAddParticipants" />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showBreakoutRoomsTab"
id="breakout-rooms"
key="breakout-rooms"
ref="breakout-rooms"
:order="3"
:name="breakoutRoomsText">
<template #icon>
<IconDotsCircle :size="20" />
</template>
<BreakoutRoomsTab :main-token="mainConversationToken"
:main-conversation="mainConversation"
:is-active="activeTab === 'breakout-rooms'" />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showDetailsTab"
id="details-tab"
key="details-tab"
:order="4"
:name="t('spreed', 'Details')">
<template #icon>
<IconInformationOutline :size="20" />
</template>
<SetGuestUsername v-if="!getUserId" />
<SipSettings v-if="showSIPSettings" :conversation="conversation" />
<div v-if="!getUserId" id="app-settings">
<div id="app-settings-header">
<NcButton type="tertiary" @click="showSettings">
<template #icon>
<IconCog :size="20" />
</template>
{{ t('spreed', 'Settings') }}
</NcButton>
</div>
</div>
</div>
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showSharedItemsTab"
id="shared-items"
key="shared-items"
ref="sharedItemsTab"
:order="5"
:name="t('spreed', 'Shared items')">
<template #icon>
<FolderMultipleImage :size="20" />
</template>
<SharedItemsTab :active="activeTab === 'shared-items'" />
</NcAppSidebarTab>
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showSharedItemsTab"
id="shared-items"
key="shared-items"
ref="sharedItemsTab"
:order="5"
:name="t('spreed', 'Shared items')">
<template #icon>
<IconFolderMultipleImage :size="20" />
</template>
<SharedItemsTab :active="activeTab === 'shared-items'" />
</NcAppSidebarTab>
</template>
</NcAppSidebar>
</template>

<script>
import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
import CogIcon from 'vue-material-design-icons/Cog.vue'
import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
import Message from 'vue-material-design-icons/Message.vue'
import MessageText from 'vue-material-design-icons/MessageText.vue'
import IconAccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
import IconArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
import IconCog from 'vue-material-design-icons/Cog.vue'
import IconDotsCircle from 'vue-material-design-icons/DotsCircle.vue'
import IconFolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
import IconInformationOutline from 'vue-material-design-icons/InformationOutline.vue'
import IconMagnify from 'vue-material-design-icons/Magnify.vue'
import IconMessage from 'vue-material-design-icons/Message.vue'
import IconMessageText from 'vue-material-design-icons/MessageText.vue'

import { showMessage } from '@nextcloud/dialogs'
import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
import { t } from '@nextcloud/l10n'

import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
Expand All @@ -116,13 +147,13 @@ import BreakoutRoomsTab from './BreakoutRooms/BreakoutRoomsTab.vue'
import InternalSignalingHint from './InternalSignalingHint.vue'
import LobbyStatus from './LobbyStatus.vue'
import ParticipantsTab from './Participants/ParticipantsTab.vue'
import SearchMessagesTab from './SearchMessages/SearchMessagesTab.vue'
import SharedItemsTab from './SharedItems/SharedItemsTab.vue'
import SipSettings from './SipSettings.vue'
import ChatView from '../ChatView.vue'
import SetGuestUsername from '../SetGuestUsername.vue'

import { CONVERSATION, WEBINAR, PARTICIPANT } from '../../constants.js'
import BrowserStorage from '../../services/BrowserStorage.js'
import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
import { useSidebarStore } from '../../stores/sidebar.js'

Expand All @@ -133,21 +164,25 @@ export default {
ChatView,
InternalSignalingHint,
LobbyStatus,
NcActionButton,
NcAppSidebar,
NcAppSidebarTab,
NcButton,
ParticipantsTab,
SearchMessagesTab,
SetGuestUsername,
SharedItemsTab,
SipSettings,
// Icons
AccountMultiple,
CogIcon,
DotsCircle,
FolderMultipleImage,
InformationOutline,
Message,
MessageText,
IconAccountMultiple,
IconArrowLeft,
IconCog,
IconDotsCircle,
IconFolderMultipleImage,
IconInformationOutline,
IconMagnify,
IconMessage,
IconMessageText,
},

props: {
Expand All @@ -168,6 +203,7 @@ export default {
activeTab: 'participants',
contactsLoading: false,
unreadNotificationHandle: null,
showSearchMessagesTab: false,
}
},

Expand Down Expand Up @@ -296,6 +332,15 @@ export default {
title: t('spreed', 'Open chat')
}
},

sidebarTitle() {
return this.showSearchMessagesTab
? t('spreed', 'Search in {name}', { name: this.conversation.displayName }, undefined, {
escape: false,
sanitize: false,
})
: this.conversation.displayName
}
},

watch: {
Expand Down
Loading
Loading