mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-24 09:13:50 +02:00
Add localization support to Tools page and update translation (#1375)
* Add tools tab and group calendar localization support * Update japanese translation
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div id="chart" class="x-container" v-show="isShowToolsTab">
|
||||
<div class="options-container" style="margin-top: 0">
|
||||
<span class="header">Tools</span>
|
||||
<span class="header">{{ t('view.tools.header') }}</span>
|
||||
|
||||
<div class="tool-categories">
|
||||
<div class="tool-category">
|
||||
@@ -9,7 +9,7 @@
|
||||
<el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['group'] }"
|
||||
><ArrowRight
|
||||
/></el-icon>
|
||||
<span class="category-title">Group</span>
|
||||
<span class="category-title">{{ t('view.tools.group.header') }}</span>
|
||||
</div>
|
||||
<div class="tools-grid" v-show="!categoryCollapsed['group']">
|
||||
<el-card :body-style="{ padding: '0px' }" class="tool-card">
|
||||
@@ -18,8 +18,8 @@
|
||||
<i class="ri-calendar-event-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">Calendar</div>
|
||||
<div class="tool-description">Group Events Calendar</div>
|
||||
<div class="tool-name">{{ t('view.tools.group.calendar') }}</div>
|
||||
<div class="tool-description">{{ t('view.tools.group.calendar_description') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -31,7 +31,7 @@
|
||||
<el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['image'] }"
|
||||
><ArrowRight
|
||||
/></el-icon>
|
||||
<span class="category-title">Image</span>
|
||||
<span class="category-title">{{ t('view.tools.image.header') }}</span>
|
||||
</div>
|
||||
<div class="tools-grid" v-show="!categoryCollapsed['image']">
|
||||
<el-card :body-style="{ padding: '0px' }" class="tool-card">
|
||||
@@ -40,8 +40,8 @@
|
||||
<i class="ri-screenshot-2-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">Screenshot Management</div>
|
||||
<div class="tool-description">Manage screenshots and view metadata</div>
|
||||
<div class="tool-name">{{ t('view.tools.image.screenshot') }}</div>
|
||||
<div class="tool-description">{{ t('view.tools.image.screenshot_description') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -51,8 +51,8 @@
|
||||
<i class="ri-multi-image-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">VRC+ Images & Inventory Management</div>
|
||||
<div class="tool-description">Manage VRC+ Images & Inventory</div>
|
||||
<div class="tool-name">{{ t('view.tools.image.inventory') }}</div>
|
||||
<div class="tool-description">{{ t('view.tools.image.inventory_description') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -64,7 +64,7 @@
|
||||
<el-icon class="rotation-transition" :class="{ 'is-rotated': !categoryCollapsed['user'] }"
|
||||
><ArrowRight
|
||||
/></el-icon>
|
||||
<span class="category-title">User</span>
|
||||
<span class="category-title">{{ t('view.tools.user.header') }}</span>
|
||||
</div>
|
||||
<div class="tools-grid" v-show="!categoryCollapsed['user']">
|
||||
<el-card :body-style="{ padding: '0px' }" class="tool-card">
|
||||
@@ -73,8 +73,8 @@
|
||||
<i class="ri-user-shared-line"></i>
|
||||
</div>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name">Export User Notes</div>
|
||||
<div class="tool-description">Export VRCX user memos to VRChat notes</div>
|
||||
<div class="tool-name">{{ t('view.tools.user.export_notes') }}</div>
|
||||
<div class="tool-description">{{ t('view.tools.user.export_notes_description') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -100,6 +100,7 @@
|
||||
<script setup>
|
||||
import { ArrowRight } from '@element-plus/icons-vue';
|
||||
import { ref, defineAsyncComponent, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useUiStore, useGalleryStore } from '../../stores';
|
||||
|
||||
@@ -108,6 +109,8 @@
|
||||
const NoteExportDialog = defineAsyncComponent(() => import('./dialogs/NoteExportDialog.vue'));
|
||||
const GalleryDialog = defineAsyncComponent(() => import('./dialogs/GalleryDialog.vue'));
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const uiStore = useUiStore();
|
||||
const { showGalleryDialog } = useGalleryStore();
|
||||
const { menuActiveIndex } = storeToRefs(uiStore);
|
||||
|
||||
@@ -14,19 +14,21 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-descriptions-item label="Category">{{
|
||||
capitalizeFirst(event.category)
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="Interested User">
|
||||
<el-descriptions-item :label="t('dialog.group_calendar.event_card.category')">
|
||||
{{ capitalizeFirst(event.category) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="t('dialog.group_calendar.event_card.interested_user')">
|
||||
{{ event.interestedUserCount }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Close Instance After End">
|
||||
<el-descriptions-item :label="t('dialog.group_calendar.event_card.close_time')">
|
||||
{{ event.closeInstanceAfterEndMinutes + ' min' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Created Date">{{
|
||||
dayjs(event.createdAt).format('YYYY-MM-DD HH:mm')
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="Description">{{ event.description }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="t('dialog.group_calendar.event_card.created')">
|
||||
{{ dayjs(event.createdAt).format('YYYY-MM-DD HH:mm') }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="t('dialog.group_calendar.event_card.description')">
|
||||
{{ event.description }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<template #reference>
|
||||
<div class="event-title-content" @click="onGroupClick">
|
||||
@@ -53,9 +55,11 @@
|
||||
<script setup>
|
||||
import { Check } from '@element-plus/icons-vue';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import dayjs from 'dayjs';
|
||||
import { useGroupStore } from '../../../stores';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { cachedGroups, showGroupDialog } = useGroupStore();
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
class="x-dialog"
|
||||
:model-value="visible"
|
||||
:title="t('dialog.group_calendar.header')"
|
||||
:show-close="false"
|
||||
width="90vw"
|
||||
height="80vh"
|
||||
@close="closeDialog">
|
||||
@@ -11,7 +10,7 @@
|
||||
<div class="dialog-title-container">
|
||||
<span>{{ t('dialog.group_calendar.header') }}</span>
|
||||
<el-button @click="toggleViewMode" type="primary" size="small" class="view-toggle-btn">
|
||||
{{ viewMode === 'timeline' ? 'List View' : 'Calendar View' }}
|
||||
{{ viewMode === 'timeline' ? t('dialog.group_calendar.list_view') : t('dialog.group_calendar.calendar_view') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -36,7 +35,7 @@
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
<div v-else>No events found</div>
|
||||
<div v-else>{{ t('dialog.group_calendar.no_events') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="calendar-container">
|
||||
@@ -69,7 +68,7 @@
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="Search groups or events..."
|
||||
:placeholder="t('dialog.group_calendar.search_placeholder')"
|
||||
clearable
|
||||
size="small"
|
||||
prefix-:icon="Search"
|
||||
@@ -99,7 +98,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-events">
|
||||
{{ searchQuery ? 'No matching events found' : 'No events this month' }}
|
||||
{{ searchQuery ? t('dialog.group_calendar.search_no_matching') : t('dialog.group_calendar.search_no_this_month') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user