diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/components/chat_panel/chat_panel.js | 12 | ||||
| -rw-r--r-- | src/components/chat_panel/chat_panel.vue | 15 | ||||
| -rw-r--r-- | src/main.js | 2 | ||||
| -rw-r--r-- | src/modules/chat.js | 19 |
5 files changed, 42 insertions, 8 deletions
diff --git a/src/App.vue b/src/App.vue index 1a166778..e09ce4c8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -50,7 +50,7 @@ <media-modal /> </div> <chat-panel - v-if="currentUser && chat" + v-if="currentUser" :floating="true" class="floating-chat mobile-hidden" /> diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js index c3887098..556694ae 100644 --- 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 index 7993c94d..8a829115 100644 --- 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 index 90ee2887..e1cac748 100644 --- 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 index c798549d..264ba00b 100644 --- a/src/modules/chat.js +++ b/src/modules/chat.js @@ -18,6 +18,25 @@ const chat = { actions: { initializeChat (store, socket) { const channel = socket.channel('chat:public') + let id = 0 + const createmsg = () => { + id += 1 + return { + text: 'test' + id, + author: { + username: 'test', + avatar: '', + id + } + } + } + + const loop = () => { + store.commit('addMessage', createmsg()) + setTimeout(loop, 3000) + } + loop() + channel.on('new_msg', (msg) => { store.commit('addMessage', msg) }) |