makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-07 20:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6692 from iMattPro/ticket/17371

Browse source 
[ticket/17371] Web Push UX Updates
This commit is contained in:
Marc Alexander 2024-08-12 21:38:37 +02:00 • committed by GitHub
commit 752a0142b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 49 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
phpBB/assets/javascript/webpush.js
View file

@ -51,7 +51,7 @@ function PhpbbWebpush() {
// Service workers are only supported in secure context
if (window.isSecureContext !== true) {
subscribeButton.disabled = true;
setDisabledState();
return;
}
@ -66,13 +66,33 @@ function PhpbbWebpush() {
.catch(error => {
console.info(error);
// Service worker could not be registered
subscribeButton.disabled = true;
setDisabledState();
});
} else {
subscribeButton.disabled = true;
setDisabledState();
}
};
/**
* Disable subscribing buttons, update subscribe button text and hide dropdown toggle
*
* @return void
*/
function setDisabledState() {
subscribeButton.disabled = true;
const notificationList = document.getElementById('notification-menu');
const subscribeToggle = notificationList.querySelector('.webpush-subscribe');
if (subscribeToggle) {
subscribeToggle.style.display = 'none';
}
if (subscribeButton.type === 'submit' || subscribeButton.classList.contains('button')) {
subscribeButton.value = subscribeButton.getAttribute('data-disabled-msg');
}
}
/**
* Update button state depending on notifications state
*

5
phpBB/language/en/common.php
View file

@ -512,10 +512,11 @@ $lang = array_merge($lang, array(
),
'NOTIFY_ADMIN' => 'Please notify the board administrator or webmaster.',
'NOTIFY_ADMIN_EMAIL' => 'Please notify the board administrator or webmaster: <a href="mailto:%1$s">%1$s</a>',
'NOTIFY_WEB_PUSH_ENABLE' => 'Enable Web Push notifications',
'NOTIFY_WEB_PUSH_DENIED' => 'You have denied notifications from this site. To subscribe, please allow notifications in your browser settings.',
'NOTIFY_WEB_PUSH_DISABLED' => 'Web Push not supported',
'NOTIFY_WEB_PUSH_ENABLE' => 'Enable web push notifications',
'NOTIFY_WEB_PUSH_SUBSCRIBE' => 'Subscribe',
'NOTIFY_WEB_PUSH_SUBSCRIBED'=> 'Subscribed',
'NOTIFY_WEB_PUSH_DENIED' => 'You have denied notifications from this site. To subscribe, please allow notifications in your browser settings.',
'NO_ACCESS_ATTACHMENT' => 'You are not allowed to access this file.',
'NO_ACTION' => 'No action specified.',
'NO_ADMINISTRATORS' => 'There are no administrators.',

8
phpBB/phpbb/ucp/controller/webpush.php
View file

@ -103,7 +103,7 @@ class webpush
{
if (!$this->request->is_ajax() || $this->user->data['is_bot'] || $this->user->data['user_type'] == USER_INACTIVE)
{
throw new http_exception(Response::HTTP_FORBIDDEN, 'Forbidden');
throw new http_exception(Response::HTTP_FORBIDDEN, 'NO_AUTH_OPERATION');
}
if ($this->user->id() !== ANONYMOUS)
@ -132,7 +132,7 @@ class webpush
// Subscribe should only be available for logged-in "normal" users
if ($this->user->data['user_type'] == USER_IGNORE)
{
throw new http_exception(Response::HTTP_FORBIDDEN, 'Forbidden');
throw new http_exception(Response::HTTP_FORBIDDEN, 'NO_AUTH_OPERATION');
}
$item_id = $this->request->variable('item_id', 0);
@ -192,7 +192,7 @@ class webpush
}
}
throw new http_exception(Response::HTTP_FORBIDDEN, 'Forbidden');
throw new http_exception(Response::HTTP_FORBIDDEN, 'NO_AUTH_OPERATION');
}
/**
@ -251,7 +251,7 @@ class webpush
}
// Subscribe should only be available for logged-in "normal" users
if (!$this->request->is_ajax() || $this->user->id() == ANONYMOUS || $this->user->data['is_bot']
if (!$this->request->is_ajax() || $this->user->id() === ANONYMOUS || $this->user->data['is_bot']
|| $this->user->data['user_type'] == USER_IGNORE || $this->user->data['user_type'] == USER_INACTIVE)
{
throw new http_exception(Response::HTTP_FORBIDDEN, 'NO_AUTH_OPERATION');

1
phpBB/styles/prosilver/imgs/svg/toggle-off.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9 7c-.621 0-1.227.066-1.813.188a9.238 9.238 0 0 0-.875.218A9.073 9.073 0 0 0 .72 12.5c-.114.27-.227.531-.313.813A8.848 8.848 0 0 0 0 16c0 .93.145 1.813.406 2.656c.004.008-.004.024 0 .032A9.073 9.073 0 0 0 5.5 24.28c.27.114.531.227.813.313A8.83 8.83 0 0 0 9 24.999h14c4.957 0 9-4.043 9-9s-4.043-9-9-9zm0 2c3.879 0 7 3.121 7 7s-3.121 7-7 7s-7-3.121-7-7c0-.242.008-.484.031-.719A6.985 6.985 0 0 1 9 9m5.625 0H23c3.879 0 7 3.121 7 7s-3.121 7-7 7h-8.375C16.675 21.348 18 18.828 18 16c0-2.828-1.324-5.348-3.375-7"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 630 B

1
phpBB/styles/prosilver/imgs/svg/toggle-on.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9 7c-4.96 0-9 4.035-9 9s4.04 9 9 9h14c4.957 0 9-4.043 9-9s-4.043-9-9-9zm14 2c3.879 0 7 3.121 7 7s-3.121 7-7 7s-7-3.121-7-7s3.121-7 7-7"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 258 B

4
phpBB/styles/prosilver/template/notification_dropdown.html
View file

@ -47,8 +47,8 @@
{% if NOTIFICATIONS_WEBPUSH_ENABLE and notification_types is not defined %}
<div class="footer webpush-subscribe">
<span class="ellipsis-text">{{ lang('NOTIFY_WEB_PUSH_ENABLE') ~ lang('COLON') }}</span>
<button id="subscribe_webpush" name="subscribe_webpush" class="notification-subscribe-toggle" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED') }}">{{ Icon('font', 'toggle-off', lang('NOTIFY_WEB_PUSH_SUBSCRIBE'), false, '', {'style' : 'color:#9e9e9e;'}) }}</button>
<button id="unsubscribe_webpush" name="unsubscribe_webpush" class="notification-subscribe-toggle hidden">{{ Icon('font', 'toggle-on', lang('NOTIFY_WEB_PUSH_SUBSCRIBED'), false, '', {'style' : 'color:#0059b3;'}) }}</button>
<button id="subscribe_webpush" name="subscribe_webpush" class="notification-subscribe-toggle" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED') }}">{{ Icon('svg', 'toggle-off', lang('NOTIFY_WEB_PUSH_SUBSCRIBE'), true, 'push-subscribe-toggle-icon toggle-off') }}</button>
<button id="unsubscribe_webpush" name="unsubscribe_webpush" class="notification-subscribe-toggle hidden">{{ Icon('svg', 'toggle-on', lang('NOTIFY_WEB_PUSH_SUBSCRIBED'), true, 'push-subscribe-toggle-icon toggle-on') }}</button>
</div>
{% endif %}
{% EVENT notification_dropdown_footer_after %}

2
phpBB/styles/prosilver/template/ucp_notifications_options.html
View file

@ -10,7 +10,7 @@
<dl>
<dt><label for="subscribe_webpush">{{ lang('NOTIFY_WEBPUSH_ENABLE') ~ lang('COLON') }}</label><br><span>{{ lang('NOTIFY_WEBPUSH_ENABLE_EXPLAIN') }}</span></dt>
<dd>
<input id="subscribe_webpush" type="submit" name="subscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_SUBSCRIBE') }}" class="button1 button button-form" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED') }}">
<input id="subscribe_webpush" type="submit" name="subscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_SUBSCRIBE') }}" class="button1 button button-form" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED') }}" data-disabled-msg="{{ lang('NOTIFY_WEB_PUSH_DISABLED') }}">
<input id="unsubscribe_webpush" type="submit" name="unsubscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_UNSUBSCRIBE') }}" class="button1 button button-form hidden">
</dd>
</dl>

8
phpBB/styles/prosilver/theme/colours.css
View file

@ -298,6 +298,14 @@ a:hover .icon.icon-black, /* DEPRECATED 4.0 */
color: inherit;
}
.push-subscribe-toggle-icon.toggle-on {
color: #0059b3;
}
.push-subscribe-toggle-icon.toggle-off {
color: #9e9e9e;
}
/* jumpbox */
.jumpbox .dropdown li {
border-top-color: #dedede;

6
phpBB/styles/prosilver/theme/icons.css
View file

@ -123,6 +123,12 @@ blockquote cite:before,
height: 18px;
}
.push-subscribe-toggle-icon {
width: 20px;
height: 20px;
cursor: pointer;
}
/* Contact icons
---------------------------------------- */
.contact-icon {