Skip to content

Commit 6adc331

Browse files
committed
Modify notification box to better showcase user specific information
1 parent 2507889 commit 6adc331

File tree

14 files changed

+337
-164
lines changed

14 files changed

+337
-164
lines changed

common/php/class-module.php

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -495,15 +495,20 @@ function users_select_form( $selected = null, $args = null ) {
495495
// Add a class to checkbox of current user so we know not to add them in notified list during notifiedMessage() js function
496496
$current_user_class = ( get_current_user_id() == $user->ID ) ? 'class="post_following_list-current_user" ' : '';
497497
?>
498-
<li>
498+
<li class="ef-user-list-item">
499499
<label for="<?php echo esc_attr( $input_id .'-'. $user->ID ) ?>">
500500
<div class="ef-user-subscribe-actions">
501501
<?php do_action( 'ef_user_subscribe_actions', $user->ID, $checked ) ?>
502502
<input type="checkbox" id="<?php echo esc_attr( $input_id .'-'. $user->ID ) ?>" name="<?php echo esc_attr( $input_id ) ?>[]" value="<?php echo esc_attr( $user->ID ); ?>" <?php echo $checked; echo $current_user_class; ?> />
503503
</div>
504504

505-
<span class="ef-user_displayname"><?php echo esc_html( $user->display_name ); ?></span>
506-
<span class="ef-user_useremail"><?php echo esc_html( $user->user_email ); ?></span>
505+
<div class="ef-user-list_info">
506+
<span class="ef-user_displayname"><?php echo esc_html( $user->display_name ); ?></span>
507+
<span class="ef-user_useremail"><?php echo esc_html( $user->user_email ); ?></span>
508+
<div class="ef-user-list-badges">
509+
<?php do_action( 'ef_user_subscribe_actions', $user->ID, $checked ) ?>
510+
</div>
511+
</div>
507512
</label>
508513
</li>
509514
<?php endforeach; ?>

modules/dist/notifications.build.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

modules/notifications/lib/notifications.css

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,17 @@
77
}
88

99
.ef-post_following_list li {
10+
border-bottom: 1px solid #ccc;
11+
}
12+
13+
.ef-post_following_list li label {
14+
min-height: 76px;
1015
padding: 10px 5px 5px 5px;
1116
margin: 0;
12-
border-bottom: 1px solid #ccc;
13-
min-height: 36px;
17+
display: block;
1418
}
1519

16-
.ef-post_following_list li:hover {
20+
.ef-post_following_list li label:hover {
1721
background: #EAF2FA;
1822
}
1923

@@ -35,17 +39,21 @@
3539
font-size: 12px;
3640
}
3741

38-
.ef-post_following_list li .ef-user-subscribe-actions {
39-
float: right;
40-
margin-top: 5px;
42+
.ef-post_following_list li .ef-user-list-badges {
43+
margin-top: 10px;
4144
}
4245

43-
.ef-post_following_list li .ef-user-subscribe-actions .post_following_list-no_email,
44-
.ef-post_following_list li .ef-user-subscribe-actions .post_following_list-no_access {
46+
.ef-post_following_list li .ef-user-badge {
4547
margin-right: 10px;
46-
border: solid 2px #DC3232;
47-
color: #DC3232;
48+
border: solid 2px #b8b8b8;
49+
color: #b8b8b8;
4850
padding: 4px;
51+
display: inline-block;
52+
}
53+
54+
.ef-post_following_list li .ef-user-badge-error {
55+
color: #DC3232;
56+
border: solid 2px #DC3232;
4957
}
5058

5159
#ef-post_following_box {
@@ -107,4 +115,4 @@
107115

108116
#ef-usergroup-users h4 {
109117
margin-top: 0;
110-
}
118+
}
Lines changed: 156 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,173 @@
1-
jQuery(document).ready(function($) {
2-
$('#ef-post_following_users_box ul').listFilterizer();
1+
/* global wp, jQuery, ajaxurl, ef_notifications_localization, document, wpListL10n, ef_post_author_id */
32

4-
var params = {
3+
const BADGES_STATUS = {
4+
error: 'error',
5+
warning: 'warning',
6+
success: 'success',
7+
};
8+
9+
const BADGES = {
10+
NO_ACCESS: {
11+
id: 'no_access',
12+
name: ef_notifications_localization.no_access,
13+
status: BADGES_STATUS.error,
14+
},
15+
NO_EMAIL: {
16+
id: 'no_email',
17+
name: ef_notifications_localization.no_email,
18+
status: BADGES_STATUS.error,
19+
},
20+
POST_AUTHOR: {
21+
id: 'post_author',
22+
name: ef_notifications_localization.post_author,
23+
class: 'ef-badge-neutral',
24+
},
25+
AUTO_SUBSCRIBE: {
26+
id: 'auto_subscribed',
27+
name: ef_notifications_localization.auto_subscribed,
28+
class: 'ef-badge-neutral',
29+
},
30+
};
31+
32+
const getBadge = ( $el, badge ) => {
33+
const exists = $el.find( `[data-badge-id='${ badge.id }']` );
34+
35+
if ( exists.length ) {
36+
return jQuery( exists[ 0 ] );
37+
}
38+
return null;
39+
};
40+
41+
const badgeTemplate = badge => {
42+
let classes = 'ef-user-badge';
43+
44+
if ( BADGES_STATUS.error === badge.status ) {
45+
classes += ' ef-user-badge-error';
46+
}
47+
48+
return `<div class="${ classes }" data-badge-id="${ badge.id }">${ badge.name }</div>`;
49+
};
50+
51+
const addBadgeToEl = ( $el, badge ) => {
52+
if ( getBadge( $el, badge ) ) {
53+
return;
54+
}
55+
56+
$el.append( badgeTemplate( badge ) );
57+
};
58+
59+
const removeBadgeFromEl = ( $el, badge ) => {
60+
const existingBadge = getBadge( $el, badge );
61+
62+
if ( ! existingBadge ) {
63+
return;
64+
}
65+
66+
existingBadge.remove();
67+
};
68+
69+
jQuery( document ).ready( function( $ ) {
70+
jQuery( '#ef-post_following_users_box ul' ).listFilterizer();
71+
72+
const params = {
573
action: 'save_notifications',
6-
post_id: $('#post_ID').val(),
74+
post_id: jQuery( '#post_ID' ).val(),
775
};
8-
9-
var toggle_warning_badges = function( container, response ) {
10-
// Remove any existing badges
11-
if ( $( container ).siblings( 'span' ).length ) {
12-
$( container ).siblings( 'span' ).remove();
13-
}
14-
76+
77+
const toggleWarningBadges = function( container, { userHasNoAccess, userHasNoEmail } ) {
78+
const $el = jQuery( container ).parent();
79+
const $badgesContainer = $el.closest( 'li' ).find( '.ef-user-list-badges' );
80+
1581
// "No Access" If this user was flagged as not having access
16-
var user_has_no_access = response.data.subscribers_with_no_access.includes( parseInt( $( container ).val() ) );
17-
if ( user_has_no_access ) {
18-
var span = $( '<span />' ).addClass( 'post_following_list-no_access' );
19-
span.text( ef_notifications_localization.no_access );
20-
$( container ).parent().prepend( span );
21-
warning_background = true;
82+
if ( userHasNoAccess ) {
83+
addBadgeToEl( $badgesContainer, BADGES.NO_ACCESS );
84+
} else {
85+
removeBadgeFromEl( $badgesContainer, BADGES.NO_ACCESS );
2286
}
87+
2388
// "No Email" If this user was flagged as not having an email
24-
var user_has_no_email = response.data.subscribers_with_no_email.includes( parseInt( $( container ).val() ) );
25-
if ( user_has_no_email ) {
26-
var span = $( '<span />' ).addClass( 'post_following_list-no_email' );
27-
span.text( ef_notifications_localization.no_email );
28-
$( container ).parent().prepend( span );
29-
warning_background = true;
89+
if ( userHasNoEmail ) {
90+
addBadgeToEl( $badgesContainer, BADGES.NO_EMAIL );
91+
} else {
92+
removeBadgeFromEl( $badgesContainer, BADGES.NO_EMAIL );
3093
}
94+
};
95+
96+
const show_post_author_badge = () => {
97+
const $userListItemActions = jQuery( "label[for='ef-selected-users-" + ef_post_author_id + "'] .ef-user-list-badges" );
98+
addBadgeToEl( $userListItemActions, BADGES.POST_AUTHOR );
99+
};
100+
101+
/**
102+
* Until assets are correctly loaded on their respective pages, `ef_post_author_id` should
103+
* only have a value on a post page, so only execute `show_post_author_badge` if it has a value
104+
*/
105+
if ( 'undefined' !== typeof ef_post_author_id ) {
106+
show_post_author_badge();
107+
}
108+
109+
const showAutosubscribedBadge = () => {
110+
const $userListItemActions = jQuery( "label[for='ef-selected-users-" + ef_post_author_id + "'] .ef-user-list-badges" );
111+
addBadgeToEl( $userListItemActions, BADGES.AUTO_SUBSCRIBE );
112+
};
113+
114+
const disableAutosubscribeCheckbox = () => {
115+
jQuery( '#ef-selected-users-' + ef_post_author_id ).prop( 'disabled', true );
116+
};
117+
118+
if ( typeof ef_post_author_auto_subscribe !== 'undefined' ) {
119+
showAutosubscribedBadge();
120+
disableAutosubscribeCheckbox();
31121
}
32122

33-
$(document).on('click','.ef-post_following_list li input:checkbox, .ef-following_usergroups li input:checkbox', function() {
34-
var user_group_ids = [];
35-
var parent_this = $(this);
36-
params.ef_notifications_name = $(this).attr('name');
37-
params._nonce = $("#ef_notifications_nonce").val();
38-
39-
$(this)
40-
.parents('.ef-post_following_list')
41-
.find('input:checked')
42-
.map(function(){
43-
user_group_ids.push($(this).val());
44-
})
45-
46-
params.user_group_ids = user_group_ids;
47-
48-
$.ajax({
49-
type : 'POST',
50-
url : (ajaxurl) ? ajaxurl : wpListL10n.url,
51-
data : params,
52-
53-
success : function( response ) {
54-
// Reset background color (set during toggle_warning_badges if there's a warning)
55-
warning_background = false;
56-
123+
jQuery( document ).on( 'click', '.ef-post_following_list li input:checkbox, .ef-following_usergroups li input:checkbox', function() {
124+
const userGroupIds = [];
125+
const parentThis = jQuery( this );
126+
params.ef_notifications_name = jQuery( this ).attr( 'name' );
127+
params._nonce = jQuery( '#ef_notifications_nonce' ).val();
128+
129+
jQuery( this )
130+
.parents( '.ef-post_following_list' )
131+
.find( 'input:checked' )
132+
.map( function() {
133+
userGroupIds.push( jQuery( this ).val() );
134+
} );
135+
136+
params.user_group_ids = userGroupIds;
137+
138+
$.ajax( {
139+
type: 'POST',
140+
url: ( ajaxurl ) ? ajaxurl : wpListL10n.url,
141+
data: params,
142+
143+
success: function( response ) {
57144
// Toggle the warning badges ("No Access" and "No Email") to signal the user won't receive notifications
58145
if ( undefined !== response.data ) {
59-
toggle_warning_badges( $( parent_this ), response );
146+
const userHasNoAccess = response.data.subscribers_with_no_access.includes( parseInt( jQuery( container ).val(), 10 ) );
147+
const userHasNoEmail = response.data.subscribers_with_no_email.includes( parseInt( jQuery( container ).val(), 10 ) );
148+
149+
toggleWarningBadges( jQuery( parentThis ), { userHasNoAccess, userHasNoEmail } );
60150
}
151+
61152
// Green 40% by default
62-
var backgroundHighlightColor = "#90d296";
63-
if ( warning_background ) {
153+
let backgroundHighlightColor = '#90d296';
154+
155+
if ( userHasNoAccess || userHasNoEmail ) {
64156
// Red 40% if there's a warning
65-
var backgroundHighlightColor = "#ea8484";
157+
backgroundHighlightColor = "#ea8484";
66158
}
67-
var backgroundColor = parent_this.css( 'background-color' );
68-
$(parent_this.parents('li'))
69-
.animate( { 'backgroundColor': backgroundHighlightColor }, 200 )
70-
.animate( { 'backgroundColor':backgroundColor }, 200 );
71-
159+
160+
const backgroundColor = 'transparent';
161+
jQuery( parentThis.parents( 'label' ) )
162+
.animate( { backgroundColor: backgroundHighlightColor }, 200 )
163+
.animate( { backgroundColor: backgroundColor }, 200 );
164+
72165
// This event is used to show an updated list of who will be notified of editorial comments and status updates.
73-
$( '#ef-post_following_box' ).trigger( 'following_list_updated' );
166+
jQuery( '#ef-post_following_box' ).trigger( 'following_list_updated' );
167+
},
168+
error: function() {
169+
jQuery( '#ef-post_following_users_box' ).prev().append( ' <p class="error">There was an error. Please reload the page.</p>' );
74170
},
75-
error : function(r) {
76-
$('#ef-post_following_users_box').prev().append(' <p class="error">There was an error. Please reload the page.</p>');
77-
}
78-
});
79-
});
80-
});
171+
} );
172+
} );
173+
} );

modules/notifications/notifications.php

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -193,13 +193,15 @@ function enqueue_admin_scripts() {
193193
if ( $this->is_whitelisted_functional_view() ) {
194194
wp_enqueue_script( 'jquery-listfilterizer' );
195195
wp_enqueue_script( 'jquery-quicksearch' );
196-
wp_enqueue_script( 'edit-flow-notifications-js', $this->module_url . 'lib/notifications.js', array( 'jquery', 'jquery-listfilterizer', 'jquery-quicksearch' ), EDIT_FLOW_VERSION, true );
196+
wp_enqueue_script( 'edit-flow-notifications-js', EDIT_FLOW_URL . 'modules/dist/notifications.build.js', array( 'jquery', 'jquery-listfilterizer', 'jquery-quicksearch' ), EDIT_FLOW_VERSION, true );
197197
wp_localize_script(
198198
'edit-flow-notifications-js',
199199
'ef_notifications_localization',
200200
array(
201201
'no_access' => esc_html__( 'No Access', 'edit-flow' ),
202-
'no_email' => esc_html__( 'No Email', 'edit-flow' )
202+
'no_email' => esc_html__( 'No Email', 'edit-flow' ),
203+
'post_author' => esc_html__( 'Post Author', 'edit-flow' ),
204+
'auto_subscribed' => esc_html__( 'Auto-Subscribed', 'edit-flow' )
203205
)
204206
);
205207
}
@@ -343,6 +345,17 @@ function notifications_meta_box() {
343345
<h4><?php _e( 'Users', 'edit-flow' ); ?></h4>
344346
<?php
345347
$followers = $this->get_following_users( $post->ID, 'id' );
348+
349+
$post_author_is_follower = ! empty( in_array( $post->post_author, $followers ) ) ? 'true' : 'false' ;
350+
$post_author_auto_subscribe = apply_filters( 'ef_notification_auto_subscribe_post_author', true, 'subscription_action' ) ? 'true' : 'false' ;
351+
352+
wp_add_inline_script( 'edit-flow-notifications-js',
353+
'var ef_post_author_id = ' . wp_json_encode( $post->post_author ) . '; ' .
354+
'var ef_post_author_is_follower = ' . $post_author_is_follower . '; ' .
355+
'var ef_post_author_auto_subscribe = ' . $post_author_auto_subscribe . ';',
356+
'before'
357+
);
358+
346359
$select_form_args = array(
347360
'list_class' => 'ef-post_following_list',
348361
);
@@ -384,14 +397,14 @@ function display_subscriber_warning_badges( $user_id, $checked ) {
384397
// Add No Access span if they won't be notified
385398
if (! $this->user_can_be_notified( get_user_by( 'id', $user_id ), $post->ID )) {
386399
// span.post_following_list-no_access is also added in notifications.js after AJAX that ticks/unticks a user
387-
echo '<span class="post_following_list-no_access">' . esc_html__( 'No Access', 'edit-flow' ) . '</span>';
400+
echo '<div class="ef-user-badge ef-user-badge-error" data-badge-id="no_access">' . esc_html__( 'No Access', 'edit-flow' ) . '</div>';
388401
}
389402

390403
// Add No Email span if they have no email
391404
$user_object = get_user_by( 'id', $user_id );
392405
if ( !is_a( $user_object, 'WP_User') OR empty( $user_object->user_email ) ) {
393406
// span.post_following_list-no_email is also added in notifications.js after AJAX that ticks/unticks a user
394-
echo '<span class="post_following_list-no_email">' . esc_html__( 'No Email', 'edit-flow' ) . '</span>';
407+
echo '<div class="ef-user-badge ef-user-badge-error" data-badge-id="no_email">' . esc_html__( 'No Email', 'edit-flow' ) . '</div>';
395408
}
396409
}
397410

modules/user-groups/lib/user-groups.css

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
}
44

55
.ef-post_following_list li {
6-
padding: 10px 5px 5px 5px;
76
margin: 0;
87
border-bottom: 1px solid #ccc;
98
}
10-
.ef-post_following_list li:hover {
11-
background: #EAF2FA;
12-
}
9+
10+
.ef-post_following_list li:hover {
11+
background: #EAF2FA;
12+
}
13+
1314
.ef-post_following_list li input {
1415
float: right;
1516
}

0 commit comments

Comments
 (0)