Skip to content

W
wiki-js
Commit a0618ee4 authored by NGPixel's avatar NGPixel
Browse files
Options

feat: comments UI improvements

parent 15a45f8b
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 36 deletions
client/components/comments.vue
View file @ a0618ee4
<template lang="pug"> <template lang="pug">
div div(v-intersect.once.quiet='onIntersect')
v-textarea#discussion-new( v-textarea#discussion-new(
solo outlined
flat flat
placeholder='Write a new comment...' placeholder='Write a new comment...'
auto-grow auto-grow
dense dense
rows='3' rows='3'
hide-details 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 .d-flex.align-center.pt-3
v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
...@@ -15,17 +18,30 @@ ...@@ -15,17 +18,30 @@
v-spacer v-spacer
v-btn( v-btn(
dark dark
color='pink darken-4' color='blue-grey darken-2'
@click='postComment'
depressed
) )
v-icon(left) mdi-comment v-icon(left) mdi-comment
span Post Comment span.text-none Post Comment
v-divider.mt-3 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( v-timeline(
dense dense
v-else-if='comments && comments.length > 0'
) )
v-timeline-item( v-timeline-item(
color='pink darken-4' color='pink darken-4'
large large
v-for='cm of comments'
:key='`comment-` + cm.id'
) )
template(v-slot:icon) template(v-slot:icon)
v-avatar v-avatar
...@@ -34,24 +50,65 @@ ...@@ -34,24 +50,65 @@
v-card-text v-card-text
.caption: strong John Smith .caption: strong John Smith
.overline.grey--text 3 minutes ago .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. .mt-3 {{cm.render}}
v-timeline-item( .pt-5.text-center.body-2.blue-grey--text(v-else) Be the first to comment.
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> </template>
<script> <script>
import gql from 'graphql-tag'
import { get } from 'vuex-pathify'
export default { 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> </script>
......
client/components/editor/editor-markdown.vue
View file @ a0618ee4
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
span {{$t('editor:markup.insertAssets')}} span {{$t('editor:markup.insertAssets')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
template(v-slot:activator='{ on }') 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 v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') mdi-view-dashboard-outline
span {{$t('editor:markup.insertBlock')}} span {{$t('editor:markup.insertBlock')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
......
client/components/editor/editor-modal-editorselect.vue
View file @ a0618ee4
...@@ -118,15 +118,16 @@ ...@@ -118,15 +118,16 @@
v-flex(xs4) v-flex(xs4)
v-hover v-hover
template(v-slot:default='{ hover }') template(v-slot:default='{ hover }')
v-card.radius-7.animated.fadeInUp.wait-p1s( v-card.radius-7.teal.animated.fadeInUp.wait-p1s(
hover hover
light light
ripple 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;') img(src='/_assets/svg/icon-route.svg', alt='Redirection', style='width: 42px; opacity: .5;')
.body-2.mt-1.teal--text Redirection .body-2.mt-1.teal--text.text--lighten-2 Redirection
.caption.grey--text Redirect the user to... .caption.teal--text.text--lighten-1 Redirect the user to...
v-flex(xs4) v-flex(xs4)
v-hover v-hover
template(v-slot:default='{ hover }') template(v-slot:default='{ hover }')
......
client/themes/default/components/page.vue
View file @ a0618ee4
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
) )
v-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', left, small) mdi-tag 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}} 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 label
:color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`' :color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
:href='`/t/` + tags.map(t => t.tag).join(`/`)' :href='`/t/` + tags.map(t => t.tag).join(`/`)'
...@@ -92,14 +92,14 @@ ...@@ -92,14 +92,14 @@
v-card.mb-5(v-if='commentsEnabled') v-card.mb-5(v-if='commentsEnabled')
.pa-5 .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 span Talk
v-spacer v-spacer
v-chip.text-center( v-chip.text-center(
v-if='!commentsExternal' v-if='!commentsExternal'
label label
x-small 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 dark
style='min-width: 50px; justify-content: center;' style='min-width: 50px; justify-content: center;'
) )
...@@ -107,12 +107,12 @@ ...@@ -107,12 +107,12 @@
.d-flex .d-flex
v-btn.text-none( v-btn.text-none(
@click='goToComments()' @click='goToComments()'
:color='$vuetify.theme.dark ? `pink` : `pink darken-3`' :color='$vuetify.theme.dark ? `blue-grey` : `blue-grey darken-2`'
outlined outlined
style='flex: 1 1 100%;' style='flex: 1 1 100%;'
small 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') v-tooltip(right, v-if='isAuthenticated')
template(v-slot:activator='{ on }') template(v-slot:activator='{ on }')
v-btn.ml-2( v-btn.ml-2(
...@@ -120,9 +120,9 @@ ...@@ -120,9 +120,9 @@
v-on='on' v-on='on'
outlined outlined
small 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 span New Comment
v-card.mb-5 v-card.mb-5
...@@ -262,7 +262,11 @@ ...@@ -262,7 +262,11 @@
.contents(ref='container') .contents(ref='container')
slot(name='contents') slot(name='contents')
.comments-container#discussion .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 nav-footer
notify notify
search-results search-results
......
client/themes/default/scss/app.scss
View file @ a0618ee4
...@@ -805,13 +805,36 @@ ...@@ -805,13 +805,36 @@
} }
.comments-container { // ---------------------------------
background-color: mc('blue-grey', '50'); // COMMENTS
border-radius: 7px; // ---------------------------------
padding: 20px;
@at-root .theme--dark & { .comments {
background-color: darken(mc('grey', '900'), 5%); &-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%);
}
} }
} }
......
server/graph/resolvers/comment.js
View file @ a0618ee4
...@@ -32,6 +32,9 @@ module.exports = { ...@@ -32,6 +32,9 @@ module.exports = {
}, []), 'key') }, []), 'key')
} }
}) })
},
async list (obj, args, context) {
return []
} }
}, },
CommentMutation: { CommentMutation: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment