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

adjust favorites public ui

Browse Source
This commit is contained in:
pa
2026-03-02 15:03:45 +09:00
parent be647242ab
commit c68bbe9904
3 changed files with 90 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/views/Favorites/FavoritesAvatar.vue
View File

@@ -121,11 +121,14 @@
>
</div>
<div class="group-item__bottom">
<Badge
:class="avatarGroupVisibilityColors[group.visibility]"
variant="outline">
{{ t(`view.favorite.visibility.${group.visibility}`) }}
</Badge>
<span class="group-item__visibility">
<span class="group-item__visibility-text">{{
t(`view.favorite.visibility.${group.visibility}`)
}}</span>
<span
class="group-item__visibility-dot"
:class="avatarGroupVisibilityDotColors[group.visibility]"></span>
</span>
<DropdownMenu
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:open="
@@ -556,7 +559,6 @@
} from '../../stores';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
import { avatarRequest, favoriteRequest } from '../../api';
import { Badge } from '../../components/ui/badge';
import { Slider } from '../../components/ui/slider';
import { Switch } from '../../components/ui/switch';
import { debounce } from '../../shared/utils';
@@ -575,10 +577,10 @@
displayName: `Group ${index + 1}`
}));
const avatarGroupVisibilityColors = {
public: 'text-green-500 border-green-500',
friends: 'text-cyan-500 border-cyan-500',
private: 'text-red-500 border-red-500'
const avatarGroupVisibilityDotColors = {
public: 'bg-green-500',
friends: 'bg-sky-500',
private: 'bg-red-500'
};
const avatarGroupVisibilityOptions = ref(['public', 'friends', 'private']);
const historyGroupKey = 'local-history';
@@ -720,17 +722,6 @@
loadAvatarSplitterPreferences();
});
function getBadgeVariant(visibility) {
switch (visibility) {
case 'public':
return 'default';
case 'friends':
return 'secondary';
case 'private':
return 'destructive';
}
}
async function loadAvatarSplitterPreferences() {
const storedSize = await configRepository.getString('VRCX_FavoritesAvatarSplitter', '260');
const parsedSize = Number(storedSize);
@@ -1619,6 +1610,24 @@
gap: 8px;
}
.group-item__visibility {
display: flex;
align-items: center;
gap: 5px;
}
.group-item__visibility-text {
font-size: 11px;
color: var(--muted-foreground);
}
.group-item__visibility-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.group-item--placeholder {
pointer-events: none;
opacity: 0.7;

38
src/views/Favorites/FavoritesFriend.vue
View File

@@ -123,9 +123,14 @@
>
</div>
<div class="group-item__bottom">
<Badge variant="outline">
{{ t(`view.favorite.visibility.${group.visibility}`) }}
</Badge>
<span class="group-item__visibility">
<span class="group-item__visibility-text">{{
t(`view.favorite.visibility.${group.visibility}`)
}}</span>
<span
class="group-item__visibility-dot"
:class="friendGroupVisibilityDotColors[group.visibility]"></span>
</span>
<DropdownMenu
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:open="
@@ -451,7 +456,6 @@
import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useUserStore } from '../../stores';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
import { debounce, userImage } from '../../shared/utils';
import { Badge } from '../../components/ui/badge';
import { Slider } from '../../components/ui/slider';
import { Switch } from '../../components/ui/switch';
import { favoriteRequest } from '../../api';
@@ -462,10 +466,10 @@
import configRepository from '../../service/config.js';
const friendGroupVisibilityOptions = ref(['public', 'friends', 'private']);
const friendGroupVisibilitColors = {
public: 'text-green-500 border-green-500',
friends: 'text-cyan-500 border-cyan-500',
private: 'text-red-500 border-red-500'
const friendGroupVisibilityDotColors = {
public: 'bg-green-500',
friends: 'bg-sky-500',
private: 'bg-red-500'
};
const friendSplitterSize = ref(260);
@@ -1264,6 +1268,24 @@
gap: 8px;
}
.group-item__visibility {
display: flex;
align-items: center;
gap: 5px;
}
.group-item__visibility-text {
font-size: 11px;
color: var(--muted-foreground);
}
.group-item__visibility-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.group-item.is-active {
}

49
src/views/Favorites/FavoritesWorld.vue
View File

@@ -123,9 +123,14 @@
>
</div>
<div class="group-item__bottom">
<Badge variant="outline">
{{ t(`view.favorite.visibility.${group.visibility}`) }}
</Badge>
<span class="group-item__visibility">
<span class="group-item__visibility-text">{{
t(`view.favorite.visibility.${group.visibility}`)
}}</span>
<span
class="group-item__visibility-dot"
:class="worldGroupVisibilityDotColors[group.visibility]"></span>
</span>
<DropdownMenu
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
@update:open="
@@ -487,7 +492,6 @@
import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useWorldStore } from '../../stores';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
import { favoriteRequest, worldRequest } from '../../api';
import { Badge } from '../../components/ui/badge';
import { Slider } from '../../components/ui/slider';
import { Switch } from '../../components/ui/switch';
import { debounce } from '../../shared/utils';
@@ -578,10 +582,10 @@
}
}
});
const worldGroupVisibilityColors = {
public: 'text-green-500 border-green-500',
friends: 'text-cyan-500 border-cyan-500',
private: 'text-red-500 border-red-500'
const worldGroupVisibilityDotColors = {
public: 'bg-green-500',
friends: 'bg-sky-500',
private: 'bg-red-500'
};
const worldGroupVisibilityOptions = ref(['public', 'friends', 'private']);
const worldSplitterSize = ref(260);
@@ -633,17 +637,6 @@
loadWorldSplitterPreferences();
});
function getBadgeVariant(visibility) {
switch (visibility) {
case 'public':
return 'default';
case 'friends':
return 'secondary';
case 'private':
return 'destructive';
}
}
async function loadWorldSplitterPreferences() {
const storedSize = await configRepository.getString('VRCX_FavoritesWorldSplitter', '260');
const parsedSize = Number(storedSize);
@@ -1495,6 +1488,24 @@
gap: 8px;
}
.group-item__visibility {
display: flex;
align-items: center;
gap: 5px;
}
.group-item__visibility-text {
font-size: 11px;
color: var(--muted-foreground);
}
.group-item__visibility-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.group-item.is-active {
}