parra/ntfy
parra/ntfy
1
0
Fork 0
mirror of https://github.com/binwiederhier/ntfy.git synced 2025-06-02 19:35:53 +02:00
Code Releases Activity

Fix UI bugs

Browse source
This commit is contained in:
binwiederhier 2023-02-10 21:19:44 -05:00
parent 79f9e78c37
commit 5724bdf436
5 changed files with 54 additions and 28 deletions
web/src/components
SubscriptionPopup.js

51
web/src/components/SubscriptionPopup.js
View file

@ -24,9 +24,8 @@ 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) => {
export const SubscriptionPopup = (props) => {
const { t } = useTranslation();
const { account } = useContext(AccountContext);
const navigate = useNavigate();
@ -39,10 +38,10 @@ const SubscriptionPopup = (props) => {
const placement = props.placement ?? "left";
const reservations = account?.reservations || [];
const showReservationAdd = !subscription?.reservation && account?.stats.reservations_remaining > 0;
const showReservationAddDisabled = !subscription?.reservation && account?.stats.reservations_remaining === 0;
const showReservationEdit = !!subscription?.reservation;
const showReservationDelete = !!subscription?.reservation;
const showReservationAdd = config.enable_reservations && !subscription?.reservation && account?.stats.reservations_remaining > 0;
const showReservationAddDisabled = config.enable_reservations && !subscription?.reservation && (config.enable_payments || account?.stats.reservations_remaining === 0);
const showReservationEdit = config.enable_reservations && !!subscription?.reservation;
const showReservationDelete = config.enable_reservations && !!subscription?.reservation;
const handleChangeDisplayName = async () => {
setDisplayNameDialogOpen(true);
@ -141,7 +140,7 @@ const SubscriptionPopup = (props) => {
{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" }}/>
<ReserveLimitChip/>
</MenuItem>
}
{showReservationEdit && <MenuItem onClick={handleReserveEdit}>{t("action_bar_reservation_edit")}</MenuItem>}
@ -254,4 +253,40 @@ const DisplayNameDialog = (props) => {
);
};
export default SubscriptionPopup;
export const ReserveLimitChip = () => {
const { account } = useContext(AccountContext);
if (account?.stats.reservations_remaining > 0) {
return <></>;
} else if (config.enable_payments) {
return <ProChip/>;
} else if (account) {
return <LimitReachedChip/>;
}
return <></>;
};
const LimitReachedChip = () => {
const { t } = useTranslation();
return (
<Chip
label={t("action_bar_reservation_limit_reached")}
variant="outlined"
color="primary"
sx={{ opacity: 0.8, borderWidth: "2px", height: "24px", marginLeft: "5px" }}
/>
);
};
const ProChip = () => {
const { t } = useTranslation();
return (
<Chip
label={"ntfy Pro"}
variant="outlined"
color="primary"
sx={{ opacity: 0.8, borderWidth: "2px", height: "24px", marginLeft: "5px" }}
/>
);
};