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

175 lines
3.8 KiB
JavaScript
Raw Normal View History

2016-12-12 19:49:23 +00:00
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
};
/**
2017-04-01 05:52:40 +00:00
* 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,
2016-12-12 19:49:23 +00:00
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,
/**
2016-12-12 19:49:23 +00:00
* The style of the toolbar which contains the secondary buttons such as
* toggle camera facing mode.
*/
2016-12-12 19:49:23 +00:00
secondaryToolbar: {
..._toolbar,
2016-12-12 19:49:23 +00:00
bottom: 0,
flexDirection: 'column',
right: BoxModel.margin,
top: BoxModel.margin * 2
},
/**
* The style of toolbar buttons in {@link #secondaryToolbar}.
*/
2016-12-12 19:49:23 +00:00
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,
2016-12-12 19:49:23 +00:00
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
}
});