diff options
21 files changed, 124 insertions, 52 deletions
diff --git a/web/react/components/admin_console/user_item.jsx b/web/react/components/admin_console/user_item.jsx index 02b01b090..0c1a55cc1 100644 --- a/web/react/components/admin_console/user_item.jsx +++ b/web/react/components/admin_console/user_item.jsx @@ -360,8 +360,8 @@ export default class UserItem extends React.Component { height='36' width='36' /> - <span className='member-name'>{Utils.getDisplayName(user)}</span> - <span className='member-email'>{email}</span> + <span className='more-name'>{Utils.getDisplayName(user)}</span> + <span className='more-description'>{email}</span> <div className='dropdown member-drop'> <a href='#' diff --git a/web/react/components/member_list_item.jsx b/web/react/components/member_list_item.jsx index c50ee5c96..41ea58eeb 100644 --- a/web/react/components/member_list_item.jsx +++ b/web/react/components/member_list_item.jsx @@ -124,8 +124,8 @@ export default class MemberListItem extends React.Component { height='36' width='36' /> - <div className='member-name'>{Utils.displayUsername(member.id)}</div> - <div className='member-description'>{member.email}</div> + <div className='more-name'>{Utils.displayUsername(member.id)}</div> + <div className='more-description'>{member.email}</div> </td> <td className='td--action lg'>{invite}</td> </tr> diff --git a/web/react/components/member_list_team_item.jsx b/web/react/components/member_list_team_item.jsx index 6e1006911..30086d1b2 100644 --- a/web/react/components/member_list_team_item.jsx +++ b/web/react/components/member_list_team_item.jsx @@ -208,8 +208,8 @@ export default class MemberListTeamItem extends React.Component { height='36' width='36' /> - <span className='member-name'>{Utils.displayUsername(user.id)}</span> - <span className='member-email'>{email}</span> + <span className='more-name'>{Utils.displayUsername(user.id)}</span> + <span className='more-description'>{email}</span> <div className='dropdown member-drop'> <a href='#' diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx index d12ea4703..d800f93d8 100644 --- a/web/react/components/more_channels.jsx +++ b/web/react/components/more_channels.jsx @@ -114,7 +114,7 @@ export default class MoreChannels extends React.Component { <tr key={channel.id}> <td> <p className='more-name'>{channel.display_name}</p> - <p className='more-purpose'>{channel.purpose}</p> + <p className='more-description'>{channel.purpose}</p> </td> <td className='td--action'> {joinButton} diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index f108ace2e..ebe19abad 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -94,7 +94,7 @@ export default class PostsView extends React.Component { }); } - this.scrollStopAction.fireAfter(1000); + this.scrollStopAction.fireAfter(2000); } handleScrollStop() { this.setState({ @@ -564,6 +564,8 @@ function ScrollToBottomArrows({isScrolling, atBottom, onClick}) { <div className={className} onClick={onClick} - /> + > + <span dangerouslySetInnerHTML={{__html: Constants.SCROLL_BOTTOM_ICON}} /> + </div> ); } diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx index 9dcc99061..4adc3afe0 100644 --- a/web/react/components/search_results.jsx +++ b/web/react/components/search_results.jsx @@ -1,6 +1,7 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import ChannelStore from '../stores/channel_store.jsx'; import SearchStore from '../stores/search_store.jsx'; import UserStore from '../stores/user_store.jsx'; import SearchBox from './search_bar.jsx'; @@ -11,7 +12,22 @@ import SearchResultsItem from './search_results_item.jsx'; import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl'; function getStateFromStores() { - return {results: SearchStore.getSearchResults()}; + const results = SearchStore.getSearchResults(); + + const channels = new Map(); + const channelIds = results.order.map((postId) => results.posts[postId].channel_id); + for (const id of channelIds) { + if (channels.has(id)) { + continue; + } + + channels.set(id, ChannelStore.get(id)); + } + + return { + results, + channels + }; } export default class SearchResults extends React.Component { @@ -33,16 +49,22 @@ export default class SearchResults extends React.Component { componentDidMount() { this.mounted = true; SearchStore.addSearchChangeListener(this.onChange); + ChannelStore.addChangeListener(this.onChange); this.resize(); window.addEventListener('resize', this.handleResize); } + shouldComponentUpdate(nextProps, nextState) { + return !Utils.areObjectsEqual(this.props, nextProps) || !Utils.areObjectsEqual(this.state, nextState); + } + componentDidUpdate() { this.resize(); } componentWillUnmount() { SearchStore.removeSearchChangeListener(this.onChange); + ChannelStore.removeChangeListener(this.onChange); this.mounted = false; window.removeEventListener('resize', this.handleResize); } @@ -56,10 +78,7 @@ export default class SearchResults extends React.Component { onChange() { if (this.mounted) { - var newState = getStateFromStores(); - if (!Utils.areObjectsEqual(newState, this.state)) { - this.setState(newState); - } + this.setState(getStateFromStores()); } } @@ -116,6 +135,7 @@ export default class SearchResults extends React.Component { return ( <SearchResultsItem key={post.id} + channel={this.state.channels.get(post.channel_id)} post={post} term={searchTerm} isMentionSearch={this.props.isMentionSearch} diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx index 544ba920a..d3533037f 100644 --- a/web/react/components/search_results_item.jsx +++ b/web/react/components/search_results_item.jsx @@ -1,7 +1,6 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import ChannelStore from '../stores/channel_store.jsx'; import UserStore from '../stores/user_store.jsx'; import UserProfile from './user_profile.jsx'; import * as EventHelpers from '../dispatcher/event_helpers.jsx'; @@ -37,8 +36,8 @@ export default class SearchResultsItem extends React.Component { } render() { - var channelName = ''; - var channel = ChannelStore.get(this.props.post.channel_id); + var channelName = null; + const channel = this.props.channel; var timestamp = UserStore.getCurrentUser().update_at; if (channel) { @@ -136,6 +135,7 @@ export default class SearchResultsItem extends React.Component { SearchResultsItem.propTypes = { post: React.PropTypes.object, + channel: React.PropTypes.object, isMentionSearch: React.PropTypes.bool, term: React.PropTypes.string }; diff --git a/web/react/components/user_settings/manage_command_hooks.jsx b/web/react/components/user_settings/manage_command_hooks.jsx index d23d2957e..3656424b2 100644 --- a/web/react/components/user_settings/manage_command_hooks.jsx +++ b/web/react/components/user_settings/manage_command_hooks.jsx @@ -271,7 +271,7 @@ export default class ManageCommandCmds extends React.Component { cmds.push( <div key={cmd.id} - className='webcmd__item' + className='webhook__item webcmd__item' > <div className='padding-top x2'> <strong> @@ -400,7 +400,7 @@ export default class ManageCommandCmds extends React.Component { } const existingCmds = ( - <div className='webcmds__container'> + <div className='webhooks__container webcmds__container'> <label className='control-label padding-top x2'> <FormattedMessage id='user.settings.cmds.existing' @@ -408,7 +408,7 @@ export default class ManageCommandCmds extends React.Component { /> </label> <div className='padding-top divider-light'></div> - <div className='webcmds__list'> + <div className='webhooks__list webcmds__list'> {displayCmds} </div> </div> diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index e0b72157b..90f28822b 100644 --- a/web/react/components/user_settings/user_settings_modal.jsx +++ b/web/react/components/user_settings/user_settings_modal.jsx @@ -234,7 +234,7 @@ class UserSettingsModal extends React.Component { tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'}); } - if (global.window.mm_config.EnableIncomingWebhooks === 'true' || global.window.mm_config.EnableOutgoingWebhooks === 'true') { + if (global.window.mm_config.EnableIncomingWebhooks === 'true' || global.window.mm_config.EnableOutgoingWebhooks === 'true' || global.window.mm_config.EnableCommands === 'true') { tabs.push({name: 'integrations', uiName: formatMessage(holders.integrations), icon: 'glyphicon glyphicon-transfer'}); } tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'glyphicon glyphicon-eye-open'}); diff --git a/web/react/stores/channel_store.jsx b/web/react/stores/channel_store.jsx index d650b23c2..ac800a988 100644 --- a/web/react/stores/channel_store.jsx +++ b/web/react/stores/channel_store.jsx @@ -308,7 +308,7 @@ ChannelStore.dispatchToken = AppDispatcher.register((payload) => { ChannelStore.storeChannels(action.channels); ChannelStore.storeChannelMembers(action.members); currentId = ChannelStore.getCurrentId(); - if (currentId) { + if (currentId && !document.hidden) { ChannelStore.resetCounts(currentId); } ChannelStore.setUnreadCounts(); @@ -321,7 +321,7 @@ ChannelStore.dispatchToken = AppDispatcher.register((payload) => { ChannelStore.pStoreChannelMember(action.member); } currentId = ChannelStore.getCurrentId(); - if (currentId) { + if (currentId && !document.hidden) { ChannelStore.resetCounts(currentId); } ChannelStore.setUnreadCount(action.channel.id); diff --git a/web/react/stores/socket_store.jsx b/web/react/stores/socket_store.jsx index bc2bdbe64..e1b65fe14 100644 --- a/web/react/stores/socket_store.jsx +++ b/web/react/stores/socket_store.jsx @@ -188,7 +188,9 @@ function handleNewPostEvent(msg, translations) { // Update channel state if (ChannelStore.getCurrentId() === msg.channel_id) { - if (window.isActive) { + if (document.hidden) { + AsyncClient.getChannel(msg.channel_id); + } else { AsyncClient.updateLastViewedAt(); } } else if (UserStore.getCurrentId() !== msg.user_id || post.type !== Constants.POST_TYPE_JOIN_LEAVE) { diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index d5fc10b8f..c8676f45d 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -779,13 +779,19 @@ export function getSuggestedCommands(command, suggestionId, component) { var matches = []; data.forEach((cmd) => { if (('/' + cmd.trigger).indexOf(command) === 0) { + let s = '/' + cmd.trigger; + if (cmd.auto_complete_hint && cmd.auto_complete_hint.length !== 0) { + s += ' ' + cmd.auto_complete_hint; + } matches.push({ - suggestion: '/' + cmd.trigger + ' ' + cmd.auto_complete_hint, + suggestion: s, description: cmd.auto_complete_desc }); } }); + matches = matches.sort((a, b) => a.suggestion.localeCompare(b.suggestion)); + // pull out the suggested commands from the returned data const terms = matches.map((suggestion) => suggestion.suggestion); diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 9689591a6..b1e84202d 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -173,6 +173,7 @@ export default { MENU_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='4px' height='16px' viewBox='0 0 8 32' enable-background='new 0 0 8 32' xml:space='preserve'> <g> <circle cx='4' cy='4.062' r='4'/> <circle cx='4' cy='16' r='4'/> <circle cx='4' cy='28' r='4'/> </g> </svg>", COMMENT_ICON: "<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='15px' height='15px' viewBox='1 1.5 15 15' enable-background='new 1 1.5 15 15' xml:space='preserve'> <g> <g> <path fill='#211B1B' d='M14,1.5H3c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2h1.628l1.884,3l1.866-3H14c1.104,0,2-0.896,2-2v-8 C16,2.396,15.104,1.5,14,1.5z M15,11.5c0,0.553-0.447,1-1,1H8l-1.493,2l-1.504-1.991L5,12.5H3c-0.552,0-1-0.447-1-1v-8 c0-0.552,0.448-1,1-1h11c0.553,0,1,0.448,1,1V11.5z'/> </g> </g> </svg>", REPLY_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-158 242 18 18' style='enable-background:new -158 242 18 18;' xml:space='preserve'> <path d='M-142.2,252.6c-2-3-4.8-4.7-8.3-4.8v-3.3c0-0.2-0.1-0.3-0.2-0.3s-0.3,0-0.4,0.1l-6.9,6.2c-0.1,0.1-0.1,0.2-0.1,0.3 c0,0.1,0,0.2,0.1,0.3l6.9,6.4c0.1,0.1,0.3,0.1,0.4,0.1c0.1-0.1,0.2-0.2,0.2-0.4v-3.8c4.2,0,7.4,0.4,9.6,4.4c0.1,0.1,0.2,0.2,0.3,0.2 c0,0,0.1,0,0.1,0c0.2-0.1,0.3-0.3,0.2-0.4C-140.2,257.3-140.6,255-142.2,252.6z M-150.8,252.5c-0.2,0-0.4,0.2-0.4,0.4v3.3l-6-5.5 l6-5.3v2.8c0,0.2,0.2,0.4,0.4,0.4c3.3,0,6,1.5,8,4.5c0.5,0.8,0.9,1.6,1.2,2.3C-144,252.8-147.1,252.5-150.8,252.5z'/> </svg>", + SCROLL_BOTTOM_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-239 239 21 23' style='enable-background:new -239 239 21 23;' xml:space='preserve'> <path d='M-239,241.4l2.4-2.4l8.1,8.2l8.1-8.2l2.4,2.4l-10.5,10.6L-239,241.4z M-228.5,257.2l8.1-8.2l2.4,2.4l-10.5,10.6l-10.5-10.6 l2.4-2.4L-228.5,257.2z'/> </svg>", UPDATE_TYPING_MS: 5000, THEMES: { default: { diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 896a94ac5..e2a5b9620 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -392,6 +392,10 @@ export function areObjectsEqual(x, y) { return x.toString() === y.toString(); } + if (x instanceof Map && y instanceof Map) { + return areMapsEqual(x, y); + } + // At last checking prototypes as good a we can if (!(x instanceof Object && y instanceof Object)) { return false; @@ -456,6 +460,24 @@ export function areObjectsEqual(x, y) { return true; } +export function areMapsEqual(a, b) { + if (a.size !== b.size) { + return false; + } + + for (const [key, value] of a) { + if (!b.has(key)) { + return false; + } + + if (!areObjectsEqual(value, b.get(key))) { + return false; + } + } + + return true; +} + export function replaceHtmlEntities(text) { var tagsToReplace = { '&': '&', @@ -680,6 +702,7 @@ export function applyTheme(theme) { } if (theme.centerChannelColor) { + changeCss('.post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name, .tip-overlay', 'color:' + theme.centerChannelColor, 1); changeCss('#archive-link-home', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss index 14e12ecd2..0ba1929e0 100644 --- a/web/sass-files/sass/partials/_markdown.scss +++ b/web/sass-files/sass/partials/_markdown.scss @@ -39,6 +39,7 @@ padding: 4px 10px 5px 10px; font-size: 13px; opacity: 0.7; + z-index: 5; } .post__body { diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss index df6dd40a2..aa654e9e8 100644 --- a/web/sass-files/sass/partials/_mentions.scss +++ b/web/sass-files/sass/partials/_mentions.scss @@ -18,6 +18,13 @@ line-height: 36px; font-size: 13px; cursor: pointer; + white-space: nowrap; + + .mention-align { + @include clearfix; + text-overflow: ellipsis; + width: calc(100% - 50px); + } } .mentions-text { @@ -33,6 +40,15 @@ font-size: 20px; text-align: center; @include border-radius(32px); + + .mention-align { + max-width: 80%; + overflow: hidden; + display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + } + } .mention-fullname { diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index b451adb75..db99e840b 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -103,7 +103,7 @@ background: rgba(0, 0, 0, 0.1); } span { - font-family: 'Open Sans', sans-serif; + font-family: 'Open Sans', sans-serif; line-height: 10px; } } @@ -170,6 +170,12 @@ overflow: hidden; text-overflow: ellipsis; } + .more-description { + @include opacity(0.7); + display: block; + overflow: hidden; + text-overflow: ellipsis; + } tbody { > tr { &:hover td { @@ -425,9 +431,9 @@ } .modal-body.edit-modal-body { - overflow: visible; + overflow: visible; - .suggestion-content { - max-height: 150px; - } + .suggestion-content { + max-height: 150px; + } } diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss index 8a61758f1..bf762d2c9 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/partials/_popover.scss @@ -150,6 +150,9 @@ } .more-name { margin-left: 6px; + max-width: 140px; + overflow: hidden; + text-overflow: ellipsis; } } } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index cc22cc913..323691d89 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -264,32 +264,37 @@ body.ios { line-height: 25px; margin-left: -60px; -webkit-font-smoothing: initial; - @include single-transition(all, 0.3s, ease); + @include single-transition(all, 0.6s, ease); @include translateY(-45px); @include opacity(0); display: none; &.scrolling { - @include single-transition(all, 0.3s, ease); @include translateY(0); @include opacity(0.8); } } .post-list__arrows { - background: url('../images/postArrows.png') center; - @include background-size(28px 28px); background-repeat: no-repeat; width: 40px; height: 40px; + text-align: center; + fill: #444; position: absolute; bottom: 0; - left: 10px; + left: 9px; z-index: 50; @include opacity(0); - @include single-transition(all, 0.3s); + @include single-transition(all, 0.6s); display: none; + svg { + color: inherit; + width: 28px; + height: 28px; + } + &.scrolling { display: block; @include opacity(1); @@ -487,7 +492,7 @@ body.ios { position: absolute; top: -2px; left: -7px; - font-size: 11px; + font-size: 11px; line-height: 37px; @include opacity(0); } diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index bf296e913..1bbec566c 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -223,6 +223,8 @@ .section-describe { @include opacity(0.7); white-space:pre; + @include clearfix; + text-overflow: ellipsis; } .divider-dark { @@ -341,21 +343,6 @@ h3 { @include border-radius(50px); margin-right: 8px; } - .member-name { - font-weight:500; - display: block; - max-width: 80%; - overflow: hidden; - text-overflow: ellipsis; - } - - .member-email { - color:darkgrey; - display: block; - max-width: 80%; - overflow: hidden; - text-overflow: ellipsis; - } } .member-role, .member-drop { diff --git a/web/static/images/postArrows.png b/web/static/images/postArrows.png Binary files differdeleted file mode 100644 index 7b5919fc3..000000000 --- a/web/static/images/postArrows.png +++ /dev/null |
