76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<!-- Bouton d'envoi — clic gauche : envoyer / clic droit : personnaliser le style -->
|
|
<template>
|
|
<button
|
|
class="send-btn"
|
|
:disabled="disabled"
|
|
:style="btnStyle"
|
|
aria-label="Envoyer"
|
|
title="Clic droit pour personnaliser"
|
|
@click="$emit('send')"
|
|
@contextmenu.prevent="onRightClick"
|
|
>
|
|
<span v-if="activeSkinChar" class="skin-char">{{ activeSkinChar }}</span>
|
|
<svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
|
|
<polygon points="4,5 15,9 4,13 7,9" fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { openContextMenu } from '@/composables/useContextMenu';
|
|
import { useCustomStyles, SEND_BUTTON_PRESETS } from '@/composables/useCustomStyles';
|
|
import { useMyPerks } from '@/composables/useMessages';
|
|
|
|
defineProps<{ disabled?: boolean }>();
|
|
defineEmits<{ send: [] }>();
|
|
|
|
const { prefs } = useCustomStyles();
|
|
const { myPerks } = useMyPerks();
|
|
|
|
const activeSkinChar = computed(() => {
|
|
const skinId = prefs.sendSkin;
|
|
if (!skinId) return null;
|
|
return myPerks.value.sendSkins?.find((s) => s.id === skinId)?.char ?? null;
|
|
});
|
|
|
|
const btnStyle = computed(() => {
|
|
const p = SEND_BUTTON_PRESETS[prefs.sendButton];
|
|
return { background: p.bg, color: p.color, borderRadius: p.radius };
|
|
});
|
|
|
|
function onRightClick(e: MouseEvent): void {
|
|
if (!myPerks.value.elementSkin) return;
|
|
openContextMenu({
|
|
x: e.clientX,
|
|
y: e.clientY,
|
|
title: 'Bouton d\'envoi',
|
|
items: Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
|
|
value: k,
|
|
label: v.label,
|
|
swatch: v.color,
|
|
})),
|
|
current: prefs.sendButton,
|
|
onSelect: (v) => { prefs.sendButton = v as typeof prefs.sendButton; },
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.send-btn {
|
|
width: 42px;
|
|
height: 42px;
|
|
flex-shrink: 0;
|
|
border: 1px solid #ffffff10;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: filter 0.15s;
|
|
}
|
|
.send-btn:hover:not(:disabled) { filter: brightness(1.3); }
|
|
.send-btn:active:not(:disabled) { filter: brightness(0.85); }
|
|
.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
|
|
.skin-char { font-size: 18px; line-height: 1; }
|
|
</style>
|