Place "Generate topic name" in the same line as the text field

Signed-off-by: Yarden Shoham <hrsi88@gmail.com>
This commit is contained in:
Yarden Shoham 2022-12-08 10:32:02 +00:00
parent b91fb3f586
commit e083ef0d6d

View file

@ -6,7 +6,7 @@ import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent'; import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText'; import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import {Autocomplete, Checkbox, FormControlLabel, useMediaQuery} from "@mui/material"; import {Autocomplete, Checkbox, FormControlLabel, Grid, useMediaQuery} from "@mui/material";
import theme from "./theme"; import theme from "./theme";
import api from "../app/Api"; import api from "../app/Api";
import {topicUrl, validTopic, validUrl} from "../app/utils"; import {topicUrl, validTopic, validUrl} from "../app/utils";
@ -53,6 +53,14 @@ const SubscribeDialog = (props) => {
); );
}; };
const Row = (props) => {
return (
<div style={{display: 'flex'}} role="row">
{props.children}
</div>
);
};
const SubscribePage = (props) => { const SubscribePage = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [anotherServerVisible, setAnotherServerVisible] = useState(false); const [anotherServerVisible, setAnotherServerVisible] = useState(false);
@ -117,22 +125,26 @@ const SubscribePage = (props) => {
<DialogContentText> <DialogContentText>
{t("subscribe_dialog_subscribe_description")} {t("subscribe_dialog_subscribe_description")}
</DialogContentText> </DialogContentText>
<TextField <div style={{display: 'flex'}} role="row">
autoFocus <TextField
margin="dense" autoFocus
id="topic" margin="dense"
placeholder={t("subscribe_dialog_subscribe_topic_placeholder")} id="topic"
value={props.topic} placeholder={t("subscribe_dialog_subscribe_topic_placeholder")}
onChange={ev => props.setTopic(ev.target.value)} value={props.topic}
type="text" onChange={ev => props.setTopic(ev.target.value)}
fullWidth type="text"
variant="standard" fullWidth
inputProps={{ variant="standard"
maxLength: 64, inputProps={{
"aria-label": t("subscribe_dialog_subscribe_topic_placeholder") maxLength: 64,
}} "aria-label": t("subscribe_dialog_subscribe_topic_placeholder")
/> }}
<Button onClick={generateTopicName} disabled={props.topic.includes("-")}>{t("subscribe_dialog_subscribe_button_generate_topic_name")}</Button><br /> />
<Button onClick={generateTopicName} disabled={props.topic.includes("-")} style={{flexShrink: "0", marginTop: "0.5em"}}>
{t("subscribe_dialog_subscribe_button_generate_topic_name")}
</Button>
</div>
<FormControlLabel <FormControlLabel
sx={{pt: 1}} sx={{pt: 1}}
control={ control={