Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ticket/15192] Fix dropdown-extended & notification code #4808

Merged
merged 5 commits into from Apr 26, 2017
Merged

[ticket/15192] Fix dropdown-extended & notification code #4808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5e6ba1e
[ticket/15192] relocate class properly
hanakin Apr 25, 2017
308b077
[ticket/15192] Fix js selectors
hanakin Apr 25, 2017
323f187
[ticket/15192] Cleanup selectors and proper scope
hanakin Apr 25, 2017
5c36c41
[ticket/15192] use proper scope for overides
hanakin Apr 25, 2017
0b818b0
[ticket/15192] fix stupid test issue
hanakin Apr 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions phpBB/styles/prosilver/template/ajax.js
View file
Open in desktop
Expand Up @@ -100,16 +100,16 @@ phpbb.addAjaxCallback('mark_topics_read', function(res, updateTopicLinks) {
// This callback will mark all notifications read
phpbb.addAjaxCallback('notification.mark_all_read', function(res) {
if (typeof res.success !== 'undefined') {
phpbb.markNotifications($('#notification_list li.bg2'), 0);
phpbb.markNotifications($('[data-notification-unread="true"]'), 0);
phpbb.closeDarkenWrapper(3000);
}
});

// This callback will mark a notification read
phpbb.addAjaxCallback('notification.mark_read', function(res) {
if (typeof res.success !== 'undefined') {
var unreadCount = Number($('#notification_list_button strong').html()) - 1;
phpbb.markNotifications($(this).parent('li.bg2'), unreadCount);
var unreadCount = Number($('#notification-button strong').html()) - 1;
phpbb.markNotifications($(this).parent('[data-notification-unread="true"]'), unreadCount);
}
});

Expand All @@ -131,11 +131,11 @@ phpbb.markNotifications = function($popup, unreadCount) {
});

// Update the unread count.
$('strong', '#notification_list_button').html(unreadCount);
$('strong', '#notification-button').html(unreadCount);
// Remove the Mark all read link and hide notification count if there are no unread notifications.
if (!unreadCount) {
$('#mark_all_notifications').remove();
$('#notification_list_button > strong').addClass('hidden');
$('#notification-button > strong').addClass('hidden');
}

// Update page title
Expand Down
2 changes: 1 addition & 1 deletion phpBB/styles/prosilver/template/navbar_header.html
View file
Open in desktop
Expand Up @@ -151,7 +151,7 @@
<!-- ENDIF -->
<!-- IF S_NOTIFICATIONS_DISPLAY -->
<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger">
<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification-button" class="dropdown-trigger">
<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>{L_NOTIFICATIONS} </span><strong class="badge<!-- IF not NOTIFICATIONS_COUNT --> hidden<!-- ENDIF -->">{NOTIFICATIONS_COUNT}</strong>
</a>
<!-- INCLUDE notification_dropdown.html -->
Expand Down
16 changes: 8 additions & 8 deletions phpBB/styles/prosilver/template/notification_dropdown.html
View file
Open in desktop
@@ -1,29 +1,29 @@
<div id="notification_list" class="dropdown dropdown-extended notification_list">
<div class="pointer"><div class="pointer-inner"></div></div>
<div id="notification-menu" class="dropdown dropdown-extended notification-menu">
<div class="pointer dropdown-extended-pointer"><div class="pointer-inner"></div></div>
<div class="dropdown-contents">
<div class="header">
{L_NOTIFICATIONS}
<span class="header_settings">
<span class="header-settings">
<a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a>
<!-- IF NOTIFICATIONS_COUNT -->
<span id="mark_all_notifications"> &bull; <a href="{U_MARK_ALL_NOTIFICATIONS}" data-ajax="notification.mark_all_read">{L_MARK_ALL_READ}</a></span>
<!-- ENDIF -->
</span>
</div>

<ul>
<ul class="dropdown-extended-list notification-list">
<!-- IF not .notifications -->
<li class="no_notifications">
<li class="dropdown-extended-item no-notifications">
{L_NO_NOTIFICATIONS}
</li>
<!-- ENDIF -->
<!-- BEGIN notifications -->
<li class="<!-- IF notifications.UNREAD --> bg2<!-- ENDIF --><!-- IF notifications.STYLING --> {notifications.STYLING}<!-- ENDIF --><!-- IF not notifications.URL --> no-url<!-- ENDIF -->">
<li class="dropdown-extended-item notification-item<!-- IF notifications.UNREAD --> bg2<!-- ENDIF --><!-- IF notifications.STYLING --> {notifications.STYLING}<!-- ENDIF --><!-- IF not notifications.URL --> no-url<!-- ENDIF -->" <!-- IF notifications.UNREAD -->data-notification-unread="true"<!-- ENDIF -->>
<!-- IF notifications.URL -->
<a class="notification-block" href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}" data-real-url="{notifications.URL}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->">
<!-- ENDIF -->
<!-- IF notifications.AVATAR -->{notifications.AVATAR}<!-- ELSE --><img src="{T_THEME_PATH}/images/no_avatar.gif" alt="" /><!-- ENDIF -->
<div class="notification_text">
<!-- IF notifications.AVATAR -->{notifications.AVATAR}<!-- ELSE --><img class="notification-avatar" src="{T_THEME_PATH}/images/no_avatar.gif" alt="" /><!-- ENDIF -->
<div class="notification-text">
<p class="notification-title">{notifications.FORMATTED_TITLE}</p>
<!-- IF notifications.REFERENCE --><p class="notification-reference">{notifications.REFERENCE}</p><!-- ENDIF -->
<!-- IF notifications.FORUM --><p class="notification-forum">{notifications.FORUM}</p><!-- ENDIF -->
Expand Down
10 changes: 5 additions & 5 deletions phpBB/styles/prosilver/theme/bidi.css
View file
Open in desktop
Expand Up @@ -126,7 +126,7 @@
text-align: right;
}

.rtl .dropdown-extended .header .header_settings,
.rtl .dropdown-extended .header .header-settings,
.rtl .dropdown-container-right {
float: left;
}
Expand All @@ -138,23 +138,23 @@

/* Notifications
----------------------------------------- */
.rtl .notification_list ul li img {
.rtl .notification-avatar {
float: right;
margin-right: 0;
margin-left: 5px;
}

.rtl .notification_list div.notifications {
.rtl .notification-menu .notifications {
margin-right: 50px;
margin-left: 0;
}

.rtl .notification_text {
.rtl .notification-text {
margin-right: 58px;
margin-left: 0;
}

.rtl .notification_list p.notification-time {
.rtl .notification-time {
text-align: left;
}

Expand Down
21 changes: 10 additions & 11 deletions phpBB/styles/prosilver/theme/colours.css
View file
Open in desktop
Expand Up @@ -54,11 +54,6 @@ th a:hover {
color: #a8d8ff;
}

/* notification mark read link */
.dropdown-extended a.mark_read {
background-color: #ffffff;
}

/* post body links */
.postlink {
border-bottom-color: #368ad2;
Expand Down Expand Up @@ -1107,15 +1102,19 @@ input.disabled {
}
}

.dropdown-extended ul li {
.dropdown-extended .dropdown-extended-item {
border-top-color: #b9b9b9;
}

.dropdown-extended ul li:hover {
.dropdown-extended .dropdown-extended-item:hover {
background-color: #cfe1f6;
color: #000000;
}

.dropdown-extended a.mark_read {
background-color: #ffffff;
}

.dropdown-extended .header,
.dropdown-extended .footer {
border-color: #b9b9b9;
Expand All @@ -1140,7 +1139,7 @@ input.disabled {
border-color: #ffffff transparent;
}

.dropdown-extended .pointer-inner {
.dropdown-extended-pointer .pointer-inner {
border-color: #f1f8ff transparent;
}

Expand All @@ -1165,12 +1164,12 @@ input.disabled {

/* notifications */

.notification_list p.notification-time {
.notification-time {
color: #4c5d77;
}

li.notification-reported strong,
li.notification-disapproved strong {
.notification-reported strong,
.notification-disapproved strong {
color: #d31141;
}

Expand Down
46 changes: 23 additions & 23 deletions phpBB/styles/prosilver/theme/common.css
View file
Open in desktop
Expand Up @@ -1160,7 +1160,7 @@ form > p.post-notice strong {
.inner:after,
ul.linklist:after,
.action-bar:after,
.notification_text:after,
.notification-text:after,
.tabs-container:after,
.tabs > ul:after,
.minitabs > ul:after,
Expand Down Expand Up @@ -1200,14 +1200,14 @@ ul.linklist:after,
display: none;
}

.dropdown-extended ul {
.dropdown-extended .dropdown-extended-list {
clear: both;
overflow-x: hidden;
overflow-y: auto;
max-height: 350px;
}

.dropdown-extended ul li {
.dropdown-extended .dropdown-extended-item {
font-size: 0.95em;
border-top: 1px solid;
position: relative;
Expand All @@ -1218,11 +1218,11 @@ ul.linklist:after,
list-style-type: none;
}

.dropdown-extended ul li:first-child {
.dropdown-extended .dropdown-extended-item:first-child {
border-top: none;
}

.dropdown-extended ul li.no_notifications {
.dropdown-extended .dropdown-extended-item.no-notifications {
padding: 10px;
}

Expand All @@ -1249,13 +1249,13 @@ ul.linklist:after,
padding: 0 10px;
}

.dropdown-extended .header .header_settings {
.dropdown-extended .header .header-settings {
font-weight: normal;
text-transform: none;
float: right;
}

.dropdown-extended .header .header_settings a {
.dropdown-extended .header .header-settings a {
display: inline-block;
padding: 0 5px;
}
Expand All @@ -1271,23 +1271,23 @@ ul.linklist:after,
text-align: center;
}

.dropdown-extended ul li a,
.dropdown-extended ul li.no-url {
.dropdown-extended .notification-block,
.dropdown-extended .dropdown-extended-item.no-url {
padding: 8px;
}

.dropdown-extended .footer > a {
padding: 5px 0;
}

.dropdown-extended ul li a,
.notification_list dt > a,
.dropdown-extended .dropdown-extended-item a,
.notification-menu dt > a,
.dropdown-extended .footer > a {
text-decoration: none;
display: block;
}

.notification_list ul li img {
.notification-avatar {
float: left;
width: auto !important;
max-width: 50px;
Expand All @@ -1296,48 +1296,48 @@ ul.linklist:after,
margin-right: 5px;
}

.notification_list ul li p {
.notification-item p {
font-size: 1em;
margin-bottom: 4px;
}

.notification_list p.notification-reference,
.notification_list p.notification-location,
.notification_list li a p.notification-reason {
.notification-reference,
.notification-location,
.notification-reason {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.notification_list p.notification-time {
.notification-time {
font-size: 0.9em;
text-align: right;
margin: 0;
}

.notification_list div.notifications {
.notification-menu .notifications {
margin-left: 50px;
padding: 5px;
}

.notification_list div.notifications a {
.notification-menu .notifications a {
display: block;
}

.notification_list p.notifications_title {
.notifications-title {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.2em !important;
}

.notification_list p.notifications_title strong {
.notifications-title strong {
font-weight: bold;
}

.notification_list p.notifications_time {
.notifications-time {
font-size: 0.9em !important;
}

.notification_text {
.notification-text {
margin-left: 58px;
}

Expand Down
6 changes: 3 additions & 3 deletions tests/functional/notification_test.php
View file
Open in desktop
Expand Up @@ -77,12 +77,12 @@ public function test_mark_notifications_read()
$crawler = self::request('GET', 'ucp.php?i=ucp_notifications');

// At least one notification should exist
$this->assertGreaterThan(0, $crawler->filter('#notification_list_button strong')->text());
$this->assertGreaterThan(0, $crawler->filter('#notification-button strong')->text());

// Get form token
$link = $crawler->selectLink($this->lang('NOTIFICATIONS_MARK_ALL_READ'))->link()->getUri();
$crawler = self::request('GET', substr($link, strpos($link, 'ucp.')));
$this->assertCount(1, $crawler->filter('#notification_list_button strong.badge.hidden'));
$this->assertEquals("0", $crawler->filter('#notification_list_button strong.badge.hidden')->text());
$this->assertCount(1, $crawler->filter('#notification-button strong.badge.hidden'));
$this->assertEquals("0", $crawler->filter('#notification-button strong.badge.hidden')->text());
}
}