Skip to:
Content

bbPress.org

Opened 10 years ago

Last modified 18 months ago

#2692 new defect (bug)

Add CSS class for user roles in topics and replies

Reported by: netweb's profile netweb Owned by:
Milestone: 2.7 Priority: normal
Severity: normal Version:
Component: General Keywords: good-first-bug has-patch
Cc: doug@…

Description

We should add a CSS class for user roles styling in topic and reply templates in bbp_get_reply_author_role() and bbp_get_topic_author_role()

e.g. <div class="bbp-author-role bbp-role-keymaster">Keymaster</div>

  • src/includes/replies/template.php

     
    14301430         */
    14311431        function bbp_get_reply_author_role( $args = array() ) {
    14321432
     1433                $css_role = strtolower( bbp_get_user_display_role( bbp_get_reply_author_id( $reply_id ) ) );
     1434
    14331435                // Parse arguments against default values
    14341436                $r = bbp_parse_args( $args, array(
    14351437                        'reply_id' => 0,
    14361438                        'class'    => false,
    1437                         'before'   => '<div class="bbp-author-role">',
     1439                        'before'   => '<div class="bbp-author-role bbp-role-' . $css_role . '">',
    14381440                        'after'    => '</div>'
    14391441                ), 'get_reply_author_role' );
    14401442

Attachments (1)

2692.diff (729 bytes) - added by netweb 9 years ago.

Download all attachments as: .zip

Change History (18)

#1 @netweb
10 years ago

  • Milestone changed from Awaiting Review to 2.6

@netweb
9 years ago

#2 @netweb
9 years ago

  • Keywords has-patch commit added; needs-patch removed

#3 @netweb
9 years ago

#2737 was marked as a duplicate.

#4 follow-up: @douglsmith
9 years ago

  • Cc doug@… added

Wouldn't we want this role class applied up in the div for the whole post rather than on the role label? That way it could be used to target any aspect of the post that we might want to style differently based on role.

A use case for me would be to add a badge to the avatars based on role or to color the posts of admins differently.

#5 in reply to: ↑ 4 @netweb
9 years ago

Replying to douglsmith:

Wouldn't we want this role class applied up in the div for the whole post rather than on the role label? That way it could be used to target any aspect of the post that we might want to style differently based on role.

A use case for me would be to add a badge to the avatars based on role or to color the posts of admins differently.

I'd say yes and no, I think there is probably a use case for both and even more scenarios:

This is the full source of an entire reply:

<li>
    <div id="post-178" class="bbp-reply-header">
        <div class="bbp-meta">
            <span class="bbp-reply-post-date">March 20, 2015 at 11:58 am</span>
            <a href="http://src.wordpress-develop.dev/forums/topic/threaded-replies/#post-178" class="bbp-reply-permalink">#178</a>
            <span class="bbp-admin-links"><a href="http://src.wordpress-develop.dev/forums/reply/178/edit/" class="bbp-reply-edit-link">Edit</a> | <a href="http://src.wordpress-develop.dev/forums/reply/178/edit/?action=move&amp;reply_id=178" title="Move this reply" class="bbp-reply-move-link">Move</a> | <a href="http://src.wordpress-develop.dev/forums/topic/threaded-replies/edit/?action=split&amp;reply_id=178" title="Split the topic from this reply" class="bbp-topic-split-link">Split</a> | <a title="Move this item to the Trash" href="/forums/topic/threaded-replies/?action=bbp_toggle_reply_trash&amp;sub_action=trash&amp;reply_id=178&amp;_wpnonce=cf6f4aa4a8" class="bbp-reply-trash-link">Trash</a> | <a href="/forums/topic/threaded-replies/?action=bbp_toggle_reply_spam&amp;reply_id=178&amp;_wpnonce=e05d5baed8" class="bbp-reply-spam-link">Spam</a> | <a href="/forums/topic/threaded-replies/?action=bbp_toggle_reply_approve&amp;reply_id=178&amp;_wpnonce=ca48da155b" class="bbp-reply-approve-link">Unapprove</a> | <a href="/forums/topic/threaded-replies/?bbp_reply_to=178&amp;_wpnonce=4fada0db94#new-post" class="bbp-reply-to-link" onclick="return addReply.moveForm('post-178','178','new-reply-177','177');">Reply</a></span>
        </div>
        <!-- .bbp-meta -->
    </div>
    <!-- #post-178 -->
    <div class="even bbp-parent-forum-4 bbp-parent-topic-177 bbp-reply-position-2 user-id-1 topic-author post-178 reply type-reply status-publish hentry">
        <div class="bbp-reply-author">
            <a href="http://src.wordpress-develop.dev/forums/users/admin/" title="View admin's profile" class="bbp-author-avatar" rel="nofollow"><img alt="" src="http://0.gravatar.com/avatar/06e92fdf4a9a63441dff65945114b47f?s=80&amp;d=mm&amp;r=g" srcset="http://0.gravatar.com/avatar/06e92fdf4a9a63441dff65945114b47f?s=160&amp;d=mm&amp;r=g 2x" class="avatar avatar-80 photo" height="80" width="80"></a>
            <br><a href="http://src.wordpress-develop.dev/forums/users/admin/" title="View admin's profile" class="bbp-author-name" rel="nofollow">admin</a>
            <br>
            <div class="bbp-author-role">Keymaster</div>
            <div class="bbp-reply-ip"><span class="bbp-author-ip">(192.168.50.1)</span></div>
        </div>
        <!-- .bbp-reply-author -->
        <div class="bbp-reply-content">
            <p>:relieved: :relieved: </p>
        </div>
        <!-- .bbp-reply-content -->
    </div>
    <!-- .reply -->
</li>

The current proposed patch in this ticket add's a role class to the following:

<div class="bbp-author-role">Keymaster</div>

To become for example:

<div class="bbp-author-role bbp-role-keymaster">Keymaster</div>

We can already style on the immediate <div> above with per the example above using user-id-1 or topic-author, but not based on user roles, I also see a use case where being able to style the reply header based on author or role would also be convenient:

<div id="post-178" class="bbp-reply-header">

#6 @douglsmith
9 years ago

I'm currently using the user-id-* styles to put a badge on keymaster's avatars.That works but it requires a css rule for each each person and it requires updating the css if any of those people change. Having a role class at a higher level would make that much cleaner.

I also see a use case where being able to style the reply header based on author or role would also be convenient

That makes me wonder if the user-id-* and bbl-role-* styles should be up in the <li> tag since they describe everything below. (I suppose that's true of the id="post-*" too.)

#7 @netweb
9 years ago

The CSS can be filtered using bbp_get_forum_class(), bbp_get_topic_class() and bbp_get_reply_class() and are intended to replicate WP Core https://codex.wordpress.org/Function_Reference/post_class

In this case of replies, this is the applicable line:

<div class="even bbp-parent-forum-4 bbp-parent-topic-177 bbp-reply-position-2 user-id-1 topic-author post-178 reply type-reply status-publish hentry">

So....

function my_reply_class($classes) {
	$classes[] = 'test-class';
	return $classes;
}
add_filter( 'bbp_get_reply_class','my_reply_class' );

Using bbp_get_user_role() and bbp_get_reply_author_id() you should be able to achieve what your currently doing with user-id-* styles without having to have as much manual maintenance of people come and go.

#8 @douglsmith
9 years ago

Thanks for the pointers. That's great.

#9 @netweb
9 years ago

  • Keywords needs-patch added; has-patch commit removed
  • Milestone changed from 2.6 to 2.7

Patch 2692.diff​ isn't quite right, also needs the equivalent for topics, punting to 2.7

This ticket was mentioned in PR #6 on bbpress/bbPress by robinwpdeveloper.


20 months ago
#10

  • Keywords has-patch added; needs-patch removed

Fixes 2692

#11 follow-up: @robinwpdeveloper
20 months ago

@netweb I have made changes as per your suggestion. Let me know if I am missing anything.

Last edited 20 months ago by robinwpdeveloper (previous) (diff)

robinwpdeveloper commented on PR #6:


20 months ago
#12

@JJJ can you please review this pull request.
This is my first contribution to bbPress. :)

Let me know if I am missing anything.

robinwpdeveloper commented on PR #6:


20 months ago
#13

Thanks @JJJ
I have made changes accordingly as you suggested.
Let me know if any more changes is needed.

#14 in reply to: ↑ 11 @rudlinkon
20 months ago

Replying to robinwpdeveloper:

@netweb I have made changes as per your suggestion. Let me know if I am missing anything.

Thanks for your changes. I have added a new suggestion please check it on the PR

#15 follow-up: @robinwpdeveloper
20 months ago

Thanks @rudlinkon
Suggested changes are made and pushed.

#16 in reply to: ↑ 15 @rudlinkon
20 months ago

Replying to robinwpdeveloper:

Thanks @rudlinkon
Suggested changes are made and pushed.

Thank you. LGTM.

@robinwpdeveloper commented on PR #6:


18 months ago
#17

Thanks @mikachan for the review :)
Requested changes are made and pushed.

I think this PR is ready to commit.

Note: See TracTickets for help on using tickets.