Redesign: author tooltip by Crashillo · Pull Request #10438 · decidim/decidim

Crashillo · 2023-02-24T13:52:35Z

🎩 What? Why?

Refactor the way the user tooltip is working: from now on it acts like a popover, it's appended to the body tag and placed via javascript.

Also it includes a refactor of the tooltip javascript trigger functions, to be able to handle both plain text tooltips and complex html structures like this one.

Includes also four different positions for the tooltip: top, right, left, and bottom (default)

All the author views in the cell has been simplify as well, and updated the respective uses.

All tailwind CSS classes has been extracted to files.

Closes #10360

📷 Screenshots

Depending the chosen layout to display the user, we can have:

Avatar design: https://decidim-redesign.populate.tools/last_activities

Compact design: https://decidim-redesign.populate.tools/processes/smile-cutting/f/19/posts/9

Default design: Tooltips will be also available in the L & G cards, but they're not included in this PR, so they will available once such cards are finished.

decidim-core/app/packs/src/decidim/redesigned_index.js

ferblape

Codewise looks ok, but there are many broken tests. I'll ask @entantoencuanto to fix them

Crashillo · 2023-03-10T14:09:25Z

The expectation is that the tooltip will appear when hovering over the username, and not that it has some sort of buffer zone around it. Can we change this? thanks!

That's kinda tricky. As I commented at the OP, we've several versions of the author: avatar, compact and default. All versions trigger the tooltip, but here comes the problem: where should we display it?

For the avatar type, it's crystal clear: the image triggers the tooltip, and this one is placed beneath such image.
For compact and default, it ain't so clear: who triggers the tooltip? the avatar? the name? both? or the whole set avatar+name? and in the same line, where should we place the tooltip? beneath the avatar? or the name? or beneath both elements or the whole set?

For instance, github, in some cases, displays the tooltip on different elements, so you can place beneath the avatar AND the name:

Screencast.from.10-03-23.14.54.46.mp4

Currently, we chose the whole set as trigger instead, due to the following issue: the tooltip has interactive content, that is, the follow button. So if you change the follow status, the markup for such tooltip changes BUT the rest of tooltips don't change. Therefore, when you have two trigger elements (avatar and name) so close each other, it's quite easy to realise that something is wrong. Having only one trigger element solves (slightly) that problem.

Look at the following example: I click on the follow button, so the text button changes. But if I trigger another tooltip, it looks like nothing has happened. Even I open the previously modified button, nothing has happened.

Screencast.from.10-03-23.15.04.02.mp4

So, how do you prefer to deal with? Keeping in mind the different versions, which should we set as the trigger element and where place the tooltip?

…ooltip

Crashillo · 2023-03-13T15:17:32Z

I didn't get you good last friday, now I did some stuff to really hide the tooltip, let me know if that works to you

carolromero · 2023-03-20T10:08:33Z

@Crashillo working great now, thanks!

ferblape · 2023-03-20T10:10:19Z

@Crashillo could you review the merge conflict?

alecslupu · 2023-03-21T08:04:28Z

@Crashillo, in order to start reviewing, i need the conflict to be resolved.

ferblape · 2023-03-21T10:35:54Z

@Crashillo, in order to start reviewing, i need the conflict to be resolved.

@alecslupu done

* feature/redesign: (94 commits) Fix test Finalize word standardization (#10557) Fix iframes stripped from admin entered proposals, meetings and debates (#10466) Fix ImageMagick errors when trying to identify image dimensions (#10343) Add required to proposal limit field in Proposal component (#10525) Standardize the format of the words "is not" (#10511) Standardize the format of the words "has not" (#10510) Standardize the format of the words "will not" (#10509) Make buttons respect the organizations' primary color (#10526) Fix flaky spec for questionnaire templates (#10544) Remove the deprecated `optional` option from the file upload modal (#10542) Standardize the format of the words "does not" (#10505) Standardize the format of the words "was not" (#10514) Add Procfile support (#10519) Standardize the format of the words "do not" (#10513) Change the `optional` option to `required` at participatory texts (#10498) Fix destroying scope types that have been associated with processes (#10496) Fix dynamic upload file field required indicator + make option naming consistent (#10497) Standardize the format of the words "should not" (#10515) Standardize the format of the words "were not" (#10516) ...

ferblape · 2023-03-27T08:25:57Z

ping @decidim/maintainers, could you please review this?

decidim-core/app/cells/decidim/redesigned_follow_button_cell.rb

alecslupu

One single question, that does not block the PR.

alecslupu · 2023-03-27T11:58:54Z

I have encountered this kind of tooltip (no follows information) on the "last proposals" widget on participatory process homepage ...

Crashillo · 2023-03-27T14:01:18Z

I have encountered this kind of tooltip (no follows information) on the "last proposals" widget on participatory process homepage

I don't get you, could you please share the url or provide further details? Look what I tried in that homepage, moving down the hero block to let that happen, but as you may notice, it works as expected

Screencast.from.27-03-23.15.57.02.mp4

…content-blocks * feature/redesign: (187 commits) Redesign: author tooltip (#10438) Redesign: pending things of the public profile (#10472) Redesign: card L link whole card (#10554) strip links from cards, standarize author cell (#10547) include a clause to change a data-attr on the fly Update tests Restore specs set different modals foreach comment unify report button for futher uses use report_button instead of flag_modal Unify comments:loaded event Remove pending Skip unless redesign enabled Remove turbo reference Remove unused method Remove unused components Disabled examples when redesign is disabled Fix edit comment after comment edited use label component clean duplicated class ...

…ature/redesign-staging * feature/redesign-process-groups-content-blocks: Remove deprecated content block Replace processes content block in process groups homepage with redesigned one Redesign: author tooltip (#10438) Redesign: pending things of the public profile (#10472)

* feature/redesign: Redesign: menu mobile (#10351) Fix comments scss to avoid compilation errors (#10657) Redesign: Add a new <aside> to layout item (#10620) Redesign: author tooltip (#10438) Redesign: pending things of the public profile (#10472)

* feature/redesign: Redesign: menu mobile (#10351) Fix comments scss to avoid compilation errors (#10657) Redesign: Add a new <aside> to layout item (#10620) Redesign: author tooltip (#10438) Redesign: pending things of the public profile (#10472) Redesign: card L link whole card (#10554) strip links from cards, standarize author cell (#10547)

* feature/redesign: replace uses of specific margin-bottom for layout margins (#10675) Redesign: menu mobile (#10351) Fix comments scss to avoid compilation errors (#10657) Redesign: Add a new <aside> to layout item (#10620) Redesign: author tooltip (#10438) Redesign: pending things of the public profile (#10472) Redesign: card L link whole card (#10554) strip links from cards, standarize author cell (#10547)

…ent-blocks * feature/redesign: (196 commits) Redesign: process & process group cards (#10716) Redesign: conference cards (#10502) Redesign: pending blogs (#10686) Redesign: blog cards (#10685) Redesign: filters (#10390) replace uses of specific margin-bottom for layout margins (#10675) Redesign: menu mobile (#10351) Fix comments scss to avoid compilation errors (#10657) Redesign: Add a new <aside> to layout item (#10620) Redesign: author tooltip (#10438) Redesign: pending things of the public profile (#10472) Redesign: card L link whole card (#10554) strip links from cards, standarize author cell (#10547) include a clause to change a data-attr on the fly Update tests Restore specs set different modals foreach comment unify report button for futher uses use report_button instead of flag_modal Unify comments:loaded event ...

move all tailwind classes to scss file

fa1fb29

Crashillo changed the base branch from develop to feature/redesign February 24, 2023 13:52

Crashillo added the project: redesign Barcelona City Council contract label Feb 24, 2023

Crashillo and others added 11 commits February 24, 2023 18:37

pass locals to render cell [wip]

55059f5

Avoid recursive loop in profile minicard

22e6fbb

full refactor author cell to include tooltips

8276c26

clean related files after new refactor

5b63ada

Merge branch 'feature/redesign' into feature/redesign-author-tooltip

8db7ed4

deprecated files

8e7428d

refactorize, unify and simplify the tooltips creation

47b8077

fix erblint

54eeae4

use raw_modal instead

962b02f

use default layout for the cell

4facb1a

add describedby after HTMLElement in DOM

1fa0b39

Crashillo marked this pull request as ready for review March 2, 2023 16:53

Crashillo added 4 commits March 2, 2023 18:15

restore nickname (contains @)

89ac42d

remove deprecated method

edc6162

style adjustments

eb1da1f

expand tooltip to fit all contents

6ffdfd1

Crashillo requested review from ferblape and furilo March 2, 2023 17:47

Crashillo added 5 commits March 3, 2023 09:50

allow growing landscape profile images on avatar-layout author cell

bd001d7

simplify css no longer neccessary

843c2cf

expand profile grid

e6c73dc

tooltip position must be calculated AFTER being at the dom

3212a7e

remove other tooltips shown

46f14d4

ferblape reviewed Mar 7, 2023

View reviewed changes

decidim-core/app/packs/src/decidim/redesigned_index.js Outdated Show resolved Hide resolved

ferblape suggested changes Mar 7, 2023

View reviewed changes

ferblape assigned entantoencuanto Mar 7, 2023

move tooltip trigger to the parent

9c82d9f

entantoencuanto removed their assignment Mar 13, 2023

change transition into animations to control the mouseevents of the t…

c7b8049

…ooltip

ferblape requested review from a team and carolromero March 14, 2023 03:21

carolromero approved these changes Mar 20, 2023

View reviewed changes

ferblape requested a review from a team March 20, 2023 10:10

Merge branch 'feature/redesign' into feature/redesign-author-tooltip

4b9b3e6

alecslupu reviewed Mar 27, 2023

View reviewed changes

decidim-core/app/cells/decidim/redesigned_follow_button_cell.rb Show resolved Hide resolved

alecslupu approved these changes Mar 27, 2023

View reviewed changes

Replace call to count with size

ae779aa

ferblape merged commit 208c421 into feature/redesign Mar 29, 2023

ferblape deleted the feature/redesign-author-tooltip branch March 29, 2023 02:47

carolromero mentioned this pull request Apr 20, 2023

Redesign / Wait until the author tooltip is shown #10752

Closed

andreslucena mentioned this pull request Nov 18, 2023

Redesign: Tooltip on cell/author #10360

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Redesign: author tooltip#10438

Redesign: author tooltip#10438
ferblape merged 40 commits intofeature/redesignfrom
feature/redesign-author-tooltip

Crashillo commented Feb 24, 2023 •

edited

Loading

Uh oh!

Uh oh!

ferblape left a comment

Uh oh!

Crashillo commented Mar 10, 2023 •

edited

Loading

Uh oh!

Crashillo commented Mar 13, 2023

Uh oh!

carolromero commented Mar 20, 2023

Uh oh!

ferblape commented Mar 20, 2023

Uh oh!

alecslupu commented Mar 21, 2023

Uh oh!

ferblape commented Mar 21, 2023

Uh oh!

ferblape commented Mar 27, 2023

Uh oh!

Uh oh!

alecslupu left a comment

Uh oh!

alecslupu commented Mar 27, 2023 •

edited

Loading

Uh oh!

Crashillo commented Mar 27, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

Conversation

Crashillo commented Feb 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎩 What? Why?

📷 Screenshots

Uh oh!

Uh oh!

ferblape left a comment

Choose a reason for hiding this comment

Uh oh!

Crashillo commented Mar 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Crashillo commented Mar 13, 2023

Uh oh!

carolromero commented Mar 20, 2023

Uh oh!

ferblape commented Mar 20, 2023

Uh oh!

alecslupu commented Mar 21, 2023

Uh oh!

ferblape commented Mar 21, 2023

Uh oh!

ferblape commented Mar 27, 2023

Uh oh!

Uh oh!

alecslupu left a comment

Choose a reason for hiding this comment

Uh oh!

alecslupu commented Mar 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Crashillo commented Mar 27, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Crashillo commented Feb 24, 2023 •

edited

Loading

Crashillo commented Mar 10, 2023 •

edited

Loading

alecslupu commented Mar 27, 2023 •

edited

Loading