diff options
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/create_post.jsx | 13 | ||||
-rw-r--r-- | webapp/components/post.jsx | 14 | ||||
-rw-r--r-- | webapp/components/posts_view.jsx | 11 | ||||
-rw-r--r-- | webapp/components/user_settings/user_settings_display.jsx | 116 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 13 | ||||
-rw-r--r-- | webapp/utils/constants.jsx | 6 |
6 files changed, 162 insertions, 11 deletions
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 025333d97..232537d8b 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -83,6 +83,7 @@ class CreatePost extends React.Component { submitting: false, initialText: draft.messageText, ctrlSend: false, + centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, showTutorialTip: false, showPostDeletedModal: false }; @@ -305,7 +306,8 @@ class CreatePost extends React.Component { // wait to load these since they may have changed since the component was constructed (particularly in the case of skipping the tutorial) this.setState({ - ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER }); } @@ -336,7 +338,8 @@ class CreatePost extends React.Component { const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999); this.setState({ showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER, - ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') + ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED }); } getFileCount(channelId) { @@ -441,11 +444,17 @@ class CreatePost extends React.Component { tutorialTip = this.createTutorialTip(); } + let centerClass = ''; + if (this.state.centerTextbox) { + centerClass = 'center'; + } + return ( <form id='create_post' ref='topDiv' role='form' + className={centerClass} onSubmit={this.handleSubmit} > <div className='post-create'> diff --git a/webapp/components/post.jsx b/webapp/components/post.jsx index 7294cf163..7fabec741 100644 --- a/webapp/components/post.jsx +++ b/webapp/components/post.jsx @@ -99,6 +99,10 @@ export default class Post extends React.Component { return true; } + if (nextProps.center !== this.props.center) { + return true; + } + if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) { return true; } @@ -203,13 +207,18 @@ export default class Post extends React.Component { } } + let centerClass = ''; + if (this.props.center) { + centerClass = 'center'; + } + return ( <div> <div id={'post_' + post.id} className={'post ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass} > - <div className='post__content'> + <div className={'post__content ' + centerClass}> <div className='post__img'>{profilePic}</div> <div> <PostHeader @@ -251,5 +260,6 @@ Post.propTypes = { shouldHighlight: React.PropTypes.bool, displayNameType: React.PropTypes.string, hasProfiles: React.PropTypes.bool, - currentUser: React.PropTypes.object.isRequired + currentUser: React.PropTypes.object.isRequired, + center: React.PropTypes.bool }; diff --git a/webapp/components/posts_view.jsx b/webapp/components/posts_view.jsx index d072203a0..560a46e9a 100644 --- a/webapp/components/posts_view.jsx +++ b/webapp/components/posts_view.jsx @@ -40,6 +40,7 @@ export default class PostsView extends React.Component { this.state = { displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), + centerPosts: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, isScrolling: false, topPostId: null, showUnreadMessageAlert: false @@ -61,7 +62,10 @@ export default class PostsView extends React.Component { return 5; } updateState() { - this.setState({displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false')}); + this.setState({ + displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'), + centerPosts: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED + }); } isAtBottom() { // consider the view to be at the bottom if it's within this many pixels of the bottom @@ -247,6 +251,7 @@ export default class PostsView extends React.Component { displayNameType={this.state.displayNameType} user={profile} currentUser={this.props.currentUser} + center={this.state.centerPosts} /> ); @@ -373,6 +378,7 @@ export default class PostsView extends React.Component { this.updateScrolling(); } window.addEventListener('resize', this.handleResize); + PreferenceStore.addChangeListener(this.updateState); $('body').addClass('app__body'); } componentWillUnmount() { @@ -429,6 +435,9 @@ export default class PostsView extends React.Component { if (this.state.isScrolling !== nextState.isScrolling) { return true; } + if (this.state.centerPosts !== nextState.centerPosts) { + return true; + } if (!Utils.areObjectsEqual(this.props.profiles, nextProps.profiles)) { return true; } diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx index d169e01b5..481cde9a5 100644 --- a/webapp/components/user_settings/user_settings_display.jsx +++ b/webapp/components/user_settings/user_settings_display.jsx @@ -22,7 +22,8 @@ function getDisplayStateFromStores() { return { militaryTime: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', 'false'), nameFormat: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'username'), - selectedFont: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'selected_font', Constants.DEFAULT_FONT) + 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) }; } @@ -63,8 +64,14 @@ export default class UserSettingsDisplay extends React.Component { name: 'selected_font', value: this.state.selectedFont }; + const channelDisplayModePreference = { + user_id: userId, + category: Preferences.CATEGORY_DISPLAY_SETTINGS, + name: Preferences.CHANNEL_DISPLAY_MODE, + value: this.state.channelDisplayMode + }; - AsyncClient.savePreferences([timePreference, namePreference, fontPreference], + AsyncClient.savePreferences([timePreference, namePreference, fontPreference, channelDisplayModePreference], () => { this.updateSection(''); }, @@ -79,6 +86,9 @@ export default class UserSettingsDisplay extends React.Component { handleNameRadio(nameFormat) { this.setState({nameFormat}); } + handleChannelDisplayModeRadio(channelDisplayMode) { + this.setState({channelDisplayMode}); + } handleFont(selectedFont) { Utils.applyFont(selectedFont); this.setState({selectedFont}); @@ -102,6 +112,7 @@ export default class UserSettingsDisplay extends React.Component { const serverError = this.state.serverError || null; let clockSection; let nameFormatSection; + let channelDisplayModeSection; let fontSection; let languagesSection; @@ -339,6 +350,105 @@ export default class UserSettingsDisplay extends React.Component { ); } + if (this.props.activeSection === Preferences.CHANNEL_DISPLAY_MODE) { + const channelDisplayMode = [false, false]; + if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) { + channelDisplayMode[0] = true; + } else { + channelDisplayMode[1] = true; + } + + const inputs = [ + <div key='userDisplayNameOptions'> + <div className='radio'> + <label> + <input + type='radio' + checked={channelDisplayMode[0]} + onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)} + /> + <FormattedMessage + id='user.settings.display.fixedWidthCentered' + defaultMessage='Fixed with, centered' + /> + </label> + <br/> + </div> + <div className='radio'> + <label> + <input + type='radio' + checked={channelDisplayMode[1]} + onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)} + /> + <FormattedMessage + id='user.settings.display.fullScreen' + defaultMessage='Full screen' + /> + </label> + <br/> + </div> + <div> + <br/> + <FormattedMessage + id='user.settings.display.channeldisplaymode' + defaultMessage='How to display channels.' + /> + </div> + </div> + ]; + + channelDisplayModeSection = ( + <SettingItemMax + title={ + <FormattedMessage + id='user.settings.display.channelDisplayTitle' + defaultMessage='Channel Display Mode' + /> + } + inputs={inputs} + submit={this.handleSubmit} + server_error={serverError} + updateSection={(e) => { + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + let describe; + if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) { + describe = ( + <FormattedMessage + id='user.settings.display.fixedWidthCentered' + defaultMessage='Fixed with, centered' + /> + ); + } else { + describe = ( + <FormattedMessage + id='user.settings.display.fullScreen' + defaultMessage='Full screen' + /> + ); + } + + channelDisplayModeSection = ( + <SettingItemMin + title={ + <FormattedMessage + id='user.settings.display.channelDisplayTitle' + defaultMessage='Channel Display Mode' + /> + } + describe={describe} + updateSection={() => { + this.props.updateSection(Preferences.CHANNEL_DISPLAY_MODE); + }} + /> + ); + } + if (this.props.activeSection === 'font') { const options = []; Object.keys(Constants.FONTS).forEach((fontName, idx) => { @@ -491,6 +601,8 @@ export default class UserSettingsDisplay extends React.Component { <div className='divider-dark'/> {nameFormatSection} <div className='divider-dark'/> + {channelDisplayModeSection} + <div className='divider-dark'/> {languagesSection} </div> </div> diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 93c4cf642..592d486aa 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -359,11 +359,14 @@ body.ios { .post-create__container { form { margin: 0 auto; - max-width: 1028px; - padding: .5em 14px 0; + padding: .5em 30px 0; width: 100%; } + .center { + max-width: 1028px; + } + .post-create-body { padding: 0 0 2px; position: relative; @@ -607,10 +610,10 @@ body.ios { .post__content { display: table; margin: 0 auto; - max-width: 1000px; position: relative; table-layout: fixed; width: 100%; + padding: 0 15px; > div { display: table-cell; @@ -618,6 +621,10 @@ body.ios { } } + .center { + max-width: 1000px; + } + .post__header { list-style: none; margin-bottom: 2px; diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index ae660a486..87f4153fb 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -517,7 +517,11 @@ export default { DISPLAY_PREFER_NICKNAME: 'nickname_full_name', DISPLAY_PREFER_FULL_NAME: 'full_name', CATEGORY_ADVANCED_SETTINGS: 'advanced_settings', - TUTORIAL_STEP: 'tutorial_step' + TUTORIAL_STEP: 'tutorial_step', + CHANNEL_DISPLAY_MODE: 'channel_display_mode', + CHANNEL_DISPLAY_MODE_CENTERED: 'centered', + CHANNEL_DISPLAY_MODE_FULL_SCREEN: 'full', + CHANNEL_DISPLAY_MODE_DEFAULT: 'centered' }, TutorialSteps: { INTRO_SCREENS: 0, |