hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

move SABs margin into status

Browse source
This commit is contained in:
Henry Jameson 2026-07-10 17:09:17 +03:00
commit 3db36c25ee
18 changed files with 235 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/chat_message/chat_message.js
View file

@ -1,3 +1,4 @@
import { find } from 'lodash'
import { mapState as mapPiniaState } from 'pinia'
import { mapState } from 'vuex'
@ -7,6 +8,8 @@ import Gallery from 'src/components/gallery/gallery.vue'
import LinkPreview from 'src/components/link-preview/link-preview.vue'
import Popover from 'src/components/popover/popover.vue'
import StatusContent from 'src/components/status_content/status_content.vue'
import StatusBody from 'src/components/status_body/status_body.vue'
import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
import UserPopover from 'src/components/user_popover/user_popover.vue'
@ -25,18 +28,19 @@ library.add(faTimes, faEllipsisH, faCircleNotch)
const ChatMessage = {
name: 'ChatMessage',
props: ['edited', 'noHeading', 'chatItem', 'hoveredMessageChain'],
emits: ['hover'],
props: ['edited', 'noHeading', 'previousItem', 'chatItem', 'previousItem', 'hoveredMessageChain'],
emits: ['hover', 'replyRequested'],
components: {
Popover,
Attachment,
StatusContent,
StatusBody,
StatusActionButtons,
UserAvatar,
Gallery,
LinkPreview,
ChatMessageDate,
UserPopover,
},
UserPopover,},
computed: {
// Returns HH:MM (hours and minutes) in local time.
createdAt() {
@ -65,6 +69,16 @@ const ChatMessage = {
isMessage() {
return this.chatItem.type === 'message'
},
isCustomReply() {
if (!this.previousItem) return false
console.log('==')
console.log('PREV', toValue(this.previousItem.data.raw_html))
console.log('CURR', toValue(this.chatItem.data.raw_html))
return this.previousItem.data.id !== this.chatItem.data.in_reply_to_status_id
},
customReplyTo() {
return find(this.$store.state.statuses.allStatuses, { id: this.chatItem.data.in_reply_to_status_id })
},
messageForStatusContent() {
return {
summary: '',

46
src/components/chat_message/chat_message.scss
View file

@ -11,22 +11,53 @@
}
}
.chat-message-menu {
.chat-message-toolbar {
transition: opacity 0.1s;
opacity: 0;
position: absolute;
top: -0.8em;
right: 0.4rem;
z-index: 10;
button {
.quick-action-buttons {
justify-items: end;
grid-template-columns: auto auto auto;
}
.simple-button {
padding-top: 0.2em;
padding-bottom: 0.2em;
}
&.-visible {
opacity: 1;
}
}
.menu-icon {
cursor: pointer;
}
.reply-to-header {
white-space: nowrap;
width: 100%;
display: flex;
align-items: baseline;
gap: 0.5em;
.reply-label {
display: inline-block;
line-height: 1;
}
.reply-body {
line-height: 1;
display: inline-block;
overflow-x: hidden;
text-overflow: ellipsis;
}
}
.popover {
width: 12em;
}
@ -66,7 +97,6 @@
font-size: 0.8em;
margin: -1em 0 -0.5em;
font-style: italic;
opacity: 0.8;
}
.without-attachment {
@ -112,14 +142,8 @@
align-items: flex-end;
}
.chat-message-menu {
right: 0.4rem;
}
}
.-incoming {
.chat-message-menu {
left: 0.4rem;
.reply-to-header {
justify-content: end;
}
}

50
src/components/chat_message/chat_message.vue
View file

@ -25,6 +25,25 @@
</UserPopover>
</div>
<div class="chat-message-inner">
<small
v-if="isStatus && isCustomReply"
class="reply-to-header faint"
>
<strong class="reply-label">
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="reply"
flip="horizontal"
/>
{{ $t('status.reply_to') }}
</strong>
<StatusBody
class="reply-body"
:status="customReplyTo"
collapse
single-line
/>
</small>
<div
class="status-body"
:style="{ 'min-width': message.attachment ? '80%' : '' }"
@ -36,15 +55,27 @@
@mouseenter="hovered = true"
@mouseleave="hovered = false"
>
<StatusActionButtons
v-if="isStatus"
class="chat-message-toolbar"
:class="{ '-visible': hovered || menuOpened }"
:status="message"
:pinned="new Set(['reply', 'emoji'])"
fixed-pinned
use-default-buttons
hide-labels
@toggle-replying="$emit('replyRequested', message)"
/>
<div
class="chat-message-menu"
:class="{ 'visible': hovered || menuOpened }"
class="chat-message-toolbar"
:class="{ '-visible': hovered || menuOpened }"
v-else
>
<Popover
trigger="click"
:trigger-attrs="{ 'class': 'button-default menu-icon simple-button', title: $t('chats.more') }"
placement="top"
bound-to-selector=".chat-view-inner"
:bound-to="{ x: 'container' }"
:margin="popoverMarginStyle"
@show="menuOpened = true"
@close="menuOpened = false"
@ -62,12 +93,7 @@
</div>
</template>
<template #trigger>
<button
class="button-default menu-icon"
:title="$t('chats.more')"
>
<FAIcon icon="ellipsis-h" />
</button>
<FAIcon icon="ellipsis-h" />
</template>
</Popover>
</div>
@ -87,9 +113,9 @@
:title="visibilityLocalized"
>
<FAIcon
fixed-width
class="fa-scale-110"
:icon="visibilityIcon(message.visibility)"
fixed-width
/>
</span>
<span
@ -98,8 +124,8 @@
>
<FAIcon
class="fa-old-padding"
spin
icon="circle-notch"
spin
/>
</span>
{{ createdAt }}

18
src/components/chat_message_list/chat_message_list.js
View file

@ -20,7 +20,7 @@ const ChatMessageList = {
hoveredMessageChainId: undefined,
}
},
emits: ['messageDelete'],
emits: ['messageDelete', 'replyRequested'],
computed: {
chatItems() {
const messages = [
@ -107,6 +107,22 @@ const ChatMessageList = {
onMessageDelete({ messageId, chatId }) {
this.$emit('messageDelete', { messageId, chatId })
},
onReplyRequested(message) {
this.$emit('replyRequested', message)
},
getPreviousItem(index) {
let result
this.chatItems.slice(0, index).reverse().some((item) => {
const isMessage = item.type === 'message'
if (isMessage) {
result = item
}
return isMessage
})
return result
}
},
}

4
src/components/chat_message_list/chat_message_list.vue
View file

@ -1,12 +1,14 @@
<template>
<div class="ChatMessageList">
<ChatMessage
v-for="chatItem in chatItems"
v-for="(chatItem, index) in chatItems"
:key="chatItem.id"
:chat-item="chatItem"
:previous-item="getPreviousItem(index)"
:hovered-message-chain="chatItem.messageChainId === hoveredMessageChainId"
@hover="onMessageHover"
@delete="onMessageDelete"
@reply-requested="onReplyRequested"
/>
</div>
</template>

11
src/components/conversation/conversation.js
View file

@ -2,6 +2,7 @@ import { clone, filter, findIndex, get, reduce } from 'lodash'
import { mapState as mapPiniaState } from 'pinia'
import { mapState } from 'vuex'
import StatusContent from 'src/components/status_content/status_content.vue'
import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
@ -20,9 +21,11 @@ import {
faAngleDoubleDown,
faAngleDoubleLeft,
faChevronLeft,
faReply,
faTimes,
} from '@fortawesome/free-solid-svg-icons'
library.add(faAngleDoubleDown, faAngleDoubleLeft, faChevronLeft)
library.add(faAngleDoubleDown, faAngleDoubleLeft, faChevronLeft, faReply, faTimes)
const sortById = (a, b) => {
const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@ -105,6 +108,7 @@ const conversation = {
inlineDivePosition: null,
loadStatusError: null,
unsuspendibleIds: new Set(),
explicitReplyStatus: null,
}
},
created() {
@ -121,9 +125,11 @@ const conversation = {
return maxDepth >= 1 ? maxDepth : 1
},
lastStatus() {
console.log('LAST STATUS', this.conversation[this.conversation.length - 1])
return this.conversation[this.conversation.length - 1]
},
replyStatus() {
return this.explicitReplyStatus ?? this.lastStatus
},
streamingEnabled() {
return (
this.mergedConfig.useStreamingApi &&
@ -415,6 +421,7 @@ const conversation = {
QuickViewSettings,
ChatMessageList,
PostStatusForm,
StatusContent,
},
watch: {
statusId(newVal, oldVal) {

23
src/components/conversation/conversation.scss
View file

@ -93,8 +93,31 @@
}
}
.auto-reply-to-section {
margin: 0 1em;
gap: 0.5em;
h4 {
margin: 0.5em 0;
line-height: 1.5;
button {
line-height: 1.5;
}
}
.reply-to-preview {
display: flex;
align-items: center;
gap: 0.5em;
}
}
.chat-view-reply-form {
position: sticky;
display: flex;
flex-direction: column;
align-items: stretch;
bottom: 0;
}
}

38
src/components/conversation/conversation.vue
View file

@ -202,22 +202,50 @@
>
<ChatMessageList
:messages="conversation"
@reply-requested="e => explicitReplyStatus = e"
/>
</div>
</div>
<div
v-if="isChatView && isExpanded"
v-if="isChatView && isExpanded && replyStatus"
class="chat-view-reply-form panel-footer -flexible-height"
>
<div class="auto-reply-to-section">
<h4
class="reply-to-text"
>
{{ explicitReplyStatus ? $t('status.reply_to_selected') : $t('status.reply_to_last') }}
<button
v-if="explicitReplyStatus"
class="button-default"
@click="explicitReplyStatus = null"
>
<FAIcon icon="times" />
{{ $t('general.cancel') }}
</button>
</h4>
<div class="reply-to-preview">
<FAIcon
icon="reply"
flip="horizontal"
/>
<StatusContent
:status="replyStatus"
compact
collapse
/>
</div>
</div>
<PostStatusForm
:submit-on-enter="!mobileLayout"
:preserve-focus="!mobileLayout"
:auto-focus="!mobileLayout"
:reply-to="lastStatus.id"
:reply-to="replyStatus.id"
:disable-quotes="true"
:copy-message-scope="lastStatus.visibility"
:attentions="lastStatus.attentions"
:replied-user="lastStatus.user"
:copy-message-scope="replyStatus.visibility"
:attentions="replyStatus.attentions"
:replied-user="replyStatus.user"
force-mentions-line
/>
</div>
</div>

4
src/components/status/status.scss
View file

@ -385,4 +385,8 @@
text-decoration: underline;
}
}
.status-action-buttons {
margin-top: var(--status-margin);
}
}

1
src/components/status/status.vue
View file

@ -512,6 +512,7 @@
<StatusActionButtons
v-if="!noHeading && !isPreview"
class="status-action-buttons"
:status="status"
:replying="replying"
@toggle-replying="toggleReplyForm"

5
src/components/status_action_buttons/action_button.js
View file

@ -69,6 +69,8 @@ export default {
'getComponent',
'doAction',
'outerClose',
'defaultButtonStyle',
'hideLabel',
],
components: {
StatusBookmarkFolderMenu,
@ -103,11 +105,12 @@ export default {
return useMergedConfigStore().mergedConfig.hidePostStats
},
buttonInnerClass() {
const buttonStyleClass = this.defaultButtonStyle ? 'button-default' : 'button-unstyled'
return [
this.button.name + '-button',
{
'main-button': this.extra,
'button-unstyled': !this.extra,
[buttonStyleClass]: !this.extra,
'-active': this.button.active?.(this.funcArg),
disabled: this.button.interactive
? !this.button.interactive(this.funcArg)

2
src/components/status_action_buttons/action_button.vue
View file

@ -60,7 +60,7 @@
/>
</component>
<span
v-if="!hidePostStats && button.counter?.(funcArg) > 0"
v-if="!hidePostStats && button.counter?.(funcArg) > 0 && !hideLabel"
class="action-counter"
>
{{ button.counter?.(funcArg) }}

2
src/components/status_action_buttons/action_button_container.js
View file

@ -42,7 +42,7 @@ export default {
),
),
},
props: ['button', 'status'],
props: ['button', 'status', 'defaultButton','hideLabel'],
emits: ['emojiPickerShown'],
mounted() {
if (this.button.name === 'mute') {

2
src/components/status_action_buttons/action_button_container.vue
View file

@ -10,6 +10,7 @@
<ActionButton
:button="button"
:status="status"
:hide-label="hideLabel"
v-bind.prop="$attrs"
/>
</template>
@ -131,6 +132,7 @@
v-else
:button="button"
:status="status"
:hide-label="hideLabel"
v-bind="$attrs"
@emoji-picker-shown="e => $emit('emojiPickerShown', e)"
/>

37
src/components/status_action_buttons/status_action_buttons.js
View file

@ -15,7 +15,31 @@ import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
library.add(faEllipsisH)
const StatusActionButtons = {
props: ['status', 'replying'],
props: {
status: {
type: Object,
required: true,
},
replying: {
type: Boolean,
default: false,
},
fixedPinned: {
type: Boolean,
default: false,
},
pinned: {
type: Set,
},
useDefaultButtons: {
type: Boolean,
default: false,
},
hideLabels: {
type: Boolean,
default: false,
}
},
emits: ['toggleReplying', 'onSuccess', 'onError'],
data() {
return {
@ -36,14 +60,19 @@ const StatusActionButtons = {
ConfirmModal: defineAsyncComponent(
() => import('src/components/confirm_modal/confirm_modal.vue'),
),
ActionButtonContainer,
},
computed: {
...mapState(useSyncConfigStore, {
pinnedItems: (store) =>
new Set(store.prefsStorage.collections.pinnedStatusActions),
userPinnedItems: (store) => new Set(store.prefsStorage.collections.pinnedStatusActions),
}),
pinnedItems() {
if (this.fixedPinned) {
return this.pinned
} else {
return this.userPinnedItems
}
},
buttons() {
return BUTTONS.filter((x) => (x.if ? x.if(this.funcArg) : true))
},

7
src/components/status_action_buttons/status_action_buttons.scss
View file

@ -8,7 +8,6 @@
grid-auto-flow: row dense;
grid-auto-rows: 1fr;
grid-gap: 0.5em 0.1em;
margin-top: var(--status-margin);
}
.pin-action-button {
@ -17,6 +16,12 @@
padding: 0.5em;
margin: 0;
}
.quick-action.popover-wrapper {
button {
padding: 0
}
}
}
// popover
.extra-action-buttons {

5
src/components/status_action_buttons/status_action_buttons.vue
View file

@ -21,6 +21,8 @@
:close="() => { /* no-op */ }"
:do-action="doAction"
@emoji-picker-shown="onEmojiPickerShown"
:default-button-style="useDefaultButtons"
:hide-label="hideLabels"
/>
<button
v-if="showPin && currentUser"
@ -40,6 +42,7 @@
<Popover
trigger="click"
:trigger-attrs="triggerAttrs"
:normal-button="useDefaultButtons"
class="quick-action"
:tabindex="0"
placement="bottom"
@ -75,6 +78,8 @@
:get-component="getComponent"
:outer-close="close"
:do-action="doAction"
:default-button-style="useDefaultButtons"
:hide-label="hideLabels"
/>
<button
v-if="showPin && currentUser"

2
src/i18n/en.json
View file

@ -1654,6 +1654,8 @@
"delete_confirm_accept_button": "Delete",
"delete_confirm_cancel_button": "Keep",
"reply_to": "Reply to",
"reply_to_selected": "Replying to selected message",
"reply_to_last": "Replying to last message",
"reply_to_with_icon": "{icon} {replyTo}",
"reply_to_with_arg": "{replyToWithIcon} {user}",
"mentions": "Mentions",