zoeissleeping/discord-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made emojipicker work 10x better, also fixed a few bugs

Browse Source
This commit is contained in:
Zoe
2023-01-20 00:48:49 -06:00
parent bf5245bec4
commit b6d3b045aa
15 changed files with 625 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
components/Message.vue
View File

@@ -1,17 +1,11 @@
<template>
<div class="relative message-wrapper"
@mouseenter="mouseEnter()"
@mouseleave="mouseLeave()">
@mouseleave="overflowShown = false">
<div class="absolute right-0 mr-10 -top-[20px] h-fit opacity-0 pointer-events-none action-buttons z-[5]"
:class="(emojiPickerOpen) ? 'opacity-100 pointer-events-auto' : ''">
<div class="absolute top-0 w-[375px]"
:style="emojiPickerStyles">
<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
:opened="emojiPickerOpen" />
</div>
<div id="actions"
<div :id="`actions-${message.id}`"
class="relative bg-[var(--primary-400)] rounded-md border border-[rgb(32,34,37)] text-[var(--primary-text)] flex overflow-hidden">
<button @click="emojiPickerOpen = !emojiPickerOpen"
<button @click="openEmojiPicker()"
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit">
<svg xmlns="http://www.w3.org/2000/svg"
width="20"
@@ -25,8 +19,8 @@
d="m13 19l-1 1l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 0 1 8.003 5.996M14 16h6m-3-3v6" />
</svg>
</button>
<button v-if="!actionButtonOverflowMenuOpen"
@click="actionButtonOverflowMenuOpen = true"
<button v-if="!shiftPressed && !overflowShown"
@click="overflowShown = true"
class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit">
<svg xmlns="http://www.w3.org/2000/svg"
width="20"
@@ -49,8 +43,7 @@
</g>
</svg>
</button>
<div @click="actionButtonOverflowMenuOpen = false"
v-if="actionButtonOverflowMenuOpen"
<div v-if="shiftPressed || overflowShown"
class="flex">
<button @click="copy(message.id)"
class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-400)] w-[28px] h-[28px] items-center justify-center">
@@ -118,7 +111,7 @@
<script lang="ts">
import { PropType } from 'vue';
import { IMessage } from '~/types';
import { IEmojiPickerData, IMessage } from '~/types';
import { useGlobalStore } from '~/stores/store';
import { useClipboard } from '@vueuse/core'
import emojiJson from '~/assets/json/emoji.json';
@@ -133,6 +126,10 @@ export default {
type: Boolean,
required: true
},
shiftPressed: {
type: Boolean,
required: true
},
classes: {
type: String,
required: true
@@ -142,8 +139,7 @@ export default {
return {
user: storeToRefs(useGlobalStore()).user,
emojiPickerOpen: false,
emojiPickerStyles: this.calculateEmojiPickerRight(),
actionButtonOverflowMenuOpen: false,
overflowShown: false
}
},
setup() {
@@ -153,6 +149,16 @@ export default {
copy
}
},
mounted() {
const { $listen } = useNuxtApp()
$listen('pickedEmoji', (emoji) => {
if (useGlobalStore().emojiPickerData.openedBy.messageId !== this.message.id) return;
const replacementEmoji = emojiJson.find((e) => e.short_name === emoji);
if (!replacementEmoji?.emoji) return;
if (this.message.reactions?.find((e) => e.emoji.name === replacementEmoji.emoji)) return
this.toggleReaction(replacementEmoji.emoji)
});
},
methods: {
async toggleReaction(emoji: string) {
const route = useRoute()
@@ -162,6 +168,25 @@ export default {
useGlobalStore().updateMessage(this.message.id, message)
},
openEmojiPicker() {
const actionButtons = document.getElementById(`actions-${this.message.id}`);
if (!actionButtons) return;
const elementRect = actionButtons.getBoundingClientRect();
let top = elementRect.top + window.pageYOffset;
if (top + 522 > window.innerHeight) top = window.innerHeight - 522;
const payload = {
top,
right: actionButtons.clientWidth + 40,
openedBy: {
type: "message",
messageId: this.message.id
}
} as IEmojiPickerData
useGlobalStore().toggleEmojiPicker(payload)
},
emojiStyles(emoji: string, width: number) {
const emojis = emojiJson.filter((e) => e.has_img_twitter)
const twemoji = emojis.find((e) => e.emoji === emoji)
@@ -179,44 +204,10 @@ export default {
'background-size': '1037px 1037px'
}
},
pickedEmoji(emoji: string) {
const replacementEmoji = emojiJson.find((e) => e.short_name === emoji);
if (!replacementEmoji?.emoji) return;
if (this.message.reactions?.find((e) => e.emoji.name === replacementEmoji.emoji)) return
this.toggleReaction(replacementEmoji.emoji)
this.emojiPickerOpen = false;
},
async deleteMessage() {
const route = useRoute()
await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/delete`, { method: "POST" })
},
calculateEmojiPickerRight() {
const actions = document.getElementById('actions')
if (!actions) return {}
const right = actions.clientWidth + 8
return {
right: right + 'px'
}
},
keyPressed(ev: KeyboardEvent) {
if (ev.key === 'Shift') {
this.actionButtonOverflowMenuOpen = true
}
},
keyUnpressed(ev: KeyboardEvent) {
if (ev.key === 'Shift') {
this.actionButtonOverflowMenuOpen = false
}
},
mouseEnter() {
document.body.addEventListener('keydown', this.keyPressed, false);
document.body.addEventListener('keyup', this.keyUnpressed, false);
},
mouseLeave() {
this.actionButtonOverflowMenuOpen = false
document.body.removeEventListener('keydown', this.keyPressed, false)
document.body.removeEventListener('keyup', this.keyUnpressed, false)
}
}
}
</script>

31
components/MessagePane.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="h-full relative text-white bg-[var(--background-color)] grid grid-rows-[48px_1fr]">
<div class="h-full relative text-white bg-[var(--background-color)] grid grid-rows-[48px_1fr]" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
<div class="w-full px-4 py-3 z-[1]">
<div v-if="!server.DM"
class="flex items-center">
@@ -42,7 +42,7 @@
</div>
<section
class="bg-[var(--foreground-color)] my-3 mx-1 h-[calc(100%-24px)] overflow-hidden rounded-lg relative grid grid-rows-[1fr_70px]">
class="bg-[var(--foreground-color)] mb-3 mx-1 h-[calc(100%-12px)] overflow-hidden rounded-lg relative grid grid-rows-[1fr_70px]">
<div class="h-full overflow-y-scroll" id="conversation-pane">
<div class="w-full pb-1 bg-inherit">
<div>
@@ -52,8 +52,9 @@
<Message v-else
v-for="(message, i) in server.messages"
:message="message"
:classes="calculateMessageClasses(message, i)"
:showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id" />
:shiftPressed="shiftPressed"
:showUsername="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id"
:classes="calculateMessageClasses(message, i)" />
</div>
</div>
<div v-if="showSearch"
@@ -131,6 +132,7 @@ export default {
server: storeToRefs(useGlobalStore()).activeChannel,
messageContent: '',
canSendNotifications: false,
shiftPressed: false,
servers: storeToRefs(useGlobalStore()).servers,
usersTyping: [] as string[],
socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
@@ -196,6 +198,25 @@ export default {
this.socket.emit(`typing`, this.server.id);
},
mouseEnter() {
document.body.addEventListener('keydown', this.keyPressed, false);
document.body.addEventListener('keyup', this.keyUnpressed, false);
},
mouseLeave() {
this.shiftPressed = false
document.body.removeEventListener('keydown', this.keyPressed, false)
document.body.removeEventListener('keyup', this.keyUnpressed, false)
},
keyPressed(ev: KeyboardEvent) {
if (ev.key === 'Shift') {
this.shiftPressed = true
}
},
keyUnpressed(ev: KeyboardEvent) {
if (ev.key === 'Shift') {
this.shiftPressed = false
}
},
calculateMessageClasses(message: IMessage, i: number) {
if (i === 0 || this.server.messages[i - 1]?.creator.id !== message.creator.id) {
if (i !== this.server.messages.length - 1 || this.server.messages[i + 1]?.creator.id === message.creator.id) {
@@ -291,9 +312,7 @@ export default {
if (this.server.messages.find((e) => e.id === message.id)) {
// message is already in the server, replace it with the updated message
console.log(message.id, message.body)
useGlobalStore().updateMessage(message.id, message)
console.log('raw', useGlobalStore().activeChannel.messages.find((e) => e.id === message.id)?.body)
return;
}

8
components/Nav.vue
View File

@@ -81,7 +81,7 @@
<div v-if="createServerModelOpen"
class="absolute z-10 top-0 bottom-0 left-0 right-0">
<div
class="p-4 z-20 absolute bg-[var(--primary-600)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
<h2 class="font-semibold text-xl">
Create a server:
</h2>
@@ -90,14 +90,14 @@
class="w-3/5">
<input v-model="serverName"
type="text"
class="py-2 px-3 rounded-md mb-2 bg-zinc-700 shadow-md border border-zinc-700/80"
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]"
placeholder="Server name" />
<input type="submit"
class="py-2 px-3 rounded-md bg-zinc-700 shadow-md border border-zinc-700/80" />
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" />
</form>
</div>
</div>
<div class="bg-zinc-900/80 w-screen h-screen"
<div class="bg-black/70 w-screen h-screen"
@click="createServerModelOpen = false">
</div>
</div>

12
components/Sidebar.vue
View File

@@ -10,7 +10,7 @@
</section>
<div
class="h-[calc(100%-24px)] my-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
<div class="h-fit">
<nuxt-link v-for="dm in dms"
:to="'/channel/@me/' + dm.id">
@@ -95,7 +95,7 @@
<div
class="h-[calc(100%-24px)] my-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg">
<div class="flex gap-y-1.5 px-1.5 mt-2 flex-col overflow-x-scroll">
<button
class="flex text-center bg-inherit hover:backdrop-brightness-[1.35] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
@@ -221,11 +221,11 @@
<div v-if="createChannelModelOpen"
class="absolute z-10 top-0 bottom-0 left-0 right-0">
<div class="bg-[var(--primary-600)] w-screen h-screen"
<div class="bg-black/70 w-screen h-screen"
@click="createChannelModelOpen = false">
</div>
<div
class="p-4 z-20 absolute bg-zinc-800 shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white">
<h2 class="font-semibold text-xl">
Create a channel:
</h2>
@@ -234,10 +234,10 @@
class="w-3/5">
<input v-model="channelName"
type="text"
class="py-2 px-3 rounded-md mb-2 bg-zinc-700 shadow-md border border-zinc-700/80"
class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md"
placeholder="Channel name" />
<input type="submit"
class="py-2 px-3 rounded-md bg-zinc-700 shadow-md border border-zinc-700/80" />
class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md" />
</form>
</div>
</div>