kamp/pingvin-share
1
0
Fork 0
mirror of https://github.com/stonith404/pingvin-share.git synced 2024-07-01 07:00:13 +02:00
Code

fix: wrong layout if button text is too long in modals

Browse Source
This commit is contained in:
Elias Schneider 2023-07-22 16:23:04 +02:00
parent 231a2e95b9
commit f4c88aeb08
No known key found for this signature in database
GPG Key ID: 07E623B294202B6C
3 changed files with 53 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/account/showEnableTotpModal.tsx
View File

@ -1,8 +1,7 @@
import { import {
Button, Button,
Center, Center,
Col, Group,
Grid,
Image, Image,
Stack, Stack,
Text, Text,
@ -114,21 +113,23 @@ const CreateEnableTotpModal = ({
.catch(toast.axiosError); .catch(toast.axiosError);
})} })}
> >
<Grid align="flex-end"> <Group align="end">
<Col xs={9}> <TextInput
<TextInput style={{ flex: "1" }}
variant="filled" variant="filled"
label={t("account.modal.totp.code")} label={t("account.modal.totp.code")}
placeholder="******" placeholder="******"
{...form.getInputProps("code")} {...form.getInputProps("code")}
/> />
</Col>
<Col xs={3}> <Button
<Button variant="outline" type="submit"> style={{ flex: "0 0 auto" }}
<FormattedMessage id="account.modal.totp.verify" /> variant="outline"
</Button> type="submit"
</Col> >
</Grid> <FormattedMessage id="account.modal.totp.verify" />
</Button>
</Group>
</form> </form>
</Stack> </Stack>
</Center> </Center>

60
frontend/src/components/upload/modals/showCreateUploadModal.tsx
View File

@ -5,6 +5,7 @@ import {
Checkbox, Checkbox,
Col, Col,
Grid, Grid,
Group,
MultiSelect, MultiSelect,
NumberInput, NumberInput,
PasswordInput, PasswordInput,
@ -135,31 +136,29 @@ const CreateUploadModalBody = ({
})} })}
> >
<Stack align="stretch"> <Stack align="stretch">
<Grid align={form.errors.link ? "center" : "flex-end"}> <Group align="end">
<Col xs={9}> <TextInput
<TextInput style={{ flex: "1" }}
variant="filled" variant="filled"
label="Link" label="Link"
placeholder="myAwesomeShare" placeholder="myAwesomeShare"
{...form.getInputProps("link")} {...form.getInputProps("link")}
/> />
</Col> <Button
<Col xs={3}> style={{ flex: "0 0 auto" }}
<Button variant="outline"
variant="outline" onClick={() =>
onClick={() => form.setFieldValue(
form.setFieldValue( "link",
"link", Buffer.from(Math.random().toString(), "utf8")
Buffer.from(Math.random().toString(), "utf8") .toString("base64")
.toString("base64") .substr(10, 7)
.substr(10, 7) )
) }
} >
> <FormattedMessage id="common.button.generate" />
<FormattedMessage id="common.button.generate" /> </Button>
</Button> </Group>
</Col>
</Grid>
<Text <Text
italic italic
@ -173,6 +172,17 @@ const CreateUploadModalBody = ({
{!options.isReverseShare && ( {!options.isReverseShare && (
<> <>
<Grid align={form.errors.link ? "center" : "flex-end"}> <Grid align={form.errors.link ? "center" : "flex-end"}>
<Col xs={6}>
<NumberInput
min={1}
max={99999}
precision={0}
variant="filled"
label={t("upload.modal.expires.label")}
disabled={form.values.never_expires}
{...form.getInputProps("expiration_num")}
/>
</Col>
<Col xs={6}> <Col xs={6}>
<Select <Select
disabled={form.values.never_expires} disabled={form.values.never_expires}

2
frontend/src/i18n/translations/en-US.ts
View File

@ -260,8 +260,6 @@ export default {
"upload.modal.expires.never-long": "Never Expires", "upload.modal.expires.never-long": "Never Expires",
"upload.modal.link.label": "Link", "upload.modal.link.label": "Link",
"upload.modal.link.placeholder": "myAwesomeShare",
"upload.modal.expires.label": "Expiration", "upload.modal.expires.label": "Expiration",
"upload.modal.expires.minute-singular": "Minute", "upload.modal.expires.minute-singular": "Minute",
"upload.modal.expires.minute-plural": "Minutes", "upload.modal.expires.minute-plural": "Minutes",