Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Entire area around user counters are clickable now, not just the header-link

Browse source
This commit is contained in:
Henry Jameson 2018-04-15 08:04:16 +03:00
parent 61fd0b65d9
commit 15a7151ade
2 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/user_card_content/user_card_content.js
View file

@ -61,8 +61,10 @@ export default {
store.state.api.backendInteractor.setUserMute(this.user) store.state.api.backendInteractor.setUserMute(this.user)
}, },
setProfileView (v) { setProfileView (v) {
const store = this.$store if (this.switcher) {
store.commit('setProfileView', { v }) const store = this.$store
store.commit('setProfileView', { v })
}
} }
} }
} }

27
src/components/user_card_content/user_card_content.vue
View file

@ -74,20 +74,17 @@
</div> </div>
</div> </div>
<div class="panel-body profile-panel-body"> <div class="panel-body profile-panel-body">
<div class="user-counts"> <div class="user-counts" :class="{clickable: switcher}">
<div class="user-count" :class="{selected: selected === 'statuses'}"> <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
<a href="#" v-on:click.prevent="setProfileView('statuses')" v-if="switcher"><h5>{{ $t('user_card.statuses') }}</h5></a> <h5>{{ $t('user_card.statuses') }}</h5>
<h5 v-else>{{ $t('user_card.statuses') }}</h5>
<span>{{user.statuses_count}} <br></span> <span>{{user.statuses_count}} <br></span>
</div> </div>
<div class="user-count" :class="{selected: selected === 'friends'}"> <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
<a href="#" v-on:click.prevent="setProfileView('friends')" v-if="switcher"><h5>{{ $t('user_card.followees') }}</h5></a> <h5>{{ $t('user_card.followees') }}</h5>
<h5 v-else>{{ $t('user_card.followees') }}</h5>
<span>{{user.friends_count}}</span> <span>{{user.friends_count}}</span>
</div> </div>
<div class="user-count" :class="{selected: selected === 'followers'}"> <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
<a href="#" v-on:click.prevent="setProfileView('followers')" v-if="switcher"><h5>{{ $t('user_card.followers') }}</h5></a> <h5>{{ $t('user_card.followers') }}</h5>
<h5 v-else>{{ $t('user_card.followers') }}</h5>
<span>{{user.followers_count}}</span> <span>{{user.followers_count}}</span>
</div> </div>
</div> </div>
@ -239,6 +236,16 @@
text-align: center; text-align: center;
justify-content: space-between; justify-content: space-between;
text-shadow: $usercard-text-shadow; text-shadow: $usercard-text-shadow;
&.clickable {
.user-count {
cursor: pointer;
&:hover:not(.selected) {
background-color: rgba(0,0,0,.1);
}
}
}
} }
.user-count { .user-count {