160 lines
3.5 KiB
JavaScript
160 lines
3.5 KiB
JavaScript
import { createStyleSheet, BoxModel } from '../../base/styles';
|
|
|
|
const AVATAR_OPACITY = 0.4;
|
|
|
|
const AVATAR_SIZE = 65;
|
|
|
|
const OVERLAY_FONT_COLOR = 'rgba(255, 255, 255, 0.6)';
|
|
|
|
export const UNDERLAY_COLOR = 'rgba(255, 255, 255, 0.2)';
|
|
|
|
/**
|
|
* The styles of the React {@code Component}s of the feature recent-list i.e.
|
|
* {@code RecentList}.
|
|
*/
|
|
export default createStyleSheet({
|
|
|
|
/**
|
|
* The style of the actual avatar.
|
|
*/
|
|
avatar: {
|
|
alignItems: 'center',
|
|
backgroundColor: `rgba(23, 160, 219, ${AVATAR_OPACITY})`,
|
|
borderRadius: AVATAR_SIZE,
|
|
height: AVATAR_SIZE,
|
|
justifyContent: 'center',
|
|
width: AVATAR_SIZE
|
|
},
|
|
|
|
/**
|
|
* The style of the avatar container that makes the avatar rounded.
|
|
*/
|
|
avatarContainer: {
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
paddingTop: 5
|
|
},
|
|
|
|
/**
|
|
* Simple {@code Text} content of the avatar (the actual initials).
|
|
*/
|
|
avatarContent: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0)',
|
|
color: OVERLAY_FONT_COLOR,
|
|
fontSize: 32,
|
|
fontWeight: '100',
|
|
textAlign: 'center'
|
|
},
|
|
|
|
/**
|
|
* List of styles of the avatar of a remote meeting (not the default
|
|
* server). The number of colors are limited because they should match
|
|
* nicely.
|
|
*/
|
|
avatarRemoteServer1: {
|
|
backgroundColor: `rgba(232, 105, 156, ${AVATAR_OPACITY})`
|
|
},
|
|
|
|
avatarRemoteServer2: {
|
|
backgroundColor: `rgba(255, 198, 115, ${AVATAR_OPACITY})`
|
|
},
|
|
|
|
avatarRemoteServer3: {
|
|
backgroundColor: `rgba(128, 128, 255, ${AVATAR_OPACITY})`
|
|
},
|
|
|
|
avatarRemoteServer4: {
|
|
backgroundColor: `rgba(105, 232, 194, ${AVATAR_OPACITY})`
|
|
},
|
|
|
|
avatarRemoteServer5: {
|
|
backgroundColor: `rgba(234, 255, 128, ${AVATAR_OPACITY})`
|
|
},
|
|
|
|
/**
|
|
* The style of the conference length (if rendered).
|
|
*/
|
|
confLength: {
|
|
color: OVERLAY_FONT_COLOR,
|
|
fontWeight: 'normal'
|
|
},
|
|
|
|
/**
|
|
* The top level container style of the list.
|
|
*/
|
|
container: {
|
|
flex: 1
|
|
},
|
|
|
|
/**
|
|
* Shows the container disabled.
|
|
*/
|
|
containerDisabled: {
|
|
opacity: 0.2
|
|
},
|
|
|
|
/**
|
|
* Second line of the list (date). May be extended with server name later.
|
|
*/
|
|
date: {
|
|
color: OVERLAY_FONT_COLOR
|
|
},
|
|
|
|
/**
|
|
* The style of the details container (right side) of the list.
|
|
*/
|
|
detailsContainer: {
|
|
alignItems: 'flex-start',
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
marginLeft: 2 * BoxModel.margin
|
|
},
|
|
|
|
/**
|
|
* The container for an info line with an inline icon.
|
|
*/
|
|
infoWithIcon: {
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start'
|
|
},
|
|
|
|
/**
|
|
* The style of an inline icon in an info line.
|
|
*/
|
|
inlineIcon: {
|
|
color: OVERLAY_FONT_COLOR,
|
|
marginRight: 5
|
|
},
|
|
|
|
/**
|
|
* First line of the list (room name).
|
|
*/
|
|
roomName: {
|
|
color: OVERLAY_FONT_COLOR,
|
|
fontSize: 18,
|
|
fontWeight: 'bold'
|
|
},
|
|
|
|
/**
|
|
* The style of one single row in the list.
|
|
*/
|
|
row: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
padding: 8,
|
|
paddingBottom: 0
|
|
},
|
|
|
|
/**
|
|
* The style of the server name component (if rendered).
|
|
*/
|
|
serverName: {
|
|
color: OVERLAY_FONT_COLOR,
|
|
fontWeight: 'normal'
|
|
}
|
|
});
|