MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 13:53:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

table density

Browse Source
This commit is contained in:
pa
2026-01-17 02:31:52 +09:00
committed by Natsumi
parent af12687264
commit fb7f24bf74
9 changed files with 89 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@@ -13278,8 +13278,7 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true,
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/lodash.merge": {
"version": "4.6.2",
@@ -18488,4 +18487,4 @@
}
}
}
}
}

48
src/components/NavMenu.vue
View File

@@ -186,12 +186,37 @@
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuCheckboxItem
:model-value="compactTableMode"
indicator-position="right"
@update:modelValue="handleCompactModeToggle">
<span>{{ t('view.settings.appearance.appearance.compact_table_mode') }}</span>
</DropdownMenuCheckboxItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<span>{{ t('view.settings.appearance.appearance.table_density') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent side="right" align="start" class="w-54">
<DropdownMenuCheckboxItem
:model-value="tableDensity === 'standard'"
indicator-position="right"
@select="handleTableDensitySelect('standard')">
<span>{{
t('view.settings.appearance.appearance.table_density_standard')
}}</span>
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
:model-value="tableDensity === 'comfortable'"
indicator-position="right"
@select="handleTableDensitySelect('comfortable')">
<span>{{
t('view.settings.appearance.appearance.table_density_comfortable')
}}</span>
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
:model-value="tableDensity === 'compact'"
indicator-position="right"
@select="handleTableDensitySelect('compact')">
<span>{{
t('view.settings.appearance.appearance.table_density_compact')
}}</span>
</DropdownMenuCheckboxItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuItem @click="handleOpenCustomNavDialog">
<span>{{ t('nav_menu.custom_nav.header') }}</span>
</DropdownMenuItem>
@@ -329,12 +354,7 @@
const { directAccessPaste } = useSearchStore();
const { logout } = useAuthStore();
const appearanceSettingsStore = useAppearanceSettingsStore();
const {
themeMode,
compactTableMode,
isDarkMode,
isNavCollapsed: isCollapsed
} = storeToRefs(appearanceSettingsStore);
const { themeMode, tableDensity, isDarkMode, isNavCollapsed: isCollapsed } = storeToRefs(appearanceSettingsStore);
const navLayout = ref([]);
const navLayoutReady = ref(false);
@@ -517,8 +537,8 @@
appearanceSettingsStore.setThemeMode(isDarkMode.value ? 'light' : 'dark');
};
const handleCompactModeToggle = () => {
appearanceSettingsStore.setCompactTableMode();
const handleTableDensitySelect = (density) => {
appearanceSettingsStore.setTableDensity(density);
};
const handleThemeColorSelect = async (theme) => {

6
src/components/ui/data-table/DataTableLayout.vue
View File

@@ -5,7 +5,7 @@
</div>
<div class="rounded-md border">
<div class="overflow-auto" :style="tableStyle">
<ScrollArea class="max-w-full" :style="tableStyle">
<Table :class="tableClassValue" :style="tableElementStyle">
<colgroup>
<col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />
@@ -65,7 +65,7 @@
</TableRow>
</TableBody>
</Table>
</div>
</ScrollArea>
</div>
<div v-if="showPagination" class="mt-4 flex w-full items-center gap-3">
@@ -124,6 +124,7 @@
PaginationPrevious
} from '../pagination';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
import { ScrollArea } from '../scroll-area';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
const props = defineProps({
@@ -271,7 +272,6 @@
const meta = columnDef?.meta ?? {};
const pinned = getPinnedState(cell?.column);
return joinClasses(
'py-1.5',
pinned && 'sticky bg-background z-20',
isSpacer(cell.column) && 'p-0',
resolveClassValue(meta.class, cell?.getContext?.()),

2
src/components/ui/table/TableCell.vue
View File

@@ -11,7 +11,7 @@
data-slot="table-cell"
:class="
cn(
'p-2 align-middle whitespace-nowrap in-[.is-compact-table]:py-1! [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
'p-2 align-middle whitespace-nowrap in-[.is-compact-table]:py-1! in-[.is-comfortable-table]:py-1.5! [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
props.class
)
">

5
src/localization/en.json
View File

@@ -579,7 +579,10 @@
"table_page_sizes": "Table Page Sizes",
"table_page_sizes_error": "Page size must be a number between 1 and 1000",
"show_notification_icon_dot": "Show Tray Notification Dot",
"compact_table_mode": "Compact Mode"
"table_density": "Table Density",
"table_density_standard": "Standard",
"table_density_comfortable": "Comfortable",
"table_density_compact": "Compact"
},
"timedate": {
"header": "Time/Date",

3
src/localization/zh-CN.json
View File

@@ -572,8 +572,7 @@
"table_max_size": "最大显示记录",
"table_page_sizes": "显示记录大小",
"table_page_sizes_error": "记录大小必须是 1 到 1000 之间的数字",
"show_notification_icon_dot": "显示托盘通知",
"compact_table_mode": "紧凑模式"
"show_notification_icon_dot": "显示托盘通知"
},
"timedate": {
"header": "时间 / 日期",

3
src/localization/zh-TW.json
View File

@@ -573,8 +573,7 @@
"table_max_size": "表格大小",
"table_page_sizes": "表格每頁筆數",
"table_page_sizes_error": "每頁筆數必須是 1 到 1000 之間的數字",
"show_notification_icon_dot": "顯示通知圖示提示點",
"compact_table_mode": "精簡模式"
"show_notification_icon_dot": "顯示通知圖示提示點"
},
"timedate": {
"header": "時間 / 日期",

61
src/stores/settings/appearance.js
View File

@@ -73,7 +73,7 @@ export const useAppearanceSettingsStore = defineStore(
const hideUserMemos = ref(false);
const hideUnfriends = ref(false);
const randomUserColours = ref(false);
const compactTableMode = ref(false);
const tableDensity = ref('standard');
const TRUST_COLOR_DEFAULTS = Object.freeze({
untrusted: '#CCCCCC',
basic: '#1778FF',
@@ -126,6 +126,7 @@ export const useAppearanceSettingsStore = defineStore(
hideUserMemosConfig,
hideUnfriendsConfig,
randomUserColoursConfig,
tableDensityConfig,
compactTableModeConfig,
trustColorConfig,
notificationIconDotConfig,
@@ -177,6 +178,7 @@ export const useAppearanceSettingsStore = defineStore(
configRepository.getBool('VRCX_hideUserMemos', false),
configRepository.getBool('VRCX_hideUnfriends', false),
configRepository.getBool('VRCX_randomUserColours', false),
configRepository.getString('VRCX_tableDensity'),
configRepository.getBool('VRCX_compactTableMode', false),
configRepository.getString(
'VRCX_trustColor',
@@ -250,8 +252,18 @@ export const useAppearanceSettingsStore = defineStore(
hideUnfriends.value = hideUnfriendsConfig;
randomUserColours.value = randomUserColoursConfig;
notificationIconDot.value = notificationIconDotConfig;
compactTableMode.value = compactTableModeConfig;
applyCompactTableMode(compactTableMode.value);
const resolvedTableDensity = normalizeTableDensity(
tableDensityConfig ||
(compactTableModeConfig ? 'compact' : 'standard')
);
tableDensity.value = resolvedTableDensity;
applyTableDensity(tableDensity.value);
if (!tableDensityConfig) {
configRepository.setString(
'VRCX_tableDensity',
tableDensity.value
);
}
isNavCollapsed.value = navIsCollapsedConfig;
await configRepository.remove('VRCX_navWidth');
@@ -649,13 +661,22 @@ export const useAppearanceSettingsStore = defineStore(
randomUserColours.value
);
}
function setCompactTableMode() {
compactTableMode.value = !compactTableMode.value;
applyCompactTableMode(compactTableMode.value);
configRepository.setBool(
'VRCX_compactTableMode',
compactTableMode.value
);
function normalizeTableDensity(value) {
if (
value === 'compact' ||
value === 'comfortable' ||
value === 'standard'
) {
return value;
}
return 'standard';
}
function setTableDensity(density) {
const normalized = normalizeTableDensity(density);
tableDensity.value = normalized;
applyTableDensity(tableDensity.value);
configRepository.setString('VRCX_tableDensity', tableDensity.value);
}
/**
* @param {object} color
@@ -784,12 +805,14 @@ export const useAppearanceSettingsStore = defineStore(
await userColourInit();
}
function applyCompactTableMode(isCompact) {
const className = 'is-compact-table';
if (isCompact) {
document.documentElement.classList.add(className);
} else {
document.documentElement.classList.remove(className);
function applyTableDensity(density) {
const classList = document.documentElement.classList;
classList.remove('is-compact-table', 'is-comfortable-table');
if (density === 'compact') {
classList.add('is-compact-table');
}
if (density === 'comfortable') {
classList.add('is-comfortable-table');
}
}
@@ -820,7 +843,7 @@ export const useAppearanceSettingsStore = defineStore(
hideUserMemos,
hideUnfriends,
randomUserColours,
compactTableMode,
tableDensity,
trustColor,
currentCulture,
isSideBarTabShow,
@@ -851,7 +874,7 @@ export const useAppearanceSettingsStore = defineStore(
setHideUserMemos,
setHideUnfriends,
setRandomUserColours,
setCompactTableMode,
setTableDensity,
setTrustColor,
tryInitUserColours,
updateTrustColor,
@@ -860,7 +883,7 @@ export const useAppearanceSettingsStore = defineStore(
changeAppLanguage,
promptMaxTableSizeDialog,
setNotificationIconDot,
applyCompactTableMode,
applyTableDensity,
setNavCollapsed,
toggleNavCollapsed,
setThemeMode

2
src/views/Layout/AuthenticatedLayout.vue
View File

@@ -3,7 +3,7 @@
<SidebarProvider
:open="sidebarOpen"
:width="navWidth"
width-icon="64"
:width-icon="64"
class="relative flex-1 h-full min-w-0"
@update:open="handleSidebarOpenChange">
<NavMenu />