Skip to:
Content

BuddyPress.org

Opened 14 months ago

Closed 13 months ago

Last modified 13 months ago

#7794 closed task (fixed)

BP Nouveau: Backbone views tasks

Reported by: imath Owned by: djpaul
Milestone: 3.0 Priority: normal
Severity: normal Version:
Component: Templates Keywords: has-patch
Cc:

Description (last modified by 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 ;)

Attachments (6)

7794.messagesUI.feedback.patch (7.9 KB) - added by imath 14 months ago.
7794-empty-links.patch (3.2 KB) - added by imath 14 months ago.
7794.groupInvites.feedback.patch (11.1 KB) - added by imath 14 months ago.
7794-removeInviteTooltip.patch (4.4 KB) - added by imath 14 months ago.
7794-removeInviteTooltip.2.patch (6.4 KB) - added by mercime 14 months ago.
7794-group-invite-with-vertnav.patch (5.0 KB) - added by mercime 13 months ago.

Download all attachments as: .zip

Change History (35)

#1 @imath
14 months ago

  • Type changed from defect (bug) to task

#2 @imath
14 months ago

  • Description modified (diff)

#3 @imath
14 months ago

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.

#4 @imath
14 months ago

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.

#5 @imath
14 months ago

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

#6 @imath
14 months ago

In 12059:

BP Nouveau: avoid empty links in the Group Invites UI

See #7794

#7 @imath
14 months ago

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

#8 @imath
14 months ago

  • Description modified (diff)

#9 @hnla
14 months ago

@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.

#10 @imath
14 months ago

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 😊

#11 @imath
14 months ago

In 12065:

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

Props hnla

See #7794

#12 @hnla
14 months ago

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

#13 @imath
14 months ago

you're welcome, np my bad ☺️

#14 @mercime
14 months ago

@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.

Last edited 14 months ago by mercime (previous) (diff)

#15 @imath
14 months ago

@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.

#16 @hnla
14 months ago

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.

#17 @imath
14 months ago

Thanks for your feedback @hnla 👌

This ticket was mentioned in Slack in #buddypress by imath. View the logs.


14 months ago

#19 @mercime
14 months ago

  • Keywords has-patch added; needs-patch removed

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

Last edited 14 months ago by mercime (previous) (diff)

#20 @imath
14 months ago

@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 ;)

#21 @imath
13 months ago

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

#22 @imath
13 months ago

  • Keywords needs-patch added; has-patch removed

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).

#23 @DJPaul
13 months ago

  • Resolution set to fixed
  • Status changed from new to closed

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.

#24 @hnla
13 months ago

@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.

#25 @mercime
13 months ago

  • Keywords has-patch added; needs-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

#26 @mercime
13 months ago

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

#27 @djpaul
13 months ago

  • Owner set to djpaul
  • Resolution set to fixed
  • Status changed from reopened to closed

In 12080:

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

Fixes #7794

Props mercime

#28 @hnla
13 months ago

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.

#29 @hnla
13 months ago

@mercime changes look good, nice one!

Note: See TracTickets for help on using tickets.