logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: fb183adc741419fec21e2df60a5fa98084983a13
parent 30057a494441b01c0db85ec302aed224cf0768f2
Author: Shpuld Shpludson <shp@cock.li>
Date:   Wed,  3 Mar 2021 15:07:10 +0000

Merge branch 'fix/shoutbox-fixes' into 'develop'

Remove vue-chat-scroll, fix up shoutbox header

See merge request pleroma/pleroma-fe!1368

Diffstat:

Mpackage.json1-
Msrc/components/chat_panel/chat_panel.js12++++++++++++
Msrc/components/chat_panel/chat_panel.vue15++++++++++-----
Msrc/main.js2--
Msrc/modules/chat.js1+
Myarn.lock4----
6 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json @@ -34,7 +34,6 @@ "punycode.js": "^2.1.0", "v-click-outside": "^2.1.1", "vue": "^2.6.11", - "vue-chat-scroll": "^1.2.1", "vue-i18n": "^7.3.2", "vue-router": "^3.0.1", "vue-template-compiler": "^2.6.11", diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js @@ -35,6 +35,18 @@ const chatPanel = { 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 + }) + } + } } } diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue @@ -10,17 +10,15 @@ @click.stop.prevent="togglePanel" > <div class="title"> - <span>{{ $t('shoutbox.title') }}</span> + {{ $t('shoutbox.title') }} <FAIcon v-if="floating" icon="times" + class="close-icon" /> </div> </div> - <div - v-chat-scroll - class="chat-window" - > + <div class="chat-window"> <div v-for="message in messages" :key="message.id" @@ -94,6 +92,13 @@ .icon { color: $fallback--text; color: var(--text, $fallback--text); + margin-right: 0.5em; + } + + .title { + display: flex; + justify-content: space-between; + align-items: center; } } diff --git a/src/main.js b/src/main.js @@ -28,7 +28,6 @@ import pushNotifications from './lib/push_notifications_plugin.js' import messages from './i18n/messages.js' -import VueChatScroll from 'vue-chat-scroll' import VueClickOutside from 'v-click-outside' import PortalVue from 'portal-vue' import VBodyScrollLock from './directives/body_scroll_lock' @@ -42,7 +41,6 @@ const currentLocale = (window.navigator.language || 'en').split('-')[0] Vue.use(Vuex) Vue.use(VueRouter) Vue.use(VueI18n) -Vue.use(VueChatScroll) Vue.use(VueClickOutside) Vue.use(PortalVue) Vue.use(VBodyScrollLock) diff --git a/src/modules/chat.js b/src/modules/chat.js @@ -18,6 +18,7 @@ const chat = { actions: { initializeChat (store, socket) { const channel = socket.channel('chat:public') + channel.on('new_msg', (msg) => { store.commit('addMessage', msg) }) diff --git a/yarn.lock b/yarn.lock @@ -8923,10 +8923,6 @@ void-elements@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec" -vue-chat-scroll@^1.2.1: - version "1.3.5" - resolved "https://registry.yarnpkg.com/vue-chat-scroll/-/vue-chat-scroll-1.3.5.tgz#a5ee5bae5058f614818a96eac5ee3be4394a2f68" - vue-eslint-parser@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"