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="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';

View File

@@ -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';

View File

@@ -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';