BP Nouveau: Backbone views tasks

[imath]

The Activity post form, Group Invites and Messages are using Backbone views. I suggest to use this ticket to list tasks that still needs to be done for these. Let's try to achieve most of them before 3.0 :) @mercime already alerted on some parts :

• (re)Test mobile devices and eventually improve the layout (eg: pagination in Group Invites)
• Avoid empty links. ✅ [12059]
• Add (more) inline documentation.
• Avoid including html tags into Ajax reply for the feedback messages ✅ [12058] & [12060]

Don't hesitate to add the ones you think are missing ;)

[imath]

In 7794.messagesUI.feedback.patch i suggest to create a new JS template for Messages UI feedbacks to avoid including common html tags to feedback messages in Ajax replies.

[imath]

7794.groupInvites.feedback.patch adds a new JS template for Group invites UI feedbacks to avoid including common html tags to feedback messages in Ajax replies.

[imath]

In 12058:

BP Nouveau: use a JS Template for the feedbacks of the Messages UI

Using a JS template avoids to transport common HTML tags inside the Ajax replies.

See #7794

[imath]

In 12059:

BP Nouveau: avoid empty links in the Group Invites UI

See #7794

[imath]

In 12060:

BP Nouveau: use a JS Template for the Group Invites UI feedbacks

Using a JS template avoids to transport common HTML tags inside the Ajax replies.

See #7794

[hnla]

@imath in 12059 why on earth have you removed the img alt attr? it's a mandatory attr and must always be described for this element! title tags are being avoided this is why mercime ran up the bp-tooltips.

[imath]

Oh my god !!! Why on earth !! I’m so ashamed. I’ll put it back. I’m a human I make mistakes, please forgive me 😊

[imath]

In 12065:

Group Invites: put back the alt attribute wrongly removed from images

Props hnla

See #7794

[hnla]

can we be less human and more machine code like then ;) Apologies if I seemed terse '??' but alt attr essential :) thanks for fix.

[imath]

you're welcome, np my bad ☺️

[mercime]

@imath in bp-nouveau/buddypress/common/js-templates/invites/index.php please remove the title attribute from <a href="#uninvite-user-{{data.id}}" title="{{data.name}}">
Edit - Btw, can't find where this is used on quick scan. If there's no username text after the avatar based on this code, we might need to add class="bp-tooltip" and data-bp-tooltip attribute to the link.

Can upload enhanncements to mobile and desktop views within next 24-48 hours if someone doesn't do it first.

[imath]

@mercime 7794-removeInviteTooltip.patch is adding a Tooltip to explain that clicking on the avatar removes the user from the invites list. @hnla fyi i had to edit css to stop using overflow: hidden to let the tooltip show.

[hnla]

overflow would hide the tooltip, it was appropriate before we started to change things, now you'll need to use the clearfix class or mixin provided to ensure float containment if still necessary.

[imath]

Thanks for your feedback @hnla 👌

[mercime]

Replying to imath:

@mercime 7794-removeInviteTooltip.patch is adding a Tooltip to explain that clicking on the avatar removes the user from the invites list.

Thanks for the explanation about the tooltip @imath. Attached patch:

• Added aria-label attr to the link and made the alt value = empty on the image so screen readers will announce the label and not have to repeat the username from the old image alt value.
• Changed 'Remove %s from the invites' from tooltip because it could grow very wide with the full name to shorter 'Disinvite %s' which is more consistent with the invite/disinvite from Invite Members screen.
• Updated stylesheet which: improves positioning of bp-tooltip for the UI, adds cleafix and 100% width to UL containing participants' profile photos, and adds top margin for #bp-send-invites-form.

Replying to hnla:

overflow would hide the tooltip, it was appropriate before we started to change things, now you'll need to use the clearfix class or mixin provided to ensure float containment if still necessary.

Implemented clearfix on .buddypress .bp-invites-content #send-invites-editor ul

[imath]

@mercime Awesome ! Thanks a lot for this new version of the patch, I just tested it and it works great. Let's leave some time to @hnla to have a look at it. I'll commit it before RC in any cases ;)

[imath]

In 12074:

BP Nouveau - Group Invites UI: add meaningful tooltips to invites list

The invites screen contains a list of the avatar of the user to invites. When hovering on one of the avatars a BP Tooltip is now informing that clicking on one of the avatar removes the corresponding user from the invites list.

Props mercime

See #7794

[imath]

Patches that needed to be committed before RC are committed, many thanks everyone for your help 💪. I'm leaving this ticket open as we still need to work on :

• (re)Test mobile devices and eventually improve the layout (eg: pagination in Group Invites)
• Add (more) inline documentation.

I'm adding another concern raised by @hnla in a comment to another ticket:

• warn the user there are invites not sent before leaving the page (eg: the last step of the group creation process).

[DJPaul]

Please open new tickets for subsequent improvements, so we can close this one for 3.0, and review anything else on their own merits.

It's likely that anything substantial will not be included at 3.0 in this point.

Thanks everyone! Great work here.

[hnla]

@imath yep a trap before finishing group create for unsent invites will be sensible but as Paul says not this release but should be ticketed to go in early on next cycle.

[mercime]

7794-group-invite-with-vertnav.patch​ fixes group invites subnav to horizontal when group nav is set as vertical in customizer

[djpaul]

In 12080:

Templates, Nouveau: fix group invites subnav to horizontal when group nav is set to vertical in customizer.

Fixes #7794

Props mercime

[hnla]

Hmm was just about to check the patch - these late changes to the invites screen did require some work to render a decent layout, thanks for the patch @mercime, use of the grid property is a big change, I would have loved a heads up to the use of this layout paradigm, but good work nonetheless.

[hnla]

@mercime changes look good, nice one!