Improve drawer appearance

Open

#1,624 opened on Apr 5, 2018 0 comments 0 reactions 0 assignees View on GitHub

ios

Dominant language: JavaScript
Stars: 1.4k
Forks: 171
PR merge metrics: No merged PRs in 30d

Description

### Problem description

The shadow of the drawer is too dark and hard for the shadows typically used in modern iOS.

Compare:

#### Tabris.js Drawer

![img_f949a507e493-1](https://user-images.githubusercontent.com/2341769/38355309-c78208f6-38bc-11e8-8d44-7d8add3774d6.jpeg)

#### Native UI
|App Store cards|Popover|
|---|---|
|![img_916926969d92-1](https://user-images.githubusercontent.com/2341769/38355248-9d861d58-38bc-11e8-819f-7b850e552be5.jpeg)|![img_33aa7e0c6367-1](https://user-images.githubusercontent.com/2341769/38355249-9d9e2a88-38bc-11e8-834a-1fcc3b335c6c.jpeg)|

### Expected behavior

#### Proposal 1

Better align the shadow color, opacity and blur with shadows used in native UI.

#### Proposal 2

Since there is no HIG specification for a drawer on iOS, align the drawer appearance with the [Material Design guidelines](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-content). This has the advantage that drawers will look consistent among iOS and Android and the drawer content won't be covered by a shadow on its right edge. See the drawer implementation of Google Apps on iOS:

![google-drive](https://user-images.githubusercontent.com/2341769/38355531-7a307974-38bd-11e8-835d-f66836ce8390.jpeg)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Improve drawer appearance

Description

Contributor guide

Assessment

Get new issues in your inbox