mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-19 14:53:50 +02:00
improve ui
This commit is contained in:
@@ -11,9 +11,20 @@
|
|||||||
<div style="margin: 0 0 10px; display: flex; align-items: center">
|
<div style="margin: 0 0 10px; display: flex; align-items: center">
|
||||||
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
|
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
|
||||||
<TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
|
<TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
|
||||||
<span class="inline-flex">
|
<div>
|
||||||
<Switch v-model="feedTable.vip" @update:modelValue="feedTableLookup" />
|
<Toggle
|
||||||
</span>
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
:model-value="feedTable.vip"
|
||||||
|
@update:modelValue="
|
||||||
|
(v) => {
|
||||||
|
feedTable.vip = v;
|
||||||
|
feedTableLookup();
|
||||||
|
}
|
||||||
|
">
|
||||||
|
<Star />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
</TooltipWrapper>
|
</TooltipWrapper>
|
||||||
</div>
|
</div>
|
||||||
<ToggleGroup
|
<ToggleGroup
|
||||||
@@ -69,8 +80,8 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, ref, watch } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
||||||
|
import { Funnel, Star } from 'lucide-vue-next';
|
||||||
import { getLocalTimeZone, today } from '@internationalized/date';
|
import { getLocalTimeZone, today } from '@internationalized/date';
|
||||||
import { Funnel } from 'lucide-vue-next';
|
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
@@ -83,7 +94,7 @@
|
|||||||
import { DataTableLayout } from '../../components/ui/data-table';
|
import { DataTableLayout } from '../../components/ui/data-table';
|
||||||
import { InputGroupField } from '../../components/ui/input-group';
|
import { InputGroupField } from '../../components/ui/input-group';
|
||||||
import { RangeCalendar } from '../../components/ui/range-calendar';
|
import { RangeCalendar } from '../../components/ui/range-calendar';
|
||||||
import { Switch } from '../../components/ui/switch';
|
import { Toggle } from '../../components/ui/toggle';
|
||||||
import { columns as baseColumns } from './columns.jsx';
|
import { columns as baseColumns } from './columns.jsx';
|
||||||
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
|
import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
|
||||||
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
|
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
|
||||||
|
|||||||
@@ -15,11 +15,20 @@
|
|||||||
<div class="mb-2 flex items-center justify-between">
|
<div class="mb-2 flex items-center justify-between">
|
||||||
<div class="flex flex-none mr-2 items-center">
|
<div class="flex flex-none mr-2 items-center">
|
||||||
<TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
|
<TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
|
||||||
<span class="inline-flex">
|
<div>
|
||||||
<Switch
|
<Toggle
|
||||||
v-model="friendsListSearchFilterVIP"
|
variant="outline"
|
||||||
@update:modelValue="friendsListSearchChange" />
|
size="sm"
|
||||||
</span>
|
:model-value="friendsListSearchFilterVIP"
|
||||||
|
@update:modelValue="
|
||||||
|
(v) => {
|
||||||
|
friendsListSearchFilterVIP = v;
|
||||||
|
friendsListSearchChange();
|
||||||
|
}
|
||||||
|
">
|
||||||
|
<Star />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
</TooltipWrapper>
|
</TooltipWrapper>
|
||||||
<Select
|
<Select
|
||||||
multiple
|
multiple
|
||||||
@@ -118,6 +127,7 @@
|
|||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { toast } from 'vue-sonner';
|
import { toast } from 'vue-sonner';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { Star } from 'lucide-vue-next';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -131,6 +141,7 @@
|
|||||||
import { friendRequest, userRequest } from '../../api';
|
import { friendRequest, userRequest } from '../../api';
|
||||||
import { DataTableLayout } from '../../components/ui/data-table';
|
import { DataTableLayout } from '../../components/ui/data-table';
|
||||||
import { Switch } from '../../components/ui/switch';
|
import { Switch } from '../../components/ui/switch';
|
||||||
|
import { Toggle } from '../../components/ui/toggle';
|
||||||
import { createColumns } from './columns.jsx';
|
import { createColumns } from './columns.jsx';
|
||||||
import { localeIncludes } from '../../shared/utils';
|
import { localeIncludes } from '../../shared/utils';
|
||||||
import removeConfusables, { removeWhitespace } from '../../service/confusables';
|
import removeConfusables, { removeWhitespace } from '../../service/confusables';
|
||||||
|
|||||||
@@ -11,9 +11,20 @@
|
|||||||
<div style="margin: 0 0 10px; display: flex; align-items: center">
|
<div style="margin: 0 0 10px; display: flex; align-items: center">
|
||||||
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
|
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
|
||||||
<TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
|
<TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
|
||||||
<span class="inline-flex">
|
<div>
|
||||||
<Switch v-model="gameLogTable.vip" @update:modelValue="gameLogTableLookup" />
|
<Toggle
|
||||||
</span>
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
:model-value="gameLogTable.vip"
|
||||||
|
@update:modelValue="
|
||||||
|
(v) => {
|
||||||
|
gameLogTable.vip = v;
|
||||||
|
gameLogTableLookup();
|
||||||
|
}
|
||||||
|
">
|
||||||
|
<Star />
|
||||||
|
</Toggle>
|
||||||
|
</div>
|
||||||
</TooltipWrapper>
|
</TooltipWrapper>
|
||||||
</div>
|
</div>
|
||||||
<Select
|
<Select
|
||||||
@@ -59,7 +70,8 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
import { computed, ref, watch } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
||||||
import { Switch } from '@/components/ui/switch';
|
import { Star } from 'lucide-vue-next';
|
||||||
|
import { Toggle } from '@/components/ui/toggle';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user