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 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
  2. /**
  3. * The base style for toolbars.
  4. *
  5. * @type {Object}
  6. */
  7. const _toolbar = {
  8. flex: 0,
  9. position: 'absolute'
  10. };
  11. /**
  12. * The base style of toolbar buttons (in primaryToolbar and secondaryToolbar).
  13. *
  14. * @type {Object}
  15. */
  16. const _toolbarButton = {
  17. flex: 0,
  18. justifyContent: 'center',
  19. opacity: 0.7
  20. };
  21. /**
  22. * The base icon style of toolbar buttons (in primaryToolbar and
  23. * secondaryToolbar).
  24. *
  25. * @type {Object}
  26. */
  27. const _toolbarButtonIcon = {
  28. alignSelf: 'center'
  29. };
  30. /**
  31. * The style of toolbar buttons in primaryToolbar.
  32. */
  33. const primaryToolbarButton = {
  34. ..._toolbarButton,
  35. backgroundColor: ColorPalette.white,
  36. borderRadius: 30,
  37. borderWidth: 0,
  38. flexDirection: 'row',
  39. height: 60,
  40. margin: BoxModel.margin,
  41. width: 60
  42. };
  43. /**
  44. * The icon style of the toolbar buttons in primaryToolbar.
  45. *
  46. * @type {Object}
  47. */
  48. const primaryToolbarButtonIcon = {
  49. ..._toolbarButtonIcon,
  50. color: ColorPalette.darkGrey,
  51. fontSize: 24
  52. };
  53. /**
  54. * The icon style of the toolbar buttons in secondaryToolbar.
  55. *
  56. * @type {Object}
  57. */
  58. const secondaryToolbarButtonIcon = {
  59. ..._toolbarButtonIcon,
  60. color: ColorPalette.white,
  61. fontSize: 18
  62. };
  63. /**
  64. * The (conference) Toolbox/Toolbar related styles.
  65. */
  66. export default createStyleSheet({
  67. /**
  68. * The style of the toolbar button in {@link #primaryToolbar} which
  69. * hangs the current conference up.
  70. */
  71. hangup: {
  72. ...primaryToolbarButton,
  73. backgroundColor: ColorPalette.red
  74. },
  75. /**
  76. * The style of the toolbar which contains the primary buttons such as
  77. * hangup, audio and video mute.
  78. */
  79. primaryToolbar: {
  80. ..._toolbar,
  81. bottom: 0,
  82. flexDirection: 'row',
  83. justifyContent: 'center',
  84. left: 0,
  85. right: 0
  86. },
  87. /**
  88. * The style of toolbar buttons in {@link #primaryToolbar}.
  89. */
  90. primaryToolbarButton,
  91. /**
  92. * The icon style of the toolbar buttons in {@link #primaryToolbar}.
  93. */
  94. primaryToolbarButtonIcon,
  95. /**
  96. * The style of the toolbar which contains the secondary buttons such as
  97. * toggle camera facing mode.
  98. */
  99. secondaryToolbar: {
  100. ..._toolbar,
  101. bottom: 0,
  102. flexDirection: 'column',
  103. right: 0,
  104. top: 0
  105. },
  106. /**
  107. * The style of toolbar buttons in {@link #secondaryToolbar}.
  108. */
  109. secondaryToolbarButton: {
  110. ..._toolbarButton,
  111. backgroundColor: ColorPalette.darkGrey,
  112. borderRadius: 20,
  113. flexDirection: 'column',
  114. height: 40,
  115. margin: BoxModel.margin / 2,
  116. width: 40
  117. },
  118. /**
  119. * The icon style of the toolbar buttons in {@link #secondaryToolbar}.
  120. */
  121. secondaryToolbarButtonIcon,
  122. /**
  123. * The style of the root/top-level {@link Container} of {@link Toolbox}
  124. * which contains {@link Toolbar}s. This is narrow layout version which
  125. * spans from the top of the screen to the top of the filmstrip located at
  126. * the bottom of the screen.
  127. */
  128. toolboxNarrow: {
  129. flexDirection: 'column',
  130. flexGrow: 1
  131. },
  132. /**
  133. * The style of the root/top-level {@link Container} of {@link Toolbox}
  134. * which contains {@link Toolbar}s. This is wide layout version which spans
  135. * from the top to the bottom of the screen and is located to the right of
  136. * the filmstrip which is displayed as a column on the left side of the
  137. * screen.
  138. */
  139. toolboxWide: {
  140. bottom: 0,
  141. left: 0,
  142. position: 'absolute',
  143. right: 0,
  144. top: 0
  145. },
  146. /**
  147. * The style of toolbar buttons in {@link #primaryToolbar} which display
  148. * white icons.
  149. */
  150. whitePrimaryToolbarButton: {
  151. ...primaryToolbarButton,
  152. backgroundColor: ColorPalette.buttonUnderlay
  153. },
  154. /**
  155. * The icon style of toolbar buttons in {@link #primaryToolbar} which
  156. * display white icons.
  157. */
  158. whitePrimaryToolbarButtonIcon: {
  159. ...primaryToolbarButtonIcon,
  160. color: ColorPalette.white
  161. }
  162. });