forked from AkkomaGang/akkoma-fe
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:
commit
2725a0c639
15 changed files with 48 additions and 52 deletions
|
@ -4,7 +4,7 @@ import Notifications from './components/notifications/notifications.vue'
|
|||
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_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 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 MediaModal from './components/media_modal/media_modal.vue'
|
||||
import SideDrawer from './components/side_drawer/side_drawer.vue'
|
||||
|
@ -26,7 +26,7 @@ export default {
|
|||
InstanceSpecificPanel,
|
||||
FeaturesPanel,
|
||||
WhoToFollowPanel,
|
||||
ChatPanel,
|
||||
ShoutPanel,
|
||||
MediaModal,
|
||||
SideDrawer,
|
||||
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 },
|
||||
showInstanceSpecificPanel () {
|
||||
return this.$store.state.instance.showInstanceSpecificPanel &&
|
||||
|
|
|
@ -49,10 +49,10 @@
|
|||
</div>
|
||||
<media-modal />
|
||||
</div>
|
||||
<chat-panel
|
||||
v-if="currentUser && chat"
|
||||
<shout-panel
|
||||
v-if="currentUser && shout"
|
||||
:floating="true"
|
||||
class="floating-chat mobile-hidden"
|
||||
class="floating-shout mobile-hidden"
|
||||
/>
|
||||
<MobilePostStatusButton />
|
||||
<UserReportingModal />
|
||||
|
|
|
@ -240,7 +240,7 @@ const getNodeInfo = async ({ store }) => {
|
|||
store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
|
||||
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: '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: 'gopherAvailable', value: features.includes('gopher') })
|
||||
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
|
||||
|
|
|
@ -16,7 +16,7 @@ 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'
|
||||
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 About from 'components/about/about.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: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
|
||||
{ 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: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
|
||||
{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
|
||||
|
|
|
@ -2,7 +2,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
|
|||
|
||||
const FeaturesPanel = {
|
||||
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 },
|
||||
gopher: function () { return this.$store.state.instance.gopherAvailable },
|
||||
whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
|
||||
|
|
|
@ -8,8 +8,8 @@
|
|||
</div>
|
||||
<div class="panel-body features-panel">
|
||||
<ul>
|
||||
<li v-if="chat">
|
||||
{{ $t('features_panel.chat') }}
|
||||
<li v-if="shout">
|
||||
{{ $t('features_panel.shout') }}
|
||||
</li>
|
||||
<li v-if="pleromaChatMessages">
|
||||
{{ $t('features_panel.pleroma_chat_messages') }}
|
||||
|
|
|
@ -10,7 +10,7 @@ library.add(
|
|||
faTimes
|
||||
)
|
||||
|
||||
const chatPanel = {
|
||||
const shoutPanel = {
|
||||
props: [ 'floating' ],
|
||||
data () {
|
||||
return {
|
||||
|
@ -21,12 +21,12 @@ const chatPanel = {
|
|||
},
|
||||
computed: {
|
||||
messages () {
|
||||
return this.$store.state.chat.messages
|
||||
return this.$store.state.shout.messages
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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 = ''
|
||||
},
|
||||
togglePanel () {
|
||||
|
@ -50,4 +50,4 @@ const chatPanel = {
|
|||
}
|
||||
}
|
||||
|
||||
export default chatPanel
|
||||
export default shoutPanel
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="!collapsed || !floating"
|
||||
class="chat-panel"
|
||||
class="shout-panel"
|
||||
>
|
||||
<div class="panel panel-default">
|
||||
<div
|
||||
class="panel-heading timeline-heading"
|
||||
:class="{ 'chat-heading': floating }"
|
||||
:class="{ 'shout-heading': floating }"
|
||||
@click.stop.prevent="togglePanel"
|
||||
>
|
||||
<div class="title">
|
||||
|
@ -18,33 +18,33 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-window">
|
||||
<div class="shout-window">
|
||||
<div
|
||||
v-for="message in messages"
|
||||
:key="message.id"
|
||||
class="chat-message"
|
||||
class="shout-message"
|
||||
>
|
||||
<span class="chat-avatar">
|
||||
<span class="shout-avatar">
|
||||
<img :src="message.author.avatar">
|
||||
</span>
|
||||
<div class="chat-content">
|
||||
<div class="shout-content">
|
||||
<router-link
|
||||
class="chat-name"
|
||||
class="shout-name"
|
||||
:to="userProfileLink(message.author)"
|
||||
>
|
||||
{{ message.author.username }}
|
||||
</router-link>
|
||||
<br>
|
||||
<span class="chat-text">
|
||||
<span class="shout-text">
|
||||
{{ message.text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-input">
|
||||
<div class="shout-input">
|
||||
<textarea
|
||||
v-model="currentMessage"
|
||||
class="chat-input-textarea"
|
||||
class="shout-input-textarea"
|
||||
rows="1"
|
||||
@keyup.enter="submit(currentMessage)"
|
||||
/>
|
||||
|
@ -53,11 +53,11 @@
|
|||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="chat-panel"
|
||||
class="shout-panel"
|
||||
>
|
||||
<div class="panel panel-default">
|
||||
<div
|
||||
class="panel-heading stub timeline-heading chat-heading"
|
||||
class="panel-heading stub timeline-heading shout-heading"
|
||||
@click.stop.prevent="togglePanel"
|
||||
>
|
||||
<div class="title">
|
||||
|
@ -72,12 +72,12 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./chat_panel.js"></script>
|
||||
<script src="./shout_panel.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.floating-chat {
|
||||
.floating-shout {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
|
@ -85,8 +85,8 @@
|
|||
max-width: 25em;
|
||||
}
|
||||
|
||||
.chat-panel {
|
||||
.chat-heading {
|
||||
.shout-panel {
|
||||
.shout-heading {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
|
@ -102,22 +102,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
.chat-window {
|
||||
.shout-window {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 20em;
|
||||
}
|
||||
|
||||
.chat-window-container {
|
||||
.shout-window-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
.shout-message {
|
||||
display: flex;
|
||||
padding: 0.2em 0.5em
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
.shout-avatar {
|
||||
img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
@ -128,7 +128,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
.shout-input {
|
||||
display: flex;
|
||||
textarea {
|
||||
flex: 1;
|
||||
|
@ -138,7 +138,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.chat-panel {
|
||||
.shout-panel {
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
|
@ -49,7 +49,6 @@ const SideDrawer = {
|
|||
currentUser () {
|
||||
return this.$store.state.users.currentUser
|
||||
},
|
||||
chat () { return this.$store.state.chat.channel.state === 'joined' },
|
||||
unseenNotifications () {
|
||||
return unseenNotificationsFromStore(this.$store)
|
||||
},
|
||||
|
|
|
@ -11,7 +11,7 @@ import statusesModule from './modules/statuses.js'
|
|||
import usersModule from './modules/users.js'
|
||||
import apiModule from './modules/api.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 authFlowModule from './modules/auth_flow.js'
|
||||
import mediaViewerModule from './modules/media_viewer.js'
|
||||
|
@ -88,7 +88,7 @@ const persistedStateOptions = {
|
|||
users: usersModule,
|
||||
api: apiModule,
|
||||
config: configModule,
|
||||
chat: chatModule,
|
||||
shout: shoutModule,
|
||||
oauth: oauthModule,
|
||||
authFlow: authFlowModule,
|
||||
mediaViewer: mediaViewerModule,
|
||||
|
|
|
@ -255,12 +255,12 @@ const api = {
|
|||
initializeSocket ({ dispatch, commit, state, rootState }) {
|
||||
// Set up websocket connection
|
||||
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 } })
|
||||
socket.connect()
|
||||
|
||||
commit('setSocket', socket)
|
||||
dispatch('initializeChat', socket)
|
||||
dispatch('initializeShout', socket)
|
||||
}
|
||||
},
|
||||
disconnectFromSocket ({ commit, state }) {
|
||||
|
|
|
@ -19,7 +19,6 @@ const defaultState = {
|
|||
defaultBanner: '/images/banner.png',
|
||||
background: '/static/aurora_borealis.jpg',
|
||||
collapseMessageWithSubject: false,
|
||||
disableChat: false,
|
||||
greentext: false,
|
||||
hideFilteredStatuses: false,
|
||||
hideMutedPosts: false,
|
||||
|
@ -57,7 +56,7 @@ const defaultState = {
|
|||
knownDomains: [],
|
||||
|
||||
// Feature-set, apparently, not everything here is reported...
|
||||
chatAvailable: false,
|
||||
shoutAvailable: false,
|
||||
pleromaChatMessagesAvailable: false,
|
||||
gopherAvailable: false,
|
||||
mediaProxyAvailable: false,
|
||||
|
@ -107,7 +106,7 @@ const instance = {
|
|||
case 'name':
|
||||
dispatch('setPageTitle')
|
||||
break
|
||||
case 'chatAvailable':
|
||||
case 'shoutAvailable':
|
||||
if (value) {
|
||||
dispatch('initializeSocket')
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
const chat = {
|
||||
const shout = {
|
||||
state: {
|
||||
messages: [],
|
||||
channel: { state: '' }
|
||||
|
@ -16,9 +16,8 @@ const chat = {
|
|||
}
|
||||
},
|
||||
actions: {
|
||||
initializeChat (store, socket) {
|
||||
initializeShout (store, socket) {
|
||||
const channel = socket.channel('chat:public')
|
||||
|
||||
channel.on('new_msg', (msg) => {
|
||||
store.commit('addMessage', msg)
|
||||
})
|
||||
|
@ -31,4 +30,4 @@ const chat = {
|
|||
}
|
||||
}
|
||||
|
||||
export default chat
|
||||
export default shout
|
|
@ -531,7 +531,7 @@ const users = {
|
|||
if (user.token) {
|
||||
store.dispatch('setWsToken', user.token)
|
||||
|
||||
// Initialize the chat socket.
|
||||
// Initialize the shout socket.
|
||||
store.dispatch('initializeSocket')
|
||||
}
|
||||
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
"alwaysShowSubjectInput": true,
|
||||
"background": "/static/aurora_borealis.jpg",
|
||||
"collapseMessageWithSubject": false,
|
||||
"disableChat": false,
|
||||
"greentext": false,
|
||||
"hideFilteredStatuses": false,
|
||||
"hideMutedPosts": false,
|
||||
|
|
Loading…
Reference in a new issue