mirror/iceshrimp
1
0
Fork 0
mirror of https://iceshrimp.dev/iceshrimp/iceshrimp synced 2024-11-27 22:38:10 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ don't close emoji picker if shift is held down, like Discord

Browse Source 
https://snug.moe/notes/9h1p04dqytz2qfsz
This commit is contained in:
ThatOneCalculator 2023-07-11 20:56:40 -07:00
parent eb49999d9c
commit 6d461c788a
1 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/client/src/components/MkEmojiPickerDialog.vue
View File

@ -12,7 +12,7 @@
:transparent-bg="true"
:manual-showing="manualShowing"
:src="src"
@click="modal?.close()"
@click="checkForShift"
@opening="opening"
@close="emit('close')"
@closed="emit('closed')"
@ -31,7 +31,7 @@
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import MkModal from "@/components/MkModal.vue";
import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
import { defaultStore } from "@/store";
@ -58,20 +58,49 @@ const emit = defineEmits<{
const modal = ref<InstanceType<typeof MkModal>>();
const picker = ref<InstanceType<typeof MkEmojiPicker>>();
const isShiftKeyPressed = ref(false);
function chosen(emoji: any) {
const keydownHandler = (e) => {
if (e.key === "Shift") {
isShiftKeyPressed.value = true;
}
};
const keyupHandler = (e) => {
if (e.key === "Shift") {
isShiftKeyPressed.value = false;
}
};
function checkForShift(ev?: MouseEvent) {
if (!isShiftKeyPressed.value) {
modal.value?.close(ev);
}
}
function chosen(emoji: any, ev: MouseEvent) {
emit("done", emoji);
modal.value?.close();
checkForShift(ev);
}
function opening() {
try {
picker.value?.reset();
} catch (e) {
console.error(`Something's wrong with restting the emoji picker: ${e}`);
console.error("Something's wrong with resetting the emoji picker", e);
}
picker.value?.focus();
}
onMounted(() => {
window.addEventListener("keydown", keydownHandler);
window.addEventListener("keyup", keyupHandler);
});
onBeforeUnmount(() => {
window.removeEventListener("keydown", keydownHandler);
window.removeEventListener("keyup", keyupHandler);
});
</script>
<style lang="scss" scoped>