haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Introduce SafeArea for Settings and Header

This commit is contained in:
zbettenbuk 2018-02-02 15:48:43 +01:00 committed by Lyubo Marinov
parent 9b04a7852a
commit 9a9890f86c
24 changed files with 398 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
android/app/src/main/res/values/styles.xml
View File

@ -2,6 +2,5 @@
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>

6
lang/main.json
View File

@ -47,13 +47,15 @@
},
"welcomepage":{
"appDescription": "Go ahead, video chat with the whole team. In fact, invite everyone you know. __app__ is a fully encrypted, 100% open source video conferencing solution that you can use all day, every day, for free — with no account needed.",
"audioOnlyLabel": "Voice",
"go": "GO",
"join": "JOIN",
"privacy": "Privacy",
"roomname": "Enter room name",
"sendFeedback": "Send feedback",
"terms": "Terms",
"title": "More secure, more flexible, and completely free video conferencing"
"title": "More secure, more flexible, and completely free video conferencing",
"videoEnabledLabel": "Video"
},
"startupoverlay": {
"policyText": " ",
@ -500,7 +502,7 @@
"title": "Call info",
"tooltip": "Get access info about the meeting"
},
"profileModal": {
"settingsScreen": {
"alertOk": "OK",
"alertTitle": "Warning",
"alertURLText": "The entered server URL is invalid",

4
react/features/app-settings/actionTypes.js
View File

@ -1,6 +1,6 @@
/**
* The type of (redux) action which signals the request
* to hide the app settings modal.
* to hide the app settings screen.
*
* {
* type: HIDE_APP_SETTINGS
@ -10,7 +10,7 @@ export const HIDE_APP_SETTINGS = Symbol('HIDE_APP_SETTINGS');
/**
* The type of (redux) action which signals the request
* to show the app settings modal where available.
* to show the app settings screen where available.
*
* {
* type: SHOW_APP_SETTINGS

4
react/features/app-settings/actions.js
View File

@ -3,7 +3,7 @@
import { HIDE_APP_SETTINGS, SHOW_APP_SETTINGS } from './actionTypes';
/**
* Redux-signals the request to hide the app settings modal.
* Redux-signals the request to hide the app settings screen.
*
* @returns {{
* type: HIDE_APP_SETTINGS
@ -16,7 +16,7 @@ export function hideAppSettings() {
}
/**
* Redux-signals the request to open the app settings modal.
* Redux-signals the request to open the app settings screen.
*
* @returns {{
* type: SHOW_APP_SETTINGS

8
react/features/app-settings/components/AbstractAppSettings.js
View File

@ -9,11 +9,6 @@ import { getProfile, updateProfile } from '../../base/profile';
*/
type Props = {
/**
* The current aspect ratio of the screen.
*/
_aspectRatio: Symbol,
/**
* The current profile object.
*/
@ -25,7 +20,7 @@ type Props = {
_serverURL: string,
/**
* The visibility prop of the settings modal.
* The visibility prop of the settings screen.
*/
_visible: boolean,
@ -173,7 +168,6 @@ export function _mapStateToProps(state: Object) {
const _profile = getProfile(state);
return {
_aspectRatio: state['features/base/responsive-ui'].aspectRatio,
_profile,
_serverURL,
_visible: state['features/app-settings'].visible

186
react/features/app-settings/components/AppSettings.native.js
View File

@ -4,6 +4,7 @@ import React from 'react';
import {
Alert,
Modal,
SafeAreaView,
ScrollView,
Switch,
Text,
@ -13,16 +14,15 @@ import {
import { connect } from 'react-redux';
import { translate } from '../../base/i18n';
import { getSafetyOffset, isIPad } from '../../base/react';
import { ASPECT_RATIO_NARROW } from '../../base/responsive-ui';
import { Header } from '../../base/react';
import { PlatformElements } from '../../base/styles';
import { _mapStateToProps, AbstractAppSettings } from './AbstractAppSettings';
import { hideAppSettings } from '../actions';
import BackButton from './BackButton.native';
import FormRow from './FormRow.native';
import FormSectionHeader from './FormSectionHeader.native';
import { normalizeUserInputURL } from '../functions';
import styles, { HEADER_PADDING } from './styles';
import { BackButton, FormRow, FormSectionHeader } from './_';
import { _mapStateToProps, AbstractAppSettings } from './AbstractAppSettings';
import styles from './styles';
/**
* The native container rendering the app settings page.
@ -40,7 +40,6 @@ class AppSettings extends AbstractAppSettings {
constructor(props) {
super(props);
this._getSafetyPadding = this._getSafetyPadding.bind(this);
this._onBlurServerURL = this._onBlurServerURL.bind(this);
this._onRequestClose = this._onRequestClose.bind(this);
this._setURLFieldReference = this._setURLFieldReference.bind(this);
@ -56,110 +55,91 @@ class AppSettings extends AbstractAppSettings {
render() {
const { _profile, t } = this.props;
// FIXME: presentationStyle is added to workaround orientation issue on
// iOS
return (
<Modal
animationType = 'slide'
onRequestClose = { this._onRequestClose }
presentationStyle = 'overFullScreen'
presentationStyle = 'fullScreen'
supportedOrientations = { [
'landscape',
'portrait'
] }
visible = { this.props._visible }>
<View
style = { [
styles.headerContainer,
this._getSafetyPadding()
] } >
<BackButton
onPress = { this._onRequestClose }
style = { styles.settingsBackButton } />
<Text style = { [ styles.text, styles.headerTitle ] } >
{ t('profileModal.header') }
</Text>
<View style = { PlatformElements.page }>
<Header>
<BackButton
onPress = { this._onRequestClose } />
<Text
style = { [
styles.text,
PlatformElements.headerText
] } >
{ t('settingsScreen.header') }
</Text>
</Header>
<SafeAreaView style = { styles.settingsForm }>
<ScrollView>
<FormSectionHeader
i18nLabel = 'settingsScreen.profileSection' />
<FormRow
fieldSeparator = { true }
i18nLabel = 'settingsScreen.displayName' >
<TextInput
onChangeText = { this._onChangeDisplayName }
placeholder = 'John Doe'
value = { _profile.displayName } />
</FormRow>
<FormRow
i18nLabel = 'settingsScreen.email' >
<TextInput
keyboardType = { 'email-address' }
onChangeText = { this._onChangeEmail }
placeholder = 'email@example.com'
value = { _profile.email } />
</FormRow>
<FormSectionHeader
i18nLabel
= 'settingsScreen.conferenceSection' />
<FormRow
fieldSeparator = { true }
i18nLabel = 'settingsScreen.serverURL' >
<TextInput
autoCapitalize = 'none'
onBlur = { this._onBlurServerURL }
onChangeText = { this._onChangeServerURL }
placeholder = { this.props._serverURL }
value = { _profile.serverURL } />
</FormRow>
<FormRow
fieldSeparator = { true }
i18nLabel
= 'settingsScreen.startWithAudioMuted' >
<Switch
onValueChange = {
this._onStartAudioMutedChange
}
value = {
_profile.startWithAudioMuted
} />
</FormRow>
<FormRow
i18nLabel
= 'settingsScreen.startWithVideoMuted' >
<Switch
onValueChange = {
this._onStartVideoMutedChange
}
value = {
_profile.startWithVideoMuted
} />
</FormRow>
</ScrollView>
</SafeAreaView>
</View>
<ScrollView style = { styles.settingsContainer } >
<FormSectionHeader
i18nLabel = 'profileModal.profileSection' />
<FormRow
fieldSeparator = { true }
i18nLabel = 'profileModal.displayName' >
<TextInput
onChangeText = { this._onChangeDisplayName }
placeholder = 'John Doe'
value = { _profile.displayName } />
</FormRow>
<FormRow
i18nLabel = 'profileModal.email' >
<TextInput
keyboardType = { 'email-address' }
onChangeText = { this._onChangeEmail }
placeholder = 'email@example.com'
value = { _profile.email } />
</FormRow>
<FormSectionHeader
i18nLabel = 'profileModal.conferenceSection' />
<FormRow
fieldSeparator = { true }
i18nLabel = 'profileModal.serverURL' >
<TextInput
autoCapitalize = 'none'
onBlur = { this._onBlurServerURL }
onChangeText = { this._onChangeServerURL }
placeholder = { this.props._serverURL }
ref = { this._setURLFieldReference }
value = { _profile.serverURL } />
</FormRow>
<FormRow
fieldSeparator = { true }
i18nLabel = 'profileModal.startWithAudioMuted' >
<Switch
onValueChange = {
this._onStartAudioMutedChange
}
value = {
_profile.startWithAudioMuted
} />
</FormRow>
<FormRow
i18nLabel = 'profileModal.startWithVideoMuted' >
<Switch
onValueChange = {
this._onStartVideoMutedChange
}
value = {
_profile.startWithVideoMuted
} />
</FormRow>
</ScrollView>
</Modal>
);
}
_getSafetyPadding: () => Object;
/**
* Calculates header safety padding for mobile devices. See comment in
* functions.js.
*
* @private
* @returns {Object}
*/
_getSafetyPadding() {
if (isIPad() || this.props._aspectRatio === ASPECT_RATIO_NARROW) {
const safeOffset = Math.max(getSafetyOffset(), HEADER_PADDING);
return {
paddingTop: safeOffset
};
}
return undefined;
}
_onBlurServerURL: () => void;
/**
@ -183,8 +163,6 @@ class AppSettings extends AbstractAppSettings {
_onStartVideoMutedChange: (boolean) => void;
_onRequestClose: () => void;
/**
* Processes the server URL. It normalizes it and an error alert is
* displayed in case it's incorrect.
@ -208,6 +186,8 @@ class AppSettings extends AbstractAppSettings {
}
}
_onRequestClose: () => void;
/**
* Handles the back button.
* Also invokes normalizeUserInputURL to validate the URL entered
@ -243,12 +223,12 @@ class AppSettings extends AbstractAppSettings {
const { t } = this.props;
Alert.alert(
t('profileModal.alertTitle'),
t('profileModal.alertURLText'),
t('settingsScreen.alertTitle'),
t('settingsScreen.alertURLText'),
[
{
onPress: () => this._urlField.focus(),
text: t('profileModal.alertOk')
text: t('settingsScreen.alertOk')
}
]
);

117
react/features/app-settings/components/FormSectionHeader.native.js
View File

@ -1,117 +0,0 @@
// @flow
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { connect } from 'react-redux';
import { translate } from '../../base/i18n';
import { getSafetyOffset } from '../../base/react';
import { ASPECT_RATIO_WIDE } from '../../base/responsive-ui';
import styles, { CONTAINER_PADDING } from './styles';
/**
* The type of the React {@code Component} props of {@link FormSectionHeader}
*/
type Props = {
/**
* The current aspect ratio of the screen.
*/
_aspectRatio: Symbol,
/**
* The i18n key of the text label of the section.
*/
i18nLabel: string,
/**
* An external style object passed to the component.
*/
style: Object,
/**
* Invoked to obtain translated strings.
*/
t: Function
}
/**
* Implements a React {@code Component} which renders a section header on a
* form. This calculates the available safe view as well.
*/
class FormSectionHeader extends Component<Props> {
/**
* Initializes a new {@code FormSectionHeader} instance.
*
* @param {Object} props - Component properties.
*/
constructor(props) {
super(props);
this._getSafetyMargin = this._getSafetyMargin.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @override
* @returns {ReactElement}
*/
render() {
const { t } = this.props;
return (
<View
style = { [
styles.formSectionTitle,
this.props.style,
this._getSafetyMargin()
] } >
<Text>
{ t(this.props.i18nLabel) }
</Text>
</View>
);
}
_getSafetyMargin: () => Object;
/**
* Calculates the safety margin for this header. See comment in
* functions.js.
*
* @private
* @returns {Object}
*/
_getSafetyMargin() {
if (this.props._aspectRatio === ASPECT_RATIO_WIDE) {
const safeOffset
= Math.max(getSafetyOffset() - CONTAINER_PADDING, 0);
return {
marginLeft: safeOffset,
marginRight: safeOffset
};
}
return undefined;
}
}
/**
* Maps (parts of) the redux state to the React {@code Component} props of
* {@code FormSectionHeader}.
*
* @param {Object} state - The redux state.
* @protected
* @returns {Object}
*/
export function _mapStateToProps(state: Object) {
return {
_aspectRatio: state['features/base/responsive-ui'].aspectRatio
};
}
export default translate(connect(_mapStateToProps)(FormSectionHeader));

1
react/features/app-settings/components/_.native.js Normal file
View File

@ -0,0 +1 @@
export * from './native';

0
react/features/base/react/functions.web.js → react/features/app-settings/components/_.web.js
View File

9
react/features/app-settings/components/BackButton.native.js → react/features/app-settings/components/native/BackButton.js
View File

@ -3,9 +3,8 @@
import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import { Icon } from '../../base/font-icons';
import styles from './styles';
import { Icon } from '../../../base/font-icons';
import { PlatformElements } from '../../../base/styles';
/**
* The type of the React {@code Component} props of {@link BackButton}
@ -20,7 +19,7 @@ type Props = {
/**
* An external style object passed to the component.
*/
style: Object
style?: Object
};
/**
@ -41,7 +40,7 @@ export default class BackButton extends Component<Props> {
<Icon
name = { 'arrow_back' }
style = { [
styles.backIcon,
PlatformElements.headerButton,
this.props.style
] } />
</TouchableOpacity>

47
react/features/app-settings/components/FormRow.native.js → react/features/app-settings/components/native/FormRow.js
View File

@ -2,24 +2,16 @@
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { connect } from 'react-redux';
import { translate } from '../../base/i18n';
import { getSafetyOffset } from '../../base/react';
import { ASPECT_RATIO_WIDE } from '../../base/responsive-ui';
import { translate } from '../../../base/i18n';
import styles, { ANDROID_UNDERLINE_COLOR, CONTAINER_PADDING } from './styles';
import styles, { ANDROID_UNDERLINE_COLOR } from './styles';
/**
* The type of the React {@code Component} props of {@link FormRow}
*/
type Props = {
/**
* The current aspect ratio of the screen.
*/
_aspectRatio: Symbol,
/**
*
*/
@ -80,7 +72,10 @@ class FormRow extends Component<Props> {
<View
style = { this._getRowStyle() } >
<View style = { styles.fieldLabelContainer } >
<Text style = { styles.text } >
<Text
style = { [
styles.text, styles.fieldLabelText
] } >
{ t(this.props.i18nLabel) }
</Text>
</View>
@ -122,8 +117,7 @@ class FormRow extends Component<Props> {
_getRowStyle: () => Array<Object>;
/**
* Assembles the row style array based on the row's props. For padding, see
* comment in functions.js.
* Assembles the row style array based on the row's props.
*
* @private
* @returns {Array<Object>}
@ -137,33 +131,8 @@ class FormRow extends Component<Props> {
rowStyle.push(styles.fieldSeparator);
}
if (this.props._aspectRatio === ASPECT_RATIO_WIDE) {
const safeOffset = Math.max(
getSafetyOffset() - CONTAINER_PADDING, 0
);
rowStyle.push({
marginLeft: safeOffset,
marginRight: safeOffset
});
}
return rowStyle;
}
}
/**
* Maps (parts of) the redux state to the React {@code Component} props of
* {@code FormRow}.
*
* @param {Object} state - The redux state.
* @protected
* @returns {Object}
*/
export function _mapStateToProps(state: Object) {
return {
_aspectRatio: state['features/base/responsive-ui'].aspectRatio
};
}
export default translate(connect(_mapStateToProps)(FormRow));
export default translate(FormRow);

60
react/features/app-settings/components/native/FormSectionHeader.js Normal file
View File

@ -0,0 +1,60 @@
// @flow
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { translate } from '../../../base/i18n';
import styles from './styles';
/**
* The type of the React {@code Component} props of {@link FormSectionHeader}
*/
type Props = {
/**
* The i18n key of the text label of the section.
*/
i18nLabel: string,
/**
* An external style object passed to the component.
*/
style: Object,
/**
* Invoked to obtain translated strings.
*/
t: Function
}
/**
* Implements a React {@code Component} which renders a section header on a
* form.
*/
class FormSectionHeader extends Component<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @override
* @returns {ReactElement}
*/
render() {
const { i18nLabel, style, t } = this.props;
return (
<View
style = { [
styles.formSectionTitle,
style
] } >
<Text>
{ t(i18nLabel) }
</Text>
</View>
);
}
}
export default translate(FormSectionHeader);

3
react/features/app-settings/components/native/index.js Normal file
View File

@ -0,0 +1,3 @@
export { default as BackButton } from './BackButton';
export { default as FormRow } from './FormRow';
export { default as FormSectionHeader } from './FormSectionHeader';

83
react/features/app-settings/components/native/styles.js Normal file
View File

@ -0,0 +1,83 @@
import {
ColorPalette,
createStyleSheet
} from '../../../base/styles';
export const ANDROID_UNDERLINE_COLOR = 'transparent';
const TEXT_SIZE = 17;
/**
* The styles of the native components of the feature
* {@code app-settings}.
*/
export default createStyleSheet({
/**
* Standardized style for a field container {@code View}.
*/
fieldContainer: {
alignItems: 'center',
flexDirection: 'row',
minHeight: 65,
paddingHorizontal: 8
},
/**
* Standard container for a {@code View} containing a field label.
*/
fieldLabelContainer: {
alignItems: 'center',
flexDirection: 'row',
marginRight: 5
},
/**
* Text of the field labels on the form.
*/
fieldLabelText: {
fontSize: TEXT_SIZE
},
/**
* Field container style for all but last row {@code View}.
*/
fieldSeparator: {
borderBottomWidth: 1,
borderColor: 'rgba(0, 0, 0, 0.1)'
},
/**
* Style for the {@code View} containing each
* field values (the actual field).
*/
fieldValueContainer: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end'
},
/**
* Style fo the form section separator titles.
*/
formSectionTitle: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
marginTop: 5,
padding: 5
},
/**
* Global {@code Text} color for the components.
*/
text: {
color: ColorPalette.black
},
/**
* Standard text input field style.
*/
textInputField: {
flex: 1,
fontSize: TEXT_SIZE,
textAlign: 'right'
}
});

108
react/features/app-settings/components/styles.js
View File

@ -4,90 +4,11 @@ import {
createStyleSheet
} from '../../base/styles';
export const ANDROID_UNDERLINE_COLOR = 'transparent';
export const CONTAINER_PADDING = 2 * BoxModel.padding;
export const HEADER_COLOR = ColorPalette.blue;
export const HEADER_PADDING = BoxModel.padding;
const TEXT_SIZE = 17;
/**
* The styles of the React {@code Components} of the feature
* {@code app-settings}.
*/
export default createStyleSheet({
/**
* The back button style.
*/
backIcon: {
alignSelf: 'center',
fontSize: 26,
padding: 8,
paddingRight: 22
},
/**
* Standardized style for a field container {@code View}.
*/
fieldContainer: {
alignItems: 'center',
flexDirection: 'row',
minHeight: 65
},
/**
* Standard container for a {@code View} containing a field label.
*/
fieldLabelContainer: {
alignItems: 'center',
flexDirection: 'row',
marginRight: 5
},
/**
* Field container style for all but last row {@code View}.
*/
fieldSeparator: {
borderBottomWidth: 1,
borderColor: 'rgba(0, 0, 0, 0.1)'
},
/**
* Style for the {@code View} containing each
* field values (the actual field).
*/
fieldValueContainer: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end'
},
formSectionTitle: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
marginTop: 5,
padding: 5
},
/**
* Page header {@code View}.
*/
headerContainer: {
alignItems: 'center',
backgroundColor: HEADER_COLOR,
flexDirection: 'row',
justifyContent: 'flex-start',
padding: HEADER_PADDING
},
/**
* The title {@code Text} of the header.
*/
headerTitle: {
color: ColorPalette.white,
fontSize: 22
},
/**
* Style of the ScrollView to be able to scroll the content.
*/
@ -96,38 +17,17 @@ export default createStyleSheet({
},
/**
* The back button style on the settings screen.
* Style of the settings screen content (form).
*/
settingsBackButton: {
color: ColorPalette.white
},
/**
* The top level container {@code View}.
*/
settingsContainer: {
backgroundColor: ColorPalette.white,
settingsForm: {
flex: 1,
flexDirection: 'column',
margin: 0,
padding: CONTAINER_PADDING,
paddingTop: 0
margin: BoxModel.margin
},
/**
* Global {@code Text} color for the page.
*/
text: {
color: ColorPalette.black,
fontSize: TEXT_SIZE
},
/**
* Standard text input field style.
*/
textInputField: {
flex: 1,
fontSize: TEXT_SIZE,
textAlign: 'right'
color: ColorPalette.black
}
});

56
react/features/base/react/components/native/Header.js Normal file
View File

@ -0,0 +1,56 @@
// @flow
import React, { Component } from 'react';
import { SafeAreaView, StatusBar, View } from 'react-native';
import styles, { STATUSBAR_COLOR } from './styles';
/**
* The type of the React {@code Component} props of {@link ScreenHeader}
*/
type Props = {
/**
* Children component(s).
*/
children: React$Node,
/**
* The component's external style
*/
style: Object
}
/**
* A generic screen header component.
*/
export default class Header extends Component<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
*/
render() {
return (
<View
style = { styles.headerOverlay } >
<StatusBar
backgroundColor = { STATUSBAR_COLOR }
barStyle = 'light-content'
translucent = { false } />
<SafeAreaView>
<View
style = { [
styles.screenHeader,
this.props.style
] }>
{
this.props.children
}
</View>
</SafeAreaView>
</View>
);
}
}

2
react/features/base/react/components/native/index.js
View File

@ -1,5 +1,7 @@
export { default as Container } from './Container';
export { default as Link } from './Link';
export { default as LoadingIndicator } from './LoadingIndicator';
export { default as Header } from './Header';
export * from './styles';
export { default as TintedView } from './TintedView';
export { default as Text } from './Text';

39
react/features/base/react/components/native/styles.js Normal file
View File

@ -0,0 +1,39 @@
import {
BoxModel,
ColorPalette,
createStyleSheet
} from '../../../styles';
const HEADER_COLOR = ColorPalette.blue;
// Header height is from iOS guidelines. Also, this looks good.
const HEADER_HEIGHT = 44;
const HEADER_PADDING = BoxModel.padding;
export const STATUSBAR_COLOR = ColorPalette.blueHighlight;
/**
* The styles of the React {@code Components} of the generic components
* in the app.
*/
export default createStyleSheet({
/**
* Style of the header overlay to cover the unsafe areas.
*/
headerOverlay: {
backgroundColor: HEADER_COLOR
},
/**
* Base style of Header
*/
screenHeader: {
alignItems: 'center',
backgroundColor: HEADER_COLOR,
flexDirection: 'row',
height: HEADER_HEIGHT,
justifyContent: 'flex-start',
padding: HEADER_PADDING
}
});

1
react/features/base/react/index.js
View File

@ -1,4 +1,3 @@
export * from './components';
export * from './functions';
export { default as Platform } from './Platform';
export { default as RouteRegistry } from './RouteRegistry';

1
react/features/base/styles/components/styles/ColorPalette.js
View File

@ -19,6 +19,7 @@ export const ColorPalette = {
*/
black: BLACK,
blue: '#17A0DB',
blueHighlight: '#1081b2',
buttonUnderlay: '#495258',
darkGrey: '#555555',
red: '#D00000',

42
react/features/base/styles/components/styles/PlatformElements.native.js Normal file
View File

@ -0,0 +1,42 @@
import { ColorPalette } from './ColorPalette';
import {
createStyleSheet
} from '../../functions';
export const PlatformElements = createStyleSheet({
/**
* Platform specific header button (e.g. back, menu...etc).
*/
headerButton: {
alignSelf: 'center',
color: ColorPalette.white,
fontSize: 26,
paddingRight: 22,
zIndex: 9999
},
/**
* Generic style for a label placed in the header.
*/
headerText: {
color: ColorPalette.white,
fontSize: 20
},
/**
* The topmost level element of a page.
*/
page: {
alignItems: 'stretch',
bottom: 0,
flex: 1,
flexDirection: 'column',
left: 0,
overflow: 'hidden',
position: 'absolute',
right: 0,
top: 0
}
});

0
react/features/base/styles/components/styles/PlatformElements.web.js Normal file
View File

1
react/features/base/styles/components/styles/index.js
View File

@ -1,2 +1,3 @@
export * from './BoxModel';
export * from './ColorPalette';
export * from './PlatformElements';

3
react/features/conference/components/Conference.native.js
View File

@ -3,7 +3,7 @@
import React, { Component } from 'react';
// eslint-disable-next-line react-native/split-platform-components
import { BackAndroid, BackHandler, View } from 'react-native';
import { BackAndroid, BackHandler, StatusBar, View } from 'react-native';
import { connect as reactReduxConnect } from 'react-redux';
import { appNavigate } from '../../app';
@ -192,6 +192,7 @@ class Conference extends Component<Props> {
onClick = { this._onClick }
style = { styles.conference }
touchFeedback = { false }>
<StatusBar translucent = { true } />
{/*
* The LargeVideo is the lowermost stacking layer.