From c49f3b3956fae1b00145568140c940d5fa053eb8 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 3 Nov 2015 19:56:46 +0500 Subject: Multiple UI changes --- web/react/components/search_results.jsx | 11 +++++- web/react/components/settings_sidebar.jsx | 3 ++ web/react/components/team_general_tab.jsx | 46 +++++++++++----------- .../components/tutorial/tutorial_intro_screens.jsx | 29 ++++++++------ web/react/utils/utils.jsx | 12 +++--- web/sass-files/sass/partials/_base.scss | 3 -- web/sass-files/sass/partials/_responsive.scss | 10 ++++- web/sass-files/sass/partials/_settings.scss | 4 ++ web/sass-files/sass/partials/_sidebar--right.scss | 19 +++++---- web/sass-files/sass/partials/_tutorial.scss | 5 ++- 10 files changed, 89 insertions(+), 53 deletions(-) (limited to 'web') diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx index ce19c48f0..b56a7b006 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 4af46c35a..bc0f48a4e 100644 --- a/web/react/components/settings_sidebar.jsx +++ b/web/react/components/settings_sidebar.jsx @@ -5,6 +5,9 @@ export default class SettingsSidebar extends React.Component { componentDidUpdate() { $('.settings-modal').find('.modal-body').scrollTop(0); $('.settings-modal').find('.modal-body').perfectScrollbar('update'); + if (navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) { + $('.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 c7c4fa2ea..587ef5ec2 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 c7abccae3..25fd18b49 100644 --- a/web/react/components/tutorial/tutorial_intro_screens.jsx +++ b/web/react/components/tutorial/tutorial_intro_screens.jsx @@ -35,6 +35,11 @@ export default class TutorialIntroScreens extends React.Component { preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), newValue); AsyncClient.savePreferences([preference]); } + componentDidMount() { + const height = $(window).height() - 100; + $('.tutorials__scroll').height(height); + $('.tutorials__scroll').perfectScrollbar(); + } createScreen() { switch (this.state.currentScreen) { case 0: @@ -133,17 +138,19 @@ export default class TutorialIntroScreens extends React.Component { const screen = this.createScreen(); return ( -
-
-
- {screen} - +
+
+
+
+ {screen} + +
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 296307bc6..cca3c00bf 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -500,16 +500,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 +519,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 +568,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 c286927a2..2830026c9 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 a49a98952..8f25f58cd 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 fbbd07485..96a6cf2ab 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 c954b03d8..a4267294c 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 42183d599..70216aa97 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; -- cgit v1.2.3-1-g7c22 From 6f1857f95bf5746d7774a9f2dd1c3ccbfab8f07b Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 3 Nov 2015 20:27:38 +0500 Subject: Updating height code for tutorial screens. --- web/react/components/tutorial/tutorial_intro_screens.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'web') diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx index 25fd18b49..8fc38b1e3 100644 --- a/web/react/components/tutorial/tutorial_intro_screens.jsx +++ b/web/react/components/tutorial/tutorial_intro_screens.jsx @@ -36,8 +36,6 @@ export default class TutorialIntroScreens extends React.Component { AsyncClient.savePreferences([preference]); } componentDidMount() { - const height = $(window).height() - 100; - $('.tutorials__scroll').height(height); $('.tutorials__scroll').perfectScrollbar(); } createScreen() { @@ -135,10 +133,14 @@ export default class TutorialIntroScreens extends React.Component { ); } render() { + const height = Utils.windowHeight() - 100; const screen = this.createScreen(); return ( -
+
-- cgit v1.2.3-1-g7c22 From 38fd4acebd17775c9adc81f719ffc044e3bf6cde Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 3 Nov 2015 21:56:18 +0500 Subject: Adding browser functions in utilis and calling them in settings_sidebar --- web/react/components/settings_sidebar.jsx | 3 ++- web/react/utils/utils.jsx | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) (limited to 'web') diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx index bc0f48a4e..68d9cea48 100644 --- a/web/react/components/settings_sidebar.jsx +++ b/web/react/components/settings_sidebar.jsx @@ -1,11 +1,12 @@ // 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 (navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) { + if (utils.isSafari()) { $('.settings-modal .settings-links .nav').addClass('absolute'); } } diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index cca3c00bf..c82bd1065 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++) { -- cgit v1.2.3-1-g7c22