diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/attachment/attachment.js | 2 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 7 | ||||
| -rw-r--r-- | src/components/conversation/conversation.js | 48 | ||||
| -rw-r--r-- | src/components/conversation/conversation.vue | 12 | ||||
| -rw-r--r-- | src/components/hello/Hello.css | 0 | ||||
| -rw-r--r-- | src/components/hello/Hello.html | 0 | ||||
| -rw-r--r-- | src/components/hello/Hello.js | 8 | ||||
| -rw-r--r-- | src/components/hello/Hello.vue | 44 | ||||
| -rw-r--r-- | src/components/status/status.vue | 55 | ||||
| -rw-r--r-- | src/components/timeline/timeline.js | 3 |
10 files changed, 116 insertions, 63 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index fa43c12f..9f751863 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -20,4 +20,4 @@ const Attachment = { } } -export default Attachment +export default Attachment
\ No newline at end of file diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 1cb53c32..1e49cbeb 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -11,6 +11,8 @@ <video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video> + <audio v-if="type === 'audio'" :src="attachment.url" controls></audio> + <span v-if="type === 'unknown'">Don't know how to display this...</span> <div v-if="type === 'html' && attachment.oembed" class="oembed"> @@ -45,6 +47,10 @@ width: 100%; } + audio { + width: 100%; + } + img.media-upload { width: 100%; height: 100%; @@ -94,7 +100,6 @@ img { width: 100%; - flex: 1; border: 1px solid; border-radius: 0.5em; width: 100%; diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js new file mode 100644 index 00000000..ea26d958 --- /dev/null +++ b/src/components/conversation/conversation.js @@ -0,0 +1,48 @@ +import { find, filter, sortBy, toInteger } from 'lodash' +import Status from '../status/status.vue' +import apiService from '../../services/api/api.service.js' + +const conversation = { + computed: { + status () { + const id = toInteger(this.$route.params.id) + const statuses = this.$store.state.statuses.allStatuses + const status = find(statuses, {id}) + + return status + }, + conversation () { + if (!this.status) { + return false + } + + const conversationId = this.status.statusnet_conversation_id + const statuses = this.$store.state.statuses.allStatuses + const conversation = filter(statuses, { statusnet_conversation_id: conversationId }) + return sortBy(conversation, 'id') + } + }, + components: { + Status + }, + created () { + this.fetchConversation() + }, + methods: { + fetchConversation () { + if (this.status) { + const conversationId = this.status.statusnet_conversation_id + apiService.fetchConversation({id: conversationId}) + .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses })) + .then(() => this.$store.commit('updateTimestamps')) + } else { + const id = this.$route.params.id + apiService.fetchStatus({id}) + .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] })) + .then(() => this.fetchConversation()) + } + } + } +} + +export default conversation diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue new file mode 100644 index 00000000..60b3f044 --- /dev/null +++ b/src/components/conversation/conversation.vue @@ -0,0 +1,12 @@ +<template> + <div class="timeline panel panel-default"> + <div class="panel-heading">Status</div> + <div class="panel-body"> + <div class="timeline"> + <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status> + </div> + </div> + </div> +</template> + +<script src="./conversation.js"></script> diff --git a/src/components/hello/Hello.css b/src/components/hello/Hello.css deleted file mode 100644 index e69de29b..00000000 --- a/src/components/hello/Hello.css +++ /dev/null diff --git a/src/components/hello/Hello.html b/src/components/hello/Hello.html deleted file mode 100644 index e69de29b..00000000 --- a/src/components/hello/Hello.html +++ /dev/null diff --git a/src/components/hello/Hello.js b/src/components/hello/Hello.js deleted file mode 100644 index c701c560..00000000 --- a/src/components/hello/Hello.js +++ /dev/null @@ -1,8 +0,0 @@ -export default { - name: 'hello', - data () { - return { - msg: 'Welcome to Your Vue.js app' - } - } -} diff --git a/src/components/hello/Hello.vue b/src/components/hello/Hello.vue deleted file mode 100644 index 828136a8..00000000 --- a/src/components/hello/Hello.vue +++ /dev/null @@ -1,44 +0,0 @@ -<template> - <div class="hello"> - <h1>{{ msg }}</h1> - <h2>Essential Links</h2> - <ul> - <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> - <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> - <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li> - <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> - <br> - <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This template</a></li> - </ul> - <h2>Ecosystem</h2> - <ul> - <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> - <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> - <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> - <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> - </ul> - </div> -</template> - -<script src='./Hello.js'></script> - -<!-- Add "scoped" attribute to limit CSS to this component only --> -<style scoped> -h1, h2 { - font-weight: normal; -} - -ul { - list-style-type: none; - padding: 0; -} - -li { - display: inline-block; - margin: 0 10px; -} - -a { - color: #42b983; -} -</style> diff --git a/src/components/status/status.vue b/src/components/status/status.vue index d4bcc279..9d17b8a7 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -20,7 +20,14 @@ <small><a :href="status.user.statusnet_profile_url">{{status.user.screen_name}}</a></small> <small v-if="status.in_reply_to_screen_name"> > <a :href="status.in_reply_to_profileurl">{{status.in_reply_to_screen_name}}</a></small> - - <small>{{status.created_at_parsed}}</small> + <small> + <router-link :to="{ name: 'conversation', params: { id: status.id } }"> + {{status.created_at_parsed}} + </router-link> + </small> + <small v-if="!status.is_local" class="source_url"> + <a :href="status.external_url" >Source</a> + </small> </h4> <div class="status-content" v-html="status.statusnet_html"></div> @@ -51,13 +58,21 @@ <script src="./status.js" ></script> <style lang="scss"> - @import '../../_variables.scss'; - .status-el { + @import '../../_variables.scss'; + .status-el { hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; + .source_url { + float: right; + } + + .greentext { + color: green; + } + a { display: inline-block; word-break: break-all; @@ -67,13 +82,37 @@ margin-top: 3px; margin-bottom: 3px; } - } - .status-actions { + p { + margin: 0; + margin-top: 0.2em; + margin-bottom: 0.5em; + } + } + + .status-actions { padding-top: 5px; - } + } - .icon-reply:hover { + .icon-reply:hover { color: $blue; - } + } + + .status .avatar { + width: 48px; + } + + .status.compact .avatar { + width: 32px; + } + + .status { + padding: 0.5em; + padding-right: 1em; + border-bottom: 1px solid silver; + } + + .status-el:last-child .status { + border: none + } </style> diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 4ebc383f..8799e69c 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -12,12 +12,13 @@ const Timeline = { created () { const store = this.$store const credentials = store.state.users.currentUser.credentials + const showImmediately = this.timeline.visibleStatuses.length === 0 timelineFetcher.fetchAndUpdate({ store, credentials, timeline: this.timelineName, - showImmediately: true + showImmediately }) }, methods: { |