More labels, and live regions
This commit is contained in:
parent
8a7bc38861
commit
15a45d9eb7
3 changed files with 22 additions and 12 deletions
|
@ -5,8 +5,8 @@
|
||||||
"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",
|
||||||
"action_bar_toggle_mute": "Toggle mute notifications",
|
"action_bar_toggle_mute": "Mute/unmute notifications",
|
||||||
"action_bar_toggle_action_menu": "Toggle action menu",
|
"action_bar_toggle_action_menu": "Open/close action menu",
|
||||||
"message_bar_type_message": "Type a message here",
|
"message_bar_type_message": "Type a message here",
|
||||||
"message_bar_error_publishing": "Error publishing notification",
|
"message_bar_error_publishing": "Error publishing notification",
|
||||||
"message_bar_show_dialog": "Show publish dialog",
|
"message_bar_show_dialog": "Show publish dialog",
|
||||||
|
@ -17,6 +17,8 @@
|
||||||
"nav_button_documentation": "Documentation",
|
"nav_button_documentation": "Documentation",
|
||||||
"nav_button_publish_message": "Publish notification",
|
"nav_button_publish_message": "Publish notification",
|
||||||
"nav_button_subscribe": "Subscribe to topic",
|
"nav_button_subscribe": "Subscribe to topic",
|
||||||
|
"nav_button_muted": "Notifications muted",
|
||||||
|
"nav_button_connecting": "connecting",
|
||||||
"alert_grant_title": "Notifications are disabled",
|
"alert_grant_title": "Notifications are disabled",
|
||||||
"alert_grant_description": "Grant your browser permission to display desktop notifications.",
|
"alert_grant_description": "Grant your browser permission to display desktop notifications.",
|
||||||
"alert_grant_button": "Grant now",
|
"alert_grant_button": "Grant now",
|
||||||
|
|
|
@ -12,11 +12,15 @@ const DialogFooter = (props) => {
|
||||||
paddingLeft: '24px',
|
paddingLeft: '24px',
|
||||||
paddingBottom: '8px',
|
paddingBottom: '8px',
|
||||||
}}>
|
}}>
|
||||||
<DialogContentText component="div" sx={{
|
<DialogContentText
|
||||||
margin: '0px',
|
component="div"
|
||||||
paddingTop: '12px',
|
aria-live="polite"
|
||||||
paddingBottom: '4px'
|
sx={{
|
||||||
}}>
|
margin: '0px',
|
||||||
|
paddingTop: '12px',
|
||||||
|
paddingBottom: '4px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
{props.status}
|
{props.status}
|
||||||
</DialogContentText>
|
</DialogContentText>
|
||||||
<DialogActions sx={{paddingRight: 2}}>
|
<DialogActions sx={{paddingRight: 2}}>
|
||||||
|
|
|
@ -163,6 +163,7 @@ const SubscriptionList = (props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const SubscriptionItem = (props) => {
|
const SubscriptionItem = (props) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const subscription = props.subscription;
|
const subscription = props.subscription;
|
||||||
const iconBadge = (subscription.new <= 99) ? subscription.new : "99+";
|
const iconBadge = (subscription.new <= 99) ? subscription.new : "99+";
|
||||||
|
@ -172,16 +173,19 @@ const SubscriptionItem = (props) => {
|
||||||
const label = (subscription.baseUrl === window.location.origin)
|
const label = (subscription.baseUrl === window.location.origin)
|
||||||
? subscription.topic
|
? subscription.topic
|
||||||
: topicShortUrl(subscription.baseUrl, subscription.topic);
|
: topicShortUrl(subscription.baseUrl, subscription.topic);
|
||||||
|
const ariaLabel = (subscription.state === ConnectionState.Connecting)
|
||||||
|
? `${label} (${t("nav_button_connecting")})`
|
||||||
|
: label;
|
||||||
const handleClick = async () => {
|
const handleClick = async () => {
|
||||||
navigate(routes.forSubscription(subscription));
|
navigate(routes.forSubscription(subscription));
|
||||||
await subscriptionManager.markNotificationsRead(subscription.id);
|
await subscriptionManager.markNotificationsRead(subscription.id);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<ListItemButton onClick={handleClick} selected={props.selected}>
|
<ListItemButton onClick={handleClick} selected={props.selected} aria-label={ariaLabel} aria-live="polite">
|
||||||
<ListItemIcon>{icon}</ListItemIcon>
|
<ListItemIcon>{icon}</ListItemIcon>
|
||||||
<ListItemText primary={label}/>
|
<ListItemText primary={label}/>
|
||||||
{subscription.mutedUntil > 0 &&
|
{subscription.mutedUntil > 0 &&
|
||||||
<ListItemIcon edge="end"><NotificationsOffOutlined /></ListItemIcon>}
|
<ListItemIcon edge="end" aria-label={t("nav_button_muted")}><NotificationsOffOutlined /></ListItemIcon>}
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue