diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-03-02 19:10:20 +0500 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2017-03-02 09:10:20 -0500 |
commit | 1bd3917e3e6ace6d7f0bb45723a158a011e5c71a (patch) | |
tree | 50dc3320658b00582132d926933b8071bb40509a /webapp | |
parent | f4aebed220667f0022bc902420c62d9841835e80 (diff) | |
download | chat-1bd3917e3e6ace6d7f0bb45723a158a011e5c71a.tar.gz chat-1bd3917e3e6ace6d7f0bb45723a158a011e5c71a.tar.bz2 chat-1bd3917e3e6ace6d7f0bb45723a158a011e5c71a.zip |
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
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/analytics/system_analytics.jsx | 24 | ||||
-rw-r--r-- | webapp/components/rhs_comment.jsx | 2 | ||||
-rw-r--r-- | webapp/components/select_team/components/select_team_item.jsx | 7 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 7 | ||||
-rw-r--r-- | webapp/sass/routes/_signup.scss | 14 | ||||
-rw-r--r-- | webapp/utils/constants.jsx | 1 | ||||
-rw-r--r-- | 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 = ( - <div className='row'> + <div> <StatisticCount title={ <FormattedMessage @@ -388,7 +388,7 @@ class SystemAnalytics extends React.Component { let secondRow; if (isLicensed && skippedIntensiveQueries) { firstRow = ( - <div className='row'> + <div> {userCount} {teamCount} {channelCount} @@ -397,7 +397,7 @@ class SystemAnalytics extends React.Component { ); secondRow = ( - <div className='row'> + <div> {commandCount} {incomingCount} {outgoingCount} @@ -405,7 +405,7 @@ class SystemAnalytics extends React.Component { ); } else if (isLicensed && !skippedIntensiveQueries) { firstRow = ( - <div className='row'> + <div> {userCount} {teamCount} {channelCount} @@ -414,7 +414,7 @@ class SystemAnalytics extends React.Component { ); secondRow = ( - <div className='row'> + <div> {sessionCount} {commandCount} {incomingCount} @@ -423,7 +423,7 @@ class SystemAnalytics extends React.Component { ); } else if (!isLicensed) { firstRow = ( - <div className='row'> + <div> {userCount} {teamCount} {channelCount} @@ -433,7 +433,7 @@ class SystemAnalytics extends React.Component { } const thirdRow = ( - <div className='row'> + <div> {dailyActiveUsers} {monthlyActiveUsers} </div> @@ -448,10 +448,12 @@ class SystemAnalytics extends React.Component { /> </h3> {banner} - {firstRow} - {secondRow} - {thirdRow} - {advancedStats} + <div className='row'> + {firstRow} + {secondRow} + {thirdRow} + {advancedStats} + </div> {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 = ( <span className='fa fa-refresh fa-spin right signup-team__icon'/> @@ -53,7 +55,10 @@ export default class SelectTeamItem extends React.Component { overlay={descriptionTooltip} ref='descriptionOverlay' > - <span className='fa fa-info-circle signup-team__icon'/> + <span + className='icon icon--info' + dangerouslySetInnerHTML={{__html: infoIcon}} + /> </OverlayTrigger> ); } 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: "<svg width='100%' height='100%' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g transform='matrix(1.17647,0,0,1.17647,-1.55431e-15,-1.00573e-14)'> <path d='M8.5,0C3.797,0 0,3.797 0,8.5C0,13.203 3.797,17 8.5,17C13.203,17 17,13.203 17,8.5C17,3.797 13.203,0 8.5,0ZM10,8.5C10,7.672 9.328,7 8.5,7C7.672,7 7,7.672 7,8.5L7,12.45C7,13.278 7.672,13.95 8.5,13.95C9.328,13.95 10,13.278 10,12.45L10,8.5ZM8.5,3C9.328,3 10,3.672 10,4.5C10,5.328 9.328,6 8.5,6C7.672,6 7,5.328 7,4.5C7,3.672 7.672,3 8.5,3Z'/> </g> </svg>", FLAG_ICON_OUTLINE_SVG: "<svg width='12px' height='12px' viewBox='0 0 48 48' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g> <g transform='matrix(1,0,0,0.957537,-0.5,1.42123)'> <path d='M2.5,0.5C1.4,0.5 0.5,1.4 0.5,2.5L0.5,45.6C0.5,46.7 1.4,47.6 2.5,47.6C3.6,47.6 4.5,46.7 4.5,45.6L4.5,2.5C4.4,1.4 3.5,0.5 2.5,0.5Z'/> </g> <g transform='matrix(0.923469,0,0,0.870026,1.64285,2.0085)'> <path d='M46.4,3.5C43.3,2.1 40.1,1.4 36.5,1.4C32.1,1.4 27.8,2.4 23.6,3.4C19.4,4.4 15.5,5.3 11.6,5.3C10.5,5.3 9.4,5.2 8.4,5.1L8.4,37C9.4,37.1 10.5,37.2 11.6,37.2C16,37.2 20.3,36.2 24.5,35.2C28.7,34.2 32.6,33.3 36.5,33.3C39.5,33.3 42.3,33.9 44.8,35.1C45.4,35.4 46.1,35.3 46.7,35C47.3,34.6 47.6,34 47.6,33.3L47.6,5.3C47.5,4.6 47.1,3.9 46.4,3.5Z' style='stroke-width:3.23px; fill:none;'/> </g> </g> </svg>", FLAG_ICON_SVG: "<svg width='12px' height='12px' viewBox='0 0 48 48' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g> <g transform='matrix(1,0,0,0.957537,-0.5,1.42123)'> <path d='M2.5,0.5C1.4,0.5 0.5,1.4 0.5,2.5L0.5,45.6C0.5,46.7 1.4,47.6 2.5,47.6C3.6,47.6 4.5,46.7 4.5,45.6L4.5,2.5C4.4,1.4 3.5,0.5 2.5,0.5Z'/> </g> <g transform='matrix(0.923469,0,0,0.870026,1.64285,2.0085)'> <path d='M46.4,3.5C43.3,2.1 40.1,1.4 36.5,1.4C32.1,1.4 27.8,2.4 23.6,3.4C19.4,4.4 15.5,5.3 11.6,5.3C10.5,5.3 9.4,5.2 8.4,5.1L8.4,37C9.4,37.1 10.5,37.2 11.6,37.2C16,37.2 20.3,36.2 24.5,35.2C28.7,34.2 32.6,33.3 36.5,33.3C39.5,33.3 42.3,33.9 44.8,35.1C45.4,35.4 46.1,35.3 46.7,35C47.3,34.6 47.6,34 47.6,33.3L47.6,5.3C47.5,4.6 47.1,3.9 46.4,3.5Z' style='stroke-width:3.23px;'/> </g> </g> </svg>", ATTACHMENT_ICON_SVG: "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M43.922,6.653c-2.643-2.644-6.201-4.107-9.959-4.069c-3.774,0.019-7.32,1.497-9.983,4.161l-12.3,12.3l-8.523,8.521 c-4.143,4.144-4.217,10.812-0.167,14.862c1.996,1.996,4.626,2.989,7.277,2.989c2.73,0,5.482-1.055,7.583-3.156l15.547-15.545 c0.002-0.002,0.002-0.004,0.004-0.005l5.358-5.358c1.394-1.393,2.176-3.24,2.201-5.2c0.026-1.975-0.716-3.818-2.09-5.192 c-2.834-2.835-7.496-2.787-10.394,0.108L9.689,29.857c-0.563,0.563-0.563,1.474,0,2.036c0.281,0.28,0.649,0.421,1.018,0.421 c0.369,0,0.737-0.141,1.018-0.421l18.787-18.788c1.773-1.774,4.609-1.824,6.322-0.11c0.82,0.82,1.263,1.928,1.247,3.119 c-0.017,1.205-0.497,2.342-1.357,3.201l-5.55,5.551c-0.002,0.002-0.002,0.004-0.004,0.005L15.814,40.225 c-3.02,3.02-7.86,3.094-10.789,0.167c-2.928-2.929-2.854-7.77,0.167-10.791l0.958-0.958c0.001-0.002,0.004-0.002,0.005-0.004 L26.016,8.78c2.123-2.124,4.951-3.303,7.961-3.317c2.998,0.02,5.814,1.13,7.91,3.226c4.35,4.351,4.309,11.472-0.093,15.873 L25.459,40.895c-0.563,0.562-0.563,1.473,0,2.035c0.281,0.281,0.65,0.422,1.018,0.422c0.369,0,0.737-0.141,1.018-0.422 L43.83,26.596C49.354,21.073,49.395,12.126,43.922,6.653z'></path></g></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) { |