MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 14:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Copy group event URL to clipboard

Browse Source
This commit is contained in:
Natsumi
2026-01-08 04:13:32 +13:00
parent d7952791c3
commit a1fc383dac
2 changed files with 48 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/localization/en.json
View File

@@ -1896,7 +1896,8 @@
"created": "Created Date", "created": "Created Date",
"description": "Description", "description": "Description",
"export_to_calendar": "Export to Calendar", "export_to_calendar": "Export to Calendar",
"download_ics": "Download .ics" "download_ics": "Download .ics",
"copied_event_link": "Calendar event URL copied to clipboard"
}, },
"featured_events": "Featured Events" "featured_events": "Featured Events"
}, },

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

@@ -56,17 +56,22 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="isFollowing" @click="toggleEventFollow(event)" class="following-badge is-following"> <div class="badges">
<el-icon><Star /></el-icon> <div @click="copyEventLink(event)" class="share-badge">
</div> <el-icon><Share /></el-icon>
<div v-else @click="toggleEventFollow(event)" class="following-badge"> </div>
<el-icon><StarFilled /></el-icon> <div v-if="isFollowing" @click="toggleEventFollow(event)" class="following-badge is-following">
<el-icon><Star /></el-icon>
</div>
<div v-else @click="toggleEventFollow(event)" class="following-badge">
<el-icon><StarFilled /></el-icon>
</div>
</div> </div>
</el-card> </el-card>
</template> </template>
<script setup> <script setup>
import { Calendar, Download, Star, StarFilled } from '@element-plus/icons-vue'; import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
import { computed } from 'vue'; import { computed } from 'vue';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@@ -175,6 +180,12 @@
emit('update-following-calendar-data', args.json); emit('update-following-calendar-data', args.json);
} }
function copyEventLink(event) {
const eventLink = `https://vrchat.com/home/group/${event.ownerId}/calendar/${event.id}`;
navigator.clipboard.writeText(eventLink);
toast.success(t('dialog.group_calendar.event_card.copied_event_link'));
}
const formatTimeRange = (startsAt, endsAt) => const formatTimeRange = (startsAt, endsAt) =>
`${formatDateFilter(startsAt, 'time')} - ${formatDateFilter(endsAt, 'time')}`; `${formatDateFilter(startsAt, 'time')} - ${formatDateFilter(endsAt, 'time')}`;
@@ -231,28 +242,48 @@
height: 100px; height: 100px;
} }
.event-card .following-badge { .event-card .badges {
display: inline-flex;
position: absolute; position: absolute;
top: -8px; top: -8px;
right: -9px; right: -9px;
width: 24px; z-index: 10;
height: 24px; font-size: 15px;
border-radius: 50%; }
background-color: var(--el-text-color-regular);
color: var(--el-bg-color); .event-card .badges .following-badge {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 14px; width: 24px;
height: 24px;
gap: 4px;
border-radius: 50%;
background-color: var(--el-text-color-regular);
color: var(--el-bg-color);
box-shadow: var(--el-box-shadow-lighter); box-shadow: var(--el-box-shadow-lighter);
z-index: 10;
cursor: pointer; cursor: pointer;
} }
.event-card .following-badge.is-following { .event-card .badges .following-badge.is-following {
background-color: var(--group-calendar-badge-following, var(--el-color-success)); background-color: var(--group-calendar-badge-following, var(--el-color-success));
} }
.event-card .badges .share-badge {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
gap: 4px;
border-radius: 50%;
background-color: var(--el-text-color-regular);
color: var(--el-bg-color);
box-shadow: var(--el-box-shadow-lighter);
cursor: pointer;
margin-right: 5px;
}
.event-card .event-content { .event-card .event-content {
font-size: 12px; font-size: 12px;
} }