Skip to content

Update notification UI #563

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.

Sign up for GitHub

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

Open
cojennin wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Update notification UI #563

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*.build.js
11 changes: 8 additions & 3 deletions common/php/class-module.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -483,15 +483,20 @@ function users_select_form( $selected = null, $args = null ) {
// Add a class to checkbox of current user so we know not to add them in notified list during notifiedMessage() js function
$current_user_class = ( get_current_user_id() == $user->ID ) ? 'class="post_following_list-current_user" ' : '';
?>
<li>
<li class="ef-user-list-item">
<label for="<?php echo esc_attr( $input_id .'-'. $user->ID ) ?>">
<div class="ef-user-subscribe-actions">
<?php do_action( 'ef_user_subscribe_actions', $user->ID, $checked ) ?>
<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; ?> />
</div>

<span class="ef-user_displayname"><?php echo esc_html( $user->display_name ); ?></span>
<span class="ef-user_useremail"><?php echo esc_html( $user->user_email ); ?></span>
<div class="ef-user-list_info">
<span class="ef-user_displayname"><?php echo esc_html( $user->display_name ); ?></span>
<span class="ef-user_useremail"><?php echo esc_html( $user->user_email ); ?></span>
<div class="ef-user-list-badges">
<?php do_action( 'ef_user_subscribe_actions', $user->ID, $checked ); ?>
</div>
</div>
</label>
</li>
<?php endforeach; ?>
Expand Down
2 changes: 2 additions & 0 deletions modules/notifications/dist/notifications.build.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 19 additions & 11 deletions modules/notifications/lib/notifications.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,17 @@
}

.ef-post_following_list li {
border-bottom: 1px solid #ccc;
}

.ef-post_following_list li label {
min-height: 76px;
padding: 10px 5px 5px 5px;
margin: 0;
border-bottom: 1px solid #ccc;
min-height: 36px;
display: block;
}

.ef-post_following_list li:hover {
.ef-post_following_list li label:hover {
background: #EAF2FA;
}

Expand All @@ -35,17 +39,21 @@
font-size: 12px;
}

.ef-post_following_list li .ef-user-subscribe-actions {
float: right;
margin-top: 5px;
.ef-post_following_list li .ef-user-list-badges {
margin-top: 10px;
}

.ef-post_following_list li .ef-user-subscribe-actions .post_following_list-no_email,
.ef-post_following_list li .ef-user-subscribe-actions .post_following_list-no_access {
.ef-post_following_list li .ef-user-badge {
margin-right: 10px;
border: solid 2px #DC3232;
color: #DC3232;
border: solid 2px #b8b8b8;
color: #b8b8b8;
padding: 4px;
display: inline-block;
}

.ef-post_following_list li .ef-user-badge-error {
color: #DC3232;
border: solid 2px #DC3232;
}

#ef-post_following_box {
Expand Down Expand Up @@ -107,4 +115,4 @@

#ef-usergroup-users h4 {
margin-top: 0;
}
}
221 changes: 156 additions & 65 deletions modules/notifications/lib/notifications.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,171 @@
jQuery(document).ready(function($) {
$('#ef-post_following_users_box ul').listFilterizer();
/* global wp, jQuery, ajaxurl, ef_notifications_localization, document, wpListL10n, ef_post_author_id */

var params = {
const BADGES_STATUS = {
error: 'error',
warning: 'warning',
success: 'success',
};

const BADGES = {
NO_ACCESS: {
id: 'no_access',
name: ef_notifications_localization.no_access,
status: BADGES_STATUS.error,
},
NO_EMAIL: {
id: 'no_email',
name: ef_notifications_localization.no_email,
status: BADGES_STATUS.error,
},
POST_AUTHOR: {
id: 'post_author',
name: ef_notifications_localization.post_author,
class: 'ef-badge-neutral',
},
AUTO_SUBSCRIBE: {
id: 'auto_subscribed',
name: ef_notifications_localization.auto_subscribed,
class: 'ef-badge-neutral',
},
};

const getBadge = ( $el, badge ) => {
const exists = $el.find( `[data-badge-id='${ badge.id }']` );

if ( exists.length ) {
return jQuery( exists[ 0 ] );
}
return null;
};

const badgeTemplate = badge => {
let classes = 'ef-user-badge';

if ( BADGES_STATUS.error === badge.status ) {
classes += ' ef-user-badge-error';
}

return `<div class="${ classes }" data-badge-id="${ badge.id }">${ badge.name }</div>`;
};

const addBadgeToEl = ( $el, badge ) => {
if ( getBadge( $el, badge ) ) {
return;
}

$el.append( badgeTemplate( badge ) );
};

const removeBadgeFromEl = ( $el, badge ) => {
const existingBadge = getBadge( $el, badge );

if ( ! existingBadge ) {
return;
}

existingBadge.remove();
};

jQuery( document ).ready( function( $ ) {
jQuery( '#ef-post_following_users_box ul' ).listFilterizer();

const params = {
action: 'save_notifications',
post_id: $('#post_ID').val(),
post_id: jQuery( '#post_ID' ).val(),
};

var toggle_warning_badges = function( container, response ) {
// Remove any existing badges
if ( $( container ).siblings( 'span' ).length ) {
$( container ).siblings( 'span' ).remove();
}


const toggleWarningBadges = function( container, { userHasNoAccess, userHasNoEmail } ) {
const $el = jQuery( container ).parent();
const $badgesContainer = $el.closest( 'li' ).find( '.ef-user-list-badges' );

// "No Access" If this user was flagged as not having access
var user_has_no_access = response.data.subscribers_with_no_access.includes( parseInt( $( container ).val() ) );
if ( user_has_no_access ) {
var span = $( '<span />' ).addClass( 'post_following_list-no_access' );
span.text( ef_notifications_localization.no_access );
$( container ).parent().prepend( span );
warning_background = true;
if ( userHasNoAccess ) {
addBadgeToEl( $badgesContainer, BADGES.NO_ACCESS );
} else {
removeBadgeFromEl( $badgesContainer, BADGES.NO_ACCESS );
}

// "No Email" If this user was flagged as not having an email
var user_has_no_email = response.data.subscribers_with_no_email.includes( parseInt( $( container ).val() ) );
if ( user_has_no_email ) {
var span = $( '<span />' ).addClass( 'post_following_list-no_email' );
span.text( ef_notifications_localization.no_email );
$( container ).parent().prepend( span );
warning_background = true;
if ( userHasNoEmail ) {
addBadgeToEl( $badgesContainer, BADGES.NO_EMAIL );
} else {
removeBadgeFromEl( $badgesContainer, BADGES.NO_EMAIL );
}
};

const show_post_author_badge = () => {
const $userListItemActions = jQuery( "label[for='ef-selected-users-" + ef_post_author_id + "'] .ef-user-list-badges" );
addBadgeToEl( $userListItemActions, BADGES.POST_AUTHOR );
};

/**
* Until assets are correctly loaded on their respective pages, `ef_post_author_id` should
* only have a value on a post page, so only execute `show_post_author_badge` if it has a value
*/
if ( 'undefined' !== typeof ef_post_author_id ) {
show_post_author_badge();
}

$(document).on('click','.ef-post_following_list li input:checkbox, .ef-following_usergroups li input:checkbox', function() {
var user_group_ids = [];
var parent_this = $(this);
params.ef_notifications_name = $(this).attr('name');
params._nonce = $("#ef_notifications_nonce").val();

$(this)
.parents('.ef-post_following_list')
.find('input:checked')
.map(function(){
user_group_ids.push($(this).val());
})

params.user_group_ids = user_group_ids;

$.ajax({
type : 'POST',
url : (ajaxurl) ? ajaxurl : wpListL10n.url,
data : params,

success : function( response ) {
// Reset background color (set during toggle_warning_badges if there's a warning)
warning_background = false;

const showAutosubscribedBadge = () => {
const $userListItemActions = jQuery( "label[for='ef-selected-users-" + ef_post_author_id + "'] .ef-user-list-badges" );
addBadgeToEl( $userListItemActions, BADGES.AUTO_SUBSCRIBE );
};

const disableAutosubscribeCheckbox = () => {
jQuery( '#ef-selected-users-' + ef_post_author_id ).prop( 'disabled', true );
};

if ( typeof ef_post_author_auto_subscribe !== 'undefined' ) {
showAutosubscribedBadge();
disableAutosubscribeCheckbox();
}

jQuery( document ).on( 'click', '.ef-post_following_list li input:checkbox, .ef-following_usergroups li input:checkbox', function() {
const userGroupIds = [];
const checkbox = jQuery( this );
params.ef_notifications_name = jQuery( this ).attr( 'name' );
params._nonce = jQuery( '#ef_notifications_nonce' ).val();

jQuery( this )
.parents( '.ef-post_following_list' )
.find( 'input:checked' )
.map( function() {
userGroupIds.push( jQuery( this ).val() );
} );

params.user_group_ids = userGroupIds;

$.ajax( {
type: 'POST',
url: ( ajaxurl ) ? ajaxurl : wpListL10n.url,
data: params,

success: function( response ) {
// Toggle the warning badges ("No Access" and "No Email") to signal the user won't receive notifications
if ( undefined !== response.data ) {
toggle_warning_badges( $( parent_this ), response );
}
const userHasNoAccess = response.data.subscribers_with_no_access.includes( parseInt( jQuery( checkbox ).val(), 10 ) );
const userHasNoEmail = response.data.subscribers_with_no_email.includes( parseInt( jQuery( checkbox ).val(), 10 ) );

toggleWarningBadges( jQuery( checkbox ), { userHasNoAccess, userHasNoEmail } );

// Green 40% by default
var backgroundHighlightColor = "#90d296";
if ( warning_background ) {
let backgroundHighlightColor = '#90d296';

if ( userHasNoAccess || userHasNoEmail ) {
// Red 40% if there's a warning
var backgroundHighlightColor = "#ea8484";
backgroundHighlightColor = '#ea8484';
}
var backgroundColor = parent_this.css( 'background-color' );
$(parent_this.parents('li'))
.animate( { 'backgroundColor': backgroundHighlightColor }, 200 )
.animate( { 'backgroundColor':backgroundColor }, 200 );


const backgroundColor = 'transparent';
jQuery( checkbox.parents( 'label' ) )
.animate( { backgroundColor: backgroundHighlightColor }, 200 )
.animate( { backgroundColor: backgroundColor }, 200 );

// This event is used to show an updated list of who will be notified of editorial comments and status updates.
$( '#ef-post_following_box' ).trigger( 'following_list_updated' );
jQuery( '#ef-post_following_box' ).trigger( 'following_list_updated' );
},
error: function() {
jQuery( '#ef-post_following_users_box' ).prev().append( ' <p class="error">There was an error. Please reload the page.</p>' );
},
error : function(r) {
$('#ef-post_following_users_box').prev().append(' <p class="error">There was an error. Please reload the page.</p>');
}
});
});
});
} );
} );
} );
22 changes: 18 additions & 4 deletions modules/notifications/notifications.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,13 +193,15 @@ function enqueue_admin_scripts() {
if ( $this->is_whitelisted_functional_view() ) {
wp_enqueue_script( 'jquery-listfilterizer' );
wp_enqueue_script( 'jquery-quicksearch' );
wp_enqueue_script( 'edit-flow-notifications-js', $this->module_url . 'lib/notifications.js', array( 'jquery', 'jquery-listfilterizer', 'jquery-quicksearch' ), EDIT_FLOW_VERSION, true );
wp_enqueue_script( 'edit-flow-notifications-js', EDIT_FLOW_URL . 'modules/notifications/dist/notifications.build.js', array( 'jquery', 'jquery-listfilterizer', 'jquery-quicksearch' ), EDIT_FLOW_VERSION, true );
wp_localize_script(
'edit-flow-notifications-js',
'ef_notifications_localization',
array(
'no_access' => esc_html__( 'No Access', 'edit-flow' ),
'no_email' => esc_html__( 'No Email', 'edit-flow' )
'no_email' => esc_html__( 'No Email', 'edit-flow' ),
'post_author' => esc_html__( 'Post Author', 'edit-flow' ),
'auto_subscribed' => esc_html__( 'Auto-Subscribed', 'edit-flow' ),
)
);
}
Expand Down Expand Up @@ -343,6 +345,18 @@ function notifications_meta_box() {
<h4><?php _e( 'Users', 'edit-flow' ); ?></h4>
<?php
$followers = $this->get_following_users( $post->ID, 'id' );

$post_author_is_follower = ! empty( in_array( $post->post_author, $followers ) ) ? 'true' : 'false';
$post_author_auto_subscribe = apply_filters( 'ef_notification_auto_subscribe_post_author', true, 'subscription_action' ) ? 'true' : 'false';

wp_add_inline_script(
'edit-flow-notifications-js',
'var ef_post_author_id = ' . wp_json_encode( $post->post_author ) . '; ' .
'var ef_post_author_is_follower = ' . wp_json_encode( $post_author_is_follower ) . '; ' .
'var ef_post_author_auto_subscribe = ' . wp_json_encode( $post_author_auto_subscribe ) . ';',
'before'
);

$select_form_args = array(
'list_class' => 'ef-post_following_list',
);
Expand Down Expand Up @@ -384,14 +398,14 @@ function display_subscriber_warning_badges( $user_id, $checked ) {
// Add No Access span if they won't be notified
if (! $this->user_can_be_notified( get_user_by( 'id', $user_id ), $post->ID )) {
// span.post_following_list-no_access is also added in notifications.js after AJAX that ticks/unticks a user
echo '<span class="post_following_list-no_access">' . esc_html__( 'No Access', 'edit-flow' ) . '</span>';
echo '<div class="ef-user-badge ef-user-badge-error" data-badge-id="no_access">' . esc_html__( 'No Access', 'edit-flow' ) . '</div>';
}

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

Expand Down
9 changes: 5 additions & 4 deletions modules/user-groups/lib/user-groups.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@
}

.ef-post_following_list li {
padding: 10px 5px 5px 5px;
margin: 0;
border-bottom: 1px solid #ccc;
}
.ef-post_following_list li:hover {
background: #EAF2FA;
}

.ef-post_following_list li:hover {
background: #EAF2FA;
}

.ef-post_following_list li input {
float: right;
}
Expand Down
Loading