VladPolskiy/nextcloud-spreed
1
0
Fork 0
mirror of https://github.com/nextcloud/spreed.git synced 2025-07-21 10:37:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15521 from nextcloud/fix/15512/quote-restyle

Browse Source 
feat(Quote): add a shortcut to threaded view from replies
This commit is contained in:
Maksim Sukharev
2025-07-16 23:36:17 +02:00
committed by GitHub
parent 2df141e7de 3b127d829e
commit 49b6c3414c
2 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Quote.vue
View File

@ -13,6 +13,7 @@ import { useRoute } from 'vue-router'
import NcButton from '@nextcloud/vue/components/NcButton'
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
import IconClose from 'vue-material-design-icons/Close.vue'
import IconForumOutline from 'vue-material-design-icons/ForumOutline.vue'
import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
import AvatarWrapper from './AvatarWrapper/AvatarWrapper.vue'
import { useGetThreadId } from '../composables/useGetThreadId.ts'
@ -104,6 +105,10 @@ const shortenedQuoteMessage = computed(() => {
return simpleQuotedMessage.value.length >= 250 ? simpleQuotedMessage.value.substring(0, 250) + '…' : simpleQuotedMessage.value
})
const showThreadShortcut = computed(() => {
return !threadId.value && isExistingMessage(message) && message.isThread && message.threadId
})
/**
* Check whether message to quote (parent) existing on server
* Otherwise server returns ['id' => (int)$parentId, 'deleted' => true]
@ -112,6 +117,12 @@ function isExistingMessage(message: ChatMessage | DeletedParentMessage): message
return 'messageType' in message
}
function goToThread() {
if (isExistingMessage(message) && message.threadId) {
threadId.value = message.threadId
}
}
/**
* Abort replying / editing process
*/
@ -196,9 +207,8 @@ function handleQuoteClick() {
</span>
<NcButton v-if="canCancel"
class="quote__close"
class="quote__button"
variant="tertiary"
size="small"
:title="t('spreed', 'Cancel quote')"
:aria-label="t('spreed', 'Cancel quote')"
@click="handleAbort">
@ -206,6 +216,16 @@ function handleQuoteClick() {
<IconClose :size="20" />
</template>
</NcButton>
<NcButton v-else-if="showThreadShortcut"
class="quote__button"
variant="tertiary"
:title="t('spreed', 'Go to thread')"
:aria-label="t('spreed', 'Go to thread')"
@click.stop.prevent="goToThread">
<template #icon>
<IconForumOutline :size="20" />
</template>
</NcButton>
</component>
</template>
@ -214,15 +234,15 @@ function handleQuoteClick() {
.quote {
position: relative;
padding-block: calc(0.5 * var(--default-grid-baseline));
padding-inline: calc(1.5 * var(--default-grid-baseline)) var(--default-clickable-area);
padding-block: var(--default-grid-baseline);
padding-inline: calc(2 * var(--default-grid-baseline)) var(--default-clickable-area);
margin-bottom: var(--default-grid-baseline);
display: flex;
gap: var(--default-grid-baseline);
max-width: $messages-text-max-width;
min-height: var(--clickable-area-small);
min-height: var(--default-clickable-area);
border-radius: var(--border-radius-large);
border: 2px solid var(--color-border);
font-size: var(--font-size-small);
color: var(--color-text-maxcontrast);
background-color: var(--color-main-background);
overflow: hidden;
@ -280,7 +300,7 @@ function handleQuoteClick() {
&-author {
display: flex;
align-items: center;
gap: calc(0.5 * var(--default-grid-baseline));
gap: var(--default-grid-baseline);
&-info {
flex-shrink: 0;
@ -303,10 +323,12 @@ function handleQuoteClick() {
}
}
&__close {
&__button {
position: absolute !important;
top: 0;
inset-inline-end: 0;
height: 100%;
border-radius: 0 !important;
}
}

4
src/components/RightSidebar/Threads/ThreadItem.vue
View File

@ -12,7 +12,6 @@ import type {
import { t } from '@nextcloud/l10n'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import NcActionButton from '@nextcloud/vue/components/NcActionButton'
import NcDateTime from '@nextcloud/vue/components/NcDateTime'
import NcListItem from '@nextcloud/vue/components/NcListItem'
@ -26,7 +25,6 @@ const { thread } = defineProps<{ thread: ThreadInfo }>()
const router = useRouter()
const route = useRoute()
const store = useStore()
const threadAuthor = computed(() => getDisplayNameWithFallback(thread.first.actorDisplayName, thread.first.actorType, true))
const lastActivity = computed(() => thread.thread.lastActivity * 1000)
@ -147,7 +145,7 @@ const timeFormat = computed<Intl.DateTimeFormatOptions>(() => {
}
&.list-item__wrapper--active .thread__details-replies {
color: var(--color-primary-text);
color: var(--color-primary-element-text);
background-color: transparent;
}
}