jiti-meet/react/features/toolbox/components/native/styles.js

194 lines
4.3 KiB
JavaScript

// @flow
import { StyleSheet } from 'react-native';
import { BoxModel, ColorPalette, createStyleSheet } from '../../../base/styles';
// Toolbox, toolbar:
/**
* The style of toolbar buttons.
*/
const toolbarButton = {
backgroundColor: ColorPalette.white,
borderRadius: 20,
borderWidth: 0,
flex: 0,
flexDirection: 'row',
height: 40,
justifyContent: 'center',
// XXX We probably tested BoxModel.margin and discovered it to be too small
// for our taste.
marginHorizontal: 7,
opacity: 0.7,
width: 40
};
/**
* The icon style of the toolbar buttons.
*/
const toolbarButtonIcon = {
alignSelf: 'center',
color: ColorPalette.darkGrey,
fontSize: 22
};
/**
* The Toolbox and toolbar related styles.
*/
const styles = createStyleSheet({
/**
* The style of the toolbar button which hangs the current conference up.
*/
hangupButton: {
...toolbarButton,
backgroundColor: ColorPalette.red,
borderRadius: 30,
height: 60,
width: 60
},
/**
* The icon style of toolbar buttons which hangs the current conference up.
*/
hangupButtonIcon: {
...toolbarButtonIcon,
color: ColorPalette.white,
fontSize: 24
},
/**
* The style of the toolbar.
*/
toolbar: {
alignItems: 'center',
bottom: 0,
flex: 0,
flexDirection: 'row',
justifyContent: 'center',
left: 0,
marginBottom: BoxModel.margin / 2,
paddingHorizontal: BoxModel.margin,
position: 'absolute',
right: 0
},
/**
* The style of toolbar buttons.
*/
toolbarButton,
/**
* The icon style of the toolbar buttons.
*/
toolbarButtonIcon,
/**
* The style of the root/top-level {@link Container} of {@link Toolbox}.
* This is the narrow layout version which locates the toolbar on top of
* the filmstrip, at the bottom of the screen.
*/
toolboxNarrow: {
flexDirection: 'column',
flexGrow: 1
},
/**
* The style of the root/top-level {@link Container} of {@link Toolbox}.
* This is the wide layout version which locates the toolbar at the bottom
* of the screen.
*/
toolboxWide: {
...StyleSheet.absoluteFillObject
},
/**
* The style of toolbar buttons which display white icons.
*/
whiteToolbarButton: {
...toolbarButton,
backgroundColor: ColorPalette.buttonUnderlay
},
/**
* The icon style of toolbar buttons which display white icons.
*/
whiteToolbarButtonIcon: {
...toolbarButtonIcon,
color: ColorPalette.white
}
});
export default styles;
/**
* Styles for the hangup button.
*/
export const hangupButtonStyles = {
iconStyle: styles.whiteToolbarButtonIcon,
style: styles.hangupButton,
underlayColor: ColorPalette.buttonUnderlay
};
/**
* Styles for buttons in the toolbar.
*/
export const toolbarButtonStyles = {
iconStyle: styles.toolbarButtonIcon,
style: styles.toolbarButton
};
/**
* Styles for toggled buttons in the toolbar.
*/
export const toolbarToggledButtonStyles = {
iconStyle: styles.whiteToolbarButtonIcon,
style: styles.whiteToolbarButton
};
// Overflow menu:
/**
* Styles for the {@code OverflowMenu} items.
*
* These have been implemented as per the Material Design guidelines:
* {@link https://material.io/guidelines/components/bottom-sheets.html}.
*/
const overflowMenuStyles = createStyleSheet({
/**
* Container style for a {@code ToolboxItem} rendered in the
* {@code OverflowMenu}.
*/
container: {
alignItems: 'center',
flexDirection: 'row',
height: 48
},
/**
* Style for the {@code Icon} element in a {@code ToolboxItem} rendered in
* the {@code OverflowMenu}.
*/
icon: {
fontSize: 24
},
/**
* Style for the label in a {@code ToolboxItem} rendered in the
* {@code OverflowMenu}.
*/
label: {
flex: 1,
fontSize: 16,
marginLeft: 32,
opacity: 0.90
}
});
export const overflowMenuItemStyles = {
iconStyle: overflowMenuStyles.icon,
labelStyle: overflowMenuStyles.label,
style: overflowMenuStyles.container,
underlayColor: '#eee'
};