feat: comments UI improvements

client/components/comments.vue

@@ -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>
+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>
 

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')

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 }')

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

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%);
+    }
   }
 }
 

server/graph/resolvers/comment.js

@@ -32,6 +32,9 @@ module.exports = {
           }, []), 'key')
         }
       })
+    },
+    async list (obj, args, context) {
+      return []
     }
   },
   CommentMutation: {