"Limit reached" chips

pull/526/head
binwiederhier 2023-02-07 23:18:41 -05:00
parent bf96d21d67
commit 19324ab232
3 changed files with 16 additions and 4 deletions

View File

@ -22,6 +22,7 @@
"action_bar_reservation_add": "Reserve topic", "action_bar_reservation_add": "Reserve topic",
"action_bar_reservation_edit": "Change reservation", "action_bar_reservation_edit": "Change reservation",
"action_bar_reservation_delete": "Remove reservation", "action_bar_reservation_delete": "Remove reservation",
"action_bar_reservation_limit_reached": "Limit reached",
"action_bar_send_test_notification": "Send test notification", "action_bar_send_test_notification": "Send test notification",
"action_bar_clear_notifications": "Clear all notifications", "action_bar_clear_notifications": "Clear all notifications",
"action_bar_unsubscribe": "Unsubscribe", "action_bar_unsubscribe": "Unsubscribe",

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, FormGroup, useMediaQuery} from "@mui/material"; import {Autocomplete, Checkbox, Chip, FormControlLabel, FormGroup, useMediaQuery} from "@mui/material";
import theme from "./theme"; import theme from "./theme";
import api from "../app/Api"; import api from "../app/Api";
import {randomAlphanumericString, topicUrl, validTopic, validUrl} from "../app/utils"; import {randomAlphanumericString, topicUrl, validTopic, validUrl} from "../app/utils";
@ -178,7 +178,12 @@ const SubscribePage = (props) => {
}} }}
/> />
} }
label={t("reserve_dialog_checkbox_label")} label={
<>
{t("reserve_dialog_checkbox_label")}
<Chip label={t("action_bar_reservation_limit_reached")} variant="outlined" color="primary" sx={{ opacity: 0.8, borderWidth: "2px", height: "24px", marginLeft: "5px" }}/>
</>
}
/> />
{reserveTopicVisible && {reserveTopicVisible &&
<ReserveTopicSelect <ReserveTopicSelect

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 {InputAdornment, Portal, Snackbar, useMediaQuery} from "@mui/material"; import {Chip, InputAdornment, Portal, Snackbar, useMediaQuery} from "@mui/material";
import theme from "./theme"; import theme from "./theme";
import subscriptionManager from "../app/SubscriptionManager"; import subscriptionManager from "../app/SubscriptionManager";
import DialogFooter from "./DialogFooter"; import DialogFooter from "./DialogFooter";
@ -24,6 +24,7 @@ import {Clear} from "@mui/icons-material";
import {AccountContext} from "./App"; import {AccountContext} from "./App";
import {ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog} from "./ReserveDialogs"; import {ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog} from "./ReserveDialogs";
import {UnauthorizedError} from "../app/errors"; import {UnauthorizedError} from "../app/errors";
import Box from "@mui/material/Box";
const SubscriptionPopup = (props) => { const SubscriptionPopup = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -137,7 +138,12 @@ const SubscriptionPopup = (props) => {
> >
<MenuItem onClick={handleChangeDisplayName}>{t("action_bar_change_display_name")}</MenuItem> <MenuItem onClick={handleChangeDisplayName}>{t("action_bar_change_display_name")}</MenuItem>
{showReservationAdd && <MenuItem onClick={handleReserveAdd}>{t("action_bar_reservation_add")}</MenuItem>} {showReservationAdd && <MenuItem onClick={handleReserveAdd}>{t("action_bar_reservation_add")}</MenuItem>}
{showReservationAddDisabled && <MenuItem disabled={true}>{t("action_bar_reservation_add")}</MenuItem>} {showReservationAddDisabled &&
<MenuItem sx={{ cursor: "default" }}>
<span style={{ opacity: 0.3 }}>{t("action_bar_reservation_add")}</span>
<Chip label={t("action_bar_reservation_limit_reached")} variant="outlined" color="primary" sx={{ opacity: 0.8, borderWidth: "2px", height: "24px", marginLeft: "5px" }}/>
</MenuItem>
}
{showReservationEdit && <MenuItem onClick={handleReserveEdit}>{t("action_bar_reservation_edit")}</MenuItem>} {showReservationEdit && <MenuItem onClick={handleReserveEdit}>{t("action_bar_reservation_edit")}</MenuItem>}
{showReservationDelete && <MenuItem onClick={handleReserveDelete}>{t("action_bar_reservation_delete")}</MenuItem>} {showReservationDelete && <MenuItem onClick={handleReserveDelete}>{t("action_bar_reservation_delete")}</MenuItem>}
<MenuItem onClick={handleSendTestMessage}>{t("action_bar_send_test_notification")}</MenuItem> <MenuItem onClick={handleSendTestMessage}>{t("action_bar_send_test_notification")}</MenuItem>