From 1bd3917e3e6ace6d7f0bb45723a158a011e5c71a Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 2 Mar 2017 19:10:20 +0500 Subject: Ui improvements (#5588) * PLT-5354 - Making statistics flow on page * PLT-5262 - Updating icon on join team page * PLT-5218 - Making menu colors consistent on mobile * PLT-5377 - Adding bg to current posts in the RHS * PLT-5645 - Adjusting spacing after/before ul/ol --- webapp/components/analytics/system_analytics.jsx | 24 ++++++++++++---------- webapp/components/rhs_comment.jsx | 2 +- .../select_team/components/select_team_item.jsx | 7 ++++++- webapp/sass/layout/_post.scss | 7 ++++++- webapp/sass/routes/_signup.scss | 14 ++++++++++++- webapp/utils/constants.jsx | 1 + webapp/utils/utils.jsx | 5 +++-- 7 files changed, 43 insertions(+), 17 deletions(-) diff --git a/webapp/components/analytics/system_analytics.jsx b/webapp/components/analytics/system_analytics.jsx index 89cc98f0b..a3517899a 100644 --- a/webapp/components/analytics/system_analytics.jsx +++ b/webapp/components/analytics/system_analytics.jsx @@ -217,7 +217,7 @@ class SystemAnalytics extends React.Component { ); advancedStats = ( -
+
+
{userCount} {teamCount} {channelCount} @@ -397,7 +397,7 @@ class SystemAnalytics extends React.Component { ); secondRow = ( -
+
{commandCount} {incomingCount} {outgoingCount} @@ -405,7 +405,7 @@ class SystemAnalytics extends React.Component { ); } else if (isLicensed && !skippedIntensiveQueries) { firstRow = ( -
+
{userCount} {teamCount} {channelCount} @@ -414,7 +414,7 @@ class SystemAnalytics extends React.Component { ); secondRow = ( -
+
{sessionCount} {commandCount} {incomingCount} @@ -423,7 +423,7 @@ class SystemAnalytics extends React.Component { ); } else if (!isLicensed) { firstRow = ( -
+
{userCount} {teamCount} {channelCount} @@ -433,7 +433,7 @@ class SystemAnalytics extends React.Component { } const thirdRow = ( -
+
{dailyActiveUsers} {monthlyActiveUsers}
@@ -448,10 +448,12 @@ class SystemAnalytics extends React.Component { /> {banner} - {firstRow} - {secondRow} - {thirdRow} - {advancedStats} +
+ {firstRow} + {secondRow} + {thirdRow} + {advancedStats} +
{advancedGraphs} {postTotalGraph} {activeUserGraph} diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index 67fd394b9..cb527d850 100644 --- a/webapp/components/rhs_comment.jsx +++ b/webapp/components/rhs_comment.jsx @@ -286,7 +286,7 @@ export default class RhsComment extends React.Component { const isSystemMessage = PostUtils.isSystemMessage(post); var currentUserCss = ''; - if (this.props.currentUser === post.user_id) { + if (this.props.currentUser.id === post.user_id) { currentUserCss = 'current--user'; } diff --git a/webapp/components/select_team/components/select_team_item.jsx b/webapp/components/select_team/components/select_team_item.jsx index c6943722d..bff9e28d8 100644 --- a/webapp/components/select_team/components/select_team_item.jsx +++ b/webapp/components/select_team/components/select_team_item.jsx @@ -5,6 +5,7 @@ import React from 'react'; import {Link} from 'react-router/es6'; import {Tooltip, OverlayTrigger} from 'react-bootstrap'; +import {Constants} from 'utils/constants.jsx'; export default class SelectTeamItem extends React.Component { static propTypes = { @@ -26,6 +27,7 @@ export default class SelectTeamItem extends React.Component { render() { let icon; + const infoIcon = Constants.TEAM_INFO_SVG; if (this.props.loading) { icon = ( @@ -53,7 +55,10 @@ export default class SelectTeamItem extends React.Component { overlay={descriptionTooltip} ref='descriptionOverlay' > - + ); } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 5157c3080..bca10cae2 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -1106,7 +1106,12 @@ ul + p, ol + p { - margin-top: 1.2em; + margin-top: 1em; + } + + p + ul, + p + ol { + margin-top: 1em; } .pending-post-actions { diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss index cbf6f1571..c73c32656 100644 --- a/webapp/sass/routes/_signup.scss +++ b/webapp/sass/routes/_signup.scss @@ -455,12 +455,24 @@ border: none; } + .icon { + cursor: pointer; + float: left; + margin: 18px 7px 0 15px; + opacity: .45; + + svg { + height: 20px; + width: 20px; + } + } + a { color: inherit; display: block; font-size: 1.1em; height: 3.5em; - line-height: 3.5em; + line-height: 3.6em; padding: 0 15px; } } diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index fb256c60e..0f3e217b9 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -398,6 +398,7 @@ export const Constants = { OPEN_TEAM: 'O', MAX_POST_LEN: 4000, EMOJI_SIZE: 16, + TEAM_INFO_SVG: " ", FLAG_ICON_OUTLINE_SVG: " ", FLAG_ICON_SVG: " ", ATTACHMENT_ICON_SVG: "", diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 1d91ff788..3d7941158 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -472,8 +472,8 @@ export function applyTheme(theme) { if (theme.sidebarText) { changeCss('.app__body .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y', 'background:' + theme.sidebarText); changeCss('.app__body .ps-container:hover .ps-scrollbar-y-rail:hover', 'background:' + changeOpacity(theme.sidebarText, 0.15)); - changeCss('.sidebar--left .nav-pills__container li>a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6)); - changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText); + changeCss('.sidebar--left .nav-pills__container li>a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6)); + changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.8)); changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6)); changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText); changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText); @@ -500,6 +500,7 @@ export function applyTheme(theme) { if (theme.sidebarTextActiveColor) { changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .app__body .modal .settings-modal .nav-pills>li.active a, .app__body .modal .settings-modal .nav-pills>li.active a:hover, .app__body .modal .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor); changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1)); + changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .nav-pills > li.active a', 'color:' + changeOpacity(theme.sidebarText, 0.8)); } if (theme.sidebarHeaderBg) { -- cgit v1.2.3-1-g7c22