Merge branch 'master' of ssh.gitgud.io:lambadalambda/pleroma-fe

This commit is contained in:
Roger Braun 2016-11-05 10:55:15 +01:00
commit 82d023609b
8 changed files with 114 additions and 39 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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