Cht-core: Add sync status indicator for offline users (mobile and web)

[sglangevin]

Add an indicator to the hamburger menu so that users know when they last synced data and whether or not they have any data that needs to be synced. No specific count of documents is required at this time. More information in design spec here: https://docs.google.com/document/d/1fHrXcZZexM4DiXlEvABsYnM8upHN0IKBxMNkkXj8n8E/edit

Zeplin Files:
https://app.zeplin.io/project.html#pid=57d311edb055084578d006ec&sid=58e423770a9098e50f30e1b2
https://app.zeplin.io/project.html#pid=57d311edb055084578d006ec&sid=58e423780e7731f75cfe8ec8
https://app.zeplin.io/project.html#pid=57d311edb055084578d006ec&sid=58e423778617e25de61d283e

Original design issue: https://github.com/medic/medic-design/issues/48

[sglangevin]

This is required for an upcoming deployment and a long-standing feature request from our active deployments.

[alxndrsn]

[alxndrsn]

• [x] add hardcoded menu content
• [x] provide service, or method in appropriate controller, to get sync status
  
  
  
  • [x] last sync time
  
  
  • [x] current status
  
  
• [x] implement status service to report real values
• [x] add translation values for different statuses
• [x] configure colours and icons CSS for different statuses
• [x] only show sync status for local-db users

statuses:

• in-progress
• required
• not-required

[alxndrsn]

This adds a new state not shown in the screenshots - when the last sync time is unknown.

Sync time does not persist between runs of the application - if you restart your phone, "last sync" will appear as _Unknown_.

[sglangevin]

Did some quick acceptance testing: "Currently syncing" and "All reports synced" are cut off on all screen sizes.

Returning so that the font size can be changed.

[sglangevin]

Back to you @alxndrsn!

[alxndrsn]

@sglangevin How about shorter strings? E.g.

• _Required_
• _Syncing…_
• _Synced_

[abbyad]

In the current implementation the icons are clickable which is confusing since clicking does nothing about syncing, just closes the menu.

From the spec:

The text and icons are informative-only meaning they are not clickable. For this reason, the sync information is separated from the above clickable links as much as possible. The 1px horizontal grey line and the lightly tinted background color help visually set these elements apart from the rest of the drop down menu.

[garethbowen]

How about shorter strings?

@alxndrsn We can't really rely on shorter strings due to internationalisation, different devices, and different fonts (not to mention zooming in in the browser).

• Fix wrapping so the browser makes the best attempt at fitting everything.
• Make the menu wider on mobile (90%?) - there's no reason for it to be so skinny.
• Fix the hover so it doesn't look clickable (as @abbyad pointed out).

[sglangevin]

That makes sense, @garethbowen. @alxndrsn I agree with Gareth on this one so let's go with his suggestions.

[alxndrsn]

@sglangevin I agree that Marc's change and Gareth's should be done. Would the proposed text changes also be beneficial?

[sglangevin]

Now I get the question :)

I like the text that we had in the designs and would stick with that unless @diannakane or @amandacilek have other suggestions.

[sglangevin]

@alxndrsn sounds like we should stick with the text in the designs for now so I think we can proceed with the changes agreed upon above.

[alxndrsn]

• [x] wrap menu item text
• [x] make menu wider on small screens (without it looking rubbish)
• [x] remove hover effects (this already does not affect mobile users)

[sglangevin]

Looks good! Moving to Ready.