mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2026-05-15 13:47:46 +00:00
d55e0f70d9
As an intermediate step on the path to merging jitsi-meet and
jitsi-meet-react, import the whole source code of jitsi-meet-react as it
stands at
2f23d98424
i.e. the lastest master at the time of this import. No modifications are
applied to the imported source code in order to preserve a complete
snapshot of it in the repository of jitsi-meet and, thus, facilitate
comparison later on. Consequently, the source code of jitsi-meet and/or
jitsi-meet-react may not work. For example, jitsi-meet's jshint may be
unable to parse jitsi-meet-react's source code.
110 lines
1.9 KiB
JavaScript
110 lines
1.9 KiB
JavaScript
import { ColorPalette, createStyleSheet } from '../../base/styles';
|
|
|
|
/**
|
|
* Generic styles for a button.
|
|
*
|
|
* @type {Object}
|
|
*/
|
|
const button = {
|
|
alignSelf: 'center',
|
|
borderRadius: 35,
|
|
borderWidth: 0,
|
|
flexDirection: 'row',
|
|
height: 60,
|
|
justifyContent: 'center',
|
|
width: 60
|
|
};
|
|
|
|
/**
|
|
* Generic container for buttons.
|
|
*
|
|
* @type {Object}
|
|
*/
|
|
const container = {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
left: 0,
|
|
position: 'absolute',
|
|
right: 0
|
|
};
|
|
|
|
/**
|
|
* Generic styles for an icon.
|
|
*
|
|
* @type {Object}
|
|
*/
|
|
const icon = {
|
|
alignSelf: 'center',
|
|
color: ColorPalette.jitsiDarkGrey,
|
|
fontSize: 24
|
|
};
|
|
|
|
/**
|
|
* The (conference) toolbar related styles.
|
|
* TODO Make styles more generic and reusable. Use ColorPalette for all colors.
|
|
*/
|
|
export const styles = createStyleSheet({
|
|
/**
|
|
* The toolbar button icon style.
|
|
*/
|
|
icon: {
|
|
...icon,
|
|
color: ColorPalette.jitsiDarkGrey
|
|
},
|
|
|
|
/**
|
|
* The toggle camera facing mode button style.
|
|
*/
|
|
toggleCameraFacingModeButton: {
|
|
...button,
|
|
backgroundColor: 'transparent'
|
|
},
|
|
|
|
/**
|
|
* Container for toggle camera facing mode button.
|
|
*/
|
|
toggleCameraFacingModeContainer: {
|
|
...container,
|
|
height: 60,
|
|
justifyContent: 'flex-end'
|
|
},
|
|
|
|
/**
|
|
* The toolbar button style.
|
|
*/
|
|
toolbarButton: {
|
|
...button,
|
|
backgroundColor: 'white',
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
opacity: 0.8
|
|
},
|
|
|
|
/**
|
|
* The toolbar buttons container style.
|
|
*/
|
|
toolbarButtonsContainer: {
|
|
...container,
|
|
bottom: 30,
|
|
height: 60,
|
|
justifyContent: 'center'
|
|
},
|
|
|
|
/**
|
|
* The toolbar container style.
|
|
*/
|
|
toolbarContainer: {
|
|
...container,
|
|
bottom: 0,
|
|
top: 0
|
|
},
|
|
|
|
/**
|
|
* The toolbar white button icon style.
|
|
*/
|
|
whiteIcon: {
|
|
...icon,
|
|
color: 'white'
|
|
}
|
|
});
|