Skip to:
Content

BuddyPress.org

Opened 19 months ago

Closed 19 months ago

Last modified 19 months ago

#7716 closed defect (bug) (fixed)

BP-Nouveau: Remove tooltip from Friends > Requests buttons

Reported by: mercime Owned by: hnla
Milestone: 3.0 Priority: normal
Severity: normal Version:
Component: Templates Keywords: has-patch has-screenshots
Cc:

Description

bp-tooltips for the Accept and Reject buttons have become redundant when text is used on the buttons. I remember adding those tooltips way back when the checkmark and crossmark icons were used instead at the next template packs Github repo.

Screenshot and patch coming up.

Attachments (5)

accept-reject.jpg (17.7 KB) - added by mercime 19 months ago.
7716.patch (916 bytes) - added by mercime 19 months ago.
7716.2.patch (3.7 KB) - added by mercime 19 months ago.
accept-reject-desktop-mobil.png (32.8 KB) - added by mercime 19 months ago.
7716.3.patch (3.6 KB) - added by mercime 19 months ago.

Download all attachments as: .zip

Change History (19)

@mercime
19 months ago

#1 @mercime
19 months ago

  • Keywords has-patch has-screenshots added
  • Milestone changed from Awaiting Review to 3.0

#2 @hnla
19 months ago

and I would just like to check back and ensure buttons reverted to text from icons as a deliberate action and not as consequence of some issue, but yes don't want tooltips on text links - do we prefer text button over icon here? opinions?

#3 @DJPaul
19 months ago

Can't go wrong with text - some icons may mean/represent different things in different cultures (e.g. maybe some languages don't use ticks or crosses, then we have a translation task as well).

#4 @DJPaul
19 months ago

With regards to the patch - presumably we can just remote the data-bp-tooltip assignment, instead of just replacing with a blank value.

#5 @mercime
19 months ago

@hnla I can see cases where preference will be to use icons with tooltips instead of text. Will need to also check why the replacement of the icons to text in those buttons pushed <div class=" friends-meta action"> down below the avatar even on desktop view then fix it.

@DJPaul: Didn't remove the data-bp-tooltip attr for those who want to use icons instead of text (after adding span with bp-screen-reader-text around the link text in link_text).

#6 @hnla
19 months ago

I'm of the notion of Can't go wrong with text too, @mercime lets go with the text and your patch then when we're happy with your above concerns.

@mercime
19 months ago

#7 @mercime
19 months ago

@hnla when you have the time, please check the new patch attached:

  • removes the tooltip
  • fixes some name alignment in mobile view
  • re-aligns the friends accept/reject buttons to the right for desktop.

Screenshot shows the before and after for mobile and desktop.

#8 @hnla
19 months ago

@mercime will do, might be a couple of days but on my todo list.

#9 follow-up: @hnla
19 months ago

@mercime Checking over ... do we not also need to remove the class 'bp-tooltip' from the $button array args?

Although on the question of tooltips and icons I remember this is why I had originally added the 'icon' arg to allow switching between text/icons via the function call, not a simple implementation though as it needed to be tied into Customizer ideally and a new set of modular styles, and I got massively pulled in diff directions so couldn't follow it through properly, I'll try and add this as a future enhancement ticket.

On the styles realise this user friends 'requests' screen is one that has escaped detailed styling thus far and needs attention.

In principle agree with those screenies, with some provisos:

  • With positioning I'm trying to avoid using pos:abs where possible the principle we can follow is moving elements as blocks using either floats and sibling elements overflow hidden to clear floated sibling or flexbox to grid the wrapping element. Therefore blocks .item & .friends-meta.action could be floated left and overflow: hidden respectively with suitable widths for wide screen or flexboxed for avatar .item & meta block as a row.
Version 0, edited 19 months ago by hnla (next)

@mercime
19 months ago

#10 in reply to: ↑ 9 @mercime
19 months ago

Replying to hnla:

@mercime Checking over ... do we not also need to remove the class 'bp-tooltip' from the $button array args?

Although on the question of tooltips and icons I remember this is why I had originally added the 'icon' arg to allow switching between text/icons via the function call, not a simple implementation though as it needed to be tied into Customizer ideally and a new set of modular styles, and I got massively pulled in diff directions so couldn't follow it through properly, I'll try and add this as a future enhancement ticket.

Remove .bp-tooltip and data-bp-tooltip - Done.

On the styles realise this user friends 'requests' screen is one that has escaped detailed styling thus far and needs attention.

In principle agree with those screenies, with some provisos:

  • With positioning I'm trying to avoid using pos:abs where possible the principle we can follow is moving elements as blocks using either floats and sibling elements overflow hidden to clear floated sibling or flexbox to grid the wrapping element. Therefore blocks .item & .friends-meta.action could be floated left and overflow: hidden respectively with suitable widths for wide screen or flexboxed for avatar .item & meta block as a row.

Use flexbox - Done.

  • Something I should have spotted but feel a little bothered by; the class 'fiends-list' is not very descriptive of this screen for the UL. Think it would be better if we added or changed to 'friends-requests-list' and used that as a top level parent class -? Principle of a generic class is sound though i.e 'friends-list' however on the other tab 'friends' we have got 'members-friends-list' and no 'friends-list' so really these classes need to be better. At this moment I don't think 'friends-list' is used so we could change it to 'friends-request-list'

Use .friends-request-list - Added and done.

Attached 7716.3.patch

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

#11 @DJPaul
19 months ago

Please may we aim to have this in trunk by next Wednesday 4th April for beta 1?

#12 @hnla
19 months ago

Running updated patch...

#13 @hnla
19 months ago

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

In 11915:

Nouveau: Remove tooltips on friends request buttons, refactor item layout

Commit removes tooltips.

Adds new class 'friends-requests-list' to better mirror classes on general friends lists.

Updates layout styling for list entries for mobile and desktop views.

Props mercime

Fixes #7716

#14 @hnla
19 months ago

@mercime Uber work, thanks for the changes, checked over, added a sneaky font size increase for item-title(username) but otherwise it was good to go.

I may do some further tweaks just to get some better parity between friends list and requests lists, but that's more down to me not having focussed more on these two screens, might up the avatar size to match to the friends list etc but these aren't critical.

Note: See TracTickets for help on using tickets.