zulip/zulip-mobile

Tweak UI of mention-unsubscribed warning

Open

#4,224 opened on Aug 11, 2020

View on GitHub
 (2 comments) (0 reactions) (1 assignee)JavaScript (673 forks)github user discovery
a-compose/sendhelp wanted

Repository metrics

Stars
 (1,348 stars)
PR merge metrics
 (PR metrics pending)

Description

This issue is to follow up on #4219 with some small UI improvements to the "$person will not be notified unless you subscribe them" warning which we added in #4101 (addressing #3373). Going through my comment at https://github.com/zulip/zulip-mobile/pull/4101#issuecomment-669764675 in order:

  • button shape/size in visual appearance -- done in #4219
  • button touch target to 48px (extending beyond visual button) -- still TODO
  • no border -- done in #4219
  • background color -- still TODO
  • text/background color contrast, for legibility -- done in #4101 before merge
  • cut animation -- done in #4219
  • use a nice slide-in animation instead -- still TODO

See that comment for details on each of these. For the touch target, @chrisbobbe adds (at https://github.com/zulip/zulip-mobile/pull/4219#issuecomment-670784841 ) :

For this, we'll likely want to use the hitSlop prop of the component that gets the onPress prop. We may have to adjust the dimensions of its parent, too:

The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.

Contributor guide

Research direction
Review the existing warning UI component and the referenced PRs (#4219, #4101) to understand the current implementation. Focus on the hitSlop prop for touch target and how to add slide in animation. Check React Native documentation for View's hitSlop and Animated API.
Tech stack
javascriptreact
Domain
mobile
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitReact Native
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75