diff options
| -rw-r--r-- | src/App.html | 2 | ||||
| -rw-r--r-- | src/App.js | 4 | ||||
| -rw-r--r-- | src/App.scss | 30 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 47 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 41 | ||||
| -rw-r--r-- | src/components/status/status.js | 12 | ||||
| -rw-r--r-- | src/components/status/status.vue | 15 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 2 |
8 files changed, 114 insertions, 39 deletions
diff --git a/src/App.html b/src/App.html index 1b067684..f80797e1 100644 --- a/src/App.html +++ b/src/App.html @@ -1,4 +1,4 @@ -<div id="app"> +<div id="app" v-bind:style="style"> <nav class='container'> <div class='item'> <a route-to='friends-timeline' href="#">Pleroma FE</a> @@ -4,5 +4,9 @@ export default { name: 'app', components: { UserPanel + }, + computed: { + user () { return this.$store.state.users.currentUser || {} }, + style () { return { 'background-image': `url(${this.user.background_image})` } } } } diff --git a/src/App.scss b/src/App.scss index 3c04d020..a15751aa 100644 --- a/src/App.scss +++ b/src/App.scss @@ -179,33 +179,6 @@ status.ng-enter.ng-enter-active { width: 100%; } - .oembed { - border: 1px solid rgba(0, 0, 0, 0.14); - width: 100%; - - display: flex; - .image { - flex: 1; - display: flex; - img { - border: 0px; - border-radius: 0; - } - } - - .text { - flex: 2; - margin: 8px; - h1 { - font-size: 14px; - margin: 0px; - - a { - color: black; - } - } - } - } } .media-body { @@ -381,3 +354,6 @@ attention { } } } +nav { + z-index: 1000; +} diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index d20b704b..7feab42c 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -4,7 +4,7 @@ <img :src="nsfwImage"></img> </a> - <a v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a> + <a class="image-attachment" v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a> <video v-if="type === 'webm' && !nsfw" :src="attachment.url" controls></video> @@ -29,5 +29,50 @@ video { height: 100%; } + + .oembed { + img { + width: 100%; + height: 100%; + } + } + + .oembed { + border: 1px solid rgba(0, 0, 0, 0.14); + width: 100%; + + display: flex; + .image { + flex: 1; + img { + border: 0px; + border-radius: 0; + } + } + + .text { + flex: 2; + margin: 8px; + h1 { + font-size: 14px; + margin: 0px; + + a { + color: black; + } + } + } + } + + a.image-attachment { + display: flex; + flex: 1; + + img { + width: 100%; + height: 100%; + flex: 1; + } + } } </style> diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 596c9f58..2c015154 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -1,18 +1,51 @@ import statusPoster from '../../services/status_poster/status_poster.service.js' +import { reject, map, uniqBy } from 'lodash'; + +const buildMentionsString = ({user, attentions}, currentUser) => { + + let allAttentions = [...attentions] + + allAttentions.unshift(user) + + allAttentions = uniqBy(allAttentions, 'id') + allAttentions = reject(allAttentions, {id: currentUser.id}) + + let mentions = map(allAttentions, (attention) => { + return `@${attention.screen_name}` + }) + + return mentions.join(' ') + ' ' +} const PostStatusForm = { - data() { + props: [ + 'replyTo', + 'repliedUser', + 'attentions' + ], + data () { + let statusText = '' + + if (this.replyTo) { + const currentUser = this.$store.state.users.currentUser + statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser) + } + return { - newStatus: { } + newStatus: { + status: statusText + } } }, methods: { - postStatus(newStatus) { + postStatus (newStatus) { statusPoster.postStatus({ status: newStatus.status, - store: this.$store + store: this.$store, + inReplyToStatusId: this.replyTo }) this.newStatus = { } + this.$emit('posted') } } } diff --git a/src/components/status/status.js b/src/components/status/status.js index f3816daa..2e6565e8 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -1,8 +1,12 @@ import Attachment from '../attachment/attachment.vue' import FavoriteButton from '../favorite_button/favorite_button.vue' +import PostStatusForm from '../post_status_form/post_status_form.vue' const Status = { props: [ 'statusoid' ], + data: () => ({ + replying: false + }), computed: { retweet () { return !!this.statusoid.retweeted_status }, retweeter () { return this.statusoid.user.name }, @@ -16,7 +20,13 @@ const Status = { }, components: { Attachment, - FavoriteButton + FavoriteButton, + PostStatusForm + }, + methods: { + toggleReplying () { + this.replying = !this.replying + } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 4d8700d5..8361aa52 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -2,7 +2,7 @@ <div class="status-el"> <div v-if="retweet" class="media container retweet-info"> <div class="media-left"> - <i class='fa fa-retweet'></i> + <i class='fa icon-retweet'></i> </div> <div class="media-body"> Retweeted by {{retweeter}} @@ -34,8 +34,10 @@ <div> <div class='status-actions'> - <div ng-click="toggleReplying()"> - <i class='fa icon-reply'></i> + <div> + <a href="#" v-on:click.prevent="toggleReplying"> + <i class='fa icon-reply'></i> + </a> </div> <div> <i class='fa icon-retweet'></i> @@ -43,7 +45,7 @@ <favorite-button :status=status></favorite-button> </div> - <!-- <post-status-form ng-if="replying" toggle="toggleReplying" reply-to-status="status" reply-to="{{status.id}}"></post-status-form> --> + <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form> </div> </div> </div> @@ -55,9 +57,14 @@ <style lang="scss"> .status-el { word-wrap: break-word; + word-break: break-word; a { word-break: break-all; } } + + .status-actions { + padding-top: 5px; + } </style> diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 8fdcc42f..1e779638 100644 --- 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:statusoid="status"></status> + <status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status> </div> </template> <script src="./timeline.js"></script> |