mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-06 22:46:06 +02:00
refactor: import dialogs (#1187)
* refactor: import dialogs * fix: world dialog z-index issue * fix: world dialog z-index issue
This commit is contained in:
pa
GitHub
@@ -83,6 +83,7 @@ mixin currentUser
|
||||
ref='bioDialog'
|
||||
:visible.sync='bioDialog.visible'
|
||||
:title='$t("dialog.bio.header")'
|
||||
:close-on-click-modal='false'
|
||||
width='600px')
|
||||
div(v-loading='bioDialog.loading')
|
||||
el-input(
|
||||
|
||||
@@ -98,250 +98,3 @@ mixin favoritesDialog
|
||||
readonly
|
||||
style='margin-top: 15px'
|
||||
@click.native='$event.target.tagName === "TEXTAREA" && $event.target.select()')
|
||||
|
||||
//- dialog: World import dialog
|
||||
el-dialog.x-dialog(
|
||||
:before-close='beforeDialogClose'
|
||||
@mousedown.native='dialogMouseDown'
|
||||
@mouseup.native='dialogMouseUp'
|
||||
ref='worldImportDialog'
|
||||
:visible.sync='worldImportDialog.visible'
|
||||
:title='$t("dialog.world_import.header")'
|
||||
width='650px'
|
||||
top='10vh')
|
||||
div(style='display: flex; align-items: center; justify-content: space-between')
|
||||
div(style='font-size: 12px') {{ $t('dialog.world_import.description') }}
|
||||
div(style='display: flex; align-items: center')
|
||||
div(v-if='worldImportDialog.progress') {{ $t('dialog.world_import.process_progress') }} {{ worldImportDialog.progress }} / {{ worldImportDialog.progressTotal }} #[i.el-icon-loading(style='margin: 0 5px')]
|
||||
el-button(v-if='worldImportDialog.loading' size='small' @click='cancelWorldImport') {{ $t('dialog.world_import.cancel') }}
|
||||
el-button(v-else size='small' @click='processWorldImportList' :disabled='!worldImportDialog.input') {{ $t('dialog.world_import.process_list') }}
|
||||
el-input(
|
||||
type='textarea'
|
||||
v-model='worldImportDialog.input'
|
||||
size='mini'
|
||||
rows='10'
|
||||
resize='none'
|
||||
style='margin-top: 10px')
|
||||
div(style='display: flex; align-items: center; justify-content: space-between; margin-top: 5px')
|
||||
div
|
||||
el-dropdown(@click.native.stop trigger='click' size='small' style='margin-right: 5px')
|
||||
el-button(size='mini')
|
||||
span(v-if='worldImportDialog.worldImportFavoriteGroup') {{ worldImportDialog.worldImportFavoriteGroup.displayName }} ({{ worldImportDialog.worldImportFavoriteGroup.count }}/{{ worldImportDialog.worldImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
|
||||
span(v-else) {{ $t('dialog.world_import.select_vrchat_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
|
||||
el-dropdown-menu(#default='dropdown')
|
||||
template(v-for='groupAPI in API.favoriteWorldGroups')
|
||||
el-dropdown-item(
|
||||
:key='groupAPI.name'
|
||||
style='display: block; margin: 10px 0'
|
||||
@click.native='selectWorldImportGroup(groupAPI)'
|
||||
:disabled='groupAPI.count >= groupAPI.capacity') {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
|
||||
el-dropdown(@click.native.stop trigger='click' size='small' style='margin: 5px')
|
||||
el-button(size='mini')
|
||||
span(v-if='worldImportDialog.worldImportLocalFavoriteGroup') {{ worldImportDialog.worldImportLocalFavoriteGroup }} ({{ getLocalWorldFavoriteGroupLength(worldImportDialog.worldImportLocalFavoriteGroup) }}) #[i.el-icon-arrow-down.el-icon--right]
|
||||
span(v-else) {{ $t('dialog.world_import.select_local_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
|
||||
el-dropdown-menu(#default='dropdown')
|
||||
template(v-for='group in localWorldFavoriteGroups')
|
||||
el-dropdown-item(
|
||||
:key='group'
|
||||
style='display: block; margin: 10px 0'
|
||||
@click.native='selectWorldImportLocalGroup(group)') {{ group }} ({{ getLocalWorldFavoriteGroupLength(group) }})
|
||||
span(v-if='worldImportDialog.worldImportFavoriteGroup' style='margin-left: 5px') {{ worldImportTable.data.length }} / {{ worldImportDialog.worldImportFavoriteGroup.capacity - worldImportDialog.worldImportFavoriteGroup.count }}
|
||||
div
|
||||
el-button(size='small' @click='clearWorldImportTable' :disabled='worldImportTable.data.length === 0') {{ $t('dialog.world_import.clear_table') }}
|
||||
el-button(
|
||||
size='small'
|
||||
type='primary'
|
||||
@click='importWorldImportTable'
|
||||
style='margin: 5px'
|
||||
:disabled='worldImportTable.data.length === 0 || (!worldImportDialog.worldImportFavoriteGroup && !worldImportDialog.worldImportLocalFavoriteGroup)') {{ $t('dialog.world_import.import') }}
|
||||
span(v-if='worldImportDialog.importProgress' style='margin: 10px') #[i.el-icon-loading(style='margin-right: 5px')] {{ $t('dialog.world_import.import_progress') }} {{ worldImportDialog.importProgress }}/{{ worldImportDialog.importProgressTotal }}
|
||||
br
|
||||
template(v-if='worldImportDialog.errors')
|
||||
el-button(size='small' @click='worldImportDialog.errors = ""') {{ $t('dialog.world_import.clear_errors') }}
|
||||
h2(style='font-weight: bold; margin: 5px 0') {{ $t('dialog.world_import.errors') }}
|
||||
pre(v-text='worldImportDialog.errors' style='white-space: pre-wrap; font-size: 12px')
|
||||
data-tables(
|
||||
v-if='worldImportDialog.visible'
|
||||
v-bind='worldImportTable'
|
||||
v-loading='worldImportDialog.loading'
|
||||
style='margin-top: 10px')
|
||||
el-table-column(:label='$t("table.import.image")' width='70' prop='thumbnailImageUrl')
|
||||
template(#default='scope')
|
||||
el-popover(placement='right' height='500px' trigger='hover')
|
||||
img.friends-list-avatar(slot='reference' v-lazy='scope.row.thumbnailImageUrl')
|
||||
img.friends-list-avatar(
|
||||
v-lazy='scope.row.imageUrl'
|
||||
style='height: 500px; cursor: pointer'
|
||||
@click='showFullscreenImageDialog(scope.row.imageUrl)')
|
||||
el-table-column(:label='$t("table.import.name")' prop='name')
|
||||
template(#default='scope')
|
||||
span.x-link(v-text='scope.row.name' @click='showWorldDialog(scope.row.id)')
|
||||
el-table-column(:label='$t("table.import.author")' width='120' prop='authorName')
|
||||
template(#default='scope')
|
||||
span.x-link(v-text='scope.row.authorName' @click='showUserDialog(scope.row.authorId)')
|
||||
el-table-column(:label='$t("table.import.status")' width='70' prop='releaseStatus')
|
||||
template(#default='scope')
|
||||
span(
|
||||
v-text='scope.row.releaseStatus.charAt(0).toUpperCase() + scope.row.releaseStatus.slice(1)'
|
||||
:style='{ color: scope.row.releaseStatus === "public" ? "#67c23a" : scope.row.releaseStatus === "private" ? "#f56c6c" : undefined }')
|
||||
el-table-column(:label='$t("table.import.action")' width='90' align='right')
|
||||
template(#default='scope')
|
||||
el-button(type='text' icon='el-icon-close' size='mini' @click='deleteItemWorldImport(scope.row)')
|
||||
|
||||
//- dialog: Avatar import dialog
|
||||
el-dialog.x-dialog(
|
||||
:before-close='beforeDialogClose'
|
||||
@mousedown.native='dialogMouseDown'
|
||||
@mouseup.native='dialogMouseUp'
|
||||
ref='avatarImportDialog'
|
||||
:visible.sync='avatarImportDialog.visible'
|
||||
:title='$t("dialog.avatar_import.header")'
|
||||
width='650px')
|
||||
div(style='display: flex; align-items: center; justify-content: space-between')
|
||||
div(style='font-size: 12px') {{ $t('dialog.avatar_import.description') }}
|
||||
div(style='display: flex; align-items: center')
|
||||
div(v-if='avatarImportDialog.progress') {{ $t('dialog.avatar_import.process_progress') }} {{ avatarImportDialog.progress }} / {{ avatarImportDialog.progressTotal }} #[i.el-icon-loading(style='margin: 0 5px')]
|
||||
el-button(v-if='avatarImportDialog.loading' size='small' @click='cancelAvatarImport') {{ $t('dialog.avatar_import.cancel') }}
|
||||
el-button(v-else size='small' @click='processAvatarImportList' :disabled='!avatarImportDialog.input') {{ $t('dialog.avatar_import.process_list') }}
|
||||
el-input(
|
||||
type='textarea'
|
||||
v-model='avatarImportDialog.input'
|
||||
size='mini'
|
||||
rows='10'
|
||||
resize='none'
|
||||
style='margin-top: 10px')
|
||||
div(style='display: flex; align-items: center; justify-content: space-between; margin-top: 5px')
|
||||
div
|
||||
el-dropdown(@click.native.stop trigger='click' size='small')
|
||||
el-button(size='mini')
|
||||
span(v-if='avatarImportDialog.avatarImportFavoriteGroup') {{ avatarImportDialog.avatarImportFavoriteGroup.displayName }} ({{ avatarImportDialog.avatarImportFavoriteGroup.count }}/{{ avatarImportDialog.avatarImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
|
||||
span(v-else) {{ $t('dialog.avatar_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
|
||||
el-dropdown-menu(#default='dropdown')
|
||||
template(v-for='groupAPI in API.favoriteAvatarGroups')
|
||||
el-dropdown-item(
|
||||
:key='groupAPI.name'
|
||||
style='display: block; margin: 10px 0'
|
||||
@click.native='selectAvatarImportGroup(groupAPI)'
|
||||
:disabled='groupAPI.count >= groupAPI.capacity') {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
|
||||
el-dropdown(@click.native.stop trigger='click' size='small' style='margin: 5px')
|
||||
el-button(size='mini')
|
||||
span(v-if='avatarImportDialog.avatarImportLocalFavoriteGroup') {{ avatarImportDialog.avatarImportLocalFavoriteGroup }} ({{ getLocalAvatarFavoriteGroupLength(avatarImportDialog.avatarImportLocalFavoriteGroup) }}) #[i.el-icon-arrow-down.el-icon--right]
|
||||
span(v-else) {{ $t('dialog.avatar_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
|
||||
el-dropdown-menu(#default='dropdown')
|
||||
template(v-for='group in localAvatarFavoriteGroups')
|
||||
el-dropdown-item(
|
||||
:key='group'
|
||||
style='display: block; margin: 10px 0'
|
||||
@click.native='selectAvatarImportLocalGroup(group)') {{ group }} ({{ getLocalAvatarFavoriteGroupLength(group) }})
|
||||
span(v-if='avatarImportDialog.avatarImportFavoriteGroup' style='margin-left: 5px') {{ avatarImportTable.data.length }} / {{ avatarImportDialog.avatarImportFavoriteGroup.capacity - avatarImportDialog.avatarImportFavoriteGroup.count }}
|
||||
div
|
||||
el-button(size='small' @click='clearAvatarImportTable') {{ $t('dialog.avatar_import.clear_table') }}
|
||||
el-button(
|
||||
size='small'
|
||||
type='primary'
|
||||
@click='importAvatarImportTable'
|
||||
style='margin: 5px'
|
||||
:disabled='avatarImportTable.data.length === 0 || (!avatarImportDialog.avatarImportFavoriteGroup && !avatarImportDialog.avatarImportLocalFavoriteGroup)') {{ $t('dialog.avatar_import.import') }}
|
||||
span(v-if='avatarImportDialog.importProgress' style='margin: 10px') #[i.el-icon-loading(style='margin-right: 5px')] {{ $t('dialog.avatar_import.import_progress') }} {{ avatarImportDialog.importProgress }}/{{ avatarImportDialog.importProgressTotal }}
|
||||
br
|
||||
template(v-if='avatarImportDialog.errors')
|
||||
el-button(size='small' @click='avatarImportDialog.errors = ""') {{ $t('dialog.avatar_import.clear_errors') }}
|
||||
h2(style='font-weight: bold; margin: 5px 0') {{ $t('dialog.avatar_import.errors') }}
|
||||
pre(v-text='avatarImportDialog.errors' style='white-space: pre-wrap; font-size: 12px')
|
||||
data-tables(
|
||||
v-if='avatarImportDialog.visible'
|
||||
v-bind='avatarImportTable'
|
||||
v-loading='avatarImportDialog.loading'
|
||||
style='margin-top: 10px')
|
||||
el-table-column(:label='$t("table.import.image")' width='70' prop='thumbnailImageUrl')
|
||||
template(#default='scope')
|
||||
el-popover(placement='right' height='500px' trigger='hover')
|
||||
img.friends-list-avatar(slot='reference' v-lazy='scope.row.thumbnailImageUrl')
|
||||
img.friends-list-avatar(
|
||||
v-lazy='scope.row.imageUrl'
|
||||
style='height: 500px; cursor: pointer'
|
||||
@click='showFullscreenImageDialog(scope.row.imageUrl)')
|
||||
el-table-column(:label='$t("table.import.name")' prop='name')
|
||||
template(#default='scope')
|
||||
span.x-link(v-text='scope.row.name' @click='showAvatarDialog(scope.row.id)')
|
||||
el-table-column(:label='$t("table.import.author")' width='120' prop='authorName')
|
||||
template(#default='scope')
|
||||
span.x-link(v-text='scope.row.authorName' @click='showUserDialog(scope.row.authorId)')
|
||||
el-table-column(:label='$t("table.import.status")' width='70' prop='releaseStatus')
|
||||
template(#default='scope')
|
||||
span(
|
||||
v-text='scope.row.releaseStatus.charAt(0).toUpperCase() + scope.row.releaseStatus.slice(1)'
|
||||
:style='{ color: scope.row.releaseStatus === "public" ? "#67c23a" : scope.row.releaseStatus === "private" ? "#f56c6c" : undefined }')
|
||||
el-table-column(:label='$t("table.import.action")' width='90' align='right')
|
||||
template(#default='scope')
|
||||
el-button(type='text' icon='el-icon-close' size='mini' @click='deleteItemAvatarImport(scope.row)')
|
||||
|
||||
//- dialog: Friend import dialog
|
||||
el-dialog.x-dialog(
|
||||
:before-close='beforeDialogClose'
|
||||
@mousedown.native='dialogMouseDown'
|
||||
@mouseup.native='dialogMouseUp'
|
||||
ref='friendImportDialog'
|
||||
:visible.sync='friendImportDialog.visible'
|
||||
:title='$t("dialog.friend_import.header")'
|
||||
width='650px')
|
||||
div(style='display: flex; align-items: center; justify-content: space-between')
|
||||
div(style='font-size: 12px') {{ $t('dialog.friend_import.description') }}
|
||||
div(style='display: flex; align-items: center')
|
||||
div(v-if='friendImportDialog.progress') {{ $t('dialog.friend_import.process_progress') }} {{ friendImportDialog.progress }} / {{ friendImportDialog.progressTotal }} #[i.el-icon-loading(style='margin: 0 5px')]
|
||||
el-button(v-if='friendImportDialog.loading' size='small' @click='cancelFriendImport') {{ $t('dialog.friend_import.cancel') }}
|
||||
el-button(v-else size='small' @click='processFriendImportList' :disabled='!friendImportDialog.input') {{ $t('dialog.friend_import.process_list') }}
|
||||
el-input(
|
||||
type='textarea'
|
||||
v-model='friendImportDialog.input'
|
||||
size='mini'
|
||||
rows='10'
|
||||
resize='none'
|
||||
style='margin-top: 10px')
|
||||
div(style='display: flex; align-items: center; justify-content: space-between; margin-top: 5px')
|
||||
div
|
||||
el-dropdown(@click.native.stop trigger='click' size='small')
|
||||
el-button(size='mini')
|
||||
span(v-if='friendImportDialog.friendImportFavoriteGroup') {{ friendImportDialog.friendImportFavoriteGroup.displayName }} ({{ friendImportDialog.friendImportFavoriteGroup.count }}/{{ friendImportDialog.friendImportFavoriteGroup.capacity }}) #[i.el-icon-arrow-down.el-icon--right]
|
||||
span(v-else) {{ $t('dialog.friend_import.select_group_placeholder') }} #[i.el-icon-arrow-down.el-icon--right]
|
||||
el-dropdown-menu(#default='dropdown')
|
||||
template(v-for='groupAPI in API.favoriteFriendGroups')
|
||||
el-dropdown-item(
|
||||
:key='groupAPI.name'
|
||||
style='display: block; margin: 10px 0'
|
||||
@click.native='selectFriendImportGroup(groupAPI)'
|
||||
:disabled='groupAPI.count >= groupAPI.capacity') {{ groupAPI.displayName }} ({{ groupAPI.count }}/{{ groupAPI.capacity }})
|
||||
span(v-if='friendImportDialog.friendImportFavoriteGroup' style='margin-left: 5px') {{ friendImportTable.data.length }} / {{ friendImportDialog.friendImportFavoriteGroup.capacity - friendImportDialog.friendImportFavoriteGroup.count }}
|
||||
div
|
||||
el-button(size='small' @click='clearFriendImportTable' :disabled='friendImportTable.data.length === 0') {{ $t('dialog.friend_import.clear_table') }}
|
||||
el-button(
|
||||
size='small'
|
||||
type='primary'
|
||||
@click='importFriendImportTable'
|
||||
style='margin: 5px'
|
||||
:disabled='friendImportTable.data.length === 0 || !friendImportDialog.friendImportFavoriteGroup') {{ $t('dialog.friend_import.import') }}
|
||||
span(v-if='friendImportDialog.importProgress' style='margin: 10px') #[i.el-icon-loading(style='margin-right: 5px')] {{ $t('dialog.friend_import.import_progress') }} {{ friendImportDialog.importProgress }}/{{ friendImportDialog.importProgressTotal }}
|
||||
br
|
||||
template(v-if='friendImportDialog.errors')
|
||||
el-button(size='small' @click='friendImportDialog.errors = ""') {{ $t('dialog.friend_import.clear_errors') }}
|
||||
h2(style='font-weight: bold; margin: 5px 0') {{ $t('dialog.friend_import.errors') }}
|
||||
pre(v-text='friendImportDialog.errors' style='white-space: pre-wrap; font-size: 12px')
|
||||
data-tables(
|
||||
v-if='friendImportDialog.visible'
|
||||
v-bind='friendImportTable'
|
||||
v-loading='friendImportDialog.loading'
|
||||
style='margin-top: 10px')
|
||||
el-table-column(:label='$t("table.import.image")' width='70' prop='currentAvatarThumbnailImageUrl')
|
||||
template(#default='scope')
|
||||
el-popover(placement='right' height='500px' trigger='hover')
|
||||
img.friends-list-avatar(slot='reference' v-lazy='userImage(scope.row)')
|
||||
img.friends-list-avatar(
|
||||
v-lazy='userImageFull(scope.row)'
|
||||
style='height: 500px; cursor: pointer'
|
||||
@click='showFullscreenImageDialog(userImageFull(scope.row))')
|
||||
el-table-column(:label='$t("table.import.name")' prop='displayName')
|
||||
template(#default='scope')
|
||||
span.x-link(v-text='scope.row.displayName' @click='showUserDialog(scope.row.id)')
|
||||
el-table-column(:label='$t("table.import.action")' width='90' align='right')
|
||||
template(#default='scope')
|
||||
el-button(type='text' icon='el-icon-close' size='mini' @click='deleteItemFriendImport(scope.row)')
|
||||
|
||||
@@ -140,7 +140,7 @@ mixin userDialog
|
||||
size='mini'
|
||||
style='margin-right: 5px; margin-top: 5px') {{ userDialog.ref.last_platform }}
|
||||
el-tag.x-tag-age-verification(
|
||||
v-if='userDialog.ref.ageVerificationStatus || userDialog.ref.ageVerificationStatus !== "hidden"'
|
||||
v-if='userDialog.ref.ageVerificationStatus && userDialog.ref.ageVerificationStatus !== "hidden"'
|
||||
type='info'
|
||||
effect='plain'
|
||||
size='mini'
|
||||
@@ -195,7 +195,7 @@ mixin userDialog
|
||||
el-popover(placement='right' width='500px' trigger='click')
|
||||
img.x-link(
|
||||
slot='reference'
|
||||
:src='userImage(userDialog.ref, true, "256")'
|
||||
:src='userImage(userDialog.ref, true, "256", true)'
|
||||
style='flex: none; width: 120px; height: 120px; border-radius: 12px; object-fit: cover')
|
||||
img.x-link(
|
||||
v-lazy='userDialog.ref.userIcon'
|
||||
|
||||
Reference in New Issue
Block a user