...
 
Commits (174)
......@@ -4,18 +4,37 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased]
### Changed
- Greentext now has separate color slot for it
- Removed the use of with_move parameters when fetching notifications
- Push notifications now are the same as normal notfication, and are localized.
### Fixed
- Weird bug related to post being sent seemingly after pasting with keyboard (hopefully)
- Multiple issues with muted statuses/notifications
## [Unreleased patch]
### Add
- Added private notifications option for push notifications
- 'Copy link' button for statuses (in the ellipsis menu)
- Autocomplete domains from list of known instances
### Changed
- Registration page no longer requires email if the server is configured not to require it
- Change heart to thumbs up in reaction picker
- Close the media modal on navigation events
- Add colons to the emoji alt text, to make them copyable
- Add better visual indication for drag-and-drop for files
### Fixed
- Custom Emoji will display in poll options now.
- Status ellipsis menu closes properly when selecting certain options
- Cropped images look correct in Chrome
- Newlines in the muted words settings work again
- Clicking on non-latin hashtags won't open a new window
- Uploading and drag-dropping multiple files works correctly now.
- Subject field now appears disabled when posting
- Fix status ellipsis menu being cut off in notifications column
- Fixed autocomplete sometimes not returning the right user when there's already some results
## [2.0.3] - 2020-05-02
### Fixed
......
# pleroma_fe
# Pleroma-FE
> A single column frontend for both Pleroma and GS servers.
> A single column frontend designed for Pleroma.
![screenshot](https://i.imgur.com/DJVqSJ0.png)
......@@ -11,7 +11,6 @@ To translate Pleroma-FE, add your language to [src/i18n/messages.js](https://git
# FOR ADMINS
You don't need to build Pleroma-FE yourself. Those using the Pleroma backend will be able to use it out of the box.
For the GNU social backend, check out https://git.pleroma.social/pleroma/pleroma-fe/wikis/dual-boot-with-qvitter to see how to run Pleroma-FE and Qvitter at the same time.
## Build Setup
......
......@@ -33,7 +33,7 @@ will become
Note that you can only use emoji defined on your instance, you cannot "copy" someone else's emoji, and will have to ask your administrator to copy emoji from other instance to yours.
Lastly, there's two convenience options for emoji: an emoji picker (smiley face to the right of "submit" button) and autocomplete suggestions - when you start typing :shortcode: it will automatically try to suggest you emoj and complete the shortcode for you if you select one. **Note** that if emoji doesn't show up in suggestions nor in emoji picker it means there's no such emoji on your instance, if shortcode doesn't match any defined emoji it will appear as text.
* **Attachments** are fairly simple - you can attach any file to a post as long as the file is within maximum size limits. If you're uploading explicit material you can mark all of your attachments as sensitive (or add `#nsfw` tag) - it will hide the images and videos behind a warning so that it won't be displayed instantly.
* **Subject line** also known as **CW** (Content Warning) could be used as a header to the post and/or to warn others about contents of the post having something that might upset somebody or something among those lines. Several applications allow to hide post content leaving only subject line visible. As a side-effect using subject line will also mark your images as sensitive (see above).
* **Subject line** also known as **CW** (Content Warning) could be used as a header to the post and/or to warn others about contents of the post having something that might upset somebody or something among those lines. Several applications allow to hide post content leaving only subject line visible. Using a subject line will not mark your images as sensitive, you will have to do that explicitly (see above).
* **Visiblity scope** controls who will be able to see your posts. There are four scopes available:
1. `Public`: This is the default, and some fediverse software like GNU Social only supports this. This means that your post is accessible by anyone and will be shown in the public timelines.
......
......@@ -6,6 +6,7 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance
import FeaturesPanel from './components/features_panel/features_panel.vue'
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
import ChatPanel from './components/chat_panel/chat_panel.vue'
import SettingsModal from './components/settings_modal/settings_modal.vue'
import MediaModal from './components/media_modal/media_modal.vue'
import SideDrawer from './components/side_drawer/side_drawer.vue'
import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
......@@ -29,6 +30,7 @@ export default {
SideDrawer,
MobilePostStatusButton,
MobileNav,
SettingsModal,
UserReportingModal,
PostStatusModal
},
......@@ -46,7 +48,8 @@ export default {
}),
created () {
// Load the locale from the storage
this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage
const val = this.$store.getters.mergedConfig.interfaceLanguage
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
window.addEventListener('resize', this.updateMobileState)
},
destroyed () {
......@@ -118,6 +121,9 @@ export default {
onSearchBarToggled (hidden) {
this.searchBarHidden = hidden
},
openSettingsModal () {
this.$store.dispatch('openSettingsModal')
},
updateMobileState () {
const mobileLayout = windowWidth() <= 800
const layoutHeight = windowHeight()
......
......@@ -56,6 +56,7 @@ body {
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior: none;
&.hidden {
display: none;
......@@ -566,7 +567,7 @@ main-router {
min-height: 0;
box-sizing: border-box;
margin: 0;
margin-left: .25em;
margin-left: .5em;
min-width: 1px;
align-self: stretch;
}
......@@ -860,51 +861,6 @@ nav {
}
}
.setting-item {
border-bottom: 2px solid var(--fg, $fallback--fg);
margin: 1em 1em 1.4em;
padding-bottom: 1.4em;
> div {
margin-bottom: .5em;
&:last-child {
margin-bottom: 0;
}
}
&:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 1em;
}
select {
min-width: 10em;
}
textarea {
width: 100%;
max-width: 100%;
height: 100px;
}
.unavailable,
.unavailable i {
color: var(--cRed, $fallback--cRed);
color: $fallback--cRed;
}
.btn {
min-height: 28px;
min-width: 10em;
padding: 0 2em;
}
.number-input {
max-width: 6em;
}
}
.select-multiple {
display: flex;
.option-list {
......@@ -970,24 +926,15 @@ nav {
background-color: var(--panel, $fallback--fg);
}
.alert-dot-number {
display: inline-block;
border-radius: 1em;
min-width: 1.3rem;
min-height: 1.3rem;
max-height: 1.3rem;
.unread-chat-count {
font-size: 0.9em;
font-weight: bolder;
line-height: 1.3rem;
text-align: center;
vertical-align: middle;
white-space: nowrap;
padding: 0 0.3em;
font-style: normal;
position: absolute;
right: 0.6rem;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
color: white;
color: var(--badgeNotificationText, white);
font-style: normal;
padding: 0 0.3em;
min-width: 1.3rem;
min-height: 1.3rem;
max-height: 1.3rem;
line-height: 1.3rem;
}
......@@ -46,15 +46,16 @@
@toggled="onSearchBarToggled"
@click.stop.native
/>
<router-link
<a
href="#"
class="mobile-hidden"
:to="{ name: 'settings'}"
@click.stop="openSettingsModal"
>
<i
class="button-icon icon-cog nav-icon"
:title="$t('nav.preferences')"
/>
</router-link>
</a>
<a
v-if="currentUser && currentUser.role === 'admin'"
href="/pleroma/admin/#/login-pleroma"
......@@ -126,6 +127,7 @@
<MobilePostStatusButton />
<UserReportingModal />
<PostStatusModal />
<SettingsModal />
<portal-target name="modal" />
</div>
</template>
......
......@@ -202,6 +202,7 @@ const getNodeInfo = async ({ store }) => {
const features = metadata.features
store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
......
......@@ -9,10 +9,8 @@ import ChatList from 'components/chat_list/chat_list.vue'
import Chat from 'components/chat/chat.vue'
import UserProfile from 'components/user_profile/user_profile.vue'
import Search from 'components/search/search.vue'
import Settings from 'components/settings/settings.vue'
import Registration from 'components/registration/registration.vue'
import PasswordReset from 'components/password_reset/password_reset.vue'
import UserSettings from 'components/user_settings/user_settings.vue'
import FollowRequests from 'components/follow_requests/follow_requests.vue'
import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
import Notifications from 'components/notifications/notifications.vue'
......@@ -31,7 +29,7 @@ export default (store) => {
}
}
return [
let routes = [
{ name: 'root',
path: '/',
redirect: _to => {
......@@ -58,21 +56,26 @@ export default (store) => {
{ name: 'external-user-profile', path: '/users/:id', component: UserProfile },
{ name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
{ name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
{ name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
{ name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
{ name: 'settings', path: '/settings', component: Settings },
{ name: 'registration', path: '/registration', component: Registration },
{ name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
{ name: 'registration-token', path: '/registration/:token', component: Registration },
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
{ name: 'user-settings', path: '/user-settings', component: UserSettings, beforeEnter: validateAuthenticatedRoute },
{ name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
{ name: 'login', path: '/login', component: AuthForm },
{ name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },
{ name: 'chat-panel', path: '/chat-panel', component: ChatPanel, props: () => ({ floating: false }) },
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
{ name: 'about', path: '/about', component: About },
{ name: 'user-profile', path: '/(users/)?:name', component: UserProfile }
]
if (store.state.instance.pleromaChatMessagesAvailable) {
routes = routes.concat([
{ name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
{ name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute }
])
}
return routes
}
import { mapState } from 'vuex'
import ProgressButton from '../progress_button/progress_button.vue'
import Popover from '../popover/popover.vue'
......@@ -34,6 +35,11 @@ const AccountActions = {
params: { recipient_id: this.user.id }
})
}
},
computed: {
...mapState({
pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
})
}
}
......
......@@ -3,6 +3,7 @@
<Popover
trigger="click"
placement="bottom"
:bound-to="{ x: 'container' }"
>
<div
slot="content"
......@@ -50,6 +51,7 @@
{{ $t('user_card.report') }}
</button>
<button
v-if="pleromaChatMessagesAvailable"
class="btn btn-default btn-block dropdown-item"
@click="openChat"
>
......
<template>
<div class="async-component-error">
<div>
<h4>
{{ $t('general.generic_error') }}
</h4>
<p>
{{ $t('general.error_retry') }}
</p>
<button
class="btn"
@click="retry"
>
{{ $t('general.retry') }}
</button>
</div>
</div>
</template>
<script>
export default {
methods: {
retry () {
this.$emit('resetAsyncComponent')
}
}
}
</script>
<style lang="scss">
.async-component-error {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
.btn {
margin: .5em;
padding: .5em 2em;
}
}
</style>
......@@ -27,8 +27,7 @@ const Attachment = {
},
components: {
StillImage,
VideoAttachment,
AudioPlayer: () => import('../audio_player/audio_player.vue')
VideoAttachment
},
computed: {
usePlaceHolder () {
......
......@@ -81,16 +81,11 @@
</a>
<audio
v-if="type === 'audio' && !mergedConfig.useWavesurfer"
v-if="type === 'audio'"
:src="attachment.url"
controls
/>
<audio-player
v-if="type === 'audio' && mergedConfig.useWavesurfer"
:src="attachment.url"
/>
<div
v-if="type === 'html' && attachment.oembed"
class="oembed"
......
import _ from 'lodash'
import { WSConnectionStatus } from '../../services/api/api.service.js'
import { mapGetters, mapState } from 'vuex'
import ChatMessage from '../chat_message/chat_message.vue'
import ChatAvatar from '../chat_avatar/chat_avatar.vue'
......@@ -6,6 +7,10 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
import ChatTitle from '../chat_title/chat_title.vue'
import chatService from '../../services/chat_service/chat_service.js'
import ChatLayout from './chat_layout.js'
import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
const BOTTOMED_OUT_OFFSET = 10
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
const Chat = {
components: {
......@@ -17,16 +22,11 @@ const Chat = {
mixins: [ChatLayout],
data () {
return {
loadingOlderMessages: false,
loadingMessages: true,
loadingChat: false,
editedStatusId: undefined,
fetcher: undefined,
jumpToBottomButtonVisible: false,
mobileLayout: this.$store.state.interface.mobileLayout,
recipientId: this.$route.params.recipient_id,
hoveredSequenceId: undefined,
lastPosition: undefined
hoveredMessageChainId: undefined,
scrollPositionBeforeResize: {},
scrollableContainerHeight: '100%',
errorLoadingChat: false
}
},
created () {
......@@ -34,20 +34,16 @@ const Chat = {
window.addEventListener('resize', this.handleLayoutChange)
},
mounted () {
window.addEventListener('scroll', this.handleScroll)
if (typeof document.hidden !== 'undefined') {
document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
}
this.$nextTick(() => {
let scrollable = this.$refs.scrollable
if (scrollable) {
window.addEventListener('scroll', this.handleScroll)
}
this.updateSize()
this.updateScrollableContainerHeight()
this.handleResize()
})
this.setChatLayout()
if (typeof document.hidden !== 'undefined') {
document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
this.$store.commit('setChatFocused', !document.hidden)
}
},
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
......@@ -57,26 +53,17 @@ const Chat = {
this.$store.dispatch('clearCurrentChat')
},
computed: {
chatParticipants () {
if (this.currentChat) {
return [this.currentChat.account]
} else {
const user = this.findUser(this.recipientId)
if (user) {
return [user]
} else {
return []
}
}
},
recipient () {
return this.currentChat && this.currentChat.account
},
recipientId () {
return this.$route.params.recipient_id
},
formPlaceholder () {
if (this.recipient) {
return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
} else {
return this.$t('chats.write_message')
return ''
}
},
chatViewItems () {
......@@ -85,155 +72,121 @@ const Chat = {
newMessageCount () {
return this.currentChatMessageService && this.currentChatMessageService.newMessageCount
},
streamingEnabled () {
return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
},
...mapGetters([
'currentChat',
'currentChatMessageService',
'findUser',
'findOpenedChatByRecipientId',
'mergedConfig'
]),
...mapState({
backendInteractor: state => state.api.backendInteractor,
currentUser: state => state.users.currentUser,
isMobileLayout: state => state.interface.mobileLayout,
openedChats: state => state.chats.openedChats,
openedChatMessageServices: state => state.chats.openedChatMessageServices,
windowHeight: state => state.interface.layoutHeight
mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
mobileLayout: state => state.interface.mobileLayout,
layoutHeight: state => state.interface.layoutHeight,
currentUser: state => state.users.currentUser
})
},
watch: {
chatViewItems (prev, next) {
let bottomedOut = this.bottomedOut(10)
chatViewItems () {
// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
this.$nextTick(() => {
if (bottomedOut && prev.length !== next.length) {
this.scrollDown({ forceRead: true })
if (bottomedOutBeforeUpdate) {
this.scrollDown({ forceRead: !document.hidden })
}
})
},
'$route': function (prev, next) {
this.recipientId = this.$route.params.recipient_id
'$route': function () {
this.startFetching()
},
windowHeight () {
layoutHeight () {
this.handleResize({ expand: true })
},
mastoUserSocketStatus (newValue) {
if (newValue === WSConnectionStatus.JOINED) {
this.fetchChat({ isFirstFetch: true })
}
}
},
methods: {
onStatusHover ({ state, sequenceId }) {
this.hoveredSequenceId = state ? sequenceId : undefined
},
onPosted (data) {
this.$store.dispatch('addChatMessages', { chatId: this.currentChat.id, messages: [data] }).then(() => {
this.$nextTick(() => {
this.updateSize()
this.scrollDown({ forceRead: true })
})
})
// Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
onMessageHover ({ isHovered, messageChainId }) {
this.hoveredMessageChainId = isHovered ? messageChainId : undefined
},
onFilesDropped () {
this.$nextTick(() => {
this.updateSize()
this.updateScrollableContainerHeight()
})
},
handleVisibilityChange () {
this.$store.commit('setChatFocused', !document.hidden)
this.$nextTick(() => {
if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
this.scrollDown({ forceRead: true })
}
})
},
handleLayoutChange () {
this.updateSize()
let mobileLayout = this.isMobileLayout
if (this.mobileLayout !== mobileLayout) {
if (this.mobileLayout === false && mobileLayout === true) {
this.setMobileChatLayout()
}
if (this.mobileLayout === true && mobileLayout === false) {
this.unsetMobileChatLayout()
}
this.mobileLayout = this.isMobileLayout
this.$nextTick(() => {
this.updateSize()
this.scrollDown()
})
this.updateScrollableContainerHeight()
if (this.mobileLayout) {
this.setMobileChatLayout()
} else {
this.unsetMobileChatLayout()
}
this.$nextTick(() => {
this.updateScrollableContainerHeight()
this.scrollDown()
})
},
// Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
updateScrollableContainerHeight () {
const header = this.$refs.header
const footer = this.$refs.footer
const inner = this.mobileLayout ? window.document.body : this.$refs.inner
this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
},
// Preserves the scroll position when OSK appears or the posting form changes its height.
handleResize (opts) {
this.$nextTick(() => {
this.updateSize()
this.updateScrollableContainerHeight()
let prevOffsetHeight
if (this.lastPosition) {
prevOffsetHeight = this.lastPosition.offsetHeight
}
this.lastPosition = {
scrollTop: this.$refs.scrollable.scrollTop,
totalHeight: this.$refs.scrollable.scrollHeight,
offsetHeight: this.$refs.scrollable.offsetHeight
}
const { offsetHeight = undefined } = this.scrollPositionBeforeResize
this.scrollPositionBeforeResize = getScrollPosition(this.$refs.scrollable)
if (this.lastPosition) {
const diff = this.lastPosition.offsetHeight - prevOffsetHeight
const bottomedOut = this.bottomedOut()
if (diff < 0 || (!bottomedOut && opts && opts.expand)) {
this.$nextTick(() => {
this.updateSize()
this.$nextTick(() => {
this.$refs.scrollable.scrollTo({
top: this.$refs.scrollable.scrollTop - diff,
left: 0
})
})
const diff = this.scrollPositionBeforeResize.offsetHeight - offsetHeight
if (diff < 0 || (!this.bottomedOut() && opts && opts.expand)) {
this.$nextTick(() => {
this.updateScrollableContainerHeight()
this.$refs.scrollable.scrollTo({
top: this.$refs.scrollable.scrollTop - diff,
left: 0
})
}
})
}
})
},
updateSize (newHeight, _diff) {
let h = this.$refs.header
let s = this.$refs.scrollable
let f = this.$refs.footer
if (h && s && f) {
let height = 0
if (this.isMobileLayout) {
height = parseFloat(getComputedStyle(window.document.body, null).height.replace('px', ''))
let newHeight = (height - h.clientHeight - f.clientHeight)
s.style.height = newHeight + 'px'
} else {
height = parseFloat(getComputedStyle(this.$refs.inner, null).height.replace('px', ''))
let newHeight = (height - h.clientHeight - f.clientHeight)
s.style.height = newHeight + 'px'
}
}
},
scrollDown (options = {}) {
let { behavior = 'auto', forceRead = false } = options
let container = this.$refs.scrollable
let scrollable = this.$refs.scrollable
this.doScrollDown(scrollable, container, behavior)
const { behavior = 'auto', forceRead = false } = options
const scrollable = this.$refs.scrollable
if (!scrollable) { return }
this.$nextTick(() => {
scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
})
if (forceRead || this.newMessageCount > 0) {
this.readChat()
}
},
doScrollDown (scrollable, container, behavior) {
if (!container) { return }
this.$nextTick(() => {
scrollable.scrollTo({ top: container.scrollHeight, left: 0, behavior })
})
readChat () {
if (!(this.currentChatMessageService && this.currentChatMessageService.lastMessage)) { return }
if (document.hidden) { return }
const lastReadId = this.currentChatMessageService.lastMessage.id
this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId })
},
bottomedOut (offset) {
let bottomedOut = false
if (this.$refs.scrollable) {
let scrollHeight = this.$refs.scrollable.scrollTop + (offset || 0)
let totalHeight = this.$refs.scrollable.scrollHeight - this.$refs.scrollable.offsetHeight
bottomedOut = totalHeight <= scrollHeight
}
return bottomedOut
},
getPosition () {
let scrollHeight = this.$refs.scrollable.scrollTop
let totalHeight = this.$refs.scrollable.scrollHeight - this.$refs.scrollable.offsetHeight
return { scrollHeight, totalHeight }
return isBottomedOut(this.$refs.scrollable, offset)
},
reachedTop () {
const scrollable = this.$refs.scrollable
......@@ -243,10 +196,8 @@ const Chat = {
if (!this.currentChat) { return }
if (this.reachedTop()) {
this.fetchChat(false, this.currentChat.id, {
maxId: this.currentChatMessageService.minId
})
} else if (this.bottomedOut(150)) {
this.fetchChat({ maxId: this.currentChatMessageService.minId })
} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
this.jumpToBottomButtonVisible = false
if (this.newMessageCount > 0) {
this.readChat()
......@@ -255,95 +206,97 @@ const Chat = {
this.jumpToBottomButtonVisible = true
}
}, 100),
goBack () {
this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
handleScrollUp (positionBeforeLoading) {
const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
this.$refs.scrollable.scrollTo({
top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
left: 0
})
},
fetchChat (isFirstFetch, chatId, opts = {}) {
const chatMessageService = this.openedChatMessageServices[chatId]
let maxId = opts.maxId
let sinceId
if (opts.sinceId && this.mergedConfig.useStreamingApi) {
return
}
if (opts.sinceId) {
sinceId = chatMessageService.lastMessage && chatMessageService.lastMessage.id
}
if (isFirstFetch) {
this.scrollDown({ forceRead: true })
}
let positionBeforeLoading = null
let previousScrollTop
if (maxId) {
this.loadingOlderMessages = true
positionBeforeLoading = this.getPosition()
previousScrollTop = this.$refs.scrollable.scrollTop
}
fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
const chatMessageService = this.currentChatMessageService
if (!chatMessageService) { return }
if (fetchLatest && this.streamingEnabled) { return }
const chatId = chatMessageService.chatId
const fetchOlderMessages = !!maxId
const sinceId = fetchLatest && chatMessageService.lastMessage && chatMessageService.lastMessage.id
this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
.then((messages) => {
let bottomedOut = this.bottomedOut()
this.loadingOlderMessages = false
// Clear the current chat in case we're recovering from a ws connection loss.
if (isFirstFetch) {
chatService.clear(chatMessageService)
}
const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
if (positionBeforeLoading) {
this.$nextTick(() => {
let positionAfterLoading = this.getPosition()
let scrollable = this.$refs.scrollable
scrollable.scrollTo({
top: previousScrollTop + (positionAfterLoading.totalHeight - positionBeforeLoading.totalHeight),
left: 0
})
})
}
this.$nextTick(() => {
if (fetchOlderMessages) {
this.handleScrollUp(positionBeforeUpdate)
}
if (isFirstFetch) {
this.$nextTick(() => {
this.updateSize()
})
} else if (bottomedOut) {
this.scrollDown()
}
setTimeout(() => {
this.loadingMessages = false
}, 1000)
if (isFirstFetch) {
this.updateScrollableContainerHeight()
}
})
})
})
},
readChat () {
if (!(this.currentChat && this.currentChat.id)) { return }
this.$store.dispatch('readChat', { id: this.currentChat.id })
},
async startFetching () {
let chat = this.findOpenedChatByRecipientId(this.recipientId)
if (!chat) {
chat = await this.backendInteractor.getOrCreateChat({ accountId: this.recipientId })
try {
chat = await this.backendInteractor.getOrCreateChat({ accountId: this.recipientId })
} catch (e) {
console.error('Error creating or getting a chat', e)
this.errorLoadingChat = true
}
}
if (chat) {
this.$nextTick(() => {
this.scrollDown({ forceRead: true })
})
this.$store.dispatch('addOpenedChat', { chat })
this.doStartFetching()
}
this.$nextTick(() => {
this.scrollDown({ forceRead: true })
})
this.$store.dispatch('addOpenedChat', { chat })
this.doStartFetching()
},
doStartFetching () {
let chatId = this.currentChat.id
this.$store.dispatch('startFetchingCurrentChat', {
fetcher: () => setInterval(() => this.fetchChat(false, chatId, { sinceId: true }), 5000)
fetcher: () => setInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
})
this.fetchChat(true, chatId)
this.fetchChat({ isFirstFetch: true })
},
poster (opts) {
const status = opts.status
let params = {
sendMessage ({ status, media }) {
const params = {
id: this.currentChat.id,
content: status
}
if (opts.media && opts.media[0]) {
params.mediaId = opts.media[0].id
if (media[0]) {
params.mediaId = media[0].id
}
return this.backendInteractor.postChatMessage(params)
return this.backendInteractor.sendChatMessage(params)
.then(data => {
this.$store.dispatch('addChatMessages', { chatId: this.currentChat.id, messages: [data] }).then(() => {
this.$nextTick(() => {
this.updateScrollableContainerHeight()
this.scrollDown({ forceRead: true })
})
})
return data
})
.catch(error => {
console.error('Error sending message', error)
return {
error: this.$t('chats.error_sending_message')
}
})
},
goBack () {
this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
}
}
}
......
.direct-conversation-view {
.chat-view {
display: flex;
height: calc(100vh - 60px);
width: 100%;
.direct-conversation-view-inner {
.chat-view-inner {
height: auto;
width: 100%;
overflow: visible;
......@@ -11,208 +11,151 @@
margin-top: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
}
.direct-conversation-view-body {
background-color: var(--chatBg, $fallback--bg);
display: flex;
flex-direction: column;
width: 100%;
overflow: visible;
.chat-view-body {
background-color: var(--chatBg, $fallback--bg);
display: flex;
flex-direction: column;
width: 100%;
overflow: visible;
border-radius: none;
min-height: 100%;
margin-left: 0;
margin-right: 0;
margin-bottom: 0em;
margin-top: 0em;
border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;
&::after {
border-radius: none;
min-height: 100%;
margin-left: 0;
margin-right: 0;
margin-bottom: 0em;
margin-top: 0em;
border-radius: 10px 10px 0 0;
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;
&.panel {
&::after {
border-radius: 0;
box-shadow: none;
}
}
box-shadow: none;
}
}
.direct-conversation-view-heading {
align-items: center;
justify-content: space-between;
top: 50px;
display: flex;
z-index: 2;
border-radius: none;
position: -webkit-sticky;
position: sticky;
.direct-conversation-title {
display: flex;
a {
display: flex;
align-items: center;
}
}
.go-back-button-wrapper {
display: flex;
width: 100%;
}
.button-icon {
cursor: pointer;
display: flex;
align-content: center;
align-items: center;
}
.go-back-button {
cursor: pointer;
margin-right: 1.2em;
i {
color: $fallback--link;
color: var(--panelLink, $fallback--link);
}
}
.title {
flex-shrink: 1;
margin-right: 0em;
overflow: hidden;
text-overflow: ellipsis;
line-height: 28px;
flex-shrink: 1;
margin-right: 0em;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
max-width: 80%;
display: grid;
display: flex;
}
}
.scrollable-message-list {
padding: 0 10px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.scrollable {
padding: 0 10px;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.footer {
position: sticky;
bottom: 0px;
}
.chat-view-heading {
align-items: center;
justify-content: space-between;
top: 50px;
display: flex;
z-index: 2;
border-radius: none;
position: sticky;
display: flex;
overflow: hidden;
}
.go-back-button {
margin-right: 1.2em;
cursor: pointer;
}
.jump-to-bottom-button {
width: 2.5em;
height: 2.5em;
border-radius: 100%;
position: absolute;
right: 1.3em;
top: -3.2em;
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
z-index: 10;
transition: 0.35s all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
opacity: 0;
visibility: hidden;
cursor: pointer;
&.visible {
opacity: 1;
visibility: visible;
}
i {
font-size: 1em;
color: $fallback--text;
color: var(--text, $fallback--text);
}
.footer {
position: -webkit-sticky;
position: sticky;
bottom: 0px;
.unread-message-count {
font-size: 0.8em;
left: 50%;
transform: translate(-50%, 0);
border-radius: 100%;
margin-top: -1rem;
padding: 0;
}
.chat-loading-error {
width: 100%;
display: flex;
align-items: flex-end;
height: 100%;
textarea {
outline: none
}
.error {
width: 100%;
}
}
}
}
@media all and (max-width: 800px) {
.direct-conversation-view {
@media all and (max-width: 800px) {
height: 100%;
overflow: hidden;
.direct-conversation-view-inner {
.chat-view-inner {
overflow: hidden;
height: 100%;
margin-top: 0;
margin-left: 0;
margin-right: 0;
.direct-conversation-view-body {
display: flex;
min-height: auto;
overflow: hidden;
height: 100%;
margin: 0;
border-radius: 0 !important;
.direct-conversation-view-heading {
position: static;
z-index: 9999;
top: 0;
margin-top: 0;
border-radius: 0;
}
.scrollable {
display: unset;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.footer {
position: relative;
bottom: auto;
.post-status-form form {
padding: 0;
}
}
}
}
}
}
.jump-to-bottom-button {
width: 2.5em;
height: 2.5em;
border-radius: 100%;
position: absolute;
position: absolute;
right: 1.3em;
top: -3.2em;
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
z-index: 10;
transition: 0.35s all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
opacity: 0;
visibility: hidden;
cursor: pointer;
.chat-view-body {
display: flex;
min-height: auto;
overflow: hidden;
height: 100%;
margin: 0;
border-radius: 0 !important;
}
&.visible {
opacity: 1;
visibility: visible;
}
.chat-view-heading {
position: static;
z-index: 9999;
top: 0;
margin-top: 0;
border-radius: 0;
}
i {
font-size: 1em;
color: $fallback--text;
color: var(--text, $fallback--text);
}
.scrollable-message-list {
display: unset;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.new-messages-alert-dot {
left: 50%;
transform: translate(-50%, 0);
border-radius: 100%;
height: 1.3em;
width: 1.3em;
position: absolute;
top: calc(50% - 8px);
text-align: center;
font-style: normal;;
font-weight: bolder;
margin-top: -1rem;
font-size: 0.8em;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
color: white;
color: var(--badgeNotificationText, white);
.footer {
position: sticky;
bottom: auto;
}
}