mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-25 17:53:48 +02:00
add empty component and poilsh styles
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
<span>{{ t('view.charts.instance_activity.header') }}</span>
|
||||
<HoverCard>
|
||||
<HoverCardTrigger as-child>
|
||||
<Info style="margin-left: 5px; font-size: 12px; opacity: 0.7" />
|
||||
<Info style="margin-left: 4px; font-size: 12px; opacity: 0.7" />
|
||||
</HoverCardTrigger>
|
||||
<HoverCardContent side="bottom" align="start" class="w-75">
|
||||
<div class="tips-popover">
|
||||
@@ -23,7 +23,7 @@
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon"
|
||||
variant="outline"
|
||||
variant="ghost"
|
||||
style="margin-right: 5px"
|
||||
@click="reloadData">
|
||||
<RefreshCcw />
|
||||
@@ -34,7 +34,7 @@
|
||||
<PopoverTrigger asChild>
|
||||
<div>
|
||||
<TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
|
||||
<Button class="rounded-full" size="icon" variant="outline" style="margin-right: 5px">
|
||||
<Button class="rounded-full" size="icon" variant="ghost" style="margin-right: 5px">
|
||||
<Settings />
|
||||
</Button>
|
||||
</TooltipWrapper>
|
||||
@@ -79,7 +79,7 @@
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<ButtonGroup style="margin-right: 5px">
|
||||
<ButtonGroup class="mr-2">
|
||||
<TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -136,7 +136,7 @@
|
||||
|
||||
<div ref="activityChartRef" style="width: 100%"></div>
|
||||
<div v-if="!isLoading && activityData.length === 0" class="nodata">
|
||||
<span>No data here, try another day</span>
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
|
||||
<transition name="el-fade-in-linear">
|
||||
@@ -165,6 +165,7 @@
|
||||
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
|
||||
import { fromDate, getLocalTimeZone, today } from '@internationalized/date';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableEmpty } from '@/components/ui/data-table';
|
||||
import { ButtonGroup } from '@/components/ui/button-group';
|
||||
import { Calendar } from '@/components/ui/calendar';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
|
||||
@@ -10,12 +10,16 @@
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div ref="activityDetailChartRef"></div>
|
||||
<div v-if="hasChartData" ref="activityDetailChartRef"></div>
|
||||
<div v-else style="display: flex; justify-content: center; align-items: center; min-height: 160px; width: 100%">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
|
||||
import { DataTableEmpty } from '@/components/ui/data-table';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
@@ -47,6 +51,7 @@
|
||||
let echartsInstance = null;
|
||||
const usersFirstActivity = ref(null);
|
||||
const resizeObserver = ref(null);
|
||||
const hasChartData = computed(() => (props.activityDetailData || []).length > 0);
|
||||
|
||||
const startTimeStamp = computed(() => {
|
||||
return props.activityDetailData.find((item) => item.user_id === currentUser.value.id)?.joinTime.valueOf();
|
||||
@@ -189,7 +194,7 @@
|
||||
if (!props.activityDetailData || props.activityDetailData.length === 0) {
|
||||
return {
|
||||
title: {
|
||||
text: 'No data available',
|
||||
text: 'No data',
|
||||
left: 'center',
|
||||
top: 'middle'
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon"
|
||||
variant="outline"
|
||||
variant="ghost"
|
||||
:disabled="!graphReady"
|
||||
@click="openForceDialog">
|
||||
<Settings />
|
||||
|
||||
@@ -244,7 +244,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="group-empty">No Data</div>
|
||||
<div v-else class="group-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
<TooltipWrapper
|
||||
v-if="!isCreatingLocalGroup"
|
||||
:disabled="isLocalUserVrcPlusSupporter"
|
||||
@@ -401,7 +403,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">No Data</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="activeRemoteGroup">
|
||||
@@ -421,7 +425,9 @@
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">No Data</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="!remoteAvatarGroupsResolved">
|
||||
@@ -452,7 +458,9 @@
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">No Data</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</template>
|
||||
<template v-else-if="isHistorySelected">
|
||||
@@ -468,7 +476,9 @@
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">No Data</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
@@ -484,9 +494,10 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, markRaw, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
|
||||
import { ArrowUpDown, Check, Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
|
||||
import { ArrowUpDown, Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
|
||||
import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableEmpty } from '@/components/ui/data-table';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
@@ -163,7 +163,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="group-empty">No Data</div>
|
||||
<div v-else class="group-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,7 +239,9 @@
|
||||
@click="showUserDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">No Data</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="!isSearchActive">
|
||||
@@ -275,7 +279,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">No Data</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -290,6 +296,7 @@
|
||||
import { computed, nextTick, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { ArrowUpDown, Check, Ellipsis, MoreHorizontal, RefreshCw } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableEmpty } from '@/components/ui/data-table';
|
||||
import { InputGroupSearch } from '@/components/ui/input-group';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
@input="searchWorldFavorites" />
|
||||
<DropdownMenu v-model:open="worldToolbarMenuOpen">
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button class="rounded-full" size="icon" variant="outline"><Ellipsis /></Button>
|
||||
<Button class="rounded-full" size="icon" variant="ghost"><Ellipsis /></Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="favorites-dropdown">
|
||||
<li class="favorites-dropdown__control" @click.stop>
|
||||
@@ -244,7 +244,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="group-empty">No Data</div>
|
||||
<div v-else class="group-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
<div
|
||||
v-if="!isCreatingLocalGroup"
|
||||
class="group-item group-item--new"
|
||||
@@ -355,7 +357,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">No Data</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
@@ -377,7 +381,9 @@
|
||||
@click="showWorldDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">No Data</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="activeLocalGroupName && isLocalGroupSelected"
|
||||
@@ -410,9 +416,13 @@
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">No Data</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
<div v-else class="favorites-empty">No Data</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -427,6 +437,7 @@
|
||||
import { ArrowUpDown, Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
|
||||
import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableEmpty } from '@/components/ui/data-table';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<div>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button class="rounded-full mr-2" size="icon" variant="outline">
|
||||
<Button class="rounded-full mr-2" size="icon" variant="ghost">
|
||||
<Settings />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
@@ -112,7 +112,9 @@
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else class="friend-view__empty">{{ t('view.friends_locations.no_matching_friends') }}</div>
|
||||
<div v-else class="friend-view__empty">
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="friend-view__initial-loading">
|
||||
<Loader2 class="friend-view__loading-icon" :size="22" />
|
||||
@@ -126,6 +128,7 @@
|
||||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Loader2, Settings } from 'lucide-vue-next';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableEmpty } from '@/components/ui/data-table';
|
||||
import { InputGroupSearch } from '@/components/ui/input-group';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
:disabled="playerModerationTable.loading"
|
||||
@click="refreshPlayerModerations()">
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
<TooltipWrapper side="bottom" :content="t('view.notification.refresh_tooltip')">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
:disabled="isNotificationsLoading"
|
||||
style="flex: none"
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
</div>
|
||||
</button>
|
||||
<div v-if="quickSearchItems.length === 0" class="px-2 py-2 text-xs opacity-70">
|
||||
No results
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
@@ -66,7 +66,7 @@
|
||||
<TooltipWrapper side="bottom" :content="t('side_panel.refresh_tooltip')">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
:disabled="isRefreshFriendsLoading"
|
||||
style="margin-right: 10px"
|
||||
@@ -117,6 +117,7 @@
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataTableEmpty } from '@/components/ui/data-table';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { RefreshCw } from 'lucide-vue-next';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
|
||||
Reference in New Issue
Block a user