bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: Split the modal evenly

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-10-10 23:32:21 +02:00
parent f4e8e8bebf
commit 955778c0c1
1 changed files with 42 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
packages/pl-fe/src/features/ui/components/modals/hotkeys-modal.tsx
View file

@ -19,6 +19,22 @@ const TableCell: React.FC<{ className?: string; children: React.ReactNode }> = (
</td> </td>
); );
const getColumnSizes = (n: number) => {
let part1 = Math.ceil(n / 3);
let part2 = Math.floor(n / 3);
const part3 = Math.floor(n / 3);
const total = part1 + part2 + part3;
if (total < n) {
part2++;
} else if (total > n) {
part1--;
}
// Return the parts in descending order
return [part1, part2, part3];
};
const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => { const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
const features = useFeatures(); const features = useFeatures();
const { isLoggedIn } = useLoggedIn(); const { isLoggedIn } = useLoggedIn();
@ -126,7 +142,16 @@ const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
}, },
].filter(hotkey => hotkey !== false); ].filter(hotkey => hotkey !== false);
const columnSize = Math.ceil(hotkeys.length / 3); const columnSizes = getColumnSizes(hotkeys.length);
const columns = columnSizes.reduce<Array<Array<{
key: JSX.Element;
label: JSX.Element;
}>>>((prev, cur) => {
const addedItems = prev.flat().length;
prev.push(hotkeys.slice(addedItems, addedItems + cur));
return prev;
}, []);
return ( return (
<Modal <Modal
@ -135,14 +160,15 @@ const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
width='4xl' width='4xl'
> >
<div className='flex flex-col text-xs lg:flex-row'> <div className='flex flex-col text-xs lg:flex-row'>
<table> {columns.map((column, i) => (
<table key={i}>
<thead> <thead>
<tr> <tr>
<th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th> <th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{hotkeys.slice(0, columnSize).map((hotkey, i) => ( {column.map((hotkey, i) => (
<tr key={i}> <tr key={i}>
<TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell> <TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell>
<TableCell>{hotkey.label}</TableCell> <TableCell>{hotkey.label}</TableCell>
@ -150,36 +176,7 @@ const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
))} ))}
</tbody> </tbody>
</table> </table>
<table>
<thead>
<tr>
<th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
{hotkeys.slice(columnSize, columnSize * 2).map((hotkey, i) => (
<tr key={i}>
<TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell>
<TableCell>{hotkey.label}</TableCell>
</tr>
))} ))}
</tbody>
</table>
<table>
<thead>
<tr>
<th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
{hotkeys.slice(columnSize * 2).map((hotkey, i) => (
<tr key={i}>
<TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell>
<TableCell>{hotkey.label}</TableCell>
</tr>
))}
</tbody>
</table>
</div> </div>
</Modal> </Modal>
); );