PLT-3114 Moved preview collapse out of pre-release features (#3206)
* Added user setting to auto collapse image previews * Added slash commands for collapsing/expanding image previews * Added translation strings for collapse setting * Add default props for preview collapse setting
Этот коммит содержится в:
Joram Wilander
коммит произвёл
Corey Hulen
Corey Hulen
родитель
629b49a119
Коммит
1e245f19c7
@@ -234,13 +234,6 @@ export default class AdvancedSettingsDisplay extends React.Component {
|
||||
defaultMessage='Show preview snippet of links below message'
|
||||
/>
|
||||
);
|
||||
case 'EMBED_TOGGLE':
|
||||
return (
|
||||
<FormattedMessage
|
||||
id='user.settings.advance.embed_toggle'
|
||||
defaultMessage='Show toggle for all embed previews'
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -24,7 +24,8 @@ function getDisplayStateFromStores() {
|
||||
nameFormat: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'username'),
|
||||
selectedFont: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT),
|
||||
channelDisplayMode: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT),
|
||||
messageDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT)
|
||||
messageDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT),
|
||||
collapseDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, Preferences.COLLAPSE_DISPLAY_DEFAULT)
|
||||
};
|
||||
}
|
||||
|
||||
@@ -41,9 +42,11 @@ export default class UserSettingsDisplay extends React.Component {
|
||||
this.updateSection = this.updateSection.bind(this);
|
||||
this.updateState = this.updateState.bind(this);
|
||||
this.deactivate = this.deactivate.bind(this);
|
||||
this.createCollapseSection = this.createCollapseSection.bind(this);
|
||||
|
||||
this.state = getDisplayStateFromStores();
|
||||
}
|
||||
|
||||
handleSubmit() {
|
||||
const userId = UserStore.getCurrentId();
|
||||
|
||||
@@ -77,8 +80,14 @@ export default class UserSettingsDisplay extends React.Component {
|
||||
name: Preferences.MESSAGE_DISPLAY,
|
||||
value: this.state.messageDisplay
|
||||
};
|
||||
const collapseDisplayPreference = {
|
||||
user_id: userId,
|
||||
category: Preferences.CATEGORY_DISPLAY_SETTINGS,
|
||||
name: Preferences.COLLAPSE_DISPLAY,
|
||||
value: this.state.collapseDisplay
|
||||
};
|
||||
|
||||
AsyncClient.savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference, messageDisplayPreference],
|
||||
AsyncClient.savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference, messageDisplayPreference, collapseDisplayPreference],
|
||||
() => {
|
||||
this.updateSection('');
|
||||
},
|
||||
@@ -87,27 +96,38 @@ export default class UserSettingsDisplay extends React.Component {
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
handleClockRadio(militaryTime) {
|
||||
this.setState({militaryTime});
|
||||
}
|
||||
|
||||
handleNameRadio(nameFormat) {
|
||||
this.setState({nameFormat});
|
||||
}
|
||||
|
||||
handleChannelDisplayModeRadio(channelDisplayMode) {
|
||||
this.setState({channelDisplayMode});
|
||||
}
|
||||
|
||||
handlemessageDisplayRadio(messageDisplay) {
|
||||
this.setState({messageDisplay});
|
||||
}
|
||||
|
||||
handleFont(selectedFont) {
|
||||
Utils.applyFont(selectedFont);
|
||||
this.setState({selectedFont});
|
||||
}
|
||||
|
||||
handleCollapseRadio(collapseDisplay) {
|
||||
this.setState({collapseDisplay});
|
||||
}
|
||||
|
||||
updateSection(section) {
|
||||
$('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
|
||||
this.updateState();
|
||||
this.props.updateSection(section);
|
||||
}
|
||||
|
||||
updateState() {
|
||||
const newState = getDisplayStateFromStores();
|
||||
if (!Utils.areObjectsEqual(newState, this.state)) {
|
||||
@@ -115,9 +135,118 @@ export default class UserSettingsDisplay extends React.Component {
|
||||
this.setState(newState);
|
||||
}
|
||||
}
|
||||
|
||||
deactivate() {
|
||||
this.updateState();
|
||||
}
|
||||
|
||||
createCollapseSection() {
|
||||
if (this.props.activeSection === 'collapse') {
|
||||
const collapseFormat = [false, false];
|
||||
if (this.state.collapseDisplay === 'true') {
|
||||
collapseFormat[0] = true;
|
||||
} else {
|
||||
collapseFormat[1] = true;
|
||||
}
|
||||
|
||||
const handleUpdateCollapseSection = (e) => {
|
||||
this.updateSection('');
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const inputs = [
|
||||
<div key='userDisplayCollapseOptions'>
|
||||
<div className='radio'>
|
||||
<label>
|
||||
<input
|
||||
type='radio'
|
||||
name='collapseFormat'
|
||||
checked={collapseFormat[0]}
|
||||
onChange={this.handleCollapseRadio.bind(this, 'true')}
|
||||
/>
|
||||
<FormattedMessage
|
||||
id='user.settings.display.collapseOn'
|
||||
defaultMessage='On'
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
</div>
|
||||
<div className='radio'>
|
||||
<label>
|
||||
<input
|
||||
type='radio'
|
||||
name='collapseFormat'
|
||||
checked={collapseFormat[1]}
|
||||
onChange={this.handleCollapseRadio.bind(this, 'false')}
|
||||
/>
|
||||
<FormattedMessage
|
||||
id='user.settings.display.collapseOff'
|
||||
defaultMessage='Off'
|
||||
/>
|
||||
</label>
|
||||
<br/>
|
||||
</div>
|
||||
<div>
|
||||
<br/>
|
||||
<FormattedMessage
|
||||
id='user.settings.display.collapseDesc'
|
||||
defaultMessage='Toggle whether to automatically collapse all image previews.'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
];
|
||||
|
||||
return (
|
||||
<SettingItemMax
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='user.settings.display.collapseDisplay'
|
||||
defaultMessage='Auto Collapse Previews'
|
||||
/>
|
||||
}
|
||||
inputs={inputs}
|
||||
submit={this.handleSubmit}
|
||||
server_error={this.state.serverError}
|
||||
updateSection={handleUpdateCollapseSection}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let describe;
|
||||
if (this.state.collapseDisplay === 'true') {
|
||||
describe = (
|
||||
<FormattedMessage
|
||||
id='user.settings.display.collapseOn'
|
||||
defaultMessage='On'
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
describe = (
|
||||
<FormattedMessage
|
||||
id='user.settings.display.collapseOff'
|
||||
defaultMessage='Off'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const handleUpdateCollapseSection = () => {
|
||||
this.props.updateSection('collapse');
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingItemMin
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='user.settings.display.collapseDisplay'
|
||||
defaultMessage='Auto Collapse Previews'
|
||||
/>
|
||||
}
|
||||
describe={describe}
|
||||
updateSection={handleUpdateCollapseSection}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const serverError = this.state.serverError || null;
|
||||
let clockSection;
|
||||
@@ -127,6 +256,8 @@ export default class UserSettingsDisplay extends React.Component {
|
||||
let languagesSection;
|
||||
let messageDisplaySection;
|
||||
|
||||
const collapseSection = this.createCollapseSection();
|
||||
|
||||
if (this.props.activeSection === 'clock') {
|
||||
const clockFormat = [false, false];
|
||||
if (this.state.militaryTime === 'true') {
|
||||
@@ -729,6 +860,8 @@ export default class UserSettingsDisplay extends React.Component {
|
||||
<div className='divider-dark'/>
|
||||
{nameFormatSection}
|
||||
<div className='divider-dark'/>
|
||||
{collapseSection}
|
||||
<div className='divider-dark'/>
|
||||
{messageDisplaySection}
|
||||
<div className='divider-dark'/>
|
||||
{channelDisplayModeSection}
|
||||
|
||||
Ссылка в новой задаче
Block a user