Merge branch 'chore/rename-chat' into 'develop'

Rename legacy PleromaFE Chat functionality to "Shout"

See merge request pleroma/pleroma-fe!1207
This commit is contained in:
HJ 2021-06-03 20:16:48 +00:00
commit 2725a0c639
15 changed files with 48 additions and 52 deletions

View file

@ -4,7 +4,7 @@ import Notifications from './components/notifications/notifications.vue'
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
import FeaturesPanel from './components/features_panel/features_panel.vue' import FeaturesPanel from './components/features_panel/features_panel.vue'
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_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 ShoutPanel from './components/shout_panel/shout_panel.vue'
import SettingsModal from './components/settings_modal/settings_modal.vue' import SettingsModal from './components/settings_modal/settings_modal.vue'
import MediaModal from './components/media_modal/media_modal.vue' import MediaModal from './components/media_modal/media_modal.vue'
import SideDrawer from './components/side_drawer/side_drawer.vue' import SideDrawer from './components/side_drawer/side_drawer.vue'
@ -26,7 +26,7 @@ export default {
InstanceSpecificPanel, InstanceSpecificPanel,
FeaturesPanel, FeaturesPanel,
WhoToFollowPanel, WhoToFollowPanel,
ChatPanel, ShoutPanel,
MediaModal, MediaModal,
SideDrawer, SideDrawer,
MobilePostStatusButton, MobilePostStatusButton,
@ -65,7 +65,7 @@ export default {
} }
} }
}, },
chat () { return this.$store.state.chat.channel.state === 'joined' }, shout () { return this.$store.state.shout.channel.state === 'joined' },
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
showInstanceSpecificPanel () { showInstanceSpecificPanel () {
return this.$store.state.instance.showInstanceSpecificPanel && return this.$store.state.instance.showInstanceSpecificPanel &&

View file

@ -49,10 +49,10 @@
</div> </div>
<media-modal /> <media-modal />
</div> </div>
<chat-panel <shout-panel
v-if="currentUser && chat" v-if="currentUser && shout"
:floating="true" :floating="true"
class="floating-chat mobile-hidden" class="floating-shout mobile-hidden"
/> />
<MobilePostStatusButton /> <MobilePostStatusButton />
<UserReportingModal /> <UserReportingModal />

View file

@ -240,7 +240,7 @@ const getNodeInfo = async ({ store }) => {
store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations }) store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') }) store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') }) store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') }) store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') }) store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') }) store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') }) store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })

View file

@ -16,7 +16,7 @@ import FollowRequests from 'components/follow_requests/follow_requests.vue'
import OAuthCallback from 'components/oauth_callback/oauth_callback.vue' import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
import Notifications from 'components/notifications/notifications.vue' import Notifications from 'components/notifications/notifications.vue'
import AuthForm from 'components/auth_form/auth_form.js' import AuthForm from 'components/auth_form/auth_form.js'
import ChatPanel from 'components/chat_panel/chat_panel.vue' import ShoutPanel from 'components/shout_panel/shout_panel.vue'
import WhoToFollow from 'components/who_to_follow/who_to_follow.vue' import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
import About from 'components/about/about.vue' import About from 'components/about/about.vue'
import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue' import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
@ -64,7 +64,7 @@ export default (store) => {
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute }, { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
{ name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute }, { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
{ name: 'login', path: '/login', component: AuthForm }, { name: 'login', path: '/login', component: AuthForm },
{ name: 'chat-panel', path: '/chat-panel', component: ChatPanel, props: () => ({ floating: false }) }, { name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) }, { 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: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute }, { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },

View file

@ -2,7 +2,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
const FeaturesPanel = { const FeaturesPanel = {
computed: { computed: {
chat: function () { return this.$store.state.instance.chatAvailable }, shout: function () { return this.$store.state.instance.shoutAvailable },
pleromaChatMessages: function () { return this.$store.state.instance.pleromaChatMessagesAvailable }, pleromaChatMessages: function () { return this.$store.state.instance.pleromaChatMessagesAvailable },
gopher: function () { return this.$store.state.instance.gopherAvailable }, gopher: function () { return this.$store.state.instance.gopherAvailable },
whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled }, whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },

View file

@ -8,8 +8,8 @@
</div> </div>
<div class="panel-body features-panel"> <div class="panel-body features-panel">
<ul> <ul>
<li v-if="chat"> <li v-if="shout">
{{ $t('features_panel.chat') }} {{ $t('features_panel.shout') }}
</li> </li>
<li v-if="pleromaChatMessages"> <li v-if="pleromaChatMessages">
{{ $t('features_panel.pleroma_chat_messages') }} {{ $t('features_panel.pleroma_chat_messages') }}

View file

@ -10,7 +10,7 @@ library.add(
faTimes faTimes
) )
const chatPanel = { const shoutPanel = {
props: [ 'floating' ], props: [ 'floating' ],
data () { data () {
return { return {
@ -21,12 +21,12 @@ const chatPanel = {
}, },
computed: { computed: {
messages () { messages () {
return this.$store.state.chat.messages return this.$store.state.shout.messages
} }
}, },
methods: { methods: {
submit (message) { submit (message) {
this.$store.state.chat.channel.push('new_msg', { text: message }, 10000) this.$store.state.shout.channel.push('new_msg', { text: message }, 10000)
this.currentMessage = '' this.currentMessage = ''
}, },
togglePanel () { togglePanel () {
@ -50,4 +50,4 @@ const chatPanel = {
} }
} }
export default chatPanel export default shoutPanel

View file

@ -1,12 +1,12 @@
<template> <template>
<div <div
v-if="!collapsed || !floating" v-if="!collapsed || !floating"
class="chat-panel" class="shout-panel"
> >
<div class="panel panel-default"> <div class="panel panel-default">
<div <div
class="panel-heading timeline-heading" class="panel-heading timeline-heading"
:class="{ 'chat-heading': floating }" :class="{ 'shout-heading': floating }"
@click.stop.prevent="togglePanel" @click.stop.prevent="togglePanel"
> >
<div class="title"> <div class="title">
@ -18,33 +18,33 @@
/> />
</div> </div>
</div> </div>
<div class="chat-window"> <div class="shout-window">
<div <div
v-for="message in messages" v-for="message in messages"
:key="message.id" :key="message.id"
class="chat-message" class="shout-message"
> >
<span class="chat-avatar"> <span class="shout-avatar">
<img :src="message.author.avatar"> <img :src="message.author.avatar">
</span> </span>
<div class="chat-content"> <div class="shout-content">
<router-link <router-link
class="chat-name" class="shout-name"
:to="userProfileLink(message.author)" :to="userProfileLink(message.author)"
> >
{{ message.author.username }} {{ message.author.username }}
</router-link> </router-link>
<br> <br>
<span class="chat-text"> <span class="shout-text">
{{ message.text }} {{ message.text }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="chat-input"> <div class="shout-input">
<textarea <textarea
v-model="currentMessage" v-model="currentMessage"
class="chat-input-textarea" class="shout-input-textarea"
rows="1" rows="1"
@keyup.enter="submit(currentMessage)" @keyup.enter="submit(currentMessage)"
/> />
@ -53,11 +53,11 @@
</div> </div>
<div <div
v-else v-else
class="chat-panel" class="shout-panel"
> >
<div class="panel panel-default"> <div class="panel panel-default">
<div <div
class="panel-heading stub timeline-heading chat-heading" class="panel-heading stub timeline-heading shout-heading"
@click.stop.prevent="togglePanel" @click.stop.prevent="togglePanel"
> >
<div class="title"> <div class="title">
@ -72,12 +72,12 @@
</div> </div>
</template> </template>
<script src="./chat_panel.js"></script> <script src="./shout_panel.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.floating-chat { .floating-shout {
position: fixed; position: fixed;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
@ -85,8 +85,8 @@
max-width: 25em; max-width: 25em;
} }
.chat-panel { .shout-panel {
.chat-heading { .shout-heading {
cursor: pointer; cursor: pointer;
.icon { .icon {
@ -102,22 +102,22 @@
} }
} }
.chat-window { .shout-window {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
max-height: 20em; max-height: 20em;
} }
.chat-window-container { .shout-window-container {
height: 100%; height: 100%;
} }
.chat-message { .shout-message {
display: flex; display: flex;
padding: 0.2em 0.5em padding: 0.2em 0.5em
} }
.chat-avatar { .shout-avatar {
img { img {
height: 24px; height: 24px;
width: 24px; width: 24px;
@ -128,7 +128,7 @@
} }
} }
.chat-input { .shout-input {
display: flex; display: flex;
textarea { textarea {
flex: 1; flex: 1;
@ -138,7 +138,7 @@
} }
} }
.chat-panel { .shout-panel {
.title { .title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View file

@ -49,7 +49,6 @@ const SideDrawer = {
currentUser () { currentUser () {
return this.$store.state.users.currentUser return this.$store.state.users.currentUser
}, },
chat () { return this.$store.state.chat.channel.state === 'joined' },
unseenNotifications () { unseenNotifications () {
return unseenNotificationsFromStore(this.$store) return unseenNotificationsFromStore(this.$store)
}, },

View file

@ -11,7 +11,7 @@ import statusesModule from './modules/statuses.js'
import usersModule from './modules/users.js' import usersModule from './modules/users.js'
import apiModule from './modules/api.js' import apiModule from './modules/api.js'
import configModule from './modules/config.js' import configModule from './modules/config.js'
import chatModule from './modules/chat.js' import shoutModule from './modules/shout.js'
import oauthModule from './modules/oauth.js' import oauthModule from './modules/oauth.js'
import authFlowModule from './modules/auth_flow.js' import authFlowModule from './modules/auth_flow.js'
import mediaViewerModule from './modules/media_viewer.js' import mediaViewerModule from './modules/media_viewer.js'
@ -88,7 +88,7 @@ const persistedStateOptions = {
users: usersModule, users: usersModule,
api: apiModule, api: apiModule,
config: configModule, config: configModule,
chat: chatModule, shout: shoutModule,
oauth: oauthModule, oauth: oauthModule,
authFlow: authFlowModule, authFlow: authFlowModule,
mediaViewer: mediaViewerModule, mediaViewer: mediaViewerModule,

View file

@ -255,12 +255,12 @@ const api = {
initializeSocket ({ dispatch, commit, state, rootState }) { initializeSocket ({ dispatch, commit, state, rootState }) {
// Set up websocket connection // Set up websocket connection
const token = state.wsToken const token = state.wsToken
if (rootState.instance.chatAvailable && typeof token !== 'undefined' && state.socket === null) { if (rootState.instance.shoutAvailable && typeof token !== 'undefined' && state.socket === null) {
const socket = new Socket('/socket', { params: { token } }) const socket = new Socket('/socket', { params: { token } })
socket.connect() socket.connect()
commit('setSocket', socket) commit('setSocket', socket)
dispatch('initializeChat', socket) dispatch('initializeShout', socket)
} }
}, },
disconnectFromSocket ({ commit, state }) { disconnectFromSocket ({ commit, state }) {

View file

@ -19,7 +19,6 @@ const defaultState = {
defaultBanner: '/images/banner.png', defaultBanner: '/images/banner.png',
background: '/static/aurora_borealis.jpg', background: '/static/aurora_borealis.jpg',
collapseMessageWithSubject: false, collapseMessageWithSubject: false,
disableChat: false,
greentext: false, greentext: false,
hideFilteredStatuses: false, hideFilteredStatuses: false,
hideMutedPosts: false, hideMutedPosts: false,
@ -57,7 +56,7 @@ const defaultState = {
knownDomains: [], knownDomains: [],
// Feature-set, apparently, not everything here is reported... // Feature-set, apparently, not everything here is reported...
chatAvailable: false, shoutAvailable: false,
pleromaChatMessagesAvailable: false, pleromaChatMessagesAvailable: false,
gopherAvailable: false, gopherAvailable: false,
mediaProxyAvailable: false, mediaProxyAvailable: false,
@ -107,7 +106,7 @@ const instance = {
case 'name': case 'name':
dispatch('setPageTitle') dispatch('setPageTitle')
break break
case 'chatAvailable': case 'shoutAvailable':
if (value) { if (value) {
dispatch('initializeSocket') dispatch('initializeSocket')
} }

View file

@ -1,4 +1,4 @@
const chat = { const shout = {
state: { state: {
messages: [], messages: [],
channel: { state: '' } channel: { state: '' }
@ -16,9 +16,8 @@ const chat = {
} }
}, },
actions: { actions: {
initializeChat (store, socket) { initializeShout (store, socket) {
const channel = socket.channel('chat:public') const channel = socket.channel('chat:public')
channel.on('new_msg', (msg) => { channel.on('new_msg', (msg) => {
store.commit('addMessage', msg) store.commit('addMessage', msg)
}) })
@ -31,4 +30,4 @@ const chat = {
} }
} }
export default chat export default shout

View file

@ -531,7 +531,7 @@ const users = {
if (user.token) { if (user.token) {
store.dispatch('setWsToken', user.token) store.dispatch('setWsToken', user.token)
// Initialize the chat socket. // Initialize the shout socket.
store.dispatch('initializeSocket') store.dispatch('initializeSocket')
} }

View file

@ -2,7 +2,6 @@
"alwaysShowSubjectInput": true, "alwaysShowSubjectInput": true,
"background": "/static/aurora_borealis.jpg", "background": "/static/aurora_borealis.jpg",
"collapseMessageWithSubject": false, "collapseMessageWithSubject": false,
"disableChat": false,
"greentext": false, "greentext": false,
"hideFilteredStatuses": false, "hideFilteredStatuses": false,
"hideMutedPosts": false, "hideMutedPosts": false,