Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

Add classes for mobile dividers #335

Merged
merged 2 commits into from
Nov 24, 2017
Merged

Add classes for mobile dividers #335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
119de79
Add classes for mobile dividers
miguelespinoza Nov 15, 2017
952904c
Regenerate test snapshot based on changes: tests/components/__snapsho…
Nov 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 56 additions & 49 deletions components/user_settings/user_settings_display.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,14 +254,17 @@ export default class UserSettingsDisplay extends React.Component {
];

return (
<SettingItemMax
title={messageTitle}
inputs={inputs}
submit={this.handleSubmit}
saving={this.state.isSaving}
server_error={this.state.serverError}
updateSection={handleUpdateSection}
/>
<div>
<SettingItemMax
title={messageTitle}
inputs={inputs}
submit={this.handleSubmit}
saving={this.state.isSaving}
server_error={this.state.serverError}
updateSection={handleUpdateSection}
/>
<div className='divider-dark'/>
</div>
);
}

Expand All @@ -277,11 +280,14 @@ export default class UserSettingsDisplay extends React.Component {
};

return (
<SettingItemMin
title={messageTitle}
describe={describe}
updateSection={handleUpdateSection}
/>
<div>
<SettingItemMin
title={messageTitle}
describe={describe}
updateSection={handleUpdateSection}
/>
<div className='divider-dark'/>
</div>
);
}

Expand Down Expand Up @@ -317,7 +323,7 @@ export default class UserSettingsDisplay extends React.Component {

const isEnableLinkPreviews = global.window.mm_config.EnableLinkPreviews === 'true';
let linkPreviewSection = null;
let divider = null;

if (isEnableLinkPreviews) {
linkPreviewSection = this.createSection({
section: 'linkpreview',
Expand Down Expand Up @@ -347,7 +353,6 @@ export default class UserSettingsDisplay extends React.Component {
message: 'When available, the first web link in a message will show a preview of the website content below the message.'
}
});
divider = <div className='divider-dark'/>;
}

const clockSection = this.createSection({
Expand Down Expand Up @@ -448,14 +453,17 @@ export default class UserSettingsDisplay extends React.Component {
userLocale = global.window.mm_config.DefaultClientLocale;
}
languagesSection = (
<ManageLanguages
user={this.props.user}
locale={userLocale}
updateSection={(e) => {
this.updateSection('');
e.preventDefault();
}}
/>
<div>
<ManageLanguages
user={this.props.user}
locale={userLocale}
updateSection={(e) => {
this.updateSection('');
e.preventDefault();
}}
/>
<div className='divider-dark'/>
</div>
);
} else {
let locale;
Expand All @@ -466,31 +474,37 @@ export default class UserSettingsDisplay extends React.Component {
}

languagesSection = (
<SettingItemMin
title={
<FormattedMessage
id='user.settings.display.language'
defaultMessage='Language'
/>
}
width='medium'
describe={locale}
updateSection={() => {
this.updateSection('languages');
}}
/>
<div>
<SettingItemMin
title={
<FormattedMessage
id='user.settings.display.language'
defaultMessage='Language'
/>
}
width='medium'
describe={locale}
updateSection={() => {
this.updateSection('languages');
}}
/>
<div className='divider-dark'/>
</div>
);
}

let themeSection;
if (global.mm_config.EnableThemeSelection !== 'false') {
themeSection = (
<ThemeSetting
selected={this.props.activeSection === 'theme'}
updateSection={this.updateSection}
setRequireConfirm={this.props.setRequireConfirm}
setEnforceFocus={this.props.setEnforceFocus}
/>
<div>
<ThemeSetting
selected={this.props.activeSection === 'theme'}
updateSection={this.updateSection}
setRequireConfirm={this.props.setRequireConfirm}
setEnforceFocus={this.props.setEnforceFocus}
/>
<div className='divider-dark'/>
</div>
);
}

Expand Down Expand Up @@ -535,17 +549,11 @@ export default class UserSettingsDisplay extends React.Component {
</h3>
<div className='divider-dark first'/>
{themeSection}
<div className='divider-dark'/>
{clockSection}
{divider}
{linkPreviewSection}
<div className='divider-dark'/>
{collapseSection}
<div className='divider-dark'/>
{messageDisplaySection}
<div className='divider-dark'/>
{channelDisplayModeSection}
<div className='divider-dark'/>
{languagesSection}
</div>
</div>
Expand All @@ -556,7 +564,6 @@ export default class UserSettingsDisplay extends React.Component {
UserSettingsDisplay.propTypes = {
user: PropTypes.object,
updateSection: PropTypes.func,
updateTab: PropTypes.func,
activeSection: PropTypes.string,
closeModal: PropTypes.func.isRequired,
collapseModal: PropTypes.func.isRequired,
Expand Down
Loading