feat: comments UI
This commit is contained in:
parent
fb6c01c538
commit
abc9e4e1d4
@ -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'))
|
||||
|
60
client/components/comments.vue
Normal file
60
client/components/comments.vue
Normal 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>
|
@ -14,7 +14,12 @@ const state = {
|
||||
tags: [],
|
||||
title: '',
|
||||
updatedAt: '',
|
||||
mode: ''
|
||||
mode: '',
|
||||
comments: {
|
||||
view: false,
|
||||
post: false,
|
||||
manage: false
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user