esm/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

Make user profiles visible inline.

Browse source
This commit is contained in:
Roger Braun 2017-02-16 15:58:49 +01:00
parent ae388d7927
commit 5481cf00a3
3 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/status/status.js
View file

@ -3,6 +3,7 @@ import FavoriteButton from '../favorite_button/favorite_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue'
import DeleteButton from '../delete_button/delete_button.vue' import DeleteButton from '../delete_button/delete_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue' import PostStatusForm from '../post_status_form/post_status_form.vue'
import UserCardContent from '../user_card_content/user_card_content.vue'
const Status = { const Status = {
props: [ props: [
@ -12,7 +13,8 @@ const Status = {
data: () => ({ data: () => ({
replying: false, replying: false,
expanded: false, expanded: false,
unmuted: false unmuted: false,
userExpanded: false
}), }),
computed: { computed: {
retweet () { return !!this.statusoid.retweeted_status }, retweet () { return !!this.statusoid.retweeted_status },
@ -34,7 +36,8 @@ const Status = {
FavoriteButton, FavoriteButton,
RetweetButton, RetweetButton,
DeleteButton, DeleteButton,
PostStatusForm PostStatusForm,
UserCardContent
}, },
methods: { methods: {
toggleReplying () { toggleReplying () {
@ -45,6 +48,9 @@ const Status = {
}, },
toggleMute () { toggleMute () {
this.unmuted = !this.unmuted this.unmuted = !this.unmuted
},
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
} }
} }
} }

12
src/components/status/status.vue
View file

@ -18,10 +18,13 @@
<div class="media status container"> <div class="media status container">
<div class="media-left"> <div class="media-left">
<a :href="status.user.statusnet_profile_url"> <a :href="status.user.statusnet_profile_url">
<img class='avatar' :src="status.user.profile_image_url_original"> <img @click.prevent="toggleUserExpanded" class='avatar' :src="status.user.profile_image_url_original">
</a> </a>
</div> </div>
<div class="media-body"> <div class="media-body">
<div class="base05 base05=border usercard" v-if="userExpanded">
<user-card-content :user="status.user"></user-card-content>
</div>
<div class="user-content"> <div class="user-content">
<h4 class="media-heading"> <h4 class="media-heading">
{{status.user.name}} {{status.user.name}}
@ -147,4 +150,11 @@
display: block; display: block;
margin-left: auto; margin-left: auto;
} }
.usercard {
border-style: solid;
border-width: 1px;
border-radius: 1em;
margin-bottom: 1em;
}
</style> </style>

2
src/services/style_setter/style_setter.js
View file

@ -34,7 +34,7 @@ const setStyle = (href) => {
styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max') styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max')
styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max') styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max')
styleSheet.insertRule(`.base05-border { color: ${base05Color}`, 'index-max') styleSheet.insertRule(`.base05-border { border-color: ${base05Color}`, 'index-max')
body.style.display = 'initial' body.style.display = 'initial'
} }
cssEl.addEventListener('load', setDynamic) cssEl.addEventListener('load', setDynamic)