oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-08 23:30:53 +00:00
Code Wiki Activity

Clean up featured follow. Try to make the UX a bit nicer. Localize strings that weren't being localized. Add error handling.

Browse source
This commit is contained in:
SirStendec 2018-04-08 15:00:16 -04:00
parent 8c5b6910ed
commit c5564150b1
3 changed files with 151 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

94
src/sites/twitch-twilight/modules/featured-follow.vue
View file

@ -25,40 +25,48 @@
<a :href="'/' + user.login" :title="user.login" @click.prevent="route(user.login)"><p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5">{{ user.displayName }}</p></a>
<div class="tw-flex-grow-1 tw-pd-x-2"/>
<button
v-if="user.following"
:data-title="`Unfollow ${user.login}`"
data-tooltip-type="html"
class="tw-button tw-button--status tw-button--success ffz-tooltip ffz--featured-button-unfollow"
@click="unfollowUser(user.id)"
>
<span class="tw-button__icon tw-button__icon--status tw-flex">
<figure class="ffz-i-heart ffz--featured-button-unfollow-button"/>
</span>
</button>
<button
v-if="user.following"
:data-title="`${(user.disableNotifications ? 'Enable' : 'Disable')} Notifications`"
data-tooltip-type="html"
class="tw-button-icon tw-mg-l-05 ffz-tooltip ffz--featured-button-notification"
@click="updateNotificationStatus(user.id, user.disableNotifications)"
>
<span class="tw-button__icon tw-flex">
<figure :class="{ 'ffz-i-bell': !user.disableNotifications, 'ffz-i-bell-off': user.disableNotifications }"/>
</span>
</button>
<button
v-else
class="tw-button"
@click="followUser(user.id)"
>
<span class="tw-button__icon tw-button__icon--left">
<figure class="ffz-i-heart"/>
</span>
<span class="tw-button__text">
{{ t('featured-follow.button.follow', 'Follow') }}
</span>
</button>
<div v-if="user.error">
{{ t('featured-follow.error', 'An error occured.') }}
</div>
<template v-else>
<button
v-if="user.following"
:disabled="user.loading"
:data-title="user.loading ? null : t('featured-follow.button.unfollow', 'Unfollow %{user}', {user: user.displayName})"
data-tooltip-type="html"
class="tw-button tw-button--status tw-button--success ffz-tooltip ffz--featured-button-unfollow"
@click="clickWithTip($event, unfollowUser, user.id)"
>
<span class="tw-button__icon tw-button__icon--status tw-flex">
<figure class="ffz-i-heart ffz--featured-button-unfollow-button"/>
</span>
</button>
<button
v-if="user.following"
:disabled="user.loading"
:data-title="notifyTip(user.disableNotifications)"
data-tooltip-type="html"
class="tw-button-icon tw-mg-l-05 ffz-tooltip ffz--featured-button-notification"
@click="clickWithTip($event, updateNotificationStatus, user.id, user.disableNotifications)"
>
<span class="tw-button__icon tw-flex">
<figure :class="{ 'ffz-i-bell': !user.disableNotifications, 'ffz-i-bell-off': user.disableNotifications }"/>
</span>
</button>
<button
v-else
:disabled="user.loading"
class="tw-button"
@click="followUser(user.id)"
>
<span class="tw-button__icon tw-button__icon--left">
<figure class="ffz-i-heart"/>
</span>
<span class="tw-button__text">
{{ t('featured-follow.button.follow', 'Follow') }}
</span>
</button>
</template>
</div>
</div>
</div>
@ -72,6 +80,24 @@
export default {
data() {
return this.$vnode.data;
},
methods: {
clickWithTip(event, fn, ...args) {
const el = event.target,
tip = el && el._ffz_tooltip$0,
visible = tip && tip.visible;
visible && tip.hide();
fn.call(this, ...args);
visible && setTimeout(() => document.contains(el) && tip.show(), 0)
},
notifyTip(state) {
return state ?
this.t('featured-follow.notify.off', 'Notifications are currently disabled. Click to enable.') :
this.t('featured-follow.notify.on', 'Notifications are currently enabled. Click to disable.');
}
}
}
</script>