mirror of https://github.com/zulip/zulip.git
a4f5b0c635
Previously, the message controls had a bug where they would trigger on
mobile with a single tap over the area they occupy when visible. This
is wrong because a user would expect to first see the controls and
only trigger them once they are visible (with a second tap).
The above bug is caused by the fact that we were using "opacity: 0" on
".message_controls > div" to hide the controls and "opacity: 1" on
".messagebox &:hover .message_controls > div" to show the controls on
hover, however, this would not effect the click action because
"opacity". So we used "pointer-events: none;" and "pointer-events:
all;" with the hopes that it would prevented the above bug, but in
practice, it didn't.
(the most probable explanation being that tapping the message_control
area would cause the "&:hover" rule to trigger and change the
"pointer-event" to "all" before it could prevent the click trigger,
But that explanation is just conjecture.)
This commit replaces both "pointer-events" attributes with
"visibility: hidden" and "visibility: visible" respectively. The
result being that the message_controls behave identically to before,
except without the above bug.
The addition to the ".has_actions_popover .info" selector is important
because without it, we would regress on issue #3172.
Trivia:
An alternate approach to using "opacity" is to set the
"display" attribute to "none", however, using "display" prevents the
transition from animating (which is probably why we were using opacity
here in the first place). "visibility" does not prevent the transition
from animating.
History: The "pointer-events" attribute was introduced in
|
||
|---|---|---|
| .. | ||
| portico | ||
| alerts.scss | ||
| app_components.scss | ||
| components.scss | ||
| compose.scss | ||
| drafts.scss | ||
| hotspots.scss | ||
| informational-overlays.scss | ||
| input_pill.scss | ||
| left-sidebar.scss | ||
| lightbox.scss | ||
| message_edit_history.scss | ||
| night_mode.scss | ||
| popovers.scss | ||
| pygments.scss | ||
| reactions.scss | ||
| recent_topics.scss | ||
| rendered_markdown.scss | ||
| right-sidebar.scss | ||
| settings.scss | ||
| subscriptions.scss | ||
| typing_notifications.scss | ||
| user_circles.scss | ||
| user_status.scss | ||
| widgets.scss | ||
| zulip.scss | ||