Clean up boop dialog

This commit is contained in:
Natsumi
2025-10-22 19:12:31 +11:00
parent 8a58c25084
commit 6af467b050
6 changed files with 71 additions and 46 deletions

View File

@@ -759,6 +759,10 @@ i.x-status-icon.red {
max-height: 100%;
}
.el-card.x-image-selected {
border-color: var(--el-color-primary) !important;
}
// .el-tree-node {
// white-space: normal;
// }
@@ -977,10 +981,6 @@ i.x-status-icon.red {
// top: 2px;
// }
// .max-height-el-select .el-select-dropdown__wrap {
// max-height: 83vh;
// }
// .el-pagination .el-input .el-input__icon {
// line-height: 22px;
// }

View File

@@ -110,43 +110,7 @@
clearable
:placeholder="t('dialog.boop_dialog.select_emoji')"
size="small"
style="width: 100%"
popper-class="max-height-el-select">
<el-option-group :label="t('dialog.boop_dialog.my_emojis')">
<el-option
v-for="image in emojiTable"
:key="image.id"
:value="image.id"
style="width: 100%; height: 100%">
<div
v-if="
image.versions &&
image.versions.length > 0 &&
image.versions[image.versions.length - 1].file.url
"
class="vrcplus-icon"
style="overflow: hidden; width: 200px; height: 200px; padding: 10px">
<template v-if="image.frames">
<div
class="avatar"
:style="
generateEmojiStyle(
image.versions[image.versions.length - 1].file.url,
image.framesOverTime,
image.frames,
image.loopStyle
)
"></div>
</template>
<template v-else>
<img
:src="image.versions[image.versions.length - 1].file.url"
class="avatar"
style="width: 200px; height: 200px" />
</template>
</div>
</el-option>
</el-option-group>
style="width: 100%">
<el-option-group :label="t('dialog.boop_dialog.default_emojis')">
<el-option
v-for="emojiName in photonEmojis"
@@ -158,6 +122,56 @@
</el-option-group>
</el-select>
<br />
<br />
<div
v-if="isLocalUserVrcPlusSupporter"
style="
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 15px;
margin-top: 10px;
max-height: 600px;
overflow-y: auto;
">
<el-card
v-for="image in emojiTable"
:key="image.id"
:body-style="{ padding: '0' }"
:class="image.id === fileId ? 'x-image-selected' : ''"
style="cursor: pointer"
@click="fileId = image.id"
shadow="hover">
<div
v-if="
image.versions &&
image.versions.length > 0 &&
image.versions[image.versions.length - 1].file.url
"
class="x-popover-image"
style="overflow: hidden; width: 100px; height: 100px; padding: 8px">
<div
v-if="image.frames"
class="avatar"
:style="
generateEmojiStyle(
image.versions[image.versions.length - 1].file.url,
image.framesOverTime,
image.frames,
image.loopStyle,
100
)
"></div>
<img
v-else
:src="image.versions[image.versions.length - 1].file.url"
class="avatar"
style="width: 100px; height: 100px" />
</div>
</el-card>
</div>
<template #footer>
<el-button
size="small"
@@ -197,6 +211,7 @@
const { showGalleryDialog, refreshEmojiTable } = useGalleryStore();
const { emojiTable } = storeToRefs(useGalleryStore());
const { vipFriends, onlineFriends, activeFriends, offlineFriends } = useFriendStore();
const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
const fileId = ref('');

View File

@@ -206,6 +206,10 @@ export function request(endpoint, options) {
if (status === 404 && endpoint.endsWith('/persist/exists')) {
return false;
}
if (status === 404 && endpoint.endsWith('/respond')) {
// ignore when responding to expired notification
return null;
}
if (
init.method === 'GET' &&
(status === 404 || status === 403) &&

View File

@@ -60,13 +60,13 @@ function getEmojiFileName(emoji) {
* @param {number} frameCount
* @param {string} loopStyle
*/
function generateEmojiStyle(url, fps, frameCount, loopStyle) {
function generateEmojiStyle(url, fps, frameCount, loopStyle, size) {
let framesPerLine = 2;
if (frameCount > 4) framesPerLine = 4;
if (frameCount > 16) framesPerLine = 8;
const animationDurationMs = (1000 / fps) * frameCount;
const frameSize = 1024 / framesPerLine;
const scale = 100 / (frameSize / 200);
const scale = 100 / (frameSize / size);
const animStyle = loopStyle === 'pingpong' ? 'alternate' : 'none';
const style = `
transform: scale(${scale / 100});

View File

@@ -592,6 +592,9 @@
notificationRequest
.sendNotificationResponse(params)
.then((json) => {
if (!json) {
return;
}
const args = {
json,
params

View File

@@ -194,7 +194,9 @@
{{ t('dialog.gallery_icons.upload') }}
</el-button>
</el-button-group>
<el-select v-model="emojiAnimationStyle" popper-class="max-height-el-select">
<br />
<br />
<el-select v-model="emojiAnimationStyle">
<el-option-group>
{{ t('dialog.gallery_icons.emoji_animation_styles') }}
<el-option
@@ -213,7 +215,7 @@
</el-option>
</el-option-group>
</el-select>
<el-checkbox v-model="emojiAnimType" style="margin-left: 10px; margin-right: 10px">
<el-checkbox v-model="emojiAnimType">
<span>{{ t('dialog.gallery_icons.emoji_animation_type') }}</span>
</el-checkbox>
<template v-if="emojiAnimType">
@@ -266,7 +268,8 @@
image.versions[image.versions.length - 1].file.url,
image.framesOverTime,
image.frames,
image.loopStyle
image.loopStyle,
200
)
"></div>
</template>