diff --git a/client/components/comments.vue b/client/components/comments.vue
index f1987e8b..330b1b26 100644
--- a/client/components/comments.vue
+++ b/client/components/comments.vue
@@ -1,13 +1,16 @@
- 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.
diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue
index 98359dac..95b99ce2 100644
--- a/client/components/editor/editor-markdown.vue
+++ b/client/components/editor/editor-markdown.vue
@@ -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')
diff --git a/client/components/editor/editor-modal-editorselect.vue b/client/components/editor/editor-modal-editorselect.vue
index a341140d..edb2ab24 100644
--- a/client/components/editor/editor-modal-editorselect.vue
+++ b/client/components/editor/editor-modal-editorselect.vue
@@ -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 }')
diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue
index e5565512..04d2e432 100644
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@@ -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
diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
index 4e8ee199..2647745a 100644
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -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%);
+ }
}
}
diff --git a/server/graph/resolvers/comment.js b/server/graph/resolvers/comment.js
index e09f56ee..6946460d 100644
--- a/server/graph/resolvers/comment.js
+++ b/server/graph/resolvers/comment.js
@@ -32,6 +32,9 @@ module.exports = {
}, []), 'key')
}
})
+ },
+ async list (obj, args, context) {
+ return []
}
},
CommentMutation: {