apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Button to show who reacted (for mobile)

Browse Source
This commit is contained in:
Noah 2024-10-04 22:51:16 -07:00
parent 89ae43b78a
commit 96e1a6efa4
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/MessageBox.vue
View File

@ -54,6 +54,9 @@ export default {
{ n: ['banana'], u: '1f34c' }, { n: ['banana'], u: '1f34c' },
] ]
}, },
// Emoji reactions are toggled fully spelled out (for mobile)
showReactions: false,
}; };
}, },
computed: { computed: {
@ -357,8 +360,21 @@ export default {
<span v-for="(users, emoji) in reactions" v-bind:key="emoji" class="tag is-secondary mr-1 cursor-pointer" <span v-for="(users, emoji) in reactions" v-bind:key="emoji" class="tag is-secondary mr-1 cursor-pointer"
:class="{ 'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji) }" :class="{ 'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji) }"
:title="emoji + ' by: ' + users.join(', ')" @click="sendReact(emoji)"> :title="emoji + ' by: ' + users.join(', ')" @click="sendReact(emoji)">
{{ emoji }} <small class="ml-1">{{ users.length }}</small> {{ emoji }}
<small v-if="showReactions" class="ml-1">
{{ users.join(', ') }}
</small>
<small v-else class="ml-1">{{ users.length }}</small>
</span> </span>
<!-- Mobile helper to show all -->
<a href="#" class="tag is-light cursor-pointer" @click.prevent="showReactions = !showReactions">
<i class="fa mr-1"
:class="{'fa-angles-left': showReactions,
'fa-angles-right': !showReactions,
}"></i> {{ showReactions ? 'Less' : 'More' }}
</a>
</div> </div>
</div> </div>
@ -414,9 +430,23 @@ export default {
<span v-for="(users, emoji) in reactions" v-bind:key="emoji" class="tag is-secondary mr-1 cursor-pointer" <span v-for="(users, emoji) in reactions" v-bind:key="emoji" class="tag is-secondary mr-1 cursor-pointer"
:class="{ 'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji) }" :class="{ 'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji) }"
:title="emoji + ' by: ' + users.join(', ')" @click="sendReact(emoji)"> :title="emoji + ' by: ' + users.join(', ')" @click="sendReact(emoji)">
{{ emoji }} <small class="ml-1">{{ users.length }}</small> {{ emoji }}
<small v-if="showReactions" class="ml-1">
{{ users.join(', ') }}
</small>
<small v-else class="ml-1">{{ users.length }}</small>
</span> </span>
<!-- Mobile helper to show all -->
<a href="#" class="tag is-light cursor-pointer" @click.prevent="showReactions = !showReactions">
<i class="fa mr-1"
:class="{'fa-angles-left': showReactions,
'fa-angles-right': !showReactions,
}"></i> {{ showReactions ? 'Less' : 'More' }}
</a>
</div> </div>
</div> </div>
<!-- Emoji/Menu button --> <!-- Emoji/Menu button -->