MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-25 01:33:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

clean up element plus css

Browse Source
This commit is contained in:
pa
2026-01-16 20:50:41 +09:00
committed by Natsumi
parent 78f3bc512d
commit 093fe082f2
29 changed files with 108 additions and 1268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AvatarInfo.vue
View File

@@ -5,7 +5,7 @@
<Unlock v-else-if="avatarType === '(public)'" class="h-4 w-4" />
</span>
<span class="mr-2">{{ avatarName }}</span>
<span v-if="avatarTags" style="color: var(--el-text-color-secondary); font-size: 12px">{{ avatarTags }}</span>
<span v-if="avatarTags" style="font-size: 12px">{{ avatarTags }}</span>
</div>
</template>

12
src/components/InstanceInfo.vue
View File

@@ -49,17 +49,13 @@
>{{ props.instance.userCount }}/{{ props.instance.capacity }}</span
>
<span v-if="props.friendcount" style="margin-left: 5px">({{ props.friendcount }})</span>
<span
v-if="state.isValidInstance && !props.instance.hasCapacityForYou"
style="margin-left: 5px; color: var(--el-color-danger)"
>{{ t('dialog.user.info.instance_full') }}</span
>
<span v-if="state.isValidInstance && !props.instance.hasCapacityForYou" style="margin-left: 5px">{{
t('dialog.user.info.instance_full')
}}</span>
<span v-if="props.instance.queueSize" style="margin-left: 5px"
>{{ t('dialog.user.info.instance_queue') }} {{ props.instance.queueSize }}</span
>
<span v-if="state.isAgeGated" style="margin-left: 5px; color: var(--el-color-danger)">{{
t('dialog.user.info.instance_age_gated')
}}</span>
<span v-if="state.isAgeGated" style="margin-left: 5px">{{ t('dialog.user.info.instance_age_gated') }}</span>
</div>
</template>

93
src/components/NavMenu.vue
View File

@@ -42,7 +42,9 @@
<SidebarMenuItem v-else>
<Collapsible
class="group/collapsible"
:default-open="activeMenuIndex && item.children?.some((e) => e.index === activeMenuIndex)">
:default-open="
activeMenuIndex && item.children?.some((e) => e.index === activeMenuIndex)
">
<template #default="{ open }">
<CollapsibleTrigger as-child>
<SidebarMenuButton
@@ -63,9 +65,7 @@
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
<SidebarMenuSubItem
v-for="entry in item.children"
:key="entry.index">
<SidebarMenuSubItem v-for="entry in item.children" :key="entry.index">
<SidebarMenuSubButton
:is-active="activeMenuIndex === entry.index"
@click="handleSubmenuClick(entry, item.index)">
@@ -93,7 +93,8 @@
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton :tooltip="t('nav_tooltip.help_support')">
<i class="ri-question-line inline-flex size-6 items-center justify-center text-[19px]" />
<i
class="ri-question-line inline-flex size-6 items-center justify-center text-[19px]" />
<span v-show="!isCollapsed">{{ t('nav_tooltip.help_support') }}</span>
</SidebarMenuButton>
</DropdownMenuTrigger>
@@ -122,7 +123,8 @@
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton :tooltip="t('nav_tooltip.manage')">
<i class="ri-settings-3-line inline-flex size-6 items-center justify-center text-[19px]" />
<i
class="ri-settings-3-line inline-flex size-6 items-center justify-center text-[19px]" />
<span v-show="!isCollapsed">{{ t('nav_tooltip.manage') }}</span>
</SidebarMenuButton>
</DropdownMenuTrigger>
@@ -166,17 +168,24 @@
<DropdownMenuSubTrigger>
<span>{{ t('view.settings.appearance.theme_color.header') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent side="right" align="start" class="w-72 max-h-80 overflow-auto">
<DropdownMenuSubContent
side="right"
align="start"
class="w-72 max-h-80 overflow-auto">
<DropdownMenuItem
v-for="color in colorFamilies"
:key="color.name"
:disabled="isApplyingPrimaryColor"
@click="handleThemeColorSelect(color)">
<span class="flex items-center gap-2 min-w-0 flex-1">
<span class="h-3 w-3 shrink-0 rounded-sm" :style="{ backgroundColor: color.base }" />
<span
class="h-3 w-3 shrink-0 rounded-sm"
:style="{ backgroundColor: color.base }" />
<span class="truncate">{{ color.name }}</span>
</span>
<span v-if="currentPrimary === color.base" class="text-muted-foreground">✓</span>
<span v-if="currentPrimary === color.base" class="text-muted-foreground"
>✓</span
>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
@@ -213,26 +222,6 @@
</template>
<script setup>
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { ChevronRight } from 'lucide-vue-next';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import {
Sidebar,
SidebarContent,
@@ -247,6 +236,25 @@
SidebarMenuSubItem,
SidebarRail
} from '@/components/ui/sidebar';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { ChevronRight } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';
import {
useAppearanceSettingsStore,
@@ -258,7 +266,6 @@
} from '../stores';
import { THEME_CONFIG, links, navDefinitions } from '../shared/constants';
import { openExternalLink } from '../shared/utils';
import { useThemePrimaryColor } from '../composables/useElementTheme';
import configRepository from '../service/config';
@@ -388,14 +395,14 @@
const themes = computed(() => Object.keys(THEME_CONFIG));
const {
currentPrimary,
isApplying: isApplyingPrimaryColor,
applyCustomPrimaryColor,
initPrimaryColor,
colorFamilies,
selectPaletteColor
} = useThemePrimaryColor();
// const {
// currentPrimary,
// isApplying: isApplyingPrimaryColor,
// applyCustomPrimaryColor,
// initPrimaryColor,
// colorFamilies,
// selectPaletteColor
// } = useThemePrimaryColor();
watch(
() => locale.value,
@@ -495,9 +502,9 @@
appearanceSettingsStore.setThemeMode(theme);
};
const handleThemeColorSelect = async (colorFamily) => {
await selectPaletteColor(colorFamily);
};
// const handleThemeColorSelect = async (colorFamily) => {
// await selectPaletteColor(colorFamily);
// };
const openGithub = () => {
openExternalLink('https://github.com/vrcx-team/VRCX');
@@ -680,7 +687,7 @@
};
onMounted(async () => {
await initPrimaryColor();
// await initPrimaryColor();
await loadNavMenuConfig();
});
</script>
@@ -712,7 +719,6 @@
inline-size: 14px;
block-size: 14px;
border-radius: 4px;
border: 1px solid var(--el-border-color-lighter);
flex: none;
}
@@ -726,7 +732,6 @@
.nav-menu-theme__custom-label {
font-size: 13px;
color: var(--el-text-color-regular);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2
src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue
View File

@@ -79,12 +79,10 @@
<span
v-if="avatar.releaseStatus === 'public'"
class="extra"
style="color: var(--el-color-success)"
v-text="avatar.releaseStatus"></span>
<span
v-else-if="avatar.releaseStatus === 'private'"
class="extra"
style="color: var(--el-color-danger)"
v-text="avatar.releaseStatus"></span>
<span v-else class="extra" v-text="avatar.releaseStatus"></span>
<span class="extra" v-text="avatarTagStrings.get(avatar.id)"></span>

6
src/components/dialogs/CustomNavDialog.vue
View File

@@ -548,7 +548,6 @@
}
.custom-nav-entry {
border: 1px solid var(--el-border-color);
border-radius: 8px;
padding: 10px 12px;
display: flex;
@@ -606,7 +605,6 @@
.custom-nav-entry__folder-empty {
font-size: 12px;
color: var(--el-text-color-secondary);
}
.custom-nav-dialog__footer {
@@ -645,13 +643,11 @@
}
.folder-editor__column {
border: 1px solid var(--el-border-color);
border-radius: 8px;
padding: 10px;
min-height: 220px;
display: flex;
flex-direction: column;
background: var(--el-fill-color-blank);
}
.folder-editor__column-title {
@@ -665,7 +661,6 @@
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--el-text-color-secondary);
text-align: center;
}
@@ -692,7 +687,6 @@
align-items: center;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--el-border-color-light);
}
.folder-editor__selected-item:last-child {

74
src/components/dialogs/UserDialog/UserDialog.vue
View File

@@ -410,13 +410,10 @@
<div class="x-friend-item" @click="toggleAvatarCopying">
<div class="detail">
<span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
<span
v-if="currentUser.allowAvatarCopying"
class="extra"
style="color: var(--el-color-success)"
>{{ t('dialog.user.info.avatar_cloning_allow') }}</span
>
<span v-else class="extra" style="color: var(--el-color-danger)">{{
<span v-if="currentUser.allowAvatarCopying" class="extra">{{
t('dialog.user.info.avatar_cloning_allow')
}}</span>
<span v-else class="extra">{{
t('dialog.user.info.avatar_cloning_deny')
}}</span>
</div>
@@ -424,13 +421,10 @@
<div class="x-friend-item" @click="toggleAllowBooping">
<div class="detail">
<span class="name">{{ t('dialog.user.info.booping') }}</span>
<span
v-if="currentUser.isBoopingEnabled"
class="extra"
style="color: var(--el-color-success)"
>{{ t('dialog.user.info.avatar_cloning_allow') }}</span
>
<span v-else class="extra" style="color: var(--el-color-danger)">{{
<span v-if="currentUser.isBoopingEnabled" class="extra">{{
t('dialog.user.info.avatar_cloning_allow')
}}</span>
<span v-else class="extra">{{
t('dialog.user.info.avatar_cloning_deny')
}}</span>
</div>
@@ -438,13 +432,10 @@
<div class="x-friend-item" @click="toggleSharedConnectionsOptOut">
<div class="detail">
<span class="name">{{ t('dialog.user.info.show_mutual_friends') }}</span>
<span
v-if="!currentUser.hasSharedConnectionsOptOut"
class="extra"
style="color: var(--el-color-success)"
>{{ t('dialog.user.info.avatar_cloning_allow') }}</span
>
<span v-else class="extra" style="color: var(--el-color-danger)">{{
<span v-if="!currentUser.hasSharedConnectionsOptOut" class="extra">{{
t('dialog.user.info.avatar_cloning_allow')
}}</span>
<span v-else class="extra">{{
t('dialog.user.info.avatar_cloning_deny')
}}</span>
</div>
@@ -454,13 +445,10 @@
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.user.info.avatar_cloning') }}</span>
<span
v-if="userDialog.ref.allowAvatarCopying"
class="extra"
style="color: var(--el-color-success)"
>{{ t('dialog.user.info.avatar_cloning_allow') }}</span
>
<span v-else class="extra" style="color: var(--el-color-danger)">{{
<span v-if="userDialog.ref.allowAvatarCopying" class="extra">{{
t('dialog.user.info.avatar_cloning_allow')
}}</span>
<span v-else class="extra">{{
t('dialog.user.info.avatar_cloning_deny')
}}</span>
</div>
@@ -622,7 +610,7 @@
<span
style="
margin-left: 10px;
color: var(--el-text-color-secondary);
font-size: 10px;
"
>{{ t('dialog.user.groups.hold_shift') }}</span
@@ -849,7 +837,7 @@
size="icon-sm"
variant="outline"
v-if="shiftHeld"
style="color: var(--el-color-danger); margin-left: 5px"
style="margin-left: 5px"
@click.stop="leaveGroup(group.id)">
<LogOut />
</Button>
@@ -871,8 +859,7 @@
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.user.groups.own_groups')
}}</span>
<span
style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px"
<span style="font-size: 12px; margin-left: 5px"
>{{ userGroups.ownGroups.length }}/{{
cachedConfig?.constants?.GROUPS?.MAX_OWNED
}}</span
@@ -918,10 +905,9 @@
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.user.groups.mutual_groups')
}}</span>
<span
style="color: var(--el-text-color-secondary); font-size: 12px; margin-left: 5px"
>{{ userGroups.mutualGroups.length }}</span
>
<span style="font-size: 12px; margin-left: 5px">{{
userGroups.mutualGroups.length
}}</span>
<div
class="x-friend-list"
style="margin-top: 10px; margin-bottom: 15px; min-height: 60px">
@@ -963,12 +949,7 @@
<span style="font-weight: bold; font-size: 16px">{{
t('dialog.user.groups.groups')
}}</span>
<span
style="
color: var(--el-text-color-secondary);
font-size: 12px;
margin-left: 5px;
">
<span style="font-size: 12px; margin-left: 5px">
{{ userGroups.remainingGroups.length }}
<template v-if="currentUser.id === userDialog.id">
/
@@ -1125,12 +1106,7 @@
:class="userFavoriteWorldsStatus(list[1])">
</i>
<span style="font-weight: bold; font-size: 14px" v-text="list[0]"></span>
<span
style="
color: var(--el-text-color-secondary);
font-size: 10px;
margin-left: 5px;
"
<span style="font-size: 10px; margin-left: 5px"
>{{ list[2].length }}/{{ favoriteLimits.maxFavoritesPerGroup.world }}</span
>
</span>
@@ -1266,13 +1242,11 @@
<span
v-if="avatar.releaseStatus === 'public'"
class="extra"
style="color: var(--el-color-success)"
v-text="avatar.releaseStatus">
</span>
<span
v-else-if="avatar.releaseStatus === 'private'"
class="extra"
style="color: var(--el-color-danger)"
v-text="avatar.releaseStatus">
</span>
<span v-else class="extra" v-text="avatar.releaseStatus"></span>