Add simple client-side posting effect

parent 5c76d6b4
......@@ -6,5 +6,6 @@
"backgroundImage": false,
"backgroundColour": "#73D8FF",
"privateKey": "encrypted private key",
"publicKey": "public key"
"publicKey": "public key",
"debug": false
}
......@@ -10,7 +10,7 @@
</no-ssr>
<div class='compose-tools buttons'>
<button @click='editorContent=""' ref='clearButton' class='button'>Clear</button>
<button ref='postButton' class='button is-primary'>Post</button>
<button ref='postButton' class='button is-primary' @click='post'>Post</button>
</div>
</div>
</template>
......@@ -47,8 +47,14 @@ export default {
},
methods: {
clear () {
this.editorContent = ''
},
editorChange ( { quill, html, text } ) {
this.$emit('composerChange', quill, html, text)
},
post () {
this.$emit('post', this.editorContent)
}
}
}
......
......@@ -6,9 +6,15 @@
<!-- Main tabs with currently hard-coded content. -->
<b-tabs v-model='activeTab' position='is-centered' class='block'>
<b-tab-item label='Me' :disabled='!configured'>
<content-type-filter />
<textComposer @composerChange='composerChange' v-if='signedIn'/>
<pre style='word-break: break-word;' v-if='signedIn'>{{ composerContent }}</pre>
<!-- <content-type-filter /> -->
<textComposer ref='textComposer' @composerChange='composerChange' @post='post' v-if='signedIn'/>
<pre style='word-break: break-word;' v-if='signedIn && debug'>{{ composerContent }}</pre>
<transition-group name='list' tag='div' @enter='clearTextComposer'>
<div v-for='post in posts' :key='post.id'>
<!-- <span>ID: {{post.id}}</span> -->
<span v-html='post.content'></span>
</div>
</transition-group>
</b-tab-item>
<b-tab-item label="Everyone" :disabled='!configured'><b-message type='is-info' has-icon><strong>Nothing yet.</strong> Federated posts will go here.</b-message></b-tab-item>
<b-tab-item label='Search' :disabled='!configured'><search /></b-tab-item>
......@@ -19,7 +25,7 @@
</b-tabs>
<!-- Follow modal -->
<follow-modal :isActive='followModalActive' @close='followModalActive = false' />
<follow-modal :isActive='followModalActive' @after-enter='followModalActive = false' />
</div>
</template>
......@@ -56,20 +62,41 @@ export default {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio },
signedIn () { return this.$store.state.signedIn },
configured () { return this.$store.state.configured }
configured () { return this.$store.state.configured },
debug () { return this.$store.state.debug }
},
data () {
return {
followModalActive: false,
composerContent: '',
activeTab: 0
activeTab: 0,
postCounter: 2,
// Mock posts
posts: [
{
id: 1,
content: "<h2>Earliest post</h2><p>So is this.</p>"
},
{
id: 0,
content: "<h2>Later post</h2><p>This is a great post.</p>"
}
]
}
},
methods: {
composerChange (quill, html, text) {
this.composerContent = html
},
post (content) {
// Add the new post to the top of the list.
this.posts.unshift({id: this.postCounter++, content})
},
clearTextComposer() {
this.$refs.textComposer.clear()
}
},
......@@ -78,7 +105,7 @@ export default {
// Decide which tab to show based on whether the site has been
// configured yet or not.
this.activeTab = this.configured ? Tabs.Me : Tabs.Settings;
this.activeTab = this.configured ? Tabs.Me : Tabs.Settings
console.log(`Active tab: ${this.activeTab}`)
}
}
......@@ -111,5 +138,11 @@ nav.tabs
margin-bottom: 0;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 1;
transform: translateY(-7em);
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment