diff options
Diffstat (limited to 'webapp')
-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 | ||||
-rw-r--r-- | webapp/i18n/en.json | 1 | ||||
-rw-r--r-- | webapp/sass/components/_mentions.scss | 15 | ||||
-rw-r--r-- | webapp/sass/components/_suggestion-list.scss | 11 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 4 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 4 |
8 files changed, 69 insertions, 26 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' diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index e51d9b43a..ae8a2d260 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1500,6 +1500,7 @@ "sidebar_right_menu.inviteNew": "Invite New Member", "sidebar_right_menu.logout": "Logout", "sidebar_right_menu.manageMembers": "Manage Members", + "sidebar_right_menu.viewMembers": "View Members", "sidebar_right_menu.nativeApps": "Download Native App", "sidebar_right_menu.recentMentions": "Recent Mentions", "sidebar_right_menu.report": "Report a Problem", diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss index 17f67d080..5df6e4431 100644 --- a/webapp/sass/components/_mentions.scss +++ b/webapp/sass/components/_mentions.scss @@ -13,10 +13,9 @@ @include clearfix; cursor: pointer; font-size: 13px; - height: 39px; - line-height: 35px; + line-height: 20px; margin: 0; - padding: 3px 8px; + padding: 6px 10px; position: relative; white-space: nowrap; width: 100%; @@ -30,14 +29,14 @@ } .mention__image { - @include border-radius(32px); + @include border-radius(20px); display: block; - font-size: 20px; - height: 32px; - line-height: 36px; + font-size: 15px; + height: 20px; + line-height: 20px; margin-right: 6px; text-align: center; - width: 32px; + width: 20px; .mention--align { display: inline-block; diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss index c995d5ebf..3fdff10d5 100644 --- a/webapp/sass/components/_suggestion-list.scss +++ b/webapp/sass/components/_suggestion-list.scss @@ -17,6 +17,7 @@ max-height: 292px; overflow-x: hidden; overflow-y: scroll; + padding-bottom: 5px; width: 100%; .command { @@ -47,7 +48,7 @@ .suggestion-list__divider { line-height: 21px; - margin: 5px 0px 0px 5px; + margin: 5px 0 5px 5px; position: relative; &:first-child { @@ -55,10 +56,10 @@ } > span { - color: rgba(51,51,51,0.7); - background: #f2f4f8; + @include opacity(.7); display: inline-block; - padding-right: 10px; + font-size: .9em; + padding: 0 10px 0 5px; position: relative; z-index: 5; } @@ -70,7 +71,7 @@ height: 1px; left: 0; position: absolute; - top: 10px; + top: 11px; width: 100%; } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 8513f779a..d894848c9 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -545,8 +545,8 @@ body.ios { } .markdown__heading { - font-size: 1em; - margin: 0 0 7px; + clear: both; + margin: 7px 0; } .post__header { diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 9731d3ce2..c394cdaf1 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -547,7 +547,7 @@ export function applyTheme(theme) { if (theme.centerChannelBg) { changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'background:' + theme.centerChannelBg, 1); - changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column', 'background:' + theme.centerChannelBg, 1); + changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span', 'background:' + theme.centerChannelBg, 1); changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1); changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); @@ -593,7 +593,7 @@ export function applyTheme(theme) { changeCss('.app__body .popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.app__body .popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.app__body .suggestion-list__content .command, .app__body .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); - changeCss('.app__body .dropdown-menu .divider, .app__body .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1); + changeCss('.app__body .suggestion-list__divider:before, .app__body .dropdown-menu .divider, .app__body .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1); changeCss('.app__body .custom-textarea', 'color:' + theme.centerChannelColor, 1); changeCss('.app__body .post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); changeCss('.app__body .post-image__details', 'color:' + theme.centerChannelColor, 2); |