diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2016-08-16 23:54:11 +0500 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-08-16 14:54:11 -0400 |
commit | 4ef5c1bfb335e41e06e6fb0f0d9d99838ea064e6 (patch) | |
tree | 9be91cea46b754faaecf6f917c81c3981bba77ee /webapp/components | |
parent | ccf9778520e2c0331f1836fb5232680f985a6889 (diff) | |
download | chat-4ef5c1bfb335e41e06e6fb0f0d9d99838ea064e6.tar.gz chat-4ef5c1bfb335e41e06e6fb0f0d9d99838ea064e6.tar.bz2 chat-4ef5c1bfb335e41e06e6fb0f0d9d99838ea064e6.zip |
Multiple UI Improvements (#3804)
* PLT-3834 - Updating Manage members modal for mobile
* PLT-3792 - Making compact view compatible with search and flagged posts RHS
* PLT-3910 - Improving suggestions separator
* PLT-3769 - Enabling markdown headings in compact view
* Updating view members text in en..json
* Removing shouldcomponentupdate from search_results_item.jsx
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/search_results.jsx | 17 | ||||
-rw-r--r-- | webapp/components/search_results_item.jsx | 26 | ||||
-rw-r--r-- | webapp/components/sidebar_right_menu.jsx | 17 |
3 files changed, 51 insertions, 9 deletions
diff --git a/webapp/components/search_results.jsx b/webapp/components/search_results.jsx index 9e3092cca..f66f28fcd 100644 --- a/webapp/components/search_results.jsx +++ b/webapp/components/search_results.jsx @@ -5,9 +5,11 @@ import $ from 'jquery'; import ChannelStore from 'stores/channel_store.jsx'; import SearchStore from 'stores/search_store.jsx'; import UserStore from 'stores/user_store.jsx'; +import PreferenceStore from 'stores/preference_store.jsx'; import SearchBox from './search_bar.jsx'; import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; +const Preferences = Constants.Preferences; import SearchResultsHeader from './search_results_header.jsx'; import SearchResultsItem from './search_results_item.jsx'; @@ -47,12 +49,14 @@ export default class SearchResults extends React.Component { this.onChange = this.onChange.bind(this); this.onUserChange = this.onUserChange.bind(this); this.resize = this.resize.bind(this); + this.onPreferenceChange = this.onPreferenceChange.bind(this); this.handleResize = this.handleResize.bind(this); const state = getStateFromStores(); state.windowWidth = Utils.windowWidth(); state.windowHeight = Utils.windowHeight(); state.profiles = JSON.parse(JSON.stringify(UserStore.getProfiles())); + state.compactDisplay = PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT; this.state = state; } @@ -60,6 +64,7 @@ export default class SearchResults extends React.Component { this.mounted = true; SearchStore.addSearchChangeListener(this.onChange); ChannelStore.addChangeListener(this.onChange); + PreferenceStore.addChangeListener(this.onPreferenceChange); UserStore.addChangeListener(this.onUserChange); this.resize(); window.addEventListener('resize', this.handleResize); @@ -77,6 +82,10 @@ export default class SearchResults extends React.Component { return true; } + if (nextState.compactDisplay !== this.state.compactDisplay) { + return true; + } + return false; } @@ -87,6 +96,7 @@ export default class SearchResults extends React.Component { componentWillUnmount() { SearchStore.removeSearchChangeListener(this.onChange); ChannelStore.removeChangeListener(this.onChange); + PreferenceStore.removeChangeListener(this.onPreferenceChange); UserStore.removeChangeListener(this.onUserChange); this.mounted = false; window.removeEventListener('resize', this.handleResize); @@ -99,6 +109,12 @@ export default class SearchResults extends React.Component { }); } + onPreferenceChange() { + this.setState({ + compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT + }); + } + onChange() { if (this.mounted) { this.setState(getStateFromStores()); @@ -201,6 +217,7 @@ export default class SearchResults extends React.Component { <SearchResultsItem key={post.id} channel={this.state.channels.get(post.channel_id)} + compactDisplay={this.state.compactDisplay} post={post} user={profile} term={searchTerm} diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx index db64463a9..65abc516e 100644 --- a/webapp/components/search_results_item.jsx +++ b/webapp/components/search_results_item.jsx @@ -94,6 +94,21 @@ export default class SearchResultsItem extends React.Component { botIndicator = <li className='bot-indicator'>{Constants.BOT_NAME}</li>; } + let profilePic = ( + <img + src={PostUtils.getProfilePicSrcForPost(post, timestamp)} + height='36' + width='36' + /> + ); + + let compactClass = ''; + let profilePicContainer = (<div className='post__img'>{profilePic}</div>); + if (this.props.compactDisplay) { + compactClass = 'post--compact'; + profilePicContainer = ''; + } + let flag; let flagVisible = ''; let flagTooltip = ( @@ -148,17 +163,11 @@ export default class SearchResultsItem extends React.Component { </div> </div> <div - className='post' + className={'post post--thread ' + compactClass} > <div className='search-channel__name'>{channelName}</div> <div className='post__content'> - <div className='post__img'> - <img - src={PostUtils.getProfilePicSrcForPost(post, timestamp)} - height='36' - width='36' - /> - </div> + {profilePicContainer} <div> <ul className='post__header'> <li className='col col__name'><strong> @@ -245,6 +254,7 @@ SearchResultsItem.propTypes = { post: React.PropTypes.object, user: React.PropTypes.object, channel: React.PropTypes.object, + compactDisplay: React.PropTypes.bool, isMentionSearch: React.PropTypes.bool, term: React.PropTypes.string, useMilitaryTime: React.PropTypes.bool.isRequired, diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx index 576181931..09a9be51b 100644 --- a/webapp/components/sidebar_right_menu.jsx +++ b/webapp/components/sidebar_right_menu.jsx @@ -204,6 +204,18 @@ export default class SidebarRightMenu extends React.Component { } } + manageLink = ( + <li> + <ToggleModalButton dialogType={TeamMembersModal}> + <i className='icon fa fa-users'></i> + <FormattedMessage + id='sidebar_right_menu.viewMembers' + defaultMessage='View Members' + /> + </ToggleModalButton> + </li> + ); + if (isAdmin) { teamSettingsLink = ( <li> @@ -222,7 +234,10 @@ export default class SidebarRightMenu extends React.Component { ); manageLink = ( <li> - <ToggleModalButton dialogType={TeamMembersModal}> + <ToggleModalButton + dialogType={TeamMembersModal} + dialogProps={{isAdmin}} + > <i className='icon fa fa-users'></i> <FormattedMessage id='sidebar_right_menu.manageMembers' |