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'> <nav class='container'>
<div class='item'> <div class='item'>
<a route-to='friends-timeline' href="#">Pleroma FE</a> <a route-to='friends-timeline' href="#">Pleroma FE</a>

View file

@ -4,5 +4,9 @@ export default {
name: 'app', name: 'app',
components: { components: {
UserPanel 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%; 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 { .media-body {
@ -381,3 +354,6 @@ attention {
} }
} }
} }
nav {
z-index: 1000;
}

View file

@ -4,7 +4,7 @@
<img :src="nsfwImage"></img> <img :src="nsfwImage"></img>
</a> </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> <video v-if="type === 'webm' && !nsfw" :src="attachment.url" controls></video>
@ -29,5 +29,50 @@
video { video {
height: 100%; 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> </style>

View file

@ -1,18 +1,51 @@
import statusPoster from '../../services/status_poster/status_poster.service.js' 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 = { 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 { return {
newStatus: { } newStatus: {
status: statusText
}
} }
}, },
methods: { methods: {
postStatus(newStatus) { postStatus (newStatus) {
statusPoster.postStatus({ statusPoster.postStatus({
status: newStatus.status, status: newStatus.status,
store: this.$store store: this.$store,
inReplyToStatusId: this.replyTo
}) })
this.newStatus = { } this.newStatus = { }
this.$emit('posted')
} }
} }
} }

View file

@ -1,8 +1,12 @@
import Attachment from '../attachment/attachment.vue' import Attachment from '../attachment/attachment.vue'
import FavoriteButton from '../favorite_button/favorite_button.vue' import FavoriteButton from '../favorite_button/favorite_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue'
const Status = { const Status = {
props: [ 'statusoid' ], props: [ 'statusoid' ],
data: () => ({
replying: false
}),
computed: { computed: {
retweet () { return !!this.statusoid.retweeted_status }, retweet () { return !!this.statusoid.retweeted_status },
retweeter () { return this.statusoid.user.name }, retweeter () { return this.statusoid.user.name },
@ -16,7 +20,13 @@ const Status = {
}, },
components: { components: {
Attachment, Attachment,
FavoriteButton FavoriteButton,
PostStatusForm
},
methods: {
toggleReplying () {
this.replying = !this.replying
}
} }
} }

View file

@ -2,7 +2,7 @@
<div class="status-el"> <div class="status-el">
<div v-if="retweet" class="media container retweet-info"> <div v-if="retweet" class="media container retweet-info">
<div class="media-left"> <div class="media-left">
<i class='fa fa-retweet'></i> <i class='fa icon-retweet'></i>
</div> </div>
<div class="media-body"> <div class="media-body">
Retweeted by {{retweeter}} Retweeted by {{retweeter}}
@ -34,8 +34,10 @@
<div> <div>
<div class='status-actions'> <div class='status-actions'>
<div ng-click="toggleReplying()"> <div>
<a href="#" v-on:click.prevent="toggleReplying">
<i class='fa icon-reply'></i> <i class='fa icon-reply'></i>
</a>
</div> </div>
<div> <div>
<i class='fa icon-retweet'></i> <i class='fa icon-retweet'></i>
@ -43,7 +45,7 @@
<favorite-button :status=status></favorite-button> <favorite-button :status=status></favorite-button>
</div> </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> </div>
</div> </div>
@ -55,9 +57,14 @@
<style lang="scss"> <style lang="scss">
.status-el { .status-el {
word-wrap: break-word; word-wrap: break-word;
word-break: break-word;
a { a {
word-break: break-all; word-break: break-all;
} }
} }
.status-actions {
padding-top: 5px;
}
</style> </style>

View file

@ -7,7 +7,7 @@
</p> </p>
</div> </div>
</a> </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> </div>
</template> </template>
<script src="./timeline.js"></script> <script src="./timeline.js"></script>