mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-02 19:01:40 +00:00
Migrate to Mantine v8 and Design Changes (#961)
* mantine v8 migration * various design changes and improvements
This commit is contained in:
parent
bea55d48a8
commit
c1330d92b2
473 changed files with 12469 additions and 11607 deletions
|
|
@ -1,17 +1,16 @@
|
|||
import { Box, Group, Stack, TextInput } from '@mantine/core';
|
||||
import { DateTimePicker } from '@mantine/dates';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { closeModal, ContextModalProps } from '@mantine/modals';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Button, Switch, toast } from '/@/renderer/components';
|
||||
import { useShareItem } from '/@/renderer/features/sharing/mutations/share-item-mutation';
|
||||
import { useCurrentServer } from '/@/renderer/store';
|
||||
|
||||
// Bugged prop types in mantine v6
|
||||
const WrappedDateTimePicker = ({ ...props }: any) => {
|
||||
return <DateTimePicker {...props} />;
|
||||
};
|
||||
import { Button } from '/@/shared/components/button/button';
|
||||
import { DateTimePicker } from '/@/shared/components/date-time-picker/date-time-picker';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Stack } from '/@/shared/components/stack/stack';
|
||||
import { Switch } from '/@/shared/components/switch/switch';
|
||||
import { Textarea } from '/@/shared/components/textarea/textarea';
|
||||
import { toast } from '/@/shared/components/toast/toast';
|
||||
|
||||
export const ShareItemContextModal = ({
|
||||
id,
|
||||
|
|
@ -98,53 +97,54 @@ export const ShareItemContextModal = ({
|
|||
});
|
||||
|
||||
return (
|
||||
<Box p="1rem">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Stack>
|
||||
<TextInput
|
||||
label={t('form.shareItem.description', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
{...form.getInputProps('description')}
|
||||
/>
|
||||
<Switch
|
||||
defaultChecked={false}
|
||||
label={t('form.shareItem.allowDownloading', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
{...form.getInputProps('allowDownloading')}
|
||||
/>
|
||||
<WrappedDateTimePicker
|
||||
clearable
|
||||
label={t('form.shareItem.setExpiration', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
minDate={new Date()}
|
||||
placeholder={defaultDate.toLocaleDateString()}
|
||||
popoverProps={{ withinPortal: true }}
|
||||
valueFormat="MM/DD/YYYY HH:mm"
|
||||
{...form.getInputProps('expires')}
|
||||
/>
|
||||
<Group position="right">
|
||||
<Group>
|
||||
<Button
|
||||
onClick={() => closeModal(id)}
|
||||
size="md"
|
||||
variant="subtle"
|
||||
>
|
||||
{t('common.cancel', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
<Button
|
||||
size="md"
|
||||
type="submit"
|
||||
variant="filled"
|
||||
>
|
||||
{t('common.share', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
</Group>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Stack>
|
||||
<DateTimePicker
|
||||
clearable
|
||||
label={t('form.shareItem.setExpiration', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
minDate={new Date()}
|
||||
placeholder={defaultDate.toLocaleDateString()}
|
||||
popoverProps={{ withinPortal: true }}
|
||||
valueFormat="MM/DD/YYYY HH:mm"
|
||||
{...form.getInputProps('expires')}
|
||||
/>
|
||||
<Textarea
|
||||
autosize
|
||||
label={t('form.shareItem.description', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
minRows={5}
|
||||
{...form.getInputProps('description')}
|
||||
/>
|
||||
<Switch
|
||||
defaultChecked={false}
|
||||
label={t('form.shareItem.allowDownloading', {
|
||||
postProcess: 'titleCase',
|
||||
})}
|
||||
{...form.getInputProps('allowDownloading')}
|
||||
/>
|
||||
|
||||
<Group justify="flex-end">
|
||||
<Group>
|
||||
<Button
|
||||
onClick={() => closeModal(id)}
|
||||
size="md"
|
||||
variant="subtle"
|
||||
>
|
||||
{t('common.cancel', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
<Button
|
||||
size="md"
|
||||
type="submit"
|
||||
variant="filled"
|
||||
>
|
||||
{t('common.share', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</Box>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue