msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

feat: comments UI improvements

Browse Source
pull/1949/head
NGPixel 5 years ago
parent 15a45f8b91
commit a0618ee4f6
6 changed files with 124 additions and 36 deletions
Show Stats Download Patch File Download Diff File

91
client/components/comments.vue
Unescape View File

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

2
client/components/editor/editor-markdown.vue
Unescape View File

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

9
client/components/editor/editor-modal-editorselect.vue
Unescape View File

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

20
client/themes/default/components/page.vue
Unescape View File

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

35
client/themes/default/scss/app.scss
Unescape View File

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

3
server/graph/resolvers/comment.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save