From a0618ee4f6b47db53163263e9c57528063508f8e Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sat, 23 May 2020 18:49:10 -0400
Subject: [PATCH] feat: comments UI improvements

---
 client/components/comments.vue                | 91 +++++++++++++++----
 client/components/editor/editor-markdown.vue  |  2 +-
 .../editor/editor-modal-editorselect.vue      |  9 +-
 client/themes/default/components/page.vue     | 20 ++--
 client/themes/default/scss/app.scss           | 35 +++++--
 server/graph/resolvers/comment.js             |  3 +
 6 files changed, 124 insertions(+), 36 deletions(-)

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 @@
 <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>
 
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: {