MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-01 12:43:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

UI Refresh

Browse Source
This commit is contained in:
pa
2026-01-02 22:24:28 +09:00
committed by Natsumi
parent b02d287190
commit 00745b54f1
120 changed files with 3931 additions and 2015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/views/Tools/dialogs/GalleryDialog.vue → src/views/Tools/Gallery.vue
View File

@@ -1,11 +1,11 @@
<template>
<el-dialog
class="x-dialog"
:model-value="galleryDialogVisible"
:title="t('dialog.gallery_icons.header')"
width="97vw"
append-to-body
@close="closeGalleryDialog">
<div class="gallery-page x-container">
<div class="gallery-page__header">
<el-button text size="small" :icon="ArrowLeft" class="gallery-page__back" @click="goBack">
{{ t('nav_tooltip.tools') }}
</el-button>
<span class="header">{{ t('dialog.gallery_icons.header') }}</span>
</div>
<el-progress
v-if="isUploading"
:show-text="false"
@@ -13,14 +13,12 @@
:percentage="100"
:stroke-width="3"
style="margin-bottom: 12px" />
<el-tabs type="card" ref="galleryTabs">
<el-tabs>
<el-tab-pane v-loading="galleryDialogGalleryLoading">
<template #label>
<span>
{{ t('dialog.gallery_icons.gallery') }}
<span style="color: #909399; font-size: 12px; margin-left: 5px">
{{ galleryTable.length }}/64
</span>
<span class="gallery-tab-count"> {{ galleryTable.length }}/64 </span>
</span>
</template>
<input
@@ -92,9 +90,7 @@
<template #label>
<span>
{{ t('dialog.gallery_icons.icons') }}
<span style="color: #909399; font-size: 12px; margin-left: 5px">
{{ VRCPlusIconsTable.length }}/64
</span>
<span class="gallery-tab-count"> {{ VRCPlusIconsTable.length }}/64 </span>
</span>
</template>
<input
@@ -166,7 +162,7 @@
<template #label>
<span>
{{ t('dialog.gallery_icons.emojis') }}
<span style="color: #909399; font-size: 12px; margin-left: 5px">
<span class="gallery-tab-count">
{{ emojiTable.length }}/{{ cachedConfig?.maxUserEmoji }}
</span>
</span>
@@ -308,7 +304,7 @@
<template #label>
<span>
{{ t('dialog.gallery_icons.stickers') }}
<span style="color: #909399; font-size: 12px; margin-left: 5px">
<span class="gallery-tab-count">
{{ stickerTable.length }}/{{ cachedConfig?.maxUserStickers }}
</span>
</span>
@@ -374,9 +370,7 @@
<template #label>
<span>
{{ t('dialog.gallery_icons.prints') }}
<span style="color: #909399; font-size: 12px; margin-left: 5px">
{{ printTable.length }}/64
</span>
<span class="gallery-tab-count"> {{ printTable.length }}/64 </span>
</span>
</template>
<input
@@ -438,16 +432,12 @@
style="display: block" />
<span v-else style="display: block">&nbsp;</span>
<DisplayName
class="x-ellipsis"
class="x-ellipsis gallery-meta"
v-if="image.authorId"
:userid="image.authorId"
:hint="image.authorName"
style="color: #909399; font-family: monospace; display: block" />
<span v-else style="font-family: monospace; display: block">&nbsp;</span>
<span
class="x-ellipsis"
v-if="image.createdAt"
style="color: #909399; font-family: monospace; font-size: 11px; display: block">
:hint="image.authorName" />
<span v-else class="gallery-meta">&nbsp;</span>
<span v-if="image.createdAt" class="x-ellipsis gallery-meta gallery-meta--small">
{{ formatDateFilter(image.createdAt, 'long') }}
</span>
<span v-else style="display: block">&nbsp;</span>
@@ -474,7 +464,7 @@
<template #label>
<span>
{{ t('dialog.gallery_icons.inventory') }}
<span style="color: #909399; font-size: 12px; margin-left: 5px">
<span class="gallery-tab-count">
{{ inventoryTable.length }}
</span>
</span>
@@ -508,9 +498,7 @@
v-text="item.description"
style="display: block"></span>
<span v-else style="display: block">&nbsp;</span>
<span
class="x-ellipsis"
style="color: #909399; font-family: monospace; font-size: 11px; display: block">
<span class="x-ellipsis gallery-meta gallery-meta--small">
{{ formatDateFilter(item.created_at, 'long') }}
</span>
<span v-if="item.itemType === 'prop'">{{ t('dialog.gallery_icons.item') }}</span>
@@ -533,15 +521,16 @@
</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
</template>
<script setup>
import { Close, Delete, Link, Picture, Plus, Present, Refresh, Upload } from '@element-plus/icons-vue';
import { ArrowLeft, Close, Delete, Link, Picture, Plus, Present, Refresh, Upload } from '@element-plus/icons-vue';
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import {
extractFileId,
@@ -549,16 +538,17 @@
getEmojiFileName,
getPrintFileName,
openExternalLink
} from '../../../shared/utils';
import { inventoryRequest, miscRequest, userRequest, vrcPlusIconRequest, vrcPlusImageRequest } from '../../../api';
import { useAdvancedSettingsStore, useAuthStore, useGalleryStore, useUserStore } from '../../../stores';
import { emojiAnimationStyleList, emojiAnimationStyleUrl } from '../../../shared/constants';
import { AppDebug } from '../../../service/appConfig';
import { handleImageUploadInput } from '../../../shared/utils/imageUpload';
} from '../../shared/utils';
import { inventoryRequest, miscRequest, userRequest, vrcPlusIconRequest, vrcPlusImageRequest } from '../../api';
import { useAdvancedSettingsStore, useAuthStore, useGalleryStore, useUserStore } from '../../stores';
import { emojiAnimationStyleList, emojiAnimationStyleUrl } from '../../shared/constants';
import { AppDebug } from '../../service/appConfig';
import { handleImageUploadInput } from '../../shared/utils/imageUpload';
import Emoji from '../../../components/Emoji.vue';
import Emoji from '../../components/Emoji.vue';
const { t } = useI18n();
const router = useRouter();
const {
galleryTable,
@@ -578,6 +568,7 @@
inventoryTable
} = storeToRefs(useGalleryStore());
const {
loadGalleryData,
refreshGalleryTable,
refreshVRCPlusIconsTable,
refreshStickerTable,
@@ -602,6 +593,15 @@
const pendingUploads = ref(0);
const isUploading = computed(() => pendingUploads.value > 0);
onMounted(() => {
galleryDialogVisible.value = true;
loadGalleryData();
});
onBeforeUnmount(() => {
galleryDialogVisible.value = false;
});
function startUpload() {
pendingUploads.value += 1;
}
@@ -610,8 +610,9 @@
pendingUploads.value = Math.max(0, pendingUploads.value - 1);
}
function closeGalleryDialog() {
function goBack() {
galleryDialogVisible.value = false;
router.push({ name: 'tools' });
}
function onFileChangeGallery(e) {
@@ -1116,3 +1117,32 @@
.catch(() => {});
}
</script>
<style scoped>
.gallery-page__header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.gallery-tab-count {
color: var(--el-text-color-secondary);
font-size: 12px;
margin-left: 5px;
}
.gallery-meta {
color: var(--el-text-color-secondary);
font-family: monospace;
display: block;
}
.gallery-meta--small {
font-size: 11px;
}
.gallery-page__back {
padding-left: 0;
}
</style>

20
src/views/Tools/Tools.vue
View File

@@ -48,7 +48,7 @@
</div>
</el-card>
<el-card :body-style="{ padding: '0px' }" class="tool-card">
<div class="tool-content" @click="showGalleryDialog">
<div class="tool-content" @click="showGalleryPage">
<div class="tool-icon">
<i class="ri-multi-image-line"></i>
</div>
@@ -191,7 +191,6 @@
<NoteExportDialog
:isNoteExportDialogVisible="isNoteExportDialogVisible"
@close="isNoteExportDialogVisible = false" />
<GalleryDialog />
<ExportDiscordNamesDialog
v-model:discordNamesDialogVisible="isExportDiscordNamesDialogVisible"
:friends="friends" />
@@ -207,7 +206,7 @@
</template>
<script setup>
import { computed, defineAsyncComponent, ref, watch } from 'vue';
import { computed, defineAsyncComponent, ref } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
@@ -219,22 +218,21 @@
const GroupCalendarDialog = defineAsyncComponent(() => import('./dialogs/GroupCalendarDialog.vue'));
const ScreenshotMetadataDialog = defineAsyncComponent(() => import('./dialogs/ScreenshotMetadataDialog.vue'));
const NoteExportDialog = defineAsyncComponent(() => import('./dialogs/NoteExportDialog.vue'));
const GalleryDialog = defineAsyncComponent(() => import('./dialogs/GalleryDialog.vue'));
const EditInviteMessageDialog = defineAsyncComponent(() => import('./dialogs/EditInviteMessagesDialog.vue'));
const ExportDiscordNamesDialog = defineAsyncComponent(() => import('./dialogs/ExportDiscordNamesDialog.vue'));
const ExportFriendsListDialog = defineAsyncComponent(() => import('./dialogs/ExportFriendsListDialog.vue'));
const ExportAvatarsListDialog = defineAsyncComponent(() => import('./dialogs/ExportAvatarsListDialog.vue'));
const { t } = useI18n();
const { showGalleryDialog } = useGalleryStore();
const { showGalleryPage } = useGalleryStore();
const { friends } = storeToRefs(useFriendStore());
const categoryCollapsed = ref({
group: false,
image: false,
user: false
user: false,
other: false
});
const isGroupCalendarDialogVisible = ref(false);
@@ -313,7 +311,7 @@
}
</script>
<style lang="scss" scoped>
<style scoped>
.tool-categories {
margin-top: 20px;
padding: 0 20px;
@@ -329,7 +327,6 @@
padding: 8px 12px;
border-radius: 6px;
margin-bottom: 12px;
background-color: var(--el-color-primary-light-9);
transition: all 0.2s ease;
&:hover {
@@ -347,7 +344,6 @@
margin-left: 5px;
font-size: 16px;
font-weight: 600;
color: var(--el-color-primary);
}
}
}
@@ -368,7 +364,7 @@
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
box-shadow: var(--el-box-shadow-light);
}
:deep(.el-card__body) {
@@ -389,7 +385,7 @@
background-color: var(--el-color-primary-light-9);
border-radius: 12px;
margin-right: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
box-shadow: var(--el-box-shadow-lighter);
i {
font-size: 28px;

10
src/views/Tools/components/GroupCalendarEventCard.vue
View File

@@ -188,7 +188,7 @@
};
</script>
<style lang="scss" scoped>
<style scoped>
.event-card {
transition: all 0.3s ease;
position: relative;
@@ -196,7 +196,7 @@
border-radius: 8px;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
box-shadow: var(--el-box-shadow-light);
}
&.grouped-card {
margin-bottom: 0;
@@ -232,17 +232,17 @@
height: 24px;
border-radius: 50%;
background-color: var(--el-text-color-regular);
color: #ffffff;
color: var(--el-bg-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: var(--el-box-shadow-lighter);
z-index: 10;
cursor: pointer;
}
.is-following {
background-color: var(--group-calendar-badge-following, #67c23a);
background-color: var(--group-calendar-badge-following, var(--el-color-success));
}
.event-content {
font-size: 12px;

2
src/views/Tools/dialogs/ExportFriendsListDialog.vue
View File

@@ -1,6 +1,6 @@
<template>
<el-dialog :title="t('dialog.export_friends_list.header')" v-model="isVisible" width="650px">
<el-tabs type="card">
<el-tabs>
<el-tab-pane :label="t('dialog.export_friends_list.csv')">
<el-input
v-model="exportFriendsListCsv"

17
src/views/Tools/dialogs/GroupCalendarDialog.vue
View File

@@ -467,7 +467,7 @@
}
</script>
<style lang="scss" scoped>
<style scoped>
.x-dialog {
:deep(.el-dialog) {
max-height: 750px;
@@ -519,7 +519,10 @@
position: relative;
&.has-events {
background-color: var(--group-calendar-event-bg, rgba(25, 102, 154, 0.05));
background-color: var(
--group-calendar-event-bg,
color-mix(in oklch, var(--el-color-primary) 10%, transparent)
);
}
.calendar-event-badge {
position: absolute;
@@ -528,21 +531,21 @@
min-width: 16px;
height: 16px;
border-radius: 8px;
color: #ffffff;
color: var(--el-color-white, #fff);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: var(--el-box-shadow-lighter);
z-index: 10;
padding: 0 4px;
line-height: 16px;
&.has-following {
background-color: var(--group-calendar-badge-following, #67c23a);
background-color: var(--group-calendar-badge-following, var(--el-color-success));
}
&.no-following {
background-color: var(--group-calendar-badge-normal, #409eff);
background-color: var(--group-calendar-badge-normal, var(--el-color-primary));
}
}
}
@@ -606,7 +609,7 @@
flex-direction: column;
.search-container {
padding: 2px 20px 12px 20px;
border-bottom: 1px solid #ebeef5;
border-bottom: 1px solid var(--el-border-color-lighter);
display: flex;
justify-content: flex-end;
.search-input {

6
src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
View File

@@ -11,7 +11,7 @@
@dragover.prevent
@dragenter.prevent
@drop="handleDrop">
<span style="margin-left: 5px; color: #909399; font-family: monospace">{{
<span style="margin-left: 5px; color: var(--el-text-color-secondary); font-family: monospace">{{
t('dialog.screenshot_metadata.drag')
}}</span>
<br />
@@ -105,7 +105,7 @@
v-if="screenshotMetadataDialog.metadata.author"
:userid="screenshotMetadataDialog.metadata.author.id"
:hint="screenshotMetadataDialog.metadata.author.displayName"
style="color: #909399; font-family: monospace" />
style="color: var(--el-text-color-secondary); font-family: monospace" />
<br />
<el-carousel
ref="screenshotMetadataCarouselRef"
@@ -147,7 +147,7 @@
<span class="x-link" @click="lookupUser(user)" v-text="user.displayName"></span>
<span
v-if="user.pos"
style="margin-left: 5px; color: #909399; font-family: monospace"
style="margin-left: 5px; color: var(--el-text-color-secondary); font-family: monospace"
v-text="'(' + user.pos.x + ', ' + user.pos.y + ', ' + user.pos.z + ')'"></span>
<br />
</span>