commit: 5f690145755c3972268e2750808ac98dcc17af90
parent: 7b92ca6f9406fc93868273c7fd755f92443cb0be
Author: Roger Braun <roger@rogerbraun.net>
Date: Fri, 28 Oct 2016 18:08:03 +0200
Basic attachments, some retweet fixes.
Diffstat:
6 files changed, 76 insertions(+), 13 deletions(-)
diff --git a/src/assets/nsfw.jpg b/src/assets/nsfw.jpg
Binary files differ.
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
@@ -0,0 +1,21 @@
+import nsfwImage from '../../assets/nsfw.jpg'
+
+const Attachment = {
+ props: [
+ 'attachment',
+ 'nsfw'
+ ],
+ data: () => ({ nsfwImage }),
+ computed: {
+ type () {
+ return 'image'
+ }
+ },
+ methods: {
+ showNsfw () {
+ this.nsfw = false
+ }
+ }
+}
+
+export default Attachment
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
@@ -0,0 +1,25 @@
+<template>
+ <div class="attachment">
+ <a v-if="nsfw" v-on:click.prevent="showNsfw()">
+ <img :src="nsfwImage"></img>
+ </a>
+
+ <a v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
+ <!-- <span ng-if="type === 'unknown'">Don't know how to display this...</span>
+
+
+ <div ng-if="type === 'html' && attachment.oembed" class="oembed">
+ <div ng-if="attachment.thumb_url" class="image">
+ <img ng-src="{{::attachment.thumb_url}}"></img>
+ </div>
+ <div class="text">
+ <h1><a href="{{::attachment.url}}">{{::attachment.oembed.title}}</a></h1>
+ <div ng-bind-html="attachment.oembed.oembedHTML"></div>
+ </div>
+ </div>
+
+ <video ng-if="type ==='webm'" ng-src="{{::videoUrl}}" controls></video> -->
+ </div>
+</template>
+
+<script src="./attachment.js"></script>
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -1,5 +1,24 @@
+import Attachment from '../attachment/attachment.vue'
+
const Status = {
- props: [ 'status' ]
+ props: [ 'statusoid' ],
+ data: () => ({
+ nsfw: true
+ }),
+ computed: {
+ retweet () { return !!this.statusoid.retweeted_status },
+ retweeter () { return this.statusoid.user.name },
+ status () {
+ if (this.retweet) {
+ return this.statusoid.retweeted_status
+ } else {
+ return this.statusoid
+ }
+ }
+ },
+ components: {
+ Attachment
+ }
}
export default Status
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -1,11 +1,11 @@
<template>
<div class="status-el">
- <div ng-if="retweet" class="media container retweet-info">
+ <div v-if="retweet" class="media container retweet-info">
<div class="media-left">
<i class='fa fa-retweet'></i>
</div>
<div class="media-body">
- Retweeted by {{status.user.screen_name}}
+ Retweeted by {{retweeter}}
</div>
</div>
<div class="media status container" ng-class="{compact: compact, notify: notify}">
@@ -15,24 +15,22 @@
</a>
</div>
<div class="media-body">
- <h4 ng-if="!compact" class="media-heading">
+ <h4 class="media-heading">
<strong>{{status.user.name}}</strong>
<small>{{status.user.screen_name}}</small>
- <small ng-if="status.in_reply_to_screen_name"> > {{status.in_reply_to_screen_name}}</small>
+ <small v-if="status.in_reply_to_screen_name"> > {{status.in_reply_to_screen_name}}</small>
-
- <small ng-click="goToConversation(status.statusnet_conversation_id)">{{status.created_at_parsed | date:'medium'}}</small>
+ <small>{{status.created_at_parsed}}</small>
</h4>
- <p>{{status.text}}</p>
+ <div v-html="status.statusnet_html"></div>
- <div ng-if='status.attachments' class='attachments'>
- <attachment nsfw="nsfw" attachment="attachment" ng-repeat="attachment in status.attachments">
+ <div v-if='status.attachments' class='attachments'>
+ <attachment :nsfw="nsfw" :attachment="attachment" v-for="attachment in status.attachments">
</attachment>
</div>
- <div ng-if="!compact">
- <p>
- </p>
+ <div>
<div class='status-actions'>
<div ng-click="toggleReplying()">
<i class='fa fa-reply'></i>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
@@ -7,7 +7,7 @@
</p>
</div>
</a>
- <status v-for="status in timeline.visibleStatuses" v-bind:status="status"></status>
+ <status v-for="status in timeline.visibleStatuses" v-bind:statusoid="status"></status>
</div>
</template>
<script src="./timeline.js"></script>