diff options
21 files changed, 97 insertions, 66 deletions
diff --git a/web/react/components/admin_console/email_settings.jsx b/web/react/components/admin_console/email_settings.jsx index c028d605d..12480e7eb 100644 --- a/web/react/components/admin_console/email_settings.jsx +++ b/web/react/components/admin_console/email_settings.jsx @@ -447,7 +447,7 @@ export default class EmailSettings extends React.Component { </div> <div className='help-text'> <button - className='btn' + className='btn btn-default' onClick={this.handleTestConnection} disabled={!this.state.sendEmailNotifications} id='connection-button' @@ -482,7 +482,7 @@ export default class EmailSettings extends React.Component { <p className='help-text'>{'32-character salt added to signing of email invites. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p> <div className='help-text'> <button - className='btn' + className='btn btn-default' onClick={this.handleGenerateInvite} disabled={!this.state.sendEmailNotifications} > @@ -513,7 +513,7 @@ export default class EmailSettings extends React.Component { <p className='help-text'>{'32-character salt added to signing of password reset emails. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p> <div className='help-text'> <button - className='btn' + className='btn btn-default' onClick={this.handleGenerateReset} disabled={!this.state.sendEmailNotifications} > diff --git a/web/react/components/admin_console/gitlab_settings.jsx b/web/react/components/admin_console/gitlab_settings.jsx index 5c22bf5cf..41c8ad2fc 100644 --- a/web/react/components/admin_console/gitlab_settings.jsx +++ b/web/react/components/admin_console/gitlab_settings.jsx @@ -116,12 +116,14 @@ export default class GitLabSettings extends React.Component { <p className='help-text'> {'When true, Mattermost allows team creation and account signup using GitLab OAuth.'} <br/> </p> - <ol className='help-text'> - <li>{'Log in to your GitLab account and go to Applications -> Profile Settings.'}</li> - <li>{'Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". '}</li> - <li>{'Then use "Secret" and "Id" fields from GitLab to complete the options below.'}</li> - <li>{'Complete the Endpoint URLs below. '}</li> - </ol> + <div className='help-text'> + <ol> + <li>{'Log in to your GitLab account and go to Applications -> Profile Settings.'}</li> + <li>{'Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". '}</li> + <li>{'Then use "Secret" and "Id" fields from GitLab to complete the options below.'}</li> + <li>{'Complete the Endpoint URLs below. '}</li> + </ol> + </div> </div> </div> diff --git a/web/react/components/admin_console/sql_settings.jsx b/web/react/components/admin_console/sql_settings.jsx index 16a69e664..655daa30c 100644 --- a/web/react/components/admin_console/sql_settings.jsx +++ b/web/react/components/admin_console/sql_settings.jsx @@ -220,7 +220,7 @@ export default class SqlSettings extends React.Component { <p className='help-text'>{'32-character salt available to encrypt and decrypt sensitive fields in database.'}</p> <div className='help-text'> <button - className='help-link' + className='btn btn-default' onClick={this.handleGenerate} > {'Re-Generate'} diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index d0d6ab5e2..270631db2 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -75,15 +75,6 @@ export default class ChannelLoader extends React.Component { Utils.applyTheme(Constants.THEMES.default); } - /* Setup global mouse events */ - $('body').on('click', function hidePopover(e) { - $('[data-toggle="popover"]').each(function eachPopover() { - if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { - $(this).popover('hide'); - } - }); - }); - $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) { if (ev.type === 'mouseenter') { $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after'); diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 2ac5d2179..fa3f82c2e 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -46,7 +46,9 @@ export default class CreateComment extends React.Component { componentDidUpdate(prevProps, prevState) { if (prevState.uploadsInProgress < this.state.uploadsInProgress) { $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); - $('.post-right__scroll').perfectScrollbar('update'); + if ($(window).width() > 768) { + $('.post-right__scroll').perfectScrollbar('update'); + } } } handleSubmit(e) { diff --git a/web/react/components/email_verify.jsx b/web/react/components/email_verify.jsx index 9be7f97f8..940b01f8d 100644 --- a/web/react/components/email_verify.jsx +++ b/web/react/components/email_verify.jsx @@ -39,11 +39,9 @@ export default class EmailVerify extends React.Component { return ( <div className='col-sm-12'> - <div className='panel panel-default verify_panel'> - <div className='panel-heading'> - <h3 className='panel-title'>{title}</h3> - </div> - <div className='panel-body'> + <div className='signup-team__container'> + <h3>{title}</h3> + <div> {body} {resend} {resendConfirm} diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index 5d9052fd7..16ae693fa 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -2,6 +2,8 @@ // See License.txt for license information. var UserStore = require('../stores/user_store.jsx'); +var Popover = ReactBootstrap.Popover; +var OverlayTrigger = ReactBootstrap.OverlayTrigger; export default class PopoverListMembers extends React.Component { componentDidMount() { @@ -24,16 +26,9 @@ export default class PopoverListMembers extends React.Component { }); } }; - - $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true}); - $('body').on('click', function onClick(e) { - if (e.target.parentNode && $(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) { - $('#member_popover').popover('hide'); - } - }); } render() { - let popoverHtml = ''; + let popoverHtml = []; let count = 0; let countText = '-'; const members = this.props.members; @@ -46,7 +41,7 @@ export default class PopoverListMembers extends React.Component { members.forEach(function addMemberElement(m) { if (teamMembers[m.username] && teamMembers[m.username].delete_at <= 0) { - popoverHtml += `<div class='text--nowrap'>${m.username}</div>`; + popoverHtml.push(<div className='text--nowrap'>{m.username}</div>); count++; } }); @@ -59,15 +54,14 @@ export default class PopoverListMembers extends React.Component { } return ( - <div - id='member_popover' - data-toggle='popover' - data-content={popoverHtml} - data-original-title='Members' + <OverlayTrigger + trigger='click' + placement='bottom' + rootClose='true' + overlay={<Popover title='Members'>{popoverHtml}</Popover>} > - <div - id='member_tooltip' - > + <div id='member_popover'> + <div> {countText} <span className='fa fa-user' @@ -75,6 +69,7 @@ export default class PopoverListMembers extends React.Component { /> </div> </div> + </OverlayTrigger> ); } } diff --git a/web/react/components/rhs_thread.jsx b/web/react/components/rhs_thread.jsx index 41fd74adb..131253aa5 100644 --- a/web/react/components/rhs_thread.jsx +++ b/web/react/components/rhs_thread.jsx @@ -52,8 +52,6 @@ export default class RhsThread extends React.Component { if ($('.post-right__scroll')[0]) { $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight); } - - $('.post-right__scroll').perfectScrollbar('update'); this.resize(); } componentWillUnmount() { @@ -100,8 +98,10 @@ export default class RhsThread extends React.Component { var height = $(window).height() - $('#error_bar').outerHeight() - 100; $('.post-right__scroll').css('height', height + 'px'); $('.post-right__scroll').scrollTop(100000); - $('.post-right__scroll').perfectScrollbar(); - $('.post-right__scroll').perfectScrollbar('update'); + if ($(window).width() > 768) { + $('.post-right__scroll').perfectScrollbar(); + $('.post-right__scroll').perfectScrollbar('update'); + } } render() { var postList = this.state.postList; diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx index 5eea3c501..e55fd3752 100644 --- a/web/react/components/search_results.jsx +++ b/web/react/components/search_results.jsx @@ -56,7 +56,9 @@ export default class SearchResults extends React.Component { var height = $(window).height() - $('#error_bar').outerHeight() - 100; $('#search-items-container').css('height', height + 'px'); $('#search-items-container').scrollTop(0); - $('#search-items-container').perfectScrollbar(); + if ($(window).width() > 768) { + $('#search-items-container').perfectScrollbar(); + } } render() { diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 1308165a9..e7d90bb88 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -134,7 +134,9 @@ export default class Sidebar extends React.Component { AsyncClient.getDirectChannelPreferences(); - $('.nav-pills__container').perfectScrollbar(); + if ($(window).width() > 768) { + $('.nav-pills__container').perfectScrollbar(); + } this.updateTitle(); this.updateUnreadIndicators(); diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx index cc6165c1b..715161b4f 100644 --- a/web/react/components/user_profile.jsx +++ b/web/react/components/user_profile.jsx @@ -3,6 +3,8 @@ var Utils = require('../utils/utils.jsx'); var UserStore = require('../stores/user_store.jsx'); +var Popover = ReactBootstrap.Popover; +var OverlayTrigger = ReactBootstrap.OverlayTrigger; var id = 0; @@ -32,7 +34,6 @@ export default class UserProfile extends React.Component { componentDidMount() { UserStore.addChangeListener(this.onChange); if (!this.props.disablePopover) { - $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'click hover', html: true, delay: {show: 200, hide: 100}}); $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'}); } } @@ -62,23 +63,46 @@ export default class UserProfile extends React.Component { return <div>{name}</div>; } - var dataContent = '<img class="user-popover__image" src="/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '" height="128" width="128" />'; + var dataContent = []; + dataContent.push( + <img className='user-popover__image' + src={'/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at} + height='128' + width='128' + /> + ); if (!global.window.config.ShowEmailAddress === 'true') { - dataContent += '<div class="text-nowrap">Email not shared</div>'; + dataContent.push(<div className='text-nowrap'>{'Email not shared'}</div>); } else { - dataContent += '<div data-toggle="tooltip" title="' + this.state.profile.email + '"><a href="mailto:' + this.state.profile.email + '" class="text-nowrap text-lowercase user-popover__email">' + this.state.profile.email + '</a></div>'; + dataContent.push( + <div + data-toggle='tooltip' + title="' + this.state.profile.email + '" + > + <a + href="mailto:' + this.state.profile.email + '" + className='text-nowrap text-lowercase user-popover__email' + > + {this.state.profile.email} + </a> + </div> + ); } return ( + <OverlayTrigger + trigger='click' + placement='right' + rootClose='true' + overlay={<Popover title={this.state.profile.username}>{dataContent}</Popover>} + > <div className='user-popover' id={'profile_' + this.uniqueId} - data-toggle='popover' - data-content={dataContent} - data-original-title={this.state.profile.username} > {name} </div> + </OverlayTrigger> ); } } diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index f93fe02e4..0457d620f 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -467,6 +467,10 @@ export function applyTheme(theme) { changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1); changeCss('.post-image__column .post-image__details', 'background:' + theme.centerChannelBg, 1); changeCss('.sidebar--right, .dropdown-menu, .popover', 'background:' + theme.centerChannelBg, 1); + changeCss('.popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1); + changeCss('.popover.right>.arrow:after', 'border-right-color:' + theme.centerChannelBg, 1); + changeCss('.popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg, 1); + changeCss('.popover.top>.arrow:after', 'border-top-color:' + theme.centerChannelBg, 1); changeCss('.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1); } diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss index 4b4fc1664..14f1d9c2f 100644 --- a/web/sass-files/sass/partials/_admin-console.scss +++ b/web/sass-files/sass/partials/_admin-console.scss @@ -15,12 +15,11 @@ .nav { li { padding: 0; + @include opacity(1); .icon { width: 17px; } > a { - padding: 9px 15px; - display: block; &:hover, &.active, &:focus { background-color: #EAEAEA; } @@ -117,8 +116,10 @@ .form-group { margin-bottom: 25px; } - ul, ol { - padding-left: 23px; + .help-text { + ul, ol { + padding-left: 23px; + } } .help-text { margin: 10px 0 0 15px; diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 44a474213..cb5ff67b5 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -39,10 +39,6 @@ img { height: auto; } -.input-group-addon { - background: transparent; -} - .popover { color: #333; &.bottom, &.right, &.top, &.left { @@ -53,6 +49,9 @@ img { .popover-title { background: rgba(black, 0.05); } + .popover-content { + white-space: pre-wrap; + } } .dropdown-menu { @@ -182,6 +181,10 @@ a:focus, a:hover { background-color: white !important; } +.alert { + padding: 8px 12px; +} + .emoji { width: 1.5em; height: 1.5em; diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 6dbb82810..01057423d 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -194,6 +194,7 @@ vertical-align: top; .file-details__name { + color: #333; font-size: 16px; } .file-details__info { diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss index 1aa942ad0..70c99f504 100644 --- a/web/sass-files/sass/partials/_markdown.scss +++ b/web/sass-files/sass/partials/_markdown.scss @@ -1,5 +1,6 @@ .markdown__heading { font-weight: 700; + line-height: 1.5; } .markdown__paragraph-inline { display: inline; diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index b72176a11..9557d7570 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -93,6 +93,7 @@ .post-right__scroll { position: relative; + overflow: auto; } .post-right-comment-time { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index dbe6029ec..09f2c179e 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -586,11 +586,14 @@ &.move--right { @include translate3d(0, 0, 0); } + .nav-pills__unread-indicator-bottom { + bottom: 10px; + } .badge { top: 13px; } > div { - padding-bottom: 105px; + padding-bottom: 65px; } .team__header { display: none; diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss index 2de1b5380..ca90ec46d 100644 --- a/web/sass-files/sass/partials/_search.scss +++ b/web/sass-files/sass/partials/_search.scss @@ -67,6 +67,7 @@ } .search-items-container { + overflow: auto; position: relative; } diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 24aaef059..831c19cff 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -69,7 +69,7 @@ top: 66px; } .nav-pills__unread-indicator-bottom { - bottom: 10px; + bottom: 20px; } .nav { diff --git a/web/templates/channel.html b/web/templates/channel.html index 13fd80d75..4b8318d43 100644 --- a/web/templates/channel.html +++ b/web/templates/channel.html @@ -54,7 +54,7 @@ <script> window.setup_channel_page({{ .Props }}); $('body').tooltip( {selector: '[data-toggle=tooltip]'} ); - $('.modal-body').css('max-height', $(window).height() - 150); + $('.modal-body').css('max-height', $(window).height() - 200); $('.modal-body').perfectScrollbar(); </script> </body> |