diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx index ce19c48f08..b56a7b0069 100644 --- a/web/react/components/search_results.jsx +++ b/web/react/components/search_results.jsx @@ -83,7 +83,16 @@ export default class SearchResults extends React.Component { var ctls = null; if (noResults) { - ctls =
No results
; + ctls = + ( +
+

{'NO RESULTS'}

+ +
+ ); } else { ctls = results.order.map(function mymap(id) { var post = results.posts[id]; diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx index 4af46c35ac..68d9cea485 100644 --- a/web/react/components/settings_sidebar.jsx +++ b/web/react/components/settings_sidebar.jsx @@ -1,10 +1,14 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +var utils = require('../utils/utils.jsx'); export default class SettingsSidebar extends React.Component { componentDidUpdate() { $('.settings-modal').find('.modal-body').scrollTop(0); $('.settings-modal').find('.modal-body').perfectScrollbar('update'); + if (utils.isSafari()) { + $('.settings-modal .settings-links .nav').addClass('absolute'); + } } constructor(props) { super(props); diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx index c7c4fa2ea1..587ef5ec2c 100644 --- a/web/react/components/team_general_tab.jsx +++ b/web/react/components/team_general_tab.jsx @@ -372,29 +372,28 @@ export default class GeneralTab extends React.Component { const inputs = []; inputs.push( -
- -
- -
-

{'Your Invite Code is used in the URL sent to people to join your team. Regenerating your Invite Code will invalidate the URLs in previous invitations, unless "Allow anyone to sign-up from login page" is enabled.'}
-
- +
+
+ +
+ + +
+
{'When allowing open invites this code is used as part of the signup process. Changing this code will invalidate the previous open signup link.'}
); @@ -493,8 +492,11 @@ export default class GeneralTab extends React.Component {

{'General Settings'}

{nameSection} +
{openInviteSection} +
{teamListingSection} +
{inviteSection}
diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx index c7abccae35..8fc38b1e33 100644 --- a/web/react/components/tutorial/tutorial_intro_screens.jsx +++ b/web/react/components/tutorial/tutorial_intro_screens.jsx @@ -35,6 +35,9 @@ export default class TutorialIntroScreens extends React.Component { preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), newValue); AsyncClient.savePreferences([preference]); } + componentDidMount() { + $('.tutorials__scroll').perfectScrollbar(); + } createScreen() { switch (this.state.currentScreen) { case 0: @@ -130,20 +133,26 @@ export default class TutorialIntroScreens extends React.Component { ); } render() { + const height = Utils.windowHeight() - 100; const screen = this.createScreen(); return ( -
-
-
- {screen} - +
+
+
+
+ {screen} + +
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 296307bc64..c82bd1065f 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -59,6 +59,20 @@ export function isTestDomain() { return false; } +export function isChrome() { + if (navigator.userAgent.indexOf('Chrome') > -1) { + return true; + } + return false; +} + +export function isSafari() { + if (navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) { + return true; + } + return false; +} + export function isInRole(roles, inRole) { var parts = roles.split(' '); for (var i = 0; i < parts.length; i++) { @@ -500,16 +514,16 @@ export function applyTheme(theme) { changeCss('#post-create', 'background:' + theme.centerChannelBg, 1); 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('.sidebar--right, .dropdown-menu, .popover, .tip-overlay', '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.right>.arrow:after, .tip-overlay.tip-overlay--sidebar .arrow, .tip-overlay.tip-overlay--header .arrow', '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('.popover.top>.arrow:after, .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg, 1); changeCss('.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1); } if (theme.centerChannelColor) { - 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', 'color:' + theme.centerChannelColor, 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('#post-create', 'color:' + theme.centerChannelColor, 2); changeCss('.channel-header__links a', 'fill:' + changeOpacity(theme.centerChannelColor, 0.7), 1); changeCss('.channel-header__links a:hover, .channel-header__links a:active', 'fill:' + theme.centerChannelColor, 2); @@ -519,7 +533,7 @@ export function applyTheme(theme) { changeCss('.dropdown-menu, .popover ', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 3); changeCss('.dropdown-menu, .popover ', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 2); changeCss('.dropdown-menu, .popover ', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 1); - changeCss('.post-body hr, .loading-screen .loading__content .round', 'background:' + theme.centerChannelColor, 1); + changeCss('.post-body hr, .loading-screen .loading__content .round, .tutorial__circles .circle, .tip-overlay .tutorial__circles .circle.active', 'background:' + theme.centerChannelColor, 1); changeCss('.channel-header .heading', 'color:' + theme.centerChannelColor, 1); changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); @@ -568,7 +582,7 @@ export function applyTheme(theme) { } if (theme.buttonBg) { - changeCss('.btn.btn-primary', 'background:' + theme.buttonBg, 1); + changeCss('.btn.btn-primary, .tutorial__circles .circle.active', 'background:' + theme.buttonBg, 1); changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1); changeCss('.file-playback-controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1); } diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index c286927a25..2830026c91 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -133,9 +133,6 @@ a:focus, a:hover { &.no-resize { resize: none; } - &.min-height { - min-height: 100px; - } } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index a49a989522..8f25f58cd5 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -275,6 +275,14 @@ } } @media screen and (max-width: 768px) { + .form-control { + &.min-height { + min-height: 100px; + } + } + .gif-div { + max-width: 100%; + } .tip-div { left: 15px; right: auto; @@ -460,7 +468,7 @@ } } .settings-table { - .nav { + .nav, .nav.absolute { position: relative; top: auto; width: 100%; diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index fbbd074856..96a6cf2ab1 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -72,6 +72,10 @@ position: fixed; top: 57px; width: 179px; + &.absolute { + position: absolute; + top: 0; + } } .security-links { margin-right: 20px; diff --git a/web/sass-files/sass/partials/_sidebar--right.scss b/web/sass-files/sass/partials/_sidebar--right.scss index c954b03d88..a4267294c1 100644 --- a/web/sass-files/sass/partials/_sidebar--right.scss +++ b/web/sass-files/sass/partials/_sidebar--right.scss @@ -80,13 +80,18 @@ } .sidebar--right__subheader { font-size: 1em; - text-transform: uppercase; - color: #999; - font-weight: 400; - color: #888; - height: 44px; - line-height: 44px; - padding: 0 1em; + padding: 1em 1em 0; + h4 { + font-size: 1em; + } + ul { + @include opacity(0.7); + padding: 10px 0 0 30px; + } + li { + font-size: 0.95em; + padding-bottom: 10px; + } } } diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss index 42183d5998..70216aa97b 100644 --- a/web/sass-files/sass/partials/_tutorial.scss +++ b/web/sass-files/sass/partials/_tutorial.scss @@ -146,11 +146,12 @@ text-align: center; width: 100%; display: table; + height: 100%; .tutorial__content { display: table-cell; vertical-align: middle; padding-bottom: 100px; - padding: 0 40px; + padding: 20px 40px 40px; .tutorial__steps { max-width: 310px; min-height: 420px; @@ -176,7 +177,7 @@ width: 9px; height: 9px; @include border-radius(9px); - @include opacity(0.1); + @include opacity(0.2); background: #000; display: inline-block; margin: 0 5px;