diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json index 4321a77e..33c47e14 100644 --- a/web/public/static/langs/en.json +++ b/web/public/static/langs/en.json @@ -22,6 +22,7 @@ "action_bar_reservation_add": "Reserve topic", "action_bar_reservation_edit": "Change reservation", "action_bar_reservation_delete": "Remove reservation", + "action_bar_reservation_limit_reached": "Limit reached", "action_bar_send_test_notification": "Send test notification", "action_bar_clear_notifications": "Clear all notifications", "action_bar_unsubscribe": "Unsubscribe", diff --git a/web/src/components/SubscribeDialog.js b/web/src/components/SubscribeDialog.js index 2e1043c7..834e58f7 100644 --- a/web/src/components/SubscribeDialog.js +++ b/web/src/components/SubscribeDialog.js @@ -6,7 +6,7 @@ import Dialog from '@mui/material/Dialog'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; 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 api from "../app/Api"; 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 && <ReserveTopicSelect diff --git a/web/src/components/SubscriptionPopup.js b/web/src/components/SubscriptionPopup.js index 46b9bd2b..a3cb6dda 100644 --- a/web/src/components/SubscriptionPopup.js +++ b/web/src/components/SubscriptionPopup.js @@ -6,7 +6,7 @@ import Dialog from '@mui/material/Dialog'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; 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 subscriptionManager from "../app/SubscriptionManager"; import DialogFooter from "./DialogFooter"; @@ -24,6 +24,7 @@ import {Clear} from "@mui/icons-material"; import {AccountContext} from "./App"; import {ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog} from "./ReserveDialogs"; import {UnauthorizedError} from "../app/errors"; +import Box from "@mui/material/Box"; const SubscriptionPopup = (props) => { const { t } = useTranslation(); @@ -137,7 +138,12 @@ const SubscriptionPopup = (props) => { > <MenuItem onClick={handleChangeDisplayName}>{t("action_bar_change_display_name")}</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>} {showReservationDelete && <MenuItem onClick={handleReserveDelete}>{t("action_bar_reservation_delete")}</MenuItem>} <MenuItem onClick={handleSendTestMessage}>{t("action_bar_send_test_notification")}</MenuItem>