feat: add column layout to settings fields

android/gradle.properties

@@ -21,4 +21,4 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 appVersion=20.1.0
-sdkVersion=2.6.0
+sdkVersion=2.7.0

ios/sdk/src/Info.plist

@@ -15,7 +15,7 @@
 	<key>CFBundlePackageType</key>
 	<string>FMWK</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.6.0</string>
+	<string>2.7.0</string>
 	<key>CFBundleVersion</key>
 	<string>$(CURRENT_PROJECT_VERSION)</string>
 	<key>NSPrincipalClass</key>

react/features/settings/components/native/FormRow.js

@@ -27,6 +27,11 @@ type Props = {
      */
     label: string,
 
+    /**
+     * One of 'row' (default) or 'column'.
+     */
+    layout: string,
+
     /**
      * Invoked to obtain translated strings.
      */
@@ -60,7 +65,7 @@ class FormRow extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { t } = this.props;
+        const { layout, t } = this.props;
 
         // Some field types need additional props to look good and standardized
         // on a form.
@@ -76,7 +81,8 @@ class FormRow extends Component<Props> {
                     <Text
                         style = { [
                             styles.text,
-                            styles.fieldLabelText
+                            styles.fieldLabelText,
+                            layout === 'column' ? styles.fieldLabelTextColumn : undefined
                         ] } >
                         { t(this.props.label) }
                     </Text>
@@ -108,7 +114,10 @@ class FormRow extends Component<Props> {
             case 'TextInput':
                 return {
                     placeholderTextColor: PLACEHOLDER_COLOR,
-                    style: styles.textInputField,
+                    style: [
+                        styles.textInputField,
+                        this.props.layout === 'column' ? styles.textInputFieldColumn : undefined
+                    ],
                     underlineColorAndroid: ANDROID_UNDERLINE_COLOR
                 };
             }
@@ -126,14 +135,21 @@ class FormRow extends Component<Props> {
      * @returns {Array<Object>}
      */
     _getRowStyle() {
+        const { fieldSeparator, layout } = this.props;
         const rowStyle = [
             styles.fieldContainer
         ];
 
-        if (this.props.fieldSeparator) {
+        if (fieldSeparator) {
             rowStyle.push(styles.fieldSeparator);
         }
 
+        if (layout === 'column') {
+            rowStyle.push(
+                styles.fieldContainerColumn
+            );
+        }
+
         return rowStyle;
     }
 }

react/features/settings/components/native/SettingsView.js

@@ -34,10 +34,45 @@ type Props = AbstractProps & {
 
 type State = {
 
+    /**
+     * State variable for the disable call integration switch.
+     */
+    disableCallIntegration: boolean,
+
+    /**
+     * State variable for the disable p2p switch.
+     */
+    disableP2P: boolean,
+
+    /**
+     * State variable for the display name field.
+     */
+    displayName: string,
+
+    /**
+     * State variable for the email field.
+     */
+    email: string,
+
+    /**
+     * State variable for the server URL field.
+     */
+    serverURL: string,
+
     /**
      * Whether to show advanced settings or not.
      */
-    showAdvanced: boolean
+    showAdvanced: boolean,
+
+    /**
+     * State variable for the start with audio muted switch.
+     */
+    startWithAudioMuted: boolean,
+
+    /**
+     * State variable for the start with video muted switch.
+     */
+    startWithVideoMuted: boolean,
 }
 
 /**
@@ -55,9 +90,25 @@ class SettingsView extends AbstractSettingsView<Props, State> {
      */
     constructor(props) {
         super(props);
+        const {
+            disableCallIntegration,
+            disableP2P,
+            displayName,
+            email,
+            serverURL,
+            startWithAudioMuted,
+            startWithVideoMuted
+        } = props._settings || {};
 
         this.state = {
-            showAdvanced: false
+            disableCallIntegration,
+            disableP2P,
+            displayName,
+            email,
+            serverURL,
+            showAdvanced: false,
+            startWithAudioMuted,
+            startWithVideoMuted
         };
 
         // Bind event handlers so they are only bound once per instance.
@@ -103,25 +154,61 @@ class SettingsView extends AbstractSettingsView<Props, State> {
         this._processServerURL(false /* hideOnSuccess */);
     }
 
-    _onChangeDisplayName: (string) => void;
+    /**
+     * Callback to update the display name.
+     *
+     * @param {string} displayName - The new value to set.
+     * @returns {void}
+     */
+    _onChangeDisplayName(displayName) {
+        super._onChangeDisplayName(displayName);
+        this.setState({
+            displayName
+        });
+    }
 
-    _onChangeEmail: (string) => void;
+    /**
+     * Callback to update the email.
+     *
+     * @param {string} email - The new value to set.
+     * @returns {void}
+     */
+    _onChangeEmail(email) {
+        super._onChangeEmail(email);
+        this.setState({
+            email
+        });
+    }
 
-    _onChangeServerURL: (string) => void;
+    /**
+     * Callback to update the server URL.
+     *
+     * @param {string} serverURL - The new value to set.
+     * @returns {void}
+     */
+    _onChangeServerURL(serverURL) {
+        super._onChangeServerURL(serverURL);
+        this.setState({
+            serverURL
+        });
+    }
 
     _onDisableCallIntegration: (boolean) => void;
 
     /**
      * Handles the disable call integration change event.
      *
-     * @param {boolean} newValue - The new value
+     * @param {boolean} disableCallIntegration - The new value
      * option.
      * @private
      * @returns {void}
      */
-    _onDisableCallIntegration(newValue) {
+    _onDisableCallIntegration(disableCallIntegration) {
         this._updateSettings({
-            disableCallIntegration: newValue
+            disableCallIntegration
+        });
+        this.setState({
+            disableCallIntegration
         });
     }
 
@@ -130,14 +217,17 @@ class SettingsView extends AbstractSettingsView<Props, State> {
     /**
      * Handles the disable P2P change event.
      *
-     * @param {boolean} newValue - The new value
+     * @param {boolean} disableP2P - The new value
      * option.
      * @private
      * @returns {void}
      */
-    _onDisableP2P(newValue) {
+    _onDisableP2P(disableP2P) {
         this._updateSettings({
-            disableP2P: newValue
+            disableP2P
+        });
+        this.setState({
+            disableP2P
         });
     }
 
@@ -165,9 +255,31 @@ class SettingsView extends AbstractSettingsView<Props, State> {
         this.setState({ showAdvanced: !this.state.showAdvanced });
     }
 
-    _onStartAudioMutedChange: (boolean) => void;
+    /**
+     * Callback to update the start with audio muted value.
+     *
+     * @param {boolean} startWithAudioMuted - The new value to set.
+     * @returns {void}
+     */
+    _onStartAudioMutedChange(startWithAudioMuted) {
+        super._onStartAudioMutedChange(startWithAudioMuted);
+        this.setState({
+            startWithAudioMuted
+        });
+    }
 
-    _onStartVideoMutedChange: (boolean) => void;
+    /**
+     * Callback to update the start with video muted value.
+     *
+     * @param {boolean} startWithVideoMuted - The new value to set.
+     * @returns {void}
+     */
+    _onStartVideoMutedChange(startWithVideoMuted) {
+        super._onStartVideoMutedChange(startWithVideoMuted);
+        this.setState({
+            startWithVideoMuted
+        });
+    }
 
     /**
      * Processes the server URL. It normalizes it and an error alert is
@@ -199,8 +311,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
      * @returns {React$Element}
      */
     _renderAdvancedSettings() {
-        const { _settings } = this.props;
-        const { showAdvanced } = this.state;
+        const { disableCallIntegration, disableP2P, showAdvanced } = this.state;
 
         if (!showAdvanced) {
             return (
@@ -221,14 +332,14 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                     label = 'settingsView.disableCallIntegration'>
                     <Switch
                         onValueChange = { this._onDisableCallIntegration }
-                        value = { _settings.disableCallIntegration } />
+                        value = { disableCallIntegration } />
                 </FormRow>
                 <FormRow
                     fieldSeparator = { true }
                     label = 'settingsView.disableP2P'>
                     <Switch
                         onValueChange = { this._onDisableP2P }
-                        value = { _settings.disableP2P } />
+                        value = { disableP2P } />
                 </FormRow>
             </>
         );
@@ -241,7 +352,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
      * @returns {React$Element}
      */
     _renderBody() {
-        const { _settings } = this.props;
+        const { displayName, email, serverURL, startWithAudioMuted, startWithVideoMuted } = this.state;
 
         return (
             <SafeAreaView style = { styles.settingsForm }>
@@ -250,46 +361,50 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                         label = 'settingsView.profileSection' />
                     <FormRow
                         fieldSeparator = { true }
-                        label = 'settingsView.displayName'>
+                        label = 'settingsView.displayName'
+                        layout = 'column'>
                         <TextInput
                             autoCorrect = { false }
                             onChangeText = { this._onChangeDisplayName }
                             placeholder = 'John Doe'
-                            value = { _settings.displayName } />
+                            value = { displayName } />
                     </FormRow>
-                    <FormRow label = 'settingsView.email'>
+                    <FormRow
+                        label = 'settingsView.email'
+                        layout = 'column'>
                         <TextInput
                             autoCapitalize = 'none'
                             autoCorrect = { false }
                             keyboardType = { 'email-address' }
                             onChangeText = { this._onChangeEmail }
                             placeholder = 'email@example.com'
-                            value = { _settings.email } />
+                            value = { email } />
                     </FormRow>
                     <FormSectionHeader
                         label = 'settingsView.conferenceSection' />
                     <FormRow
                         fieldSeparator = { true }
-                        label = 'settingsView.serverURL'>
+                        label = 'settingsView.serverURL'
+                        layout = 'column'>
                         <TextInput
                             autoCapitalize = 'none'
                             autoCorrect = { false }
                             onBlur = { this._onBlurServerURL }
                             onChangeText = { this._onChangeServerURL }
                             placeholder = { this.props._serverURL }
-                            value = { _settings.serverURL } />
+                            value = { serverURL } />
                     </FormRow>
                     <FormRow
                         fieldSeparator = { true }
                         label = 'settingsView.startWithAudioMuted'>
                         <Switch
                             onValueChange = { this._onStartAudioMutedChange }
-                            value = { _settings.startWithAudioMuted } />
+                            value = { startWithAudioMuted } />
                     </FormRow>
                     <FormRow label = 'settingsView.startWithVideoMuted'>
                         <Switch
                             onValueChange = { this._onStartVideoMutedChange }
-                            value = { _settings.startWithVideoMuted } />
+                            value = { startWithVideoMuted } />
                     </FormRow>
                     <FormSectionHeader
                         label = 'settingsView.buildInfoSection' />

react/features/settings/components/native/styles.js

@@ -1,7 +1,4 @@
-import {
-    ColorPalette,
-    createStyleSheet
-} from '../../../base/styles';
+import { ColorPalette } from '../../../base/styles';
 
 export const ANDROID_UNDERLINE_COLOR = 'transparent';
 export const PLACEHOLDER_COLOR = ColorPalette.lightGrey;
@@ -11,7 +8,7 @@ const TEXT_SIZE = 17;
 /**
  * The styles of the native components of the feature {@code settings}.
  */
-export default createStyleSheet({
+export default {
     /**
      * Standardized style for a field container {@code View}.
      */
@@ -22,6 +19,15 @@ export default createStyleSheet({
         paddingHorizontal: 8
     },
 
+    /**
+     * * Appended style for column layout fields.
+     */
+    fieldContainerColumn: {
+        alignItems: 'flex-start',
+        flexDirection: 'column',
+        paddingVertical: 3
+    },
+
     /**
      * Standard container for a {@code View} containing a field label.
      */
@@ -38,6 +44,13 @@ export default createStyleSheet({
         fontSize: TEXT_SIZE
     },
 
+    /**
+     * Appended style for column layout fields.
+     */
+    fieldLabelTextColumn: {
+        fontSize: 12
+    },
+
     /**
      * Field container style for all but last row {@code View}.
      */
@@ -85,5 +98,16 @@ export default createStyleSheet({
         flex: 1,
         fontSize: TEXT_SIZE,
         textAlign: 'right'
+    },
+
+    /**
+     * Appended style for column layout fields.
+     */
+    textInputFieldColumn: {
+        backgroundColor: 'rgb(245, 245, 245)',
+        borderRadius: 8,
+        marginVertical: 5,
+        paddingVertical: 3,
+        textAlign: 'left'
     }
-});
+};