diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 43 | ||||
| -rw-r--r-- | src/components/user_panel/user_panel.js | 12 | ||||
| -rw-r--r-- | src/components/user_panel/user_panel.vue | 28 |
3 files changed, 49 insertions, 34 deletions
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue new file mode 100644 index 00000000..7ad86e63 --- /dev/null +++ b/src/components/user_card_content/user_card_content.vue @@ -0,0 +1,43 @@ +<template> + <div> + <div class="panel-heading text-center" v-bind:style="style"> + <div class='user-info'> + <img :src="user.profile_image_url"> + <span class="glyphicon glyphicon-user"></span> + <div class='user-name'>{{user.name}}</div> + <div class='user-screen-name'>@{{user.screen_name}}</div> + </div> + </div> + <div class="panel-body"> + <div class="user-counts"> + <div class="user-count"> + <h5>Statuses</h5> + <span>{{user.statuses_count}}</span> + </div> + <div class="user-count"> + <h5>Following</h5> + <span>{{user.friends_count}}</span> + </div> + <div class="user-count"> + <h5>Followers</h5> + <span>{{user.followers_count}}</span> + </div> + </div> + <p>{{user.description}}</p> + </div> + </div> +</template> + +<script> + export default { + props: [ 'user' ], + computed: { + style () { + return { + color: `#${this.user.profile_link_color}`, + 'background-image': `url(${this.user.cover_photo})` + } + } + } + } +</script> diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js index 418c3a6f..15804b88 100644 --- a/src/components/user_panel/user_panel.js +++ b/src/components/user_panel/user_panel.js @@ -1,19 +1,15 @@ import LoginForm from '../login_form/login_form.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' +import UserCardContent from '../user_card_content/user_card_content.vue' const UserPanel = { computed: { - user () { return this.$store.state.users.currentUser }, - style () { - return { - color: `#${this.user.profile_link_color}`, - 'background-image': `url(${this.user.cover_photo})` - } - } + user () { return this.$store.state.users.currentUser } }, components: { LoginForm, - PostStatusForm + PostStatusForm, + UserCardContent } } diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue index 6b986f84..8ecf1391 100644 --- a/src/components/user_panel/user_panel.vue +++ b/src/components/user_panel/user_panel.vue @@ -1,32 +1,8 @@ <template> <div class="user-panel"> <div v-if='user' class="panel panel-default"> - <!-- Default panel contents --> - <div class="panel-heading text-center" v-bind:style="style"> - <div class='user-info'> - <img :src="user.profile_image_url"> - <span class="glyphicon glyphicon-user"></span> - <div class='user-name'>{{user.name}}</div> - <div class='user-screen-name'>@{{user.screen_name}}</div> - </div> - </div> - <div class="panel-body"> - <div class="user-counts"> - <div class="user-count"> - <h5>Statuses</h5> - <span>{{user.statuses_count}}</span> - </div> - <div class="user-count"> - <h5>Following</h5> - <span>{{user.friends_count}}</span> - </div> - <div class="user-count"> - <h5>Followers</h5> - <span>{{user.followers_count}}</span> - </div> - </div> - <p>{{user.description}}</p> - </div> + + <user-card-content :user="user"></user-card-content> <div class="panel-footer"> <post-status-form v-if='user'></post-status-form> |