mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-26 18:23:47 +02:00
replace el-dialog
This commit is contained in:
pa
Natsumi
@@ -1,61 +1,66 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="x-dialog"
|
||||
v-model="gallerySelectDialog.visible"
|
||||
:title="t('dialog.gallery_select.header')"
|
||||
width="100%"
|
||||
append-to-body>
|
||||
<div>
|
||||
<span>{{ t('dialog.gallery_select.gallery') }}</span>
|
||||
<span style="color: #909399; font-size: 12px; margin-left: 5px">{{ galleryTable.length }}/64</span>
|
||||
<br />
|
||||
<input
|
||||
id="GalleryUploadButton"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChangeGallery" />
|
||||
<ButtonGroup>
|
||||
<Button variant="outline" size="sm" @click="selectImageGallerySelect('', '')">
|
||||
<X />
|
||||
{{ t('dialog.gallery_select.none') }}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" @click="refreshGalleryTable">
|
||||
<RefreshCw />
|
||||
{{ t('dialog.gallery_select.refresh') }}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!isLocalUserVrcPlusSupporter"
|
||||
@click="displayGalleryUpload">
|
||||
<Upload />
|
||||
{{ t('dialog.gallery_select.upload') }}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<br />
|
||||
<div
|
||||
v-for="image in galleryTable"
|
||||
:key="image.id"
|
||||
class="x-friend-item"
|
||||
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
|
||||
<template v-if="image.versions && image.versions.length > 0">
|
||||
<div
|
||||
v-if="image.versions[image.versions.length - 1].file.url"
|
||||
class="vrcplus-icon"
|
||||
@click="selectImageGallerySelect(image.versions[image.versions.length - 1].file.url, image.id)">
|
||||
<img
|
||||
:src="image.versions[image.versions.length - 1].file.url"
|
||||
class="avatar"
|
||||
loading="lazy" /></div
|
||||
></template>
|
||||
<Dialog v-model:open="gallerySelectDialog.visible">
|
||||
<DialogContent class="x-dialog w-full sm:max-w-none">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.gallery_select.header') }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div>
|
||||
<span>{{ t('dialog.gallery_select.gallery') }}</span>
|
||||
<span style="color: #909399; font-size: 12px; margin-left: 5px">{{ galleryTable.length }}/64</span>
|
||||
<br />
|
||||
<input
|
||||
id="GalleryUploadButton"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChangeGallery" />
|
||||
<ButtonGroup>
|
||||
<Button variant="outline" size="sm" @click="selectImageGallerySelect('', '')">
|
||||
<X />
|
||||
{{ t('dialog.gallery_select.none') }}
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" @click="refreshGalleryTable">
|
||||
<RefreshCw />
|
||||
{{ t('dialog.gallery_select.refresh') }}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!isLocalUserVrcPlusSupporter"
|
||||
@click="displayGalleryUpload">
|
||||
<Upload />
|
||||
{{ t('dialog.gallery_select.upload') }}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<br />
|
||||
<div
|
||||
v-for="image in galleryTable"
|
||||
:key="image.id"
|
||||
class="x-friend-item"
|
||||
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
|
||||
<template v-if="image.versions && image.versions.length > 0">
|
||||
<div
|
||||
v-if="image.versions[image.versions.length - 1].file.url"
|
||||
class="vrcplus-icon"
|
||||
@click="
|
||||
selectImageGallerySelect(image.versions[image.versions.length - 1].file.url, image.id)
|
||||
">
|
||||
<img
|
||||
:src="image.versions[image.versions.length - 1].file.url"
|
||||
class="avatar"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { X, RefreshCw, Upload } from 'lucide-vue-next';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { RefreshCw, Upload, X } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ButtonGroup } from '@/components/ui/button-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,34 +1,41 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="x-dialog"
|
||||
:model-value="isGroupLogsExportDialogVisible"
|
||||
:title="t('dialog.group_member_moderation.export_logs')"
|
||||
width="650px"
|
||||
append-to-body
|
||||
@close="setIsGroupLogsExportDialogVisible">
|
||||
<div style="margin-bottom: 10px" class="flex flex-col gap-2">
|
||||
<label
|
||||
v-for="option in checkGroupsLogsExportLogsOptions"
|
||||
:key="option.label"
|
||||
class="inline-flex items-center gap-2">
|
||||
<Checkbox
|
||||
:model-value="checkedGroupLogsExportLogsOptions.includes(option.label)"
|
||||
@update:modelValue="(val) => toggleGroupLogsExportOption(option.label, val)" />
|
||||
<span>{{ t(option.text) }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<br />
|
||||
<InputGroupTextareaField
|
||||
v-model="groupLogsExportContent"
|
||||
:rows="15"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
input-class="resize-none"
|
||||
@click="handleCopyGroupLogsExportContent" />
|
||||
</el-dialog>
|
||||
<Dialog
|
||||
:open="isGroupLogsExportDialogVisible"
|
||||
@update:open="
|
||||
(open) => {
|
||||
if (!open) setIsGroupLogsExportDialogVisible();
|
||||
}
|
||||
">
|
||||
<DialogContent class="x-dialog sm:max-w-162.5">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.group_member_moderation.export_logs') }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div style="margin-bottom: 10px" class="flex flex-col gap-2">
|
||||
<label
|
||||
v-for="option in checkGroupsLogsExportLogsOptions"
|
||||
:key="option.label"
|
||||
class="inline-flex items-center gap-2">
|
||||
<Checkbox
|
||||
:model-value="checkedGroupLogsExportLogsOptions.includes(option.label)"
|
||||
@update:modelValue="(val) => toggleGroupLogsExportOption(option.label, val)" />
|
||||
<span>{{ t(option.text) }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<br />
|
||||
<InputGroupTextareaField
|
||||
v-model="groupLogsExportContent"
|
||||
:rows="15"
|
||||
readonly
|
||||
style="margin-top: 15px"
|
||||
input-class="resize-none"
|
||||
@click="handleCopyGroupLogsExportContent" />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { ref, watch } from 'vue';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
|
||||
@@ -1,131 +1,144 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="groupPostEditDialog.visible"
|
||||
:title="t('dialog.group_post_edit.header')"
|
||||
width="650px"
|
||||
append-to-body>
|
||||
<div v-if="groupPostEditDialog.visible">
|
||||
<FieldGroup class="gap-4">
|
||||
<Field>
|
||||
<FieldLabel>{{ t('dialog.group_post_edit.title') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<InputGroupField v-model="groupPostEditDialog.title" size="sm" />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>{{ t('dialog.group_post_edit.message') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<InputGroupTextareaField
|
||||
v-model="groupPostEditDialog.text"
|
||||
:rows="4"
|
||||
style="margin-top: 10px"
|
||||
input-class="resize-none" />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field v-if="!groupPostEditDialog.postId">
|
||||
<FieldLabel class="sr-only">{{ t('dialog.group_post_edit.send_notification') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<label class="inline-flex items-center gap-2">
|
||||
<Checkbox v-model="groupPostEditDialog.sendNotification" />
|
||||
<span>{{ t('dialog.group_post_edit.send_notification') }}</span>
|
||||
</label>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>{{ t('dialog.group_post_edit.post_visibility') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<RadioGroup v-model="groupPostEditDialog.visibility" class="flex items-center gap-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="groupPostVisibility-public" value="public" />
|
||||
<label for="groupPostVisibility-public">
|
||||
{{ t('dialog.group_post_edit.visibility_public') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="groupPostVisibility-group" value="group" />
|
||||
<label for="groupPostVisibility-group">
|
||||
{{ t('dialog.group_post_edit.visibility_group') }}
|
||||
</label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field v-if="groupPostEditDialog.visibility === 'group'">
|
||||
<FieldLabel>{{ t('dialog.new_instance.roles') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Select
|
||||
multiple
|
||||
:model-value="Array.isArray(groupPostEditDialog.roleIds) ? groupPostEditDialog.roleIds : []"
|
||||
@update:modelValue="handleRoleIdsChange">
|
||||
<SelectTrigger size="sm" class="w-full">
|
||||
<SelectValue>
|
||||
<span class="truncate">
|
||||
{{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
|
||||
</span>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="role in groupPostEditDialog.groupRef?.roles ?? []"
|
||||
:key="role.id"
|
||||
:value="role.id">
|
||||
{{ role.name }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>{{ t('dialog.group_post_edit.image') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<template v-if="gallerySelectDialog.selectedFileId">
|
||||
<div style="display: inline-block; flex: none; margin-right: 5px">
|
||||
<img
|
||||
:src="gallerySelectDialog.selectedImageUrl"
|
||||
style="flex: none; width: 60px; height: 60px; border-radius: 4px; object-fit: cover"
|
||||
@click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
|
||||
loading="lazy" />
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
style="vertical-align: top"
|
||||
@click="clearImageGallerySelect">
|
||||
{{ t('dialog.invite_message.clear_selected_image') }}
|
||||
<Dialog v-model:open="groupPostEditDialog.visible">
|
||||
<DialogContent class="sm:max-w-162.5">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{{ t('dialog.group_post_edit.header') }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div v-if="groupPostEditDialog.visible">
|
||||
<FieldGroup class="gap-4">
|
||||
<Field>
|
||||
<FieldLabel>{{ t('dialog.group_post_edit.title') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<InputGroupField v-model="groupPostEditDialog.title" size="sm" />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>{{ t('dialog.group_post_edit.message') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<InputGroupTextareaField
|
||||
v-model="groupPostEditDialog.text"
|
||||
:rows="4"
|
||||
style="margin-top: 10px"
|
||||
input-class="resize-none" />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field v-if="!groupPostEditDialog.postId">
|
||||
<FieldLabel class="sr-only">{{ t('dialog.group_post_edit.send_notification') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<label class="inline-flex items-center gap-2">
|
||||
<Checkbox v-model="groupPostEditDialog.sendNotification" />
|
||||
<span>{{ t('dialog.group_post_edit.send_notification') }}</span>
|
||||
</label>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>{{ t('dialog.group_post_edit.post_visibility') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<RadioGroup v-model="groupPostEditDialog.visibility" class="flex items-center gap-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="groupPostVisibility-public" value="public" />
|
||||
<label for="groupPostVisibility-public">
|
||||
{{ t('dialog.group_post_edit.visibility_public') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem id="groupPostVisibility-group" value="group" />
|
||||
<label for="groupPostVisibility-group">
|
||||
{{ t('dialog.group_post_edit.visibility_group') }}
|
||||
</label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field v-if="groupPostEditDialog.visibility === 'group'">
|
||||
<FieldLabel>{{ t('dialog.new_instance.roles') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<Select
|
||||
multiple
|
||||
:model-value="
|
||||
Array.isArray(groupPostEditDialog.roleIds) ? groupPostEditDialog.roleIds : []
|
||||
"
|
||||
@update:modelValue="handleRoleIdsChange">
|
||||
<SelectTrigger size="sm" class="w-full">
|
||||
<SelectValue>
|
||||
<span class="truncate">
|
||||
{{ selectedRoleSummary || t('dialog.new_instance.role_placeholder') }}
|
||||
</span>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem
|
||||
v-for="role in groupPostEditDialog.groupRef?.roles ?? []"
|
||||
:key="role.id"
|
||||
:value="role.id">
|
||||
{{ role.name }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>{{ t('dialog.group_post_edit.image') }}</FieldLabel>
|
||||
<FieldContent>
|
||||
<template v-if="gallerySelectDialog.selectedFileId">
|
||||
<div style="display: inline-block; flex: none; margin-right: 5px">
|
||||
<img
|
||||
:src="gallerySelectDialog.selectedImageUrl"
|
||||
style="
|
||||
flex: none;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
"
|
||||
@click="showFullscreenImageDialog(gallerySelectDialog.selectedImageUrl)"
|
||||
loading="lazy" />
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
style="vertical-align: top"
|
||||
@click="clearImageGallerySelect">
|
||||
{{ t('dialog.invite_message.clear_selected_image') }}
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Button size="sm" variant="outline" @click="showGallerySelectDialog">
|
||||
{{ t('dialog.invite_message.select_image') }}
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Button size="sm" variant="outline" @click="showGallerySelectDialog">
|
||||
{{ t('dialog.invite_message.select_image') }}
|
||||
</Button>
|
||||
</template>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="secondary" @click="groupPostEditDialog.visible = false">
|
||||
{{ t('dialog.group_post_edit.cancel') }}
|
||||
</Button>
|
||||
<Button v-if="groupPostEditDialog.postId" @click="editGroupPost">
|
||||
{{ t('dialog.group_post_edit.edit_post') }}
|
||||
</Button>
|
||||
<Button v-else @click="createGroupPost">
|
||||
{{ t('dialog.group_post_edit.create_post') }}
|
||||
</Button>
|
||||
</template>
|
||||
</FieldContent>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
</template>
|
||||
<GallerySelectDialog
|
||||
:gallery-select-dialog="gallerySelectDialog"
|
||||
:gallery-table="galleryTable"
|
||||
@refresh-gallery-table="refreshGalleryTable" />
|
||||
</el-dialog>
|
||||
|
||||
<DialogFooter>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="secondary" @click="groupPostEditDialog.visible = false">
|
||||
{{ t('dialog.group_post_edit.cancel') }}
|
||||
</Button>
|
||||
<Button v-if="groupPostEditDialog.postId" @click="editGroupPost">
|
||||
{{ t('dialog.group_post_edit.edit_post') }}
|
||||
</Button>
|
||||
<Button v-else @click="createGroupPost">
|
||||
{{ t('dialog.group_post_edit.create_post') }}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
|
||||
<GallerySelectDialog
|
||||
:gallery-select-dialog="gallerySelectDialog"
|
||||
:gallery-table="galleryTable"
|
||||
@refresh-gallery-table="refreshGalleryTable" />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
|
||||
import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
Reference in New Issue
Block a user