Skip to content

Commit

Permalink
feat: comments UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@NGPixel
NGPixel committed May 23, 2020
1 parent 15a45f8 commit a0618ee
Show file tree
Hide file tree
Showing 6 changed files with 124 additions and 36 deletions.
91 changes: 74 additions & 17 deletions client/components/comments.vue
View file
@@ -1,31 +1,47 @@
<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
.caption.blue-grey--text Markdown Format
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
Expand All @@ -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>
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>

Expand Down
2 changes: 1 addition & 1 deletion client/components/editor/editor-markdown.vue
View file
Expand Up @@ -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')
Expand Down
9 changes: 5 additions & 4 deletions client/components/editor/editor-modal-editorselect.vue
View file
Expand Up @@ -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 }')
Expand Down
20 changes: 12 additions & 8 deletions client/themes/default/components/page.vue
View file
Expand Up @@ -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(`/`)'
Expand All @@ -92,37 +92,37 @@

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;'
)
span {{commentsCount}}
.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(
@click='goToComments(true)'
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
Expand Down Expand Up @@ -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
Expand Down
35 changes: 29 additions & 6 deletions client/themes/default/scss/app.scss
View file
Expand Up @@ -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%);
}
}
}

Expand Down
3 changes: 3 additions & 0 deletions server/graph/resolvers/comment.js
View file
Expand Up @@ -32,6 +32,9 @@ module.exports = {
}, []), 'key')
}
})
},
async list (obj, args, context) {
return []
}
},
CommentMutation: {
Expand Down

0 comments on commit a0618ee

Please sign in to comment.