feat: add column layout to settings fields

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

@@ -361,14 +361,17 @@ 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 = { displayName } />
                     </FormRow>
-                    <FormRow label = 'settingsView.email'>
+                    <FormRow
+                        label = 'settingsView.email'
+                        layout = 'column'>
                         <TextInput
                             autoCapitalize = 'none'
                             autoCorrect = { false }
@@ -381,7 +384,8 @@ class SettingsView extends AbstractSettingsView<Props, State> {
                         label = 'settingsView.conferenceSection' />
                     <FormRow
                         fieldSeparator = { true }
-                        label = 'settingsView.serverURL'>
+                        label = 'settingsView.serverURL'
+                        layout = 'column'>
                         <TextInput
                             autoCapitalize = 'none'
                             autoCorrect = { false }

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

@@ -1,7 +1,4 @@
-import {
+import { ColorPalette } from '../../../base/styles';
-    ColorPalette,
-    createStyleSheet
-} 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'
     }
-});
+};