283 lines
6.8 KiB
TypeScript
283 lines
6.8 KiB
TypeScript
import { LABEL_SIZE } from '../../../base/label/components/native/styles';
|
|
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
|
|
|
|
export const INSECURE_ROOM_NAME_LABEL_COLOR = BaseTheme.palette.actionDanger;
|
|
|
|
const TITLE_BAR_BUTTON_SIZE = 24;
|
|
|
|
export const TIME_TIMER_COLLAPSE_DURATION = 600;
|
|
|
|
// Sized to match the Record/Transcribe chips.
|
|
const TIME_TIMER_DISK_SIZE = 20;
|
|
const TIME_TIMER_RADIUS = 3;
|
|
const TIME_TIMER_PAD_X = BaseTheme.spacing[2];
|
|
|
|
|
|
/**
|
|
* The styles of the safe area view that contains the title bar.
|
|
*/
|
|
const titleBarSafeView = {
|
|
left: 0,
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0
|
|
};
|
|
|
|
const alwaysOnTitleBar = {
|
|
alignItems: 'center',
|
|
alignSelf: 'flex-end',
|
|
backgroundColor: 'rgba(0, 0, 0, .5)',
|
|
borderRadius: BaseTheme.shape.borderRadius,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
marginTop: BaseTheme.spacing[3],
|
|
paddingRight: BaseTheme.spacing[0],
|
|
'&:not(:empty)': {
|
|
padding: BaseTheme.spacing[1]
|
|
}
|
|
};
|
|
|
|
/**
|
|
* The styles of the feature conference.
|
|
*/
|
|
export default {
|
|
|
|
/**
|
|
* {@code Conference} Style.
|
|
*/
|
|
conference: {
|
|
alignSelf: 'stretch',
|
|
backgroundColor: BaseTheme.palette.uiBackground,
|
|
flex: 1
|
|
},
|
|
|
|
displayNameContainer: {
|
|
margin: BaseTheme.spacing[3]
|
|
},
|
|
|
|
/**
|
|
* View that contains the indicators.
|
|
*/
|
|
indicatorContainer: {
|
|
flex: 1,
|
|
flexDirection: 'row'
|
|
},
|
|
|
|
titleBarButtonContainer: {
|
|
borderRadius: 3,
|
|
height: BaseTheme.spacing[7],
|
|
marginTop: BaseTheme.spacing[1],
|
|
marginRight: BaseTheme.spacing[1],
|
|
zIndex: 1,
|
|
width: BaseTheme.spacing[7]
|
|
},
|
|
|
|
titleBarButton: {
|
|
iconStyle: {
|
|
color: BaseTheme.palette.icon01,
|
|
padding: 12,
|
|
fontSize: TITLE_BAR_BUTTON_SIZE
|
|
},
|
|
underlayColor: 'transparent'
|
|
},
|
|
|
|
lonelyMeetingContainer: {
|
|
alignSelf: 'stretch',
|
|
alignItems: 'center',
|
|
padding: BaseTheme.spacing[3]
|
|
},
|
|
|
|
lonelyMessage: {
|
|
color: BaseTheme.palette.text01,
|
|
paddingVertical: BaseTheme.spacing[2]
|
|
},
|
|
|
|
pipButtonContainer: {
|
|
'&:not(:empty)': {
|
|
borderRadius: 3,
|
|
height: BaseTheme.spacing[7],
|
|
marginTop: BaseTheme.spacing[1],
|
|
marginLeft: BaseTheme.spacing[1],
|
|
zIndex: 1,
|
|
width: BaseTheme.spacing[7]
|
|
}
|
|
},
|
|
|
|
pipButton: {
|
|
iconStyle: {
|
|
color: BaseTheme.palette.icon01,
|
|
padding: 12,
|
|
fontSize: TITLE_BAR_BUTTON_SIZE
|
|
},
|
|
underlayColor: 'transparent'
|
|
},
|
|
|
|
titleBarSafeViewColor: {
|
|
...titleBarSafeView,
|
|
backgroundColor: BaseTheme.palette.uiBackground
|
|
},
|
|
|
|
titleBarSafeViewTransparent: {
|
|
...titleBarSafeView
|
|
},
|
|
|
|
titleBarWrapper: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
height: BaseTheme.spacing[8],
|
|
justifyContent: 'center'
|
|
},
|
|
|
|
alwaysOnTitleBar: {
|
|
...alwaysOnTitleBar,
|
|
marginRight: BaseTheme.spacing[2]
|
|
},
|
|
|
|
alwaysOnTitleBarWide: {
|
|
...alwaysOnTitleBar,
|
|
marginRight: BaseTheme.spacing[12]
|
|
},
|
|
|
|
expandedLabelWrapper: {
|
|
zIndex: 1
|
|
},
|
|
|
|
roomTimer: {
|
|
...BaseTheme.typography.bodyShortBold,
|
|
color: BaseTheme.palette.text01,
|
|
lineHeight: 14,
|
|
textAlign: 'center'
|
|
},
|
|
|
|
roomTimerView: {
|
|
backgroundColor: BaseTheme.palette.ui03,
|
|
borderRadius: BaseTheme.shape.borderRadius,
|
|
height: 32,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: BaseTheme.spacing[2],
|
|
paddingVertical: BaseTheme.spacing[1],
|
|
minWidth: 50
|
|
},
|
|
|
|
roomName: {
|
|
color: BaseTheme.palette.text01,
|
|
...BaseTheme.typography.bodyShortBold,
|
|
paddingVertical: 6
|
|
},
|
|
|
|
roomNameView: {
|
|
backgroundColor: 'rgba(0,0,0,0.6)',
|
|
borderBottomLeftRadius: 3,
|
|
borderTopLeftRadius: 3,
|
|
flexShrink: 1,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 10
|
|
},
|
|
|
|
roomNameWrapper: {
|
|
flexDirection: 'row',
|
|
marginRight: 10,
|
|
marginLeft: 8,
|
|
flexShrink: 1,
|
|
flexGrow: 1
|
|
},
|
|
|
|
/**
|
|
* The style of the {@link View} which expands over the whole
|
|
* {@link Conference} area and splits it between the {@link Filmstrip} and
|
|
* the {@link Toolbox}.
|
|
*/
|
|
toolboxAndFilmstripContainer: {
|
|
bottom: 0,
|
|
flexDirection: 'column',
|
|
justifyContent: 'flex-end',
|
|
left: 0,
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0
|
|
},
|
|
|
|
insecureRoomNameLabel: {
|
|
backgroundColor: INSECURE_ROOM_NAME_LABEL_COLOR,
|
|
borderRadius: BaseTheme.shape.borderRadius,
|
|
height: 32
|
|
},
|
|
|
|
raisedHandsCountLabel: {
|
|
alignItems: 'center',
|
|
backgroundColor: BaseTheme.palette.warning02,
|
|
borderRadius: BaseTheme.shape.borderRadius,
|
|
flexDirection: 'row',
|
|
marginBottom: BaseTheme.spacing[0],
|
|
marginLeft: BaseTheme.spacing[0]
|
|
},
|
|
|
|
raisedHandsCountLabelText: {
|
|
color: BaseTheme.palette.uiBackground,
|
|
paddingLeft: BaseTheme.spacing[2]
|
|
},
|
|
|
|
timerExpiredFrame: {
|
|
borderColor: BaseTheme.palette.timeTimerExpiredDisk,
|
|
borderCurve: 'circular',
|
|
borderWidth: 3,
|
|
bottom: 0,
|
|
left: 0,
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: 0,
|
|
zIndex: 1000
|
|
},
|
|
|
|
timeTimerContainer: {
|
|
alignItems: 'center',
|
|
flexDirection: 'row',
|
|
height: LABEL_SIZE,
|
|
marginBottom: 0,
|
|
marginRight: BaseTheme.spacing[1]
|
|
},
|
|
|
|
timeTimerScheduledSegment: {
|
|
alignItems: 'center',
|
|
alignSelf: 'stretch',
|
|
borderBottomLeftRadius: TIME_TIMER_RADIUS,
|
|
borderTopLeftRadius: TIME_TIMER_RADIUS,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
paddingHorizontal: TIME_TIMER_PAD_X
|
|
},
|
|
|
|
timeTimerScheduledText: {
|
|
...BaseTheme.typography.labelRegular,
|
|
color: BaseTheme.palette.text01
|
|
},
|
|
|
|
timeTimerTimerSegment: {
|
|
alignItems: 'center',
|
|
alignSelf: 'stretch',
|
|
borderBottomRightRadius: TIME_TIMER_RADIUS,
|
|
borderTopRightRadius: TIME_TIMER_RADIUS,
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
paddingHorizontal: TIME_TIMER_PAD_X
|
|
},
|
|
|
|
timeTimerElapsedText: {
|
|
...BaseTheme.typography.labelRegular,
|
|
marginRight: BaseTheme.spacing[2]
|
|
},
|
|
|
|
timeTimerCollapsedChip: {
|
|
alignItems: 'center',
|
|
borderRadius: TIME_TIMER_RADIUS,
|
|
height: LABEL_SIZE,
|
|
justifyContent: 'center',
|
|
marginBottom: 0,
|
|
marginRight: BaseTheme.spacing[1],
|
|
paddingHorizontal: TIME_TIMER_PAD_X
|
|
}
|
|
};
|
|
|
|
export const TIME_TIMER_DISK = TIME_TIMER_DISK_SIZE;
|