Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reactions: Update quick reactions #9753

Closed
6 tasks done
nadonomy opened this issue May 17, 2019 · 2 comments · Fixed by matrix-org/matrix-react-sdk#3138
Closed
6 tasks done

Reactions: Update quick reactions #9753

nadonomy opened this issue May 17, 2019 · 2 comments · Fixed by matrix-org/matrix-react-sdk#3138
Assignees
@jryans
Labels
A-Aggregations A-Reactions T-Enhancement X-Needs-Design

Comments

@nadonomy
Copy link
Contributor

nadonomy commented May 17, 2019 •
edited by jryans
Loading

Screenshot 2019-05-17 at 13 56 04

Before dev, we should discuss if we want to execute on #9483 first, in case this tooltip is redundant after dogfooding the emoji picker with prominent quick reactions. We should try just revealing the emoji picker on hover.

Once emoji picker exists (#9483):

  • Clicking (🙂+) reveals the emoji picker
  • Clicking 'View all' reveals the emoji picker
This was referenced May 22, 2019
Closed
Closed
@jryans jryans self-assigned this Jun 12, 2019
@jryans
Copy link
Collaborator

jryans commented Jun 19, 2019 •
edited
Loading

Questions for @nadonomy:

  • Should the tooltip appear when hovering or clicking (🙂+)? I am guessing on hover based on the Tippy.js and Facebook interaction styles you are referencing.
  • What should the tooltip look like in dark theme? (I see it does appear on the unified palette, but seems to have the same color as the timeline...)

jryans added a commit to matrix-org/matrix-react-sdk that referenced this issue Jun 21, 2019
@jryans
Clone ContextualMenu to InteractiveTooltip
6dcdad0 
As part of reactions and editing work, we're adding a new style of tooltip that
allows interacting with the content of the tooltip.  `ContextualMenu` is closest
out of the things we have today, but it doesn't position in quite the way we
want and it's already quite complex.

To get started, let's first clone that to a new `InteractiveTooltip`.

Part of element-hq/element-web#9753
Part of element-hq/element-web#9716
jryans added a commit to matrix-org/matrix-react-sdk that referenced this issue Jun 21, 2019
@jryans
Center tooltip along top or bottom of target
32bf458 
This adjusts the positioning to work more the way we want:

* Tooltip is position on the top or bottom edge of the target depending on where
  space is available
* Tooltip and chevron are centered

In addition, more bits borrowed from `ContextualMenu` are not needed, so they
have been removed for simplicity.

Part of element-hq/element-web#9753
Part of element-hq/element-web#9716
jryans added a commit to matrix-org/matrix-react-sdk that referenced this issue Jun 21, 2019
@jryans
Tweak interactive tooltip to match design
df34075 
This tweaks the tooltip to match the color, spacing, etc. seen in the designs.

Part of element-hq/element-web#9753
Part of element-hq/element-web#9716
jryans added a commit to matrix-org/matrix-react-sdk that referenced this issue Jun 21, 2019
@jryans
Tweak interactive tooltip to match design
3bd247e 
This tweaks the tooltip to match the color, spacing, etc. seen in the designs.

Part of element-hq/element-web#9753
Part of element-hq/element-web#9716
@jryans jryans mentioned this issue Jun 21, 2019
Merged
@nadonomy
Copy link
Contributor Author

  • Should the tooltip appear when hovering or clicking (🙂+)? I am guessing on hover based on the Tippy.js and Facebook interaction styles you are referencing.

Yes please. Hover for easier discoverability.

What should the tooltip look like in dark theme? (I see it does appear on the unified palette, but seems to have the same color as the timeline...)

Will check in detail soon and get back to you!

jryans added a commit to matrix-org/matrix-react-sdk that referenced this issue Jun 24, 2019
@jryans
Improve API and interactivity of new tooltip
72bfc3b 
This reworks the API the `InteractiveTooltip` component so that it's more
natural to use just like other React components. You can now supply the target
component as a child and the tooltip content as a prop.

In addition, this tweaks the interactivity to keep the tooltip on screen until
you move the mouse away from the tooltip and its target.

Part of element-hq/element-web#9753
Part of element-hq/element-web#9716
@jryans jryans mentioned this issue Jun 24, 2019
Merged
jryans added a commit to matrix-org/matrix-react-sdk that referenced this issue Jun 25, 2019
@jryans
Add react button to action bar
8926992 
This adds a (temporarily non-functional) react button to the action bar.

Part of element-hq/element-web#9753
jryans added a commit to matrix-org/matrix-react-sdk that referenced this issue Jun 25, 2019
@jryans
Add quick reaction buttons in tooltip
fd27235 
This adds the set of quick reactions as buttons in a new tooltip accessed via
the react action in the message action bar.

Part of element-hq/element-web#9753
jryans added a commit to matrix-org/matrix-react-sdk that referenced this issue Jun 25, 2019
@jryans
Remove toggling reaction dimensions
c1821fa 
This removes the v1 Reactions UX which only allowed you to choose only one emoji
out of each pair. It is replaced by a different UX inside a tooltip and without
these constraints.

Part of element-hq/element-web#9753
@jryans jryans mentioned this issue Jun 25, 2019
Merged
jryans added a commit to matrix-org/matrix-react-sdk that referenced this issue Jun 25, 2019
@jryans
Show reaction title and shortcode on hover
93384f9 
This shows the title and shortcode for the hovered reaction at the bottom of the
tooltip. If nothing is hovered, a blank space is shown for now, but will
eventually become a link to a full emoji picker in future work.

Part of element-hq/element-web#9753
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jryans jryans

Labels
A-Aggregations A-Reactions T-Enhancement X-Needs-Design
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add quick reaction buttons in tooltip matrix-org/matrix-react-sdk
3 participants
@jryans @lampholder @nadonomy