commit: 92289e545a62bd28ea336c5d712a05445e0e20ab
parent: 1c067f8562a873247f8d856f61d8f1437876c077
Author: Roger Braun <roger@rogerbraun.net>
Date: Fri, 26 Jan 2018 15:11:34 +0100
Move chat to sidebar.
Diffstat:
10 files changed, 97 insertions(+), 91 deletions(-)
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
"sanitize-html": "^1.13.0",
"sass-loader": "^4.0.2",
"vue": "^2.3.4",
+ "vue-chat-scroll": "^1.2.1",
"vue-i18n": "^7.3.2",
"vue-router": "^2.5.3",
"vue-template-compiler": "^2.3.4",
diff --git a/src/App.js b/src/App.js
@@ -2,6 +2,7 @@ import UserPanel from './components/user_panel/user_panel.vue'
import NavPanel from './components/nav_panel/nav_panel.vue'
import Notifications from './components/notifications/notifications.vue'
import UserFinder from './components/user_finder/user_finder.vue'
+import ChatPanel from './components/chat_panel/chat_panel.vue'
export default {
name: 'app',
@@ -9,7 +10,8 @@ export default {
UserPanel,
NavPanel,
Notifications,
- UserFinder
+ UserFinder,
+ ChatPanel
},
data: () => ({
mobileActivePanel: 'timeline'
@@ -21,7 +23,8 @@ export default {
},
logoStyle () { return { 'background-image': `url(${this.$store.state.config.logo})` } },
style () { return { 'background-image': `url(${this.background})` } },
- sitename () { return this.$store.state.config.name }
+ sitename () { return this.$store.state.config.name },
+ chat () { return this.$store.state.chat.channel }
},
methods: {
activatePanel (panelName) {
diff --git a/src/App.vue b/src/App.vue
@@ -23,6 +23,7 @@
<div class="sidebar">
<user-panel></user-panel>
<nav-panel></nav-panel>
+ <chat-panel v-if="currentUser && chat"></chat-panel>
<notifications v-if="currentUser"></notifications>
</div>
</div>
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
@@ -1,21 +0,0 @@
-const chat = {
- data () {
- return {
- currentMessage: '',
- channel: null
- }
- },
- computed: {
- messages () {
- return this.$store.state.chat.messages
- }
- },
- methods: {
- submit (message) {
- this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
- this.currentMessage = ''
- }
- }
-}
-
-export default chat
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
@@ -1,59 +0,0 @@
-<template>
- <div class="chat-panel panel panel-default">
- <div class="panel-heading timeline-heading base02-background base04">
- <div class="title">
- {{$t('chat.title')}}
- </div>
- </div>
- <div class="panel-body base01-background">
- <div class="chat-window">
- <div class="chat-message" v-for="message in messages" :key="message.id">
- <span class="chat-avatar">
- <img :src="message.author.avatar" />
- {{message.author.username}}:
- </span>
- <span class="chat-text">
- {{message.text}}
- </span>
- </div>
- </div>
- <div class="chat-input">
- <form @submit.prevent="submit(currentMessage)">
- <input v-model="currentMessage" type="text" >
- </form>
- </div>
- </div>
- </div>
-</template>
-
-<script src="./chat.js"></script>
-
-
-<style lang="scss">
- .chat-window {
- max-height: 80vh;
- overflow-y: auto;
- overflow-x: hidden;
- }
- .chat-message {
- padding: 0.2em 0.5em
- }
- .chat-avatar {
- img {
- height: 32px;
- width: 32px;
- border-radius: 5px;
- margin-right: 0.5em;
- }
- }
- .chat-input {
- display: flex;
- form {
- flex: auto;
- input {
- margin: 0.5em;
- width: fill-available;
- }
- }
- }
-</style>
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
@@ -0,0 +1,21 @@
+const chatPanel = {
+ data () {
+ return {
+ currentMessage: '',
+ channel: null
+ }
+ },
+ computed: {
+ messages () {
+ return this.$store.state.chat.messages
+ }
+ },
+ methods: {
+ submit (message) {
+ this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
+ this.currentMessage = ''
+ }
+ }
+}
+
+export default chatPanel
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
@@ -0,0 +1,58 @@
+<template>
+ <div class="chat-panel">
+ <div class="panel panel-default base01-background">
+ <div class="panel-heading timeline-heading base02-background base04">
+ <div class="title">
+ {{$t('chat.title')}}
+ </div>
+ </div>
+ <div class="chat-window" v-chat-scroll>
+ <div class="chat-message" v-for="message in messages" :key="message.id">
+ <span class="chat-avatar">
+ <img :src="message.author.avatar" />
+ {{message.author.username}}:
+ </span>
+ <span class="chat-text">
+ {{message.text}}
+ </span>
+ </div>
+ </div>
+ <div class="chat-input">
+ <form @submit.prevent="submit(currentMessage)">
+ <input v-model="currentMessage" type="text" >
+ </form>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script src="./chat_panel.js"></script>
+
+<style lang="scss">
+ .chat-window {
+ max-height: 200px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
+ .chat-message {
+ padding: 0.2em 0.5em
+ }
+ .chat-avatar {
+ img {
+ height: 32px;
+ width: 32px;
+ border-radius: 5px;
+ margin-right: 0.5em;
+ }
+ }
+ .chat-input {
+ display: flex;
+ form {
+ flex: auto;
+ input {
+ margin: 0.5em;
+ width: fill-available;
+ }
+ }
+ }
+</style>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
@@ -7,11 +7,6 @@
{{ $t("nav.timeline") }}
</router-link>
</li>
- <li v-if='chat && currentUser'>
- <router-link class="base00-background" to='/chat'>
- {{ $t("nav.chat") }}
- </router-link>
- </li>
<li v-if='currentUser'>
<router-link class="base00-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
{{ $t("nav.mentions") }}
diff --git a/src/main.js b/src/main.js
@@ -12,7 +12,6 @@ import UserProfile from './components/user_profile/user_profile.vue'
import Settings from './components/settings/settings.vue'
import Registration from './components/registration/registration.vue'
import UserSettings from './components/user_settings/user_settings.vue'
-import Chat from './components/chat/chat.vue'
import statusesModule from './modules/statuses.js'
import usersModule from './modules/users.js'
@@ -27,6 +26,8 @@ import createPersistedState from './lib/persisted_state.js'
import messages from './i18n/messages.js'
+import VueChatScroll from 'vue-chat-scroll'
+
const currentLocale = (window.navigator.language || 'en').split('-')[0]
Vue.use(Vuex)
@@ -39,6 +40,7 @@ Vue.use(VueTimeago, {
}
})
Vue.use(VueI18n)
+Vue.use(VueChatScroll)
const persistedStateOptions = {
paths: [
@@ -97,8 +99,7 @@ window.fetch('/static/config.json')
{ name: 'mentions', path: '/:username/mentions', component: Mentions },
{ name: 'settings', path: '/settings', component: Settings },
{ name: 'registration', path: '/registration', component: Registration },
- { name: 'user-settings', path: '/user-settings', component: UserSettings },
- { name: 'chat', path: '/chat', component: Chat }
+ { name: 'user-settings', path: '/user-settings', component: UserSettings }
]
const router = new VueRouter({
diff --git a/yarn.lock b/yarn.lock
@@ -5696,6 +5696,12 @@ 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.2.1"
+ resolved "https://registry.yarnpkg.com/vue-chat-scroll/-/vue-chat-scroll-1.2.1.tgz#54f123004b887d91f2f7fb69b9bebdf6f61ea9b4"
+ dependencies:
+ vue "^2.1.10"
+
vue-hot-reload-api@^2.0.1:
version "2.0.9"
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.0.9.tgz#2e8cfbfc8e531eea57d8c1f0bd761047c7e11b56"
@@ -5747,7 +5753,7 @@ vue-timeago@^3.1.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/vue-timeago/-/vue-timeago-3.2.0.tgz#73fd0635de6ea4ecfbbce035b2e44035d806fba1"
-vue@^2.3.4:
+vue@^2.1.10, vue@^2.3.4:
version "2.3.4"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.4.tgz#5ec3b87a191da8090bbef56b7cfabd4158038171"
