You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

styles.js 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. // @flow
  2. import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
  3. import { BoxModel, ColorPalette } from '../../../base/styles';
  4. const BUTTON_SIZE = 50;
  5. // Toolbox, toolbar:
  6. /**
  7. * The style of toolbar buttons.
  8. */
  9. const toolbarButton = {
  10. backgroundColor: schemeColor('button'),
  11. borderRadius: BUTTON_SIZE / 2,
  12. borderWidth: 0,
  13. flex: 0,
  14. flexDirection: 'row',
  15. height: BUTTON_SIZE,
  16. justifyContent: 'center',
  17. // XXX We probably tested BoxModel.margin and discovered it to be too small
  18. // for our taste.
  19. marginHorizontal: 7,
  20. width: BUTTON_SIZE
  21. };
  22. /**
  23. * The icon style of the toolbar buttons.
  24. */
  25. const toolbarButtonIcon = {
  26. alignSelf: 'center',
  27. color: ColorPalette.darkGrey,
  28. fontSize: 22
  29. };
  30. /**
  31. * The style of toolbar buttons which display white icons.
  32. */
  33. const whiteToolbarButton = {
  34. ...toolbarButton,
  35. backgroundColor: schemeColor('buttonToggled')
  36. };
  37. /**
  38. * The icon style of toolbar buttons which display white icons.
  39. */
  40. const whiteToolbarButtonIcon = {
  41. ...toolbarButtonIcon,
  42. color: ColorPalette.white
  43. };
  44. /**
  45. * The Toolbox and toolbar related styles.
  46. */
  47. const styles = {
  48. expandMenuContainer: {
  49. alignItems: 'center',
  50. flexDirection: 'column'
  51. },
  52. sheetGestureRecognizer: {
  53. alignItems: 'stretch',
  54. flexDirection: 'column'
  55. },
  56. /**
  57. * The style of the toolbar.
  58. */
  59. toolbar: {
  60. alignItems: 'center',
  61. flexDirection: 'row',
  62. flexGrow: 0,
  63. justifyContent: 'center',
  64. marginBottom: BoxModel.margin / 2,
  65. paddingHorizontal: BoxModel.margin
  66. },
  67. /**
  68. * The style of the root/top-level {@link Container} of {@link Toolbox}.
  69. */
  70. toolbox: {
  71. flexDirection: 'column',
  72. flexGrow: 0
  73. }
  74. };
  75. export default styles;
  76. /**
  77. * Color schemed styles for the @{Toolbox} component.
  78. */
  79. ColorSchemeRegistry.register('Toolbox', {
  80. /**
  81. * Styles for buttons in the toolbar.
  82. */
  83. buttonStyles: {
  84. iconStyle: toolbarButtonIcon,
  85. style: toolbarButton
  86. },
  87. buttonStylesBorderless: {
  88. iconStyle: whiteToolbarButtonIcon,
  89. style: {
  90. ...toolbarButton,
  91. backgroundColor: 'transparent'
  92. }
  93. },
  94. /**
  95. * Overrides to the standard styles that we apply to the chat button, as
  96. * that behaves slightly differently to other buttons.
  97. */
  98. chatButtonOverride: {
  99. toggled: {
  100. backgroundColor: ColorPalette.blue
  101. }
  102. },
  103. hangupButtonStyles: {
  104. iconStyle: whiteToolbarButtonIcon,
  105. style: {
  106. ...toolbarButton,
  107. backgroundColor: schemeColor('hangup')
  108. },
  109. underlayColor: ColorPalette.buttonUnderlay
  110. },
  111. /**
  112. * Styles for toggled buttons in the toolbar.
  113. */
  114. toggledButtonStyles: {
  115. iconStyle: whiteToolbarButtonIcon,
  116. style: {
  117. ...whiteToolbarButton,
  118. borderColor: schemeColor('buttonToggledBorder'),
  119. borderWidth: 1
  120. }
  121. }
  122. });