diff options
Diffstat (limited to 'src/components/user_card/user_card.vue')
| -rw-r--r-- | src/components/user_card/user_card.vue | 213 |
1 files changed, 107 insertions, 106 deletions
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 5a5a4881..f987fbbb 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -112,101 +112,120 @@ </div> </div> <div - v-if="isOtherUser" + v-if="loggedIn && isOtherUser" class="user-interactions" > - <div - v-if="loggedIn" - class="follow" - > - <span v-if="user.following"> - <!--Following them!--> - <button - class="pressed" - :disabled="followRequestInProgress" - :title="$t('user_card.follow_unfollow')" - @click="unfollowUser" - > - <template v-if="followRequestInProgress"> - {{ $t('user_card.follow_progress') }} - </template> - <template v-else> - {{ $t('user_card.following') }} - </template> - </button> - </span> - <span v-if="!user.following"> - <button - :disabled="followRequestInProgress" - :title="followRequestSent ? $t('user_card.follow_again') : ''" - @click="followUser" - > - <template v-if="followRequestInProgress"> - {{ $t('user_card.follow_progress') }} - </template> - <template v-else-if="followRequestSent"> - {{ $t('user_card.follow_sent') }} - </template> - <template v-else> - {{ $t('user_card.follow') }} - </template> - </button> - </span> + <div v-if="!user.following"> + <button + class="btn btn-default btn-block" + :disabled="followRequestInProgress" + :title="followRequestSent ? $t('user_card.follow_again') : ''" + @click="followUser" + > + <template v-if="followRequestInProgress"> + {{ $t('user_card.follow_progress') }} + </template> + <template v-else-if="followRequestSent"> + {{ $t('user_card.follow_sent') }} + </template> + <template v-else> + {{ $t('user_card.follow') }} + </template> + </button> + </div> + <div v-else-if="followRequestInProgress"> + <button + class="btn btn-default btn-block pressed" + disabled + :title="$t('user_card.follow_unfollow')" + @click="unfollowUser" + > + {{ $t('user_card.follow_progress') }} + </button> </div> <div - v-if="isOtherUser && loggedIn" - class="mute" + v-else + class="btn-group" > - <span v-if="user.muted"> - <button - class="pressed" - @click="unmuteUser" - > - {{ $t('user_card.muted') }} - </button> - </span> - <span v-if="!user.muted"> - <button @click="muteUser"> - {{ $t('user_card.mute') }} - </button> - </span> + <button + class="btn btn-default pressed" + :title="$t('user_card.follow_unfollow')" + @click="unfollowUser" + > + {{ $t('user_card.following') }} + </button> + <ProgressButton + v-if="!user.subscribed" + class="btn btn-default" + :click="subscribeUser" + :title="$t('user_card.subscribe')" + > + <i class="icon-bell-alt" /> + </ProgressButton> + <ProgressButton + v-else + class="btn btn-default pressed" + :click="unsubscribeUser" + :title="$t('user_card.unsubscribe')" + > + <i class="icon-bell-ringing-o" /> + </ProgressButton> </div> - <div v-if="!loggedIn && user.is_local"> - <RemoteFollow :user="user" /> + + <div> + <button + v-if="user.muted" + class="btn btn-default btn-block pressed" + @click="unmuteUser" + > + {{ $t('user_card.muted') }} + </button> + <button + v-else + class="btn btn-default btn-block" + @click="muteUser" + > + {{ $t('user_card.mute') }} + </button> </div> - <div - v-if="isOtherUser && loggedIn" - class="block" - > - <span v-if="user.statusnet_blocking"> - <button - class="pressed" - @click="unblockUser" - > - {{ $t('user_card.blocked') }} - </button> - </span> - <span v-if="!user.statusnet_blocking"> - <button @click="blockUser"> - {{ $t('user_card.block') }} - </button> - </span> + + <div> + <button + v-if="user.statusnet_blocking" + class="btn btn-default btn-block pressed" + @click="unblockUser" + > + {{ $t('user_card.blocked') }} + </button> + <button + v-else + class="btn btn-default btn-block" + @click="blockUser" + > + {{ $t('user_card.block') }} + </button> </div> - <div - v-if="isOtherUser && loggedIn" - class="block" - > - <span> - <button @click="reportUser"> - {{ $t('user_card.report') }} - </button> - </span> + + <div> + <button + class="btn btn-default btn-block" + @click="reportUser" + > + {{ $t('user_card.report') }} + </button> </div> + <ModerationTools v-if="loggedIn.role === "admin"" :user="user" /> </div> + <div + v-if="!loggedIn && user.is_local" + class="user-interactions" + > + <RemoteFollow :user="user" /> + </div> </div> </div> <div @@ -487,40 +506,22 @@ display: flex; flex-flow: row wrap; justify-content: space-between; - margin-right: -.75em; - div { + > * { flex: 1 0 0; - margin-right: .75em; - margin-bottom: .6em; + margin: 0 .75em .6em 0; white-space: nowrap; } - .mute { - max-width: 220px; - min-height: 28px; - } - - .follow { - max-width: 220px; - min-height: 28px; - } - button { - width: 100%; - height: 100%; margin: 0; - } - - .remote-button { - height: 28px !important; - width: 92%; - } - .pressed { - border-bottom-color: rgba(255, 255, 255, 0.2); - border-top-color: rgba(0, 0, 0, 0.2); + &.pressed { + // TODO: This should be themed. + border-bottom-color: rgba(255, 255, 255, 0.2); + border-top-color: rgba(0, 0, 0, 0.2); + } } } } |