import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles'; /** * The base style for toolbars. * * @type {Object} */ const _toolbar = { flex: 1, position: 'absolute' }; /** * The base style of toolbar buttons (in primaryToolbar and secondaryToolbar). * * @type {Object} */ const _toolbarButton = { flex: 0, justifyContent: 'center', opacity: 0.7 }; /** * The base icon style of toolbar buttons (in primaryToolbar and * secondaryToolbar). * * @type {Object} */ const _toolbarButtonIcon = { alignSelf: 'center' }; /** * The style of toolbar buttons in primaryToolbar. */ const primaryToolbarButton = { ..._toolbarButton, backgroundColor: ColorPalette.white, borderRadius: 30, borderWidth: 0, flexDirection: 'row', height: 60, margin: BoxModel.margin, width: 60 }; /** * The icon style of the toolbar buttons in primaryToolbar. * * @type {Object} */ const primaryToolbarButtonIcon = { ..._toolbarButtonIcon, color: ColorPalette.darkGrey, fontSize: 24 }; /** * The icon style of the toolbar buttons in secondaryToolbar. * * @type {Object} */ const secondaryToolbarButtonIcon = { ..._toolbarButtonIcon, color: ColorPalette.white, fontSize: 18 }; /** * The (conference) Toolbox/Toolbar related styles. */ export const styles = createStyleSheet({ /** * The style of the toolbar button in {@link #primaryToolbar} which * hangs the current conference up. */ hangup: { ...primaryToolbarButton, backgroundColor: ColorPalette.red }, /** * The style of the toolbar which contains the primary buttons such as * hangup, audio and video mute. */ primaryToolbar: { ..._toolbar, bottom: 3 * BoxModel.margin, flexDirection: 'row', justifyContent: 'center', left: 0, right: 0 }, /** * The style of toolbar buttons in {@link #primaryToolbar}. */ primaryToolbarButton, /** * The icon style of the toolbar buttons in {@link #primaryToolbar}. */ primaryToolbarButtonIcon, /** * The style of the toolbar which contains the secondary buttons such as * toggle camera facing mode. */ secondaryToolbar: { ..._toolbar, bottom: 0, flexDirection: 'column', right: BoxModel.margin, top: BoxModel.margin * 2 }, /** * The style of toolbar buttons in {@link #secondaryToolbar}. */ secondaryToolbarButton: { ..._toolbarButton, backgroundColor: ColorPalette.darkGrey, borderRadius: 20, flexDirection: 'column', height: 40, margin: BoxModel.margin / 2, width: 40 }, /** * The icon style of the toolbar buttons in {@link #secondaryToolbar}. */ secondaryToolbarButtonIcon, /** * The icon style of the toolbar button in {@link #secondaryToolbar} which * toggles the audio-only mode of the current conference. */ toggleAudioOnlyIcon: { ...secondaryToolbarButtonIcon, transform: [ { rotate: '135deg' } ] }, /** * The style of the root/top-level {@link Container} of {@link Toolbox} * which contains {@link Toolbar}s. */ toolbarContainer: { bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 }, /** * The style of toolbar buttons in {@link #primaryToolbar} which display * white icons. */ whitePrimaryToolbarButton: { ...primaryToolbarButton, backgroundColor: ColorPalette.buttonUnderlay }, /** * The icon style of toolbar buttons in {@link #primaryToolbar} which * display white icons. */ whitePrimaryToolbarButtonIcon: { ...primaryToolbarButtonIcon, color: ColorPalette.white } });