topic page - actions

[rgilman]

In the lower right corner of the post are a set of links for actions the user can take:

This set is for an admin/moderator. A regular user would have edit and reply for their own and just reply for a post by another user.

• The plan described in Forum Thread Page was to convert all of these links to friendly icons and to add a "like" action. I'd like use to follow through on that plan. For this styling task, we just need to convert to icons. Adding the "like" action will come later (with the help of a plugin).

• I chose this post because it illustrates how the action block follows the bottom of the text. It would look better, at least to my eye, if it followed the bottom of the post panel as a whole. For this purpose and for the mobile design of this section, would it help to look at using CSS Grid for the layout of these post panels?

[iangilman]

Sounds like this task may involve some actual changes to the HTML. I don't know that CSS grid would be necessary for this, but it might be helpful for the mobile design. Let's not pile too many things onto the same issue, though. :-)

[rgilman]

Feel free to either make or suggest HTML changes. Again, your call on the pace.

[iangilman]

I took a little look at what's involved in moving the actions down to the bottom of the post (this only applies to short posts like the one in the screenshot; long posts already do the right thing). It seems to me the thing to do is to add something like this to .bbp-meta:

position: absolute;
bottom: 0;
right: 0;

In order for this to be based on the correct parent, you'll also need to add position: relative; to .bbp-reply-content.

[rgilman]

I'm able to replace the text with an icon using the following CSS:

#bbpress-forums div.bbp-reply-content .bbp-topic-edit-link {
    background-image: url(/wp-content/themes/bfcom/assets/images/home.svg);
    background-repeat: no-repeat;
    /* padding-left: 30px; */
    /* background-position: 3px 4px; */
    width: 30px;
    margin: 0 5px;
    overflow: hidden;
    color: transparent;
}

Of course, it's the wrong icon so this is just proof of concept. There may well be further refinements to the CSS that would be worthwhile. I just borrowed this from the top nav CSS and tweaked it a bit.

There would need to be a separate icon and separate CSS for each .bbp-topic-[action]-link.

The list of actions is edit, close, stick, merge, move, split, trash, spam and reply. We probably won't be using spam. We will be adding like but that's for another day.

For now, creating a good CSS pattern for just one of these is likely sufficient. I'm hope that Alexander, the designer I meet in AZ, can help us come up with a good set of icons.

I'd like this to stay assigned to @DavidScottBernstein with @iangilman's good guidance. I don't plan on committing the test CSS listed above.

[DavidScottBernstein]

Yes, I can confirm that this does replace the menu item text with an icon. Even though I don't know why it's working I think I know enough now to make progress on the task. Thank you, @rgilman.

[iangilman]

Yeah, I'm not actually entirely sure why it's working either. You need the 2 background lines to introduce the image, and the width to narrow it so it's just the size of the image. I'm not sure how the text is getting hidden... maybe the transparent color, or maybe the overflow hidden. Might be fun to experiment so you narrow it down to just what's necessary.

Anyway, glad there is a way forward!

[DavidScottBernstein]

@iangilman I've been making good progress on the actions menu thanks to @rgilman's approach of using the background image of menu items to display icons.

These items could really use tooltips. Researching how to do this I noticed that some action menu items have a title (like recycle) that shows up as a tooltip when the mouse hovers over it.

However, I can't seem to access the title for the anchor. For example, here are the selectors I use to change the background image for Ian's reply to the first post on the page https://dev.bfcom.local/groups/bfnet-web-team/forum/topic/common-ground/

bbpress-forums div.bbp-reply-content .bbp-reply-to-link {...

With these selectors I can change the background image, make the menu text transparent, etc. but I haven't been able to access the anchor's title. I'll research selector tutorials but if you have any suggestions then please share them.

The other area I could use help on with this task is to remove 'Spam' from the actions menu. Since @rgilman has been doing a lot of work with removing submenu items perhaps he can help with this so I can move on to other tasks.

Also, I think @rgilman just resolved the merge conflicts on style.css. I might need some guidance if there's more for me to do on that.

Let me know if you want to zoom on any of this.

David.

[rgilman]

Hi @DavidScottBernstein, tooltips sound like a great idea. If this can't be done via CSS, we can add a filter function to modify the output of bbp_reply_admin_links() (see bfcom/buddypress/loop-single-reply.php line 48). This will allow us to add the tooltips and remove the 'Spam' item. In the meantime, you might try removing 'Spam' by targeting that item with a display:none.

[DavidScottBernstein]

Hi @rgilman, While 'display: none' does remove the menu item text, it doesn't remove the spacing or the '|' divider. I did a proof-of-concept for filtering out submenu items but it seems to me that doing something similar with action menu items would involve changing bbp_reply_admin_links() for action menu items rather than changing how I call it. As I read it, bbp_reply_admin_links() outputs the entire action menu.

Submenu items can be removed using something like $bp->bp_nav['events'] = false;. Can a similar approach work with action menu items?

For tooltips, there's a "roll-your-own" approach that I might try but it looks like this functionality is already built in for anchor titles if I can add a title to the anchor.

David.

[rgilman]

@DavidScottBernstein, I'm not sure we are meaning quite the same thing by 'filter'. I'm using 'filter' in the specific WordPress sense. Let me dive into bbp_reply_admin_links() to illustrate and perhaps help us figure out a path forward. Let me know if this is helpful or if I'm just covering ground you already know.

bbp_reply_admin_links() is one of the functions in /wp-content/plugins/buddypress/includes/replies/template.php. I recommend you take a look at that (long) file. The section we want starts on line 1771. bbp_reply_admin_links() simply echos bbp_get_reply_admin_links() (see line 1782), which is where the real action is (starts with a comment block at line 1784). At the end of bbp_get_reply_admin_links() (line 1869) is a line that looks like this: return apply_filters( 'bbp_get_reply_admin_links', $retval, $r, $args );

This is known as a filter hook in WordPress. It's saying that we can create a function (that will go in /functions/bfc-functions.php) to manipulate $retval [i.e. the return value] before it is actually returned by bbp_reply_admin_links().

The our functions would look like:

function bfc_filter_bbp_reply_admin_links( $array, $r_id ) { 
    // make filter magic happen here... 
    return $array; 
}; 

// add the filter 
add_filter( 'bbp_get_reply_admin_links', 'bfc_filter_bbp_reply_admin_links', 10, 2 ); 

$retval is the full HTML output and will look something like this:

<span class="bbp-admin-links"><a href="https://dev.bfcom.local/groups/bfnet-web-team/forum/reply/74/edit/" class="bbp-reply-edit-link">Edit</a> | 
<a href="https://dev.bfcom.local/groups/bfnet-web-team/forum/reply/74/edit/?action=move&amp;reply_id=74" title="Move this reply" class="bbp-reply-move-link">Move</a> | 
<a href="https://dev.bfcom.local/groups/bfnet-web-team/forum/topic/common-ground/edit/?action=split&amp;reply_id=74" title="Split the topic from this reply" class="bbp-topic-split-link">Split</a> | 
<a title="Move this item to the Trash" href="/groups/bfnet-web-team/forum/topic/common-ground/?action=bbp_toggle_reply_trash&amp;sub_action=trash&amp;reply_id=74&amp;_wpnonce=68b47e6711" class="bbp-reply-trash-link">Trash</a> | 
<a href="/groups/bfnet-web-team/forum/topic/common-ground/?action=bbp_toggle_reply_spam&amp;reply_id=74&amp;_wpnonce=fc239b103e" class="bbp-reply-spam-link">Spam</a> | 
<a href="/groups/bfnet-web-team/forum/topic/common-ground/?bbp_reply_to=74&amp;_wpnonce=f30927bdb2#new-post" class="bbp-reply-to-link">Reply</a></span>

With string functions we can modify this and use the hook to send the modified value back.

If you're up for getting into the php, you could explore writing a str_replace() that would look for >Edit< and replace it with title="[tooltip text]">Edit<

If not, we can leave this for later.

Let me know if this is helpful.

[DavidScottBernstein]

@rgilman Yes, this is very helpful and it makes sense. I'll play with it over the next few days and let you know if I have questions. Thank you!

[rgilman]

@DavidScottBernstein, I'm glad you found it helpful. Let me encourage you to also take a look at Working with the BFCom Stack – a doc I started a month ago. It's intended to provide some orientation to this kind of WordPress PHP work. It's not finished but if you find it helpful, that might inspire me to complete at least a first draft.

[DavidScottBernstein]

@rgilman Yes, Working with the BFCom Stack is very helpful as are the links you've included to other resources. Thank you.

[iangilman]

Looks like we're on the right track here! And yes, I'm pretty sure there's no way to add a tooltip via CSS, so doing it via PHP is the correct approach.