[RN] Adjust toolbar button sizes / margins

- add 10px of padding on the sizes of the toolbar
- make the button margin smaller (from 10 to 7)
- increate the secondary button factor to 85%, thus rising the maximum secondary
  button size to 50 (from the previous 48)
This commit is contained in:
Saúl Ibarra Corretgé 2018-05-18 13:50:34 +02:00 committed by Lyubo Marinov
parent 192f1d44f5
commit 44c498a566
3 changed files with 8 additions and 6 deletions

View File

@ -27,9 +27,9 @@ export default createStyleSheet({
bottom: BoxModel.margin,
flexDirection: 'column',
justifyContent: 'flex-end',
left: BoxModel.margin,
left: 0,
position: 'absolute',
right: BoxModel.margin,
right: 0,
// Both on Android and iOS there is the status bar which may be visible.
// On iPhone X there is the notch. In the two cases BoxModel.margin is

View File

@ -35,7 +35,7 @@ const _BUTTON_COUNT = 4;
* @private
* @type number
*/
const _BUTTON_SIZE_FACTOR = 0.8;
const _BUTTON_SIZE_FACTOR = 0.85;
/**
* The type of {@link Toolbox}'s React {@code Component} props.
@ -159,7 +159,8 @@ class Toolbox extends Component<Props, State> {
let buttonSize
= (width
- hangupButtonSize
- (_BUTTON_COUNT * styles.toolbarButton.margin * 2))
- (_BUTTON_COUNT
* styles.toolbarButton.marginHorizontal * 2))
/ _BUTTON_COUNT;
// Make sure it's an even number.

View File

@ -15,8 +15,7 @@ const toolbarButton = {
flexDirection: 'row',
height: 40,
justifyContent: 'center',
margin: BoxModel.margin,
marginBottom: BoxModel.margin / 2,
marginHorizontal: 7,
opacity: 0.7,
width: 40
};
@ -64,6 +63,8 @@ const styles = createStyleSheet({
flexDirection: 'row',
justifyContent: 'center',
left: 0,
marginBottom: BoxModel.margin / 2,
paddingHorizontal: BoxModel.margin,
position: 'absolute',
right: 0
},