feat: comments UI

This commit is contained in:
NGPixel 2020-05-17 18:38:23 -04:00 committed by Nicolas Giard
parent fb6c01c538
commit abc9e4e1d4
4 changed files with 81 additions and 6 deletions

View File

@ -149,9 +149,9 @@ Vue.prototype.Velocity = Velocity
// ====================================
Vue.component('admin', () => import(/* webpackChunkName: "admin" */ './components/admin.vue'))
Vue.component('comments', () => import(/* webpackChunkName: "comments" */ './components/comments.vue'))
Vue.component('editor', () => import(/* webpackPrefetch: -100, webpackChunkName: "editor" */ './components/editor.vue'))
Vue.component('history', () => import(/* webpackChunkName: "history" */ './components/history.vue'))
Vue.component('page-source', () => import(/* webpackChunkName: "source" */ './components/source.vue'))
Vue.component('loader', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/loader.vue'))
Vue.component('login', () => import(/* webpackPrefetch: true, webpackChunkName: "login" */ './components/login.vue'))
Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))
@ -159,6 +159,7 @@ Vue.component('new-page', () => import(/* webpackChunkName: "new-page" */ './com
Vue.component('notify', () => import(/* webpackMode: "eager" */ './components/common/notify.vue'))
Vue.component('not-found', () => import(/* webpackChunkName: "not-found" */ './components/not-found.vue'))
Vue.component('page-selector', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/page-selector.vue'))
Vue.component('page-source', () => import(/* webpackChunkName: "source" */ './components/source.vue'))
Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
Vue.component('register', () => import(/* webpackChunkName: "register" */ './components/register.vue'))
Vue.component('search-results', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/search-results.vue'))

View File

@ -0,0 +1,60 @@
<template lang="pug">
div
v-textarea#discussion-new(
solo
flat
placeholder='Write a new comment...'
auto-grow
dense
rows='3'
hide-details
)
.d-flex.align-center.pt-3
v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
.caption.blue-grey--text Markdown Format
v-spacer
v-btn(
dark
color='pink darken-4'
)
v-icon(left) mdi-comment
span Post Comment
v-divider.mt-3
v-timeline(
dense
)
v-timeline-item(
color='pink darken-4'
large
)
template(v-slot:icon)
v-avatar
v-img(src='http://i.pravatar.cc/64')
v-card.elevation-1
v-card-text
.caption: strong John Smith
.overline.grey--text 3 minutes ago
.mt-3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem arcu, mollis et erat quis, convallis tempor urna. In dictum pharetra consequat. #[br] #[br] Integer placerat ultrices nisl eget tincidunt. Curabitur sagittis tortor ut libero semper, et mollis odio ultrices. Sed consectetur sollicitudin ipsum, in commodo augue.
v-timeline-item(
color='pink darken-4'
large
)
template(v-slot:icon)
v-avatar
v-img(src='http://i.pravatar.cc/32')
v-card.elevation-1
v-card-text
.caption: strong Nikola Tesla
.overline.grey--text Yesterday at 8:03 AM
.mt-3 Integer placerat ultrices nisl eget tincidunt. Curabitur sagittis tortor ut libero semper, et mollis odio ultrices. Sed consectetur sollicitudin ipsum, in commodo augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem arcu, mollis et erat quis, convallis tempor urna. In dictum pharetra consequat.
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>

View File

@ -14,7 +14,12 @@ const state = {
tags: [],
title: '',
updatedAt: '',
mode: ''
mode: '',
comments: {
view: false,
post: false,
manage: false
}
}
export default {

View File

@ -106,7 +106,7 @@
span 334
.d-flex
v-btn.text-none(
:href='"/c/" + locale + "/" + path'
@click='goToComments'
:color='$vuetify.theme.dark ? `pink` : `pink darken-3`'
outlined
style='flex: 1 1 100%;'
@ -116,7 +116,7 @@
v-tooltip(right, v-if='isAuthenticated')
template(v-slot:activator='{ on }')
v-btn.ml-2(
:href='"/c/" + locale + "/" + path + `?new`'
@click='goToComments(true)'
v-on='on'
outlined
small
@ -398,9 +398,9 @@ export default {
type: Boolean,
default: false
},
commentsProvider: {
commentsPermissions: {
type: String,
default: 'default'
default: ''
},
commentsExternal: {
type: Boolean,
@ -485,6 +485,9 @@ export default {
this.$store.set('page/tags', this.tags)
this.$store.set('page/title', this.title)
this.$store.set('page/updatedAt', this.updatedAt)
if (this.commentsPermissions) {
this.$store.set('page/comments', JSON.parse(atob(this.commentsPermissions)))
}
this.$store.set('page/mode', 'view')
},
@ -571,6 +574,12 @@ export default {
} else {
this.navShown = false
}
},
goToComments (focusNewComment = false) {
this.$vuetify.goTo('#discussion', this.scrollOpts)
if (focusNewComment) {
document.querySelector('#discussion-new').focus()
}
}
}
}