mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-17 22:03:50 +02:00
Clean up boop dialog
This commit is contained in:
@@ -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;
|
||||
// }
|
||||
|
||||
@@ -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('');
|
||||
|
||||
|
||||
@@ -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) &&
|
||||
|
||||
@@ -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});
|
||||
|
||||
@@ -592,6 +592,9 @@
|
||||
notificationRequest
|
||||
.sendNotificationResponse(params)
|
||||
.then((json) => {
|
||||
if (!json) {
|
||||
return;
|
||||
}
|
||||
const args = {
|
||||
json,
|
||||
params
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user