feat: comments UI improvements
This commit is contained in:
NGPixel
parent
15a45f8b91
commit
a0618ee4f6
@ -1,13 +1,16 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
div(v-intersect.once.quiet='onIntersect')
|
||||
v-textarea#discussion-new(
|
||||
solo
|
||||
outlined
|
||||
flat
|
||||
placeholder='Write a new comment...'
|
||||
auto-grow
|
||||
dense
|
||||
rows='3'
|
||||
hide-details
|
||||
v-model='newcomment'
|
||||
color='blue-grey darken-2'
|
||||
:background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
|
||||
)
|
||||
.d-flex.align-center.pt-3
|
||||
v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
|
||||
@ -15,17 +18,30 @@
|
||||
v-spacer
|
||||
v-btn(
|
||||
dark
|
||||
color='pink darken-4'
|
||||
color='blue-grey darken-2'
|
||||
@click='postComment'
|
||||
depressed
|
||||
)
|
||||
v-icon(left) mdi-comment
|
||||
span Post Comment
|
||||
span.text-none Post Comment
|
||||
v-divider.mt-3
|
||||
.pa-5.d-flex.align-center.justify-center(v-if='isLoading')
|
||||
v-progress-circular(
|
||||
indeterminate
|
||||
size='20'
|
||||
width='1'
|
||||
color='blue-grey'
|
||||
)
|
||||
.caption.blue-grey--text.pl-3: em Loading comments...
|
||||
v-timeline(
|
||||
dense
|
||||
v-else-if='comments && comments.length > 0'
|
||||
)
|
||||
v-timeline-item(
|
||||
color='pink darken-4'
|
||||
large
|
||||
v-for='cm of comments'
|
||||
:key='`comment-` + cm.id'
|
||||
)
|
||||
template(v-slot:icon)
|
||||
v-avatar
|
||||
@ -34,24 +50,65 @@
|
||||
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.
|
||||
.mt-3 {{cm.render}}
|
||||
.pt-5.text-center.body-2.blue-grey--text(v-else) Be the first to comment.
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import gql from 'graphql-tag'
|
||||
import { get } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
newcomment: '',
|
||||
isLoading: true,
|
||||
canFetch: false,
|
||||
comments: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pageId: get('page/id')
|
||||
},
|
||||
methods: {
|
||||
onIntersect () {
|
||||
this.isLoading = true
|
||||
this.canFetch = true
|
||||
},
|
||||
async postComment () {
|
||||
|
||||
}
|
||||
},
|
||||
apollo: {
|
||||
comments: {
|
||||
query: gql`
|
||||
query ($pageId: Int!) {
|
||||
comments {
|
||||
list(pageId: $pageId) {
|
||||
id
|
||||
render
|
||||
authorName
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables() {
|
||||
return {
|
||||
pageId: this.pageId
|
||||
}
|
||||
},
|
||||
skip () {
|
||||
return !this.canFetch
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
update: (data) => data.comments.list,
|
||||
watchLoading (isLoading) {
|
||||
this.isLoading = isLoading
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
span {{$t('editor:markup.insertAssets')}}
|
||||
v-tooltip(right, color='teal')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.mt-3.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
|
||||
v-btn.mt-3.animated.fadeInLeft.wait-p2s(icon, tile, v-on='on', dark, disabled, @click='toggleModal(`editorModalBlocks`)').mx-0
|
||||
v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-view-dashboard-outline
|
||||
span {{$t('editor:markup.insertBlock')}}
|
||||
v-tooltip(right, color='teal')
|
||||
|
||||
@ -118,15 +118,16 @@
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
v-card.radius-7.animated.fadeInUp.wait-p1s(
|
||||
v-card.radius-7.teal.animated.fadeInUp.wait-p1s(
|
||||
hover
|
||||
light
|
||||
ripple
|
||||
)
|
||||
v-card-text.text-center(@click='selectEditor("redirect")')
|
||||
//- v-card-text.text-center(@click='selectEditor("redirect")')
|
||||
v-card-text.text-center(@click='')
|
||||
img(src='/_assets/svg/icon-route.svg', alt='Redirection', style='width: 42px; opacity: .5;')
|
||||
.body-2.mt-1.teal--text Redirection
|
||||
.caption.grey--text Redirect the user to...
|
||||
.body-2.mt-1.teal--text.text--lighten-2 Redirection
|
||||
.caption.teal--text.text--lighten-1 Redirect the user to...
|
||||
v-flex(xs4)
|
||||
v-hover
|
||||
template(v-slot:default='{ hover }')
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
)
|
||||
v-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', left, small) mdi-tag
|
||||
span(:class='$vuetify.theme.dark ? `teal--text text--lighten-5` : `teal--text text--darken-2`') {{tag.title}}
|
||||
v-chip.mr-1(
|
||||
v-chip.mr-1.mb-1(
|
||||
label
|
||||
:color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
|
||||
:href='`/t/` + tags.map(t => t.tag).join(`/`)'
|
||||
@ -92,14 +92,14 @@
|
||||
|
||||
v-card.mb-5(v-if='commentsEnabled')
|
||||
.pa-5
|
||||
.overline.pb-2.pink--text.d-flex.align-center(:class='$vuetify.theme.dark ? `text--lighten-3` : `text--darken-4`')
|
||||
.overline.pb-2.blue-grey--text.d-flex.align-center(:class='$vuetify.theme.dark ? `text--lighten-3` : `text--darken-2`')
|
||||
span Talk
|
||||
v-spacer
|
||||
v-chip.text-center(
|
||||
v-if='!commentsExternal'
|
||||
label
|
||||
x-small
|
||||
:color='$vuetify.theme.dark ? `pink darken-3` : `pink darken-4`'
|
||||
:color='$vuetify.theme.dark ? `blue-grey darken-3` : `blue-grey darken-2`'
|
||||
dark
|
||||
style='min-width: 50px; justify-content: center;'
|
||||
)
|
||||
@ -107,12 +107,12 @@
|
||||
.d-flex
|
||||
v-btn.text-none(
|
||||
@click='goToComments()'
|
||||
:color='$vuetify.theme.dark ? `pink` : `pink darken-3`'
|
||||
:color='$vuetify.theme.dark ? `blue-grey` : `blue-grey darken-2`'
|
||||
outlined
|
||||
style='flex: 1 1 100%;'
|
||||
small
|
||||
)
|
||||
span.pink--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-4`') View Discussion
|
||||
span.blue-grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') View Discussion
|
||||
v-tooltip(right, v-if='isAuthenticated')
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn.ml-2(
|
||||
@ -120,9 +120,9 @@
|
||||
v-on='on'
|
||||
outlined
|
||||
small
|
||||
:color='$vuetify.theme.dark ? `pink` : `pink darken-3`'
|
||||
:color='$vuetify.theme.dark ? `blue-grey` : `blue-grey darken-2`'
|
||||
)
|
||||
v-icon(:color='$vuetify.theme.dark ? `pink lighten-1` : `pink darken-4`', dense) mdi-comment-plus
|
||||
v-icon(:color='$vuetify.theme.dark ? `blue-grey lighten-1` : `blue-grey darken-2`', dense) mdi-comment-plus
|
||||
span New Comment
|
||||
|
||||
v-card.mb-5
|
||||
@ -262,7 +262,11 @@
|
||||
.contents(ref='container')
|
||||
slot(name='contents')
|
||||
.comments-container#discussion
|
||||
slot(name='comments')
|
||||
.comments-header
|
||||
v-icon.mr-2(dark) mdi-comment-text-outline
|
||||
span Comments
|
||||
.comments-main
|
||||
slot(name='comments')
|
||||
nav-footer
|
||||
notify
|
||||
search-results
|
||||
|
||||
@ -805,13 +805,36 @@
|
||||
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
background-color: mc('blue-grey', '50');
|
||||
border-radius: 7px;
|
||||
padding: 20px;
|
||||
// ---------------------------------
|
||||
// COMMENTS
|
||||
// ---------------------------------
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background-color: darken(mc('grey', '900'), 5%);
|
||||
.comments {
|
||||
&-container {
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
&-header {
|
||||
color: #FFF;
|
||||
padding: 8px 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
background-color: mc('blue-grey', '500');
|
||||
border-radius: 7px 7px 0 0;
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background-color: lighten(mc('grey', '900'), 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
background-color: mc('blue-grey', '50');
|
||||
border-radius: 0 0 7px 7px;
|
||||
padding: 20px;
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background-color: darken(mc('grey', '900'), 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -32,6 +32,9 @@ module.exports = {
|
||||
}, []), 'key')
|
||||
}
|
||||
})
|
||||
},
|
||||
async list (obj, args, context) {
|
||||
return []
|
||||
}
|
||||
},
|
||||
CommentMutation: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user