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

[ticket/17371] Improve dropdown toggle UX

Browse source 
PHPBB-17371

Signed-off-by: Matt Friedman <maf675@gmail.com>
This commit is contained in:
Matt Friedman 2024-07-17 09:28:33 -07:00
parent 187a4f3586
commit 4da0a75efa
No known key found for this signature in database
5 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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 %} {% if NOTIFICATIONS_WEBPUSH_ENABLE and notification_types is not defined %}
<div class="footer webpush-subscribe"> <div class="footer webpush-subscribe">
<span class="ellipsis-text">{{ lang('NOTIFY_WEB_PUSH_ENABLE') ~ lang('COLON') }}</span> <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="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('font', 'toggle-on', lang('NOTIFY_WEB_PUSH_SUBSCRIBED'), false, '', {'style' : 'color:#0059b3;'}) }}</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> </div>
{% endif %} {% endif %}
{% EVENT notification_dropdown_footer_after %} {% EVENT notification_dropdown_footer_after %}

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

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

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

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