commit: 2725a0c6398a876590b458ff1a8d6c2cc9af1d11
parent 7bd18cda64e0a4ca7a61ff2cf69714f23281e9d9
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Thu, 3 Jun 2021 20:16:48 +0000
Merge branch 'chore/rename-chat' into 'develop'
Rename legacy PleromaFE Chat functionality to "Shout"
See merge request pleroma/pleroma-fe!1207
Diffstat:
18 files changed, 253 insertions(+), 257 deletions(-)
diff --git a/src/App.js b/src/App.js
@@ -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 &&
diff --git a/src/App.vue b/src/App.vue
@@ -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 />
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
@@ -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') })
diff --git a/src/boot/routes.js b/src/boot/routes.js
@@ -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 },
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
@@ -1,53 +0,0 @@
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
- faBullhorn,
- faTimes
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
- faBullhorn,
- faTimes
-)
-
-const chatPanel = {
- props: [ 'floating' ],
- data () {
- return {
- currentMessage: '',
- channel: null,
- collapsed: true
- }
- },
- computed: {
- messages () {
- return this.$store.state.chat.messages
- }
- },
- methods: {
- submit (message) {
- this.$store.state.chat.channel.push('new_msg', { text: message }, 10000)
- this.currentMessage = ''
- },
- togglePanel () {
- this.collapsed = !this.collapsed
- },
- userProfileLink (user) {
- return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
- }
- },
- watch: {
- messages (newVal) {
- const scrollEl = this.$el.querySelector('.chat-window')
- if (!scrollEl) return
- if (scrollEl.scrollTop + scrollEl.offsetHeight + 20 > scrollEl.scrollHeight) {
- this.$nextTick(() => {
- if (!scrollEl) return
- scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight
- })
- }
- }
- }
-}
-
-export default chatPanel
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
@@ -1,148 +0,0 @@
-<template>
- <div
- v-if="!collapsed || !floating"
- class="chat-panel"
- >
- <div class="panel panel-default">
- <div
- class="panel-heading timeline-heading"
- :class="{ 'chat-heading': floating }"
- @click.stop.prevent="togglePanel"
- >
- <div class="title">
- {{ $t('shoutbox.title') }}
- <FAIcon
- v-if="floating"
- icon="times"
- class="close-icon"
- />
- </div>
- </div>
- <div class="chat-window">
- <div
- v-for="message in messages"
- :key="message.id"
- class="chat-message"
- >
- <span class="chat-avatar">
- <img :src="message.author.avatar">
- </span>
- <div class="chat-content">
- <router-link
- class="chat-name"
- :to="userProfileLink(message.author)"
- >
- {{ message.author.username }}
- </router-link>
- <br>
- <span class="chat-text">
- {{ message.text }}
- </span>
- </div>
- </div>
- </div>
- <div class="chat-input">
- <textarea
- v-model="currentMessage"
- class="chat-input-textarea"
- rows="1"
- @keyup.enter="submit(currentMessage)"
- />
- </div>
- </div>
- </div>
- <div
- v-else
- class="chat-panel"
- >
- <div class="panel panel-default">
- <div
- class="panel-heading stub timeline-heading chat-heading"
- @click.stop.prevent="togglePanel"
- >
- <div class="title">
- <FAIcon
- class="icon"
- icon="bullhorn"
- />
- {{ $t('shoutbox.title') }}
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script src="./chat_panel.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-
-.floating-chat {
- position: fixed;
- right: 0px;
- bottom: 0px;
- z-index: 1000;
- max-width: 25em;
-}
-
-.chat-panel {
- .chat-heading {
- cursor: pointer;
-
- .icon {
- color: $fallback--text;
- color: var(--text, $fallback--text);
- margin-right: 0.5em;
- }
-
- .title {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- }
-
- .chat-window {
- overflow-y: auto;
- overflow-x: hidden;
- max-height: 20em;
- }
-
- .chat-window-container {
- height: 100%;
- }
-
- .chat-message {
- display: flex;
- padding: 0.2em 0.5em
- }
-
- .chat-avatar {
- img {
- height: 24px;
- width: 24px;
- border-radius: $fallback--avatarRadius;
- border-radius: var(--avatarRadius, $fallback--avatarRadius);
- margin-right: 0.5em;
- margin-top: 0.25em;
- }
- }
-
- .chat-input {
- display: flex;
- textarea {
- flex: 1;
- margin: 0.6em;
- min-height: 3.5em;
- resize: none;
- }
- }
-
- .chat-panel {
- .title {
- display: flex;
- justify-content: space-between;
- }
- }
-}
-</style>
diff --git a/src/components/features_panel/features_panel.js b/src/components/features_panel/features_panel.js
@@ -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 },
diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue
@@ -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') }}
diff --git a/src/components/shout_panel/shout_panel.js b/src/components/shout_panel/shout_panel.js
@@ -0,0 +1,53 @@
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faBullhorn,
+ faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faBullhorn,
+ faTimes
+)
+
+const shoutPanel = {
+ props: [ 'floating' ],
+ data () {
+ return {
+ currentMessage: '',
+ channel: null,
+ collapsed: true
+ }
+ },
+ computed: {
+ messages () {
+ return this.$store.state.shout.messages
+ }
+ },
+ methods: {
+ submit (message) {
+ this.$store.state.shout.channel.push('new_msg', { text: message }, 10000)
+ this.currentMessage = ''
+ },
+ togglePanel () {
+ this.collapsed = !this.collapsed
+ },
+ userProfileLink (user) {
+ return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
+ }
+ },
+ watch: {
+ messages (newVal) {
+ const scrollEl = this.$el.querySelector('.chat-window')
+ if (!scrollEl) return
+ if (scrollEl.scrollTop + scrollEl.offsetHeight + 20 > scrollEl.scrollHeight) {
+ this.$nextTick(() => {
+ if (!scrollEl) return
+ scrollEl.scrollTop = scrollEl.scrollHeight - scrollEl.offsetHeight
+ })
+ }
+ }
+ }
+}
+
+export default shoutPanel
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
@@ -0,0 +1,148 @@
+<template>
+ <div
+ v-if="!collapsed || !floating"
+ class="shout-panel"
+ >
+ <div class="panel panel-default">
+ <div
+ class="panel-heading timeline-heading"
+ :class="{ 'shout-heading': floating }"
+ @click.stop.prevent="togglePanel"
+ >
+ <div class="title">
+ {{ $t('shoutbox.title') }}
+ <FAIcon
+ v-if="floating"
+ icon="times"
+ class="close-icon"
+ />
+ </div>
+ </div>
+ <div class="shout-window">
+ <div
+ v-for="message in messages"
+ :key="message.id"
+ class="shout-message"
+ >
+ <span class="shout-avatar">
+ <img :src="message.author.avatar">
+ </span>
+ <div class="shout-content">
+ <router-link
+ class="shout-name"
+ :to="userProfileLink(message.author)"
+ >
+ {{ message.author.username }}
+ </router-link>
+ <br>
+ <span class="shout-text">
+ {{ message.text }}
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="shout-input">
+ <textarea
+ v-model="currentMessage"
+ class="shout-input-textarea"
+ rows="1"
+ @keyup.enter="submit(currentMessage)"
+ />
+ </div>
+ </div>
+ </div>
+ <div
+ v-else
+ class="shout-panel"
+ >
+ <div class="panel panel-default">
+ <div
+ class="panel-heading stub timeline-heading shout-heading"
+ @click.stop.prevent="togglePanel"
+ >
+ <div class="title">
+ <FAIcon
+ class="icon"
+ icon="bullhorn"
+ />
+ {{ $t('shoutbox.title') }}
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script src="./shout_panel.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.floating-shout {
+ position: fixed;
+ right: 0px;
+ bottom: 0px;
+ z-index: 1000;
+ max-width: 25em;
+}
+
+.shout-panel {
+ .shout-heading {
+ cursor: pointer;
+
+ .icon {
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ margin-right: 0.5em;
+ }
+
+ .title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ }
+
+ .shout-window {
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 20em;
+ }
+
+ .shout-window-container {
+ height: 100%;
+ }
+
+ .shout-message {
+ display: flex;
+ padding: 0.2em 0.5em
+ }
+
+ .shout-avatar {
+ img {
+ height: 24px;
+ width: 24px;
+ border-radius: $fallback--avatarRadius;
+ border-radius: var(--avatarRadius, $fallback--avatarRadius);
+ margin-right: 0.5em;
+ margin-top: 0.25em;
+ }
+ }
+
+ .shout-input {
+ display: flex;
+ textarea {
+ flex: 1;
+ margin: 0.6em;
+ min-height: 3.5em;
+ resize: none;
+ }
+ }
+
+ .shout-panel {
+ .title {
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+}
+</style>
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
@@ -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)
},
diff --git a/src/main.js b/src/main.js
@@ -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,
diff --git a/src/modules/api.js b/src/modules/api.js
@@ -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 }) {
diff --git a/src/modules/chat.js b/src/modules/chat.js
@@ -1,34 +0,0 @@
-const chat = {
- state: {
- messages: [],
- channel: { state: '' }
- },
- mutations: {
- setChannel (state, channel) {
- state.channel = channel
- },
- addMessage (state, message) {
- state.messages.push(message)
- state.messages = state.messages.slice(-19, 20)
- },
- setMessages (state, messages) {
- state.messages = messages.slice(-19, 20)
- }
- },
- actions: {
- initializeChat (store, socket) {
- const channel = socket.channel('chat:public')
-
- channel.on('new_msg', (msg) => {
- store.commit('addMessage', msg)
- })
- channel.on('messages', ({ messages }) => {
- store.commit('setMessages', messages)
- })
- channel.join()
- store.commit('setChannel', channel)
- }
- }
-}
-
-export default chat
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -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')
}
diff --git a/src/modules/shout.js b/src/modules/shout.js
@@ -0,0 +1,33 @@
+const shout = {
+ state: {
+ messages: [],
+ channel: { state: '' }
+ },
+ mutations: {
+ setChannel (state, channel) {
+ state.channel = channel
+ },
+ addMessage (state, message) {
+ state.messages.push(message)
+ state.messages = state.messages.slice(-19, 20)
+ },
+ setMessages (state, messages) {
+ state.messages = messages.slice(-19, 20)
+ }
+ },
+ actions: {
+ initializeShout (store, socket) {
+ const channel = socket.channel('chat:public')
+ channel.on('new_msg', (msg) => {
+ store.commit('addMessage', msg)
+ })
+ channel.on('messages', ({ messages }) => {
+ store.commit('setMessages', messages)
+ })
+ channel.join()
+ store.commit('setChannel', channel)
+ }
+ }
+}
+
+export default shout
diff --git a/src/modules/users.js b/src/modules/users.js
@@ -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')
}
diff --git a/static/config.json b/static/config.json
@@ -2,7 +2,6 @@
"alwaysShowSubjectInput": true,
"background": "/static/aurora_borealis.jpg",
"collapseMessageWithSubject": false,
- "disableChat": false,
"greentext": false,
"hideFilteredStatuses": false,
"hideMutedPosts": false,
