slight redesign to list config menu

This commit is contained in:
jeffvli
2025-12-01 18:35:51 -08:00
parent 84b464090c
commit 51c546fa5d
4 changed files with 72 additions and 36 deletions
+3 -2
View File
@@ -909,6 +909,7 @@
},
"config": {
"general": {
"advancedSettings": "advanced settings",
"autoFitColumns": "auto fit columns",
"autosize": "autosize",
"moveUp": "move up",
@@ -934,9 +935,9 @@
"pagination_infinite": "infinite",
"pagination_paginate": "paginated",
"alternateRowColors": "alternate row colors",
"horizontalBorders": "horizontal borders",
"horizontalBorders": "row borders",
"rowHoverHighlight": "row hover highlight",
"verticalBorders": "vertical borders"
"verticalBorders": "column borders"
},
"label": {
"actions": "$t(common.action_other)",
@@ -24,6 +24,7 @@ import {
useSettingsStore,
useSettingsStoreActions,
} from '/@/renderer/store';
import { Accordion } from '/@/shared/components/accordion/accordion';
import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
import { Badge } from '/@/shared/components/badge/badge';
import { Checkbox } from '/@/shared/components/checkbox/checkbox';
@@ -246,7 +247,25 @@ export const GridConfig = ({
return (
<>
<ListConfigTable options={options} />
<Accordion
styles={{
control: { padding: '0' },
item: { border: 'none' },
}}
>
<Accordion.Item value="grid">
<Accordion.Control>
<Text size="sm">
{t('table.config.general.advancedSettings', {
postProcess: 'sentenceCase',
})}
</Text>
</Accordion.Control>
<Accordion.Panel>
<ListConfigTable options={options} />
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<Divider />
<GridRowConfig
data={gridRowsData}
@@ -13,6 +13,7 @@ import { Icon } from '/@/shared/components/icon/icon';
import { Modal } from '/@/shared/components/modal/modal';
import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
import { Stack } from '/@/shared/components/stack/stack';
import { Switch } from '/@/shared/components/switch/switch';
import { Table } from '/@/shared/components/table/table';
import { useDisclosure } from '/@/shared/hooks/use-disclosure';
import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
@@ -56,26 +57,9 @@ export const ListConfigBooleanControl = ({
value: boolean;
}) => {
return (
<SegmentedControl
data={[
{
label: i18n.t('common.enable', {
postProcess: 'sentenceCase',
}) as string,
value: 'true',
},
{
label: i18n.t('common.disable', {
postProcess: 'sentenceCase',
}) as string,
value: 'false',
},
]}
onChange={(value) => onChange(value === 'true' ? true : false)}
size="sm"
value={value ? 'true' : 'false'}
w="100%"
/>
<Group justify="flex-end" w="100%">
<Switch checked={value} onChange={(e) => onChange(e.currentTarget.checked)} />
</Group>
);
};
@@ -147,17 +131,30 @@ export const ListConfigMenu = (props: ListConfigMenuProps) => {
size="lg"
title={t('common.configure', { postProcess: 'sentenceCase' })}
>
<Stack>
<SegmentedControl
data={availableDisplayTypes}
fullWidth
onChange={(value) => {
setList(props.listKey, {
display: value as ListDisplayType,
});
}}
value={displayType}
withItemsBorders={false}
<Stack gap="xs">
<ListConfigTable
options={[
{
component: (
<SegmentedControl
data={availableDisplayTypes}
fullWidth
onChange={(value) => {
setList(props.listKey, {
display: value as ListDisplayType,
});
}}
size="sm"
value={displayType}
withItemsBorders={false}
/>
),
id: 'displayType',
label: t('table.config.general.displayType', {
postProcess: 'sentenceCase',
}),
},
]}
/>
<Config displayType={displayType} {...props} />
</Stack>
@@ -22,6 +22,7 @@ import {
ListConfigTable,
} from '/@/renderer/features/shared/components/list-config-menu';
import { ItemListSettings, useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
import { Accordion } from '/@/shared/components/accordion/accordion';
import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
import { Badge } from '/@/shared/components/badge/badge';
import { Checkbox } from '/@/shared/components/checkbox/checkbox';
@@ -65,7 +66,7 @@ export const TableConfig = ({
const list = useSettingsStore((state) => state.lists[listKey]) as ItemListSettings;
const { setList } = useSettingsStoreActions();
const options = useMemo(() => {
const advancedSettings = useMemo(() => {
const allOptions = [
{
component: (
@@ -248,7 +249,25 @@ export const TableConfig = ({
return (
<>
<ListConfigTable options={options} />
<Accordion
styles={{
control: { padding: '0' },
item: { border: 'none' },
}}
>
<Accordion.Item value="table">
<Accordion.Control>
<Text size="sm">
{t('table.config.general.advancedSettings', {
postProcess: 'sentenceCase',
})}
</Text>
</Accordion.Control>
<Accordion.Panel>
<ListConfigTable options={advancedSettings} />
</Accordion.Panel>
</Accordion.Item>
</Accordion>
<Divider />
<TableColumnConfig
data={tableColumnsData}