mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-27 02:33:48 +02:00
replace el-dialog
This commit is contained in:
pa
Natsumi
@@ -1,35 +1,42 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="x-dialog"
|
||||
:model-value="editAndSendInviteDialog.visible"
|
||||
:title="t('dialog.edit_send_invite_message.header')"
|
||||
width="400px"
|
||||
append-to-body
|
||||
@close="cancelEditAndSendInvite">
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.edit_send_invite_message.description') }}</span>
|
||||
</div>
|
||||
<Dialog
|
||||
:open="editAndSendInviteDialog.visible"
|
||||
@update:open="
|
||||
(open) => {
|
||||
if (!open) cancelEditAndSendInvite();
|
||||
}
|
||||
">
|
||||
<DialogContent class="x-dialog sm:max-w-100">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.edit_send_invite_message.header') }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<InputGroupTextareaField
|
||||
v-model="editAndSendInviteDialog.newMessage"
|
||||
:maxlength="64"
|
||||
:rows="2"
|
||||
class="mt-2.5"
|
||||
placeholder=""
|
||||
show-count />
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.edit_send_invite_message.description') }}</span>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<Button variant="secondary" class="mr-2" @click="cancelEditAndSendInvite">
|
||||
{{ t('dialog.edit_send_invite_message.cancel') }}
|
||||
</Button>
|
||||
<Button @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
|
||||
{{ t('dialog.edit_send_invite_message.send') }}
|
||||
</Button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<InputGroupTextareaField
|
||||
v-model="editAndSendInviteDialog.newMessage"
|
||||
:maxlength="64"
|
||||
:rows="2"
|
||||
class="mt-2.5"
|
||||
placeholder=""
|
||||
show-count />
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="secondary" class="mr-2" @click="cancelEditAndSendInvite">
|
||||
{{ t('dialog.edit_send_invite_message.cancel') }}
|
||||
</Button>
|
||||
<Button @click="saveEditAndSendInvite" :disabled="!editAndSendInviteDialog.newMessage">
|
||||
{{ t('dialog.edit_send_invite_message.send') }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
@@ -1,89 +1,97 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="x-dialog"
|
||||
:model-value="inviteDialog.visible"
|
||||
@close="closeInviteDialog"
|
||||
:title="t('dialog.invite.header')"
|
||||
width="500px"
|
||||
append-to-body>
|
||||
<div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
|
||||
<Location :location="inviteDialog.worldId" :link="false" />
|
||||
<br />
|
||||
<Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
|
||||
t('dialog.invite.add_self')
|
||||
}}</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
class="mr-2"
|
||||
variant="outline"
|
||||
:disabled="inviteDialog.friendsInInstance.length === 0"
|
||||
style="margin-top: 10px"
|
||||
@click="addFriendsInInstanceToInvite"
|
||||
>{{ t('dialog.invite.add_friends_in_instance') }}</Button
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
:disabled="vipFriends.length === 0"
|
||||
style="margin-top: 10px"
|
||||
@click="addFavoriteFriendsToInvite"
|
||||
>{{ t('dialog.invite.add_favorite_friends') }}</Button
|
||||
>
|
||||
<Dialog
|
||||
:open="inviteDialog.visible"
|
||||
@update:open="
|
||||
(open) => {
|
||||
if (!open) closeInviteDialog();
|
||||
}
|
||||
">
|
||||
<DialogContent class="x-dialog sm:max-w-125">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.invite.header') }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div style="width: 100%; margin-top: 15px">
|
||||
<VirtualCombobox
|
||||
:model-value="Array.isArray(inviteDialog.userIds) ? inviteDialog.userIds : []"
|
||||
@update:modelValue="setInviteUserIds"
|
||||
:groups="userPickerGroups"
|
||||
multiple
|
||||
:disabled="inviteDialog.loading"
|
||||
:placeholder="t('dialog.invite.select_placeholder')"
|
||||
:search-placeholder="t('dialog.invite.select_placeholder')"
|
||||
:clearable="true">
|
||||
<template #item="{ item, selected }">
|
||||
<div class="x-friend-item flex w-full items-center">
|
||||
<template v-if="item.user">
|
||||
<div :class="['avatar', userStatusClass(item.user)]">
|
||||
<img :src="userImage(item.user)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" :style="{ color: item.user.$userColour }">{{
|
||||
item.user.displayName
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ item.label }}</span>
|
||||
</template>
|
||||
<div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
|
||||
<Location :location="inviteDialog.worldId" :link="false" />
|
||||
<br />
|
||||
<Button size="sm" class="mr-2" variant="outline" style="margin-top: 10px" @click="addSelfToInvite">{{
|
||||
t('dialog.invite.add_self')
|
||||
}}</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
class="mr-2"
|
||||
variant="outline"
|
||||
:disabled="inviteDialog.friendsInInstance.length === 0"
|
||||
style="margin-top: 10px"
|
||||
@click="addFriendsInInstanceToInvite"
|
||||
>{{ t('dialog.invite.add_friends_in_instance') }}</Button
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
:disabled="vipFriends.length === 0"
|
||||
style="margin-top: 10px"
|
||||
@click="addFavoriteFriendsToInvite"
|
||||
>{{ t('dialog.invite.add_favorite_friends') }}</Button
|
||||
>
|
||||
|
||||
<CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
|
||||
</div>
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
<div style="width: 100%; margin-top: 15px">
|
||||
<VirtualCombobox
|
||||
:model-value="Array.isArray(inviteDialog.userIds) ? inviteDialog.userIds : []"
|
||||
@update:modelValue="setInviteUserIds"
|
||||
:groups="userPickerGroups"
|
||||
multiple
|
||||
:disabled="inviteDialog.loading"
|
||||
:placeholder="t('dialog.invite.select_placeholder')"
|
||||
:search-placeholder="t('dialog.invite.select_placeholder')"
|
||||
:clearable="true">
|
||||
<template #item="{ item, selected }">
|
||||
<div class="x-friend-item flex w-full items-center">
|
||||
<template v-if="item.user">
|
||||
<div :class="['avatar', userStatusClass(item.user)]">
|
||||
<img :src="userImage(item.user)" loading="lazy" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<span class="name" :style="{ color: item.user.$userColour }">{{
|
||||
item.user.displayName
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ item.label }}</span>
|
||||
</template>
|
||||
|
||||
<CheckIcon :class="['ml-auto size-4', selected ? 'opacity-100' : 'opacity-0']" />
|
||||
</div>
|
||||
</template>
|
||||
</VirtualCombobox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<Button
|
||||
variant="secondary"
|
||||
class="mr-2"
|
||||
:disabled="inviteDialog.loading || !inviteDialog.userIds.length"
|
||||
@click="showSendInviteDialog"
|
||||
>{{ t('dialog.invite.invite_with_message') }}</Button
|
||||
>
|
||||
<Button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="sendInvite">{{
|
||||
t('dialog.invite.invite')
|
||||
}}</Button>
|
||||
</template>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="secondary"
|
||||
class="mr-2"
|
||||
:disabled="inviteDialog.loading || !inviteDialog.userIds.length"
|
||||
@click="showSendInviteDialog"
|
||||
>{{ t('dialog.invite.invite_with_message') }}</Button
|
||||
>
|
||||
<Button :disabled="inviteDialog.loading || !inviteDialog.userIds.length" @click="sendInvite">{{
|
||||
t('dialog.invite.invite')
|
||||
}}</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
<SendInviteDialog
|
||||
v-model:sendInviteDialogVisible="sendInviteDialogVisible"
|
||||
v-model:sendInviteDialog="sendInviteDialog"
|
||||
:invite-dialog="inviteDialog"
|
||||
@closeInviteDialog="closeInviteDialog" />
|
||||
</el-dialog>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { computed, ref } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Check as CheckIcon } from 'lucide-vue-next';
|
||||
|
||||
@@ -1,27 +1,35 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="x-dialog"
|
||||
:model-value="isSendInviteConfirmDialogVisible"
|
||||
:title="t('dialog.invite_message.header')"
|
||||
width="400px"
|
||||
append-to-body
|
||||
@close="cancelInviteConfirm">
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.invite_message.confirmation') }}</span>
|
||||
</div>
|
||||
<Dialog
|
||||
:open="isSendInviteConfirmDialogVisible"
|
||||
@update:open="
|
||||
(open) => {
|
||||
if (!open) cancelInviteConfirm();
|
||||
}
|
||||
">
|
||||
<DialogContent class="x-dialog sm:max-w-100">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.invite_message.header') }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<template #footer>
|
||||
<Button variant="secondary" @click="cancelInviteConfirm">
|
||||
{{ t('dialog.invite_message.cancel') }}
|
||||
</Button>
|
||||
<Button @click="sendInviteConfirm">
|
||||
{{ t('dialog.invite_message.confirm') }}
|
||||
</Button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<div style="font-size: 12px">
|
||||
<span>{{ t('dialog.invite_message.confirmation') }}</span>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="secondary" @click="cancelInviteConfirm">
|
||||
{{ t('dialog.invite_message.cancel') }}
|
||||
</Button>
|
||||
<Button @click="sendInviteConfirm">
|
||||
{{ t('dialog.invite_message.confirm') }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -1,55 +1,62 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="x-dialog"
|
||||
:model-value="sendInviteDialogVisible"
|
||||
:title="t('dialog.invite_message.header')"
|
||||
width="800px"
|
||||
append-to-body
|
||||
@close="cancelSendInvite">
|
||||
<template v-if="isLocalUserVrcPlusSupporter">
|
||||
<!-- <template v-if="gallerySelectDialog.selectedFileId">-->
|
||||
<!-- <div style="display: inline-block; flex: none; margin-right: 5px">-->
|
||||
<!-- <el-popover placement="right" :width="500px" trigger="click">-->
|
||||
<!-- <template #reference>-->
|
||||
<!-- <img-->
|
||||
<!-- class="x-link"-->
|
||||
<!-- :src="gallerySelectDialog.selectedImageUrl"-->
|
||||
<!-- style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover" />-->
|
||||
<!-- </template>-->
|
||||
<!-- <img-->
|
||||
<!-- class="x-link"-->
|
||||
<!-- :src="gallerySelectDialog.selectedImageUrl"-->
|
||||
<!-- style="height: 500px"-->
|
||||
<!-- @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)" />-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
<!-- <el-button size="small" @click="clearImageGallerySelect" style="vertical-align: top">-->
|
||||
<!-- {{ t('dialog.invite_message.clear_selected_image') }}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else>-->
|
||||
<!-- <el-button size="small" @click="showGallerySelectDialog" style="margin-right: 5px">-->
|
||||
<!-- {{ t('dialog.invite_message.select_image') }}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </template>-->
|
||||
<input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
|
||||
</template>
|
||||
<Dialog
|
||||
:open="sendInviteDialogVisible"
|
||||
@update:open="
|
||||
(open) => {
|
||||
if (!open) cancelSendInvite();
|
||||
}
|
||||
">
|
||||
<DialogContent class="x-dialog sm:max-w-200">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.invite_message.header') }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DataTableLayout
|
||||
style="margin-top: 10px"
|
||||
:table="inviteMessageTanstackTable"
|
||||
:loading="false"
|
||||
:show-pagination="false"
|
||||
:on-row-click="handleInviteMessageRowClick" />
|
||||
<template v-if="isLocalUserVrcPlusSupporter">
|
||||
<!-- <template v-if="gallerySelectDialog.selectedFileId">-->
|
||||
<!-- <div style="display: inline-block; flex: none; margin-right: 5px">-->
|
||||
<!-- <el-popover placement="right" :width="500px" trigger="click">-->
|
||||
<!-- <template #reference>-->
|
||||
<!-- <img-->
|
||||
<!-- class="x-link"-->
|
||||
<!-- :src="gallerySelectDialog.selectedImageUrl"-->
|
||||
<!-- style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover" />-->
|
||||
<!-- </template>-->
|
||||
<!-- <img-->
|
||||
<!-- class="x-link"-->
|
||||
<!-- :src="gallerySelectDialog.selectedImageUrl"-->
|
||||
<!-- style="height: 500px"-->
|
||||
<!-- @click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)" />-->
|
||||
<!-- </el-popover>-->
|
||||
<!-- </div>-->
|
||||
<!-- <el-button size="small" @click="clearImageGallerySelect" style="vertical-align: top">-->
|
||||
<!-- {{ t('dialog.invite_message.clear_selected_image') }}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template v-else>-->
|
||||
<!-- <el-button size="small" @click="showGallerySelectDialog" style="margin-right: 5px">-->
|
||||
<!-- {{ t('dialog.invite_message.select_image') }}-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </template>-->
|
||||
<input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
|
||||
</template>
|
||||
|
||||
<DataTableLayout
|
||||
style="margin-top: 10px"
|
||||
:table="inviteMessageTanstackTable"
|
||||
:loading="false"
|
||||
:show-pagination="false"
|
||||
:on-row-click="handleInviteMessageRowClick" />
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="secondary" @click="cancelSendInvite">
|
||||
{{ t('dialog.invite_message.cancel') }}
|
||||
</Button>
|
||||
<Button variant="outline" @click="refreshInviteMessageTableData('message')">
|
||||
{{ t('dialog.invite_message.refresh') }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
<template #footer>
|
||||
<Button variant="secondary" @click="cancelSendInvite">
|
||||
{{ t('dialog.invite_message.cancel') }}
|
||||
</Button>
|
||||
<Button variant="outline" @click="refreshInviteMessageTableData('message')">
|
||||
{{ t('dialog.invite_message.refresh') }}
|
||||
</Button>
|
||||
</template>
|
||||
<SendInviteConfirmDialog
|
||||
v-model:isSendInviteConfirmDialogVisible="isSendInviteConfirmDialogVisible"
|
||||
:sendInviteDialog="sendInviteDialog"
|
||||
@@ -62,10 +69,11 @@
|
||||
@update:sendInviteDialog="emit('update:sendInviteDialog', $event)"
|
||||
:invite-dialog="inviteDialog"
|
||||
@closeInviteDialog="closeInviteDialog" />
|
||||
</el-dialog>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { computed, ref } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableLayout } from '@/components/ui/data-table';
|
||||
|
||||
Reference in New Issue
Block a user