Skip to content

Commit 7cd3bdb

Browse files
JulesssssJulesssss
authored
Merge pull request #5804 from parasharrajat/workspace-design
Fix: Workspace settings page design
2 parents 5533b3b + 659fe5a commit 7cd3bdb

File tree

3 files changed

+64
-54
lines changed

3 files changed

+64
-54
lines changed

‎src/pages/workspace/WorkspacePageWithSections.js

+9
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,26 @@ const propTypes = {
3030
}).isRequired,
3131

3232
/** From Onyx */
33+
/** Bank account currently in setup */
3334
reimbursementAccount: reimbursementAccountPropTypes,
35+
36+
/** User Data from Onyx */
3437
user: userPropTypes,
3538

39+
/** Main content of the page */
3640
children: PropTypes.func,
3741

42+
/** Content to be added as fixed footer */
43+
footer: PropTypes.element,
44+
3845
...withLocalizePropTypes,
3946
};
4047

4148
const defaultProps = {
4249
children: () => {},
4350
user: {},
4451
reimbursementAccount: {},
52+
footer: null,
4553
};
4654

4755
class WorkspacePageWithSections extends React.Component {
@@ -74,6 +82,7 @@ class WorkspacePageWithSections extends React.Component {
7482

7583
</View>
7684
</ScrollView>
85+
{this.props.footer}
7786
</ScreenWrapper>
7887
);
7988
}

‎src/pages/workspace/WorkspaceSettingsPage.js

+51-54
Original file line numberDiff line numberDiff line change
@@ -136,64 +136,61 @@ class WorkspaceSettingsPage extends React.Component {
136136
<WorkspacePageWithSections
137137
headerText={this.props.translate('workspace.common.settings')}
138138
route={this.props.route}
139+
footer={(
140+
<FixedFooter style={[styles.w100]}>
141+
<Button
142+
success
143+
isLoading={policy.isPolicyUpdating}
144+
text={this.props.translate('workspace.editor.save')}
145+
onPress={this.submit}
146+
pressOnEnter
147+
/>
148+
</FixedFooter>
149+
)}
139150
>
140151
{hasVBA => (
141-
<>
142-
<View style={[styles.pageWrapper, styles.flex1, styles.pRelative, styles.flexGrow1]}>
143-
<View style={[styles.w100, styles.flexGrow1]}>
144-
<AvatarWithImagePicker
145-
isUploading={policy.isAvatarUploading}
146-
avatarURL={this.state.previewAvatarURL}
147-
size={CONST.AVATAR_SIZE.LARGE}
148-
DefaultAvatar={() => (
149-
<Icon
150-
src={Workspace}
151-
height={80}
152-
width={80}
153-
fill={defaultTheme.iconSuccessFill}
154-
/>
155-
)}
156-
style={[styles.mb3]}
157-
anchorPosition={{top: 172, right: 18}}
158-
isUsingDefaultAvatar={!this.state.previewAvatarURL}
159-
onImageSelected={this.uploadAvatar}
160-
onImageRemoved={this.removeAvatar}
161-
/>
162-
163-
<ExpensiTextInput
164-
label={this.props.translate('workspace.editor.nameInputLabel')}
165-
containerStyles={[styles.mt4]}
166-
onChangeText={name => this.setState({name})}
167-
value={this.state.name}
168-
hasError={!this.state.name.trim().length}
169-
errorText={this.state.name.trim().length ? '' : this.props.translate('workspace.editor.nameIsRequiredError')}
170-
/>
171-
172-
<View style={[styles.mt4]}>
173-
<ExpensiPicker
174-
label={this.props.translate('workspace.editor.currencyInputLabel')}
175-
onChange={currency => this.setState({currency})}
176-
items={this.getCurrencyItems()}
177-
value={this.state.currency}
178-
isDisabled={hasVBA}
179-
/>
180-
</View>
181-
<Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
182-
{this.props.translate('workspace.editor.currencyInputHelpText')}
183-
</Text>
184-
</View>
185-
186-
<FixedFooter style={[styles.w100]}>
187-
<Button
188-
success
189-
isLoading={policy.isPolicyUpdating}
190-
text={this.props.translate('workspace.editor.save')}
191-
onPress={this.submit}
192-
pressOnEnter
152+
<View style={[styles.pageWrapper, styles.flex1, styles.alignItemsStretch]}>
153+
<AvatarWithImagePicker
154+
isUploading={policy.isAvatarUploading}
155+
avatarURL={this.state.previewAvatarURL}
156+
size={CONST.AVATAR_SIZE.LARGE}
157+
DefaultAvatar={() => (
158+
<Icon
159+
src={Workspace}
160+
height={80}
161+
width={80}
162+
fill={defaultTheme.iconSuccessFill}
193163
/>
194-
</FixedFooter>
164+
)}
165+
style={[styles.mb3]}
166+
anchorPosition={{top: 172, right: 18}}
167+
isUsingDefaultAvatar={!this.state.previewAvatarURL}
168+
onImageSelected={this.uploadAvatar}
169+
onImageRemoved={this.removeAvatar}
170+
/>
171+
172+
<ExpensiTextInput
173+
label={this.props.translate('workspace.editor.nameInputLabel')}
174+
containerStyles={[styles.mt4]}
175+
onChangeText={name => this.setState({name})}
176+
value={this.state.name}
177+
hasError={!this.state.name.trim().length}
178+
errorText={this.state.name.trim().length ? '' : this.props.translate('workspace.editor.nameIsRequiredError')}
179+
/>
180+
181+
<View style={[styles.mt4]}>
182+
<ExpensiPicker
183+
label={this.props.translate('workspace.editor.currencyInputLabel')}
184+
onChange={currency => this.setState({currency})}
185+
items={this.getCurrencyItems()}
186+
value={this.state.currency}
187+
isDisabled={hasVBA}
188+
/>
195189
</View>
196-
</>
190+
<Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
191+
{this.props.translate('workspace.editor.currencyInputHelpText')}
192+
</Text>
193+
</View>
197194
)}
198195
</WorkspacePageWithSections>
199196
);

‎src/styles/utilities/flex.js

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@ export default {
8484
alignItems: 'baseline',
8585
},
8686

87+
alignItemsStretch: {
88+
alignItems: 'stretch',
89+
},
90+
8791
flexWrap: {
8892
flexWrap: 'wrap',
8993
},

0 commit comments

Comments
 (0)