mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
slight redesign to list config menu
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user