improve ui

This commit is contained in:
pa
2026-02-26 20:24:59 +09:00
committed by Natsumi
parent a814fe95aa
commit 69cd330257
3 changed files with 48 additions and 14 deletions

View File

@@ -11,9 +11,20 @@
<div style="margin: 0 0 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')">
<span class="inline-flex">
<Switch v-model="feedTable.vip" @update:modelValue="feedTableLookup" />
</span>
<div>
<Toggle
variant="outline"
size="sm"
:model-value="feedTable.vip"
@update:modelValue="
(v) => {
feedTable.vip = v;
feedTableLookup();
}
">
<Star />
</Toggle>
</div>
</TooltipWrapper>
</div>
<ToggleGroup
@@ -69,8 +80,8 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { Funnel, Star } from 'lucide-vue-next';
import { getLocalTimeZone, today } from '@internationalized/date';
import { Funnel } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -83,7 +94,7 @@
import { DataTableLayout } from '../../components/ui/data-table';
import { InputGroupField } from '../../components/ui/input-group';
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 { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';

View File

@@ -15,11 +15,20 @@
<div class="mb-2 flex items-center justify-between">
<div class="flex flex-none mr-2 items-center">
<TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
<span class="inline-flex">
<Switch
v-model="friendsListSearchFilterVIP"
@update:modelValue="friendsListSearchChange" />
</span>
<div>
<Toggle
variant="outline"
size="sm"
:model-value="friendsListSearchFilterVIP"
@update:modelValue="
(v) => {
friendsListSearchFilterVIP = v;
friendsListSearchChange();
}
">
<Star />
</Toggle>
</div>
</TooltipWrapper>
<Select
multiple
@@ -118,6 +127,7 @@
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import { Star } from 'lucide-vue-next';
import { useRoute } from 'vue-router';
import {
@@ -131,6 +141,7 @@
import { friendRequest, userRequest } from '../../api';
import { DataTableLayout } from '../../components/ui/data-table';
import { Switch } from '../../components/ui/switch';
import { Toggle } from '../../components/ui/toggle';
import { createColumns } from './columns.jsx';
import { localeIncludes } from '../../shared/utils';
import removeConfusables, { removeWhitespace } from '../../service/confusables';

View File

@@ -11,9 +11,20 @@
<div style="margin: 0 0 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')">
<span class="inline-flex">
<Switch v-model="gameLogTable.vip" @update:modelValue="gameLogTableLookup" />
</span>
<div>
<Toggle
variant="outline"
size="sm"
:model-value="gameLogTable.vip"
@update:modelValue="
(v) => {
gameLogTable.vip = v;
gameLogTableLookup();
}
">
<Star />
</Toggle>
</div>
</TooltipWrapper>
</div>
<Select
@@ -59,7 +70,8 @@
<script setup>
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
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 { useI18n } from 'vue-i18n';