jiti-meet/react/features/base/dialog/components/native/styles.js

263 lines
5.9 KiB
JavaScript
Raw Normal View History

2018-10-18 08:28:08 +00:00
// @flow
import { StyleSheet } from 'react-native';
import { ColorSchemeRegistry, schemeColor } from '../../../color-scheme';
import { BoxModel, ColorPalette } from '../../../styles';
2018-10-18 08:28:08 +00:00
import { PREFERRED_DIALOG_SIZE } from '../../constants';
const BORDER_RADIUS = 5;
export const FIELD_UNDERLINE = ColorPalette.transparent;
2019-01-05 16:49:21 +00:00
/**
* NOTE: These Material guidelines based values are currently only used in
* dialogs (and related) but later on it would be nice to export it into a base
* Material feature.
*/
export const MD_FONT_SIZE = 16;
export const MD_ITEM_HEIGHT = 48;
export const MD_ITEM_MARGIN_PADDING = 16;
2018-10-18 08:28:08 +00:00
export const PLACEHOLDER_COLOR = ColorPalette.lightGrey;
/**
* The React {@code Component} styles of {@code BottomSheet}. These have
* been implemented as per the Material Design guidelines:
* {@link https://material.io/guidelines/components/bottom-sheets.html}.
*/
2019-05-24 07:24:47 +00:00
export const bottomSheetStyles = {
sheetAreaCover: {
backgroundColor: ColorPalette.transparent,
flex: 1
},
2019-11-25 12:01:54 +00:00
scrollView: {
paddingHorizontal: MD_ITEM_MARGIN_PADDING
},
2018-10-18 08:28:08 +00:00
/**
* Style for the container of the sheet.
*/
2019-05-24 07:24:47 +00:00
sheetContainer: {
2019-05-24 11:39:41 +00:00
alignItems: 'stretch',
2019-05-24 07:24:47 +00:00
flex: 1,
2019-05-24 11:39:41 +00:00
flexDirection: 'column',
justifyContent: 'flex-end'
2019-05-24 07:24:47 +00:00
},
sheetItemContainer: {
2019-11-25 12:01:54 +00:00
flex: -1
2018-10-18 08:28:08 +00:00
}
2019-05-24 07:24:47 +00:00
};
2018-10-18 08:28:08 +00:00
export const brandedDialog = {
2018-10-18 08:28:08 +00:00
/**
* The style of bold {@code Text} rendered by the {@code Dialog}s of the
* feature authentication.
*/
boldDialogText: {
fontWeight: 'bold'
},
buttonFarLeft: {
borderBottomLeftRadius: BORDER_RADIUS
},
buttonFarRight: {
borderBottomRightRadius: BORDER_RADIUS
},
buttonWrapper: {
alignItems: 'stretch',
borderRadius: BORDER_RADIUS,
flexDirection: 'row'
},
closeWrapper: {
alignSelf: 'flex-end',
padding: BoxModel.padding
},
mainWrapper: {
alignSelf: 'stretch',
padding: BoxModel.padding * 2,
// The added bottom padding is to compensate the empty space around the
// close icon.
paddingBottom: BoxModel.padding * 3
},
overlay: {
...StyleSheet.absoluteFillObject,
alignItems: 'center',
backgroundColor: 'rgba(127, 127, 127, 0.6)',
flexDirection: 'row',
justifyContent: 'center',
padding: 30
},
overlayTouchable: {
...StyleSheet.absoluteFillObject
}
};
/**
* Reusable (colored) style for text in any branded dialogs.
*/
const brandedDialogText = {
color: schemeColor('text'),
fontSize: MD_FONT_SIZE,
textAlign: 'center'
};
export const inputDialog = {
bottomField: {
marginBottom: 0
2018-10-18 08:28:08 +00:00
},
fieldWrapper: {
...brandedDialog.mainWrapper,
paddingBottom: BoxModel.padding * 2
2019-07-10 08:19:00 +00:00
},
formMessage: {
alignSelf: 'flex-start',
fontStyle: 'italic',
margin: BoxModel.margin
2018-10-18 08:28:08 +00:00
}
};
2018-10-18 08:28:08 +00:00
/**
* Default styles for the items of a {@code BottomSheet}-based menu.
*
* These have been implemented as per the Material Design guidelines:
* {@link https://material.io/guidelines/components/bottom-sheets.html}.
2018-10-18 08:28:08 +00:00
*/
ColorSchemeRegistry.register('BottomSheet', {
2019-11-25 12:01:54 +00:00
buttons: {
/**
* Style for the {@code Icon} element in a generic item of the menu.
*/
iconStyle: {
color: schemeColor('icon'),
fontSize: 24
},
/**
* Style for the label in a generic item rendered in the menu.
*/
labelStyle: {
color: schemeColor('text'),
flexShrink: 1,
fontSize: MD_FONT_SIZE,
marginLeft: 32,
opacity: 0.90
},
/**
* Container style for a generic item rendered in the menu.
*/
style: {
alignItems: 'center',
flexDirection: 'row',
height: MD_ITEM_HEIGHT
},
/**
* Additional style that is not directly used as a style object.
*/
underlayColor: ColorPalette.overflowMenuItemUnderlay
},
expandIcon: {
color: schemeColor('icon'),
fontSize: 48,
opacity: 0.8
},
/**
* Bottom sheet's base style.
*/
sheet: {
2019-05-24 07:24:47 +00:00
backgroundColor: schemeColor('background')
2019-11-25 12:01:54 +00:00
}
2018-10-18 08:28:08 +00:00
});
/**
* Color schemed styles for all the component based on the abstract dialog.
*/
ColorSchemeRegistry.register('Dialog', {
button: {
backgroundColor: schemeColor('buttonBackground'),
flex: 1,
padding: BoxModel.padding * 1.5
},
/**
* Separator line for the buttons in a dialog.
*/
buttonSeparator: {
borderRightColor: schemeColor('border'),
borderRightWidth: 1
2018-10-18 08:28:08 +00:00
},
buttonLabel: {
color: schemeColor('buttonLabel'),
fontSize: MD_FONT_SIZE,
textAlign: 'center'
},
/**
* Style of the close icon on a dialog.
*/
closeStyle: {
color: schemeColor('icon'),
fontSize: MD_FONT_SIZE
},
/**
* Base style of the dialogs.
*/
dialog: {
alignItems: 'stretch',
backgroundColor: schemeColor('background'),
borderColor: schemeColor('border'),
borderRadius: BORDER_RADIUS,
borderWidth: 1,
flex: 1,
flexDirection: 'column',
maxWidth: PREFERRED_DIALOG_SIZE
},
/**
* Field on an input dialog.
*/
2018-10-18 08:28:08 +00:00
field: {
...brandedDialogText,
2018-10-18 08:28:08 +00:00
borderBottomWidth: 1,
borderColor: schemeColor('border'),
2018-10-18 08:28:08 +00:00
margin: BoxModel.margin,
textAlign: 'left'
},
/**
* Style for the field label on an input dialog.
*/
2018-10-18 08:28:08 +00:00
fieldLabel: {
...brandedDialogText,
2018-10-18 08:28:08 +00:00
margin: BoxModel.margin,
textAlign: 'left'
},
text: {
...brandedDialogText
2019-04-23 12:30:46 +00:00
},
topBorderContainer: {
borderTopColor: schemeColor('border'),
borderTopWidth: 1
2018-10-18 08:28:08 +00:00
}
});