diff --git a/web/react/components/admin_console/team_analytics.jsx b/web/react/components/admin_console/team_analytics.jsx index a945a551ca..0c9d1f61b6 100644 --- a/web/react/components/admin_console/team_analytics.jsx +++ b/web/react/components/admin_console/team_analytics.jsx @@ -210,69 +210,89 @@ export default class TeamAnalytics extends React.Component { } var totalCount = ( -
-
{'Total Users'}
-
{this.state.users == null ? 'Loading...' : Object.keys(this.state.users).length}
+
+
+
{'Total Users'}
+
{this.state.users == null ? 'Loading...' : Object.keys(this.state.users).length}
+
); var openChannelCount = ( -
-
{'Public Groups'}
-
{this.state.channel_open_count == null ? 'Loading...' : this.state.channel_open_count}
+
+
+
{'Public Groups'}
+
{this.state.channel_open_count == null ? 'Loading...' : this.state.channel_open_count}
+
); var openPrivateCount = ( -
-
{'Private Groups'}
-
{this.state.channel_private_count == null ? 'Loading...' : this.state.channel_private_count}
+
+
+
{'Private Groups'}
+
{this.state.channel_private_count == null ? 'Loading...' : this.state.channel_private_count}
+
); var postCount = ( -
-
{'Total Posts'}
-
{this.state.post_count == null ? 'Loading...' : this.state.post_count}
+
+
+
{'Total Posts'}
+
{this.state.post_count == null ? 'Loading...' : this.state.post_count}
+
); var postCountsByDay = ( -
-
{'Total Posts'}
-
{'Loading...'}
+
+
+
{'Total Posts'}
+
{'Loading...'}
+
); if (this.state.post_counts_day != null) { postCountsByDay = ( -
-
{'Total Posts'}
- +
+
+
{'Total Posts'}
+
+ +
+
); } var usersWithPostsByDay = ( -
-
{'Total Posts'}
-
{'Loading...'}
+
+
+
{'Total Posts'}
+
{'Loading...'}
+
); if (this.state.user_counts_with_posts_day != null) { usersWithPostsByDay = ( -
-
{'Active Users With Posts'}
- +
+
+
{'Active Users With Posts'}
+
+ +
+
); } @@ -286,22 +306,26 @@ export default class TeamAnalytics extends React.Component { if (this.state.recent_active_users != null) { recentActiveUser = ( -
-
{'Recent Active Users'}
- - - { - this.state.recent_active_users.map((user) => { - return ( - - - - - ); - }) - } - -
{user.email}{Utils.displayDateTime(user.last_activity_at)}
+
+
+
{'Recent Active Users'}
+
+ + + { + this.state.recent_active_users.map((user) => { + return ( + + + + + ); + }) + } + +
{user.email}{Utils.displayDateTime(user.last_activity_at)}
+
+
); } @@ -315,38 +339,50 @@ export default class TeamAnalytics extends React.Component { if (this.state.newly_created_users != null) { newUsers = ( -
-
{'Newly Created Users'}
- - - { - this.state.newly_created_users.map((user) => { - return ( - - - - - ); - }) - } - -
{user.email}{Utils.displayDateTime(user.create_at)}
+
+
+
{'Newly Created Users'}
+
+ + + { + this.state.newly_created_users.map((user) => { + return ( + + + + + ); + }) + } + +
{user.email}{Utils.displayDateTime(user.create_at)}
+
+
); } return ( -
-

{'Statistics for ' + this.props.team.name}

+
+

{'Statistics for ' + this.props.team.name}

{serverError} - {totalCount} - {postCount} - {openChannelCount} - {openPrivateCount} - {postCountsByDay} - {usersWithPostsByDay} - {recentActiveUser} - {newUsers} +
+ {totalCount} + {postCount} + {openChannelCount} + {openPrivateCount} +
+
+ {postCountsByDay} +
+
+ {usersWithPostsByDay} +
+
+ {recentActiveUser} + {newUsers} +
); } diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx index 9cffa24003..f3c0fa0b46 100644 --- a/web/react/components/popover_list_members.jsx +++ b/web/react/components/popover_list_members.jsx @@ -42,6 +42,10 @@ export default class PopoverListMembers extends React.Component { }; } + componentDidUpdate() { + $(ReactDOM.findDOMNode(this.refs.memebersPopover)).find('.popover-content').perfectScrollbar(); + } + handleShowDirectChannel(teammate, e) { e.preventDefault(); @@ -106,27 +110,27 @@ export default class PopoverListMembers extends React.Component { let button = ''; if (currentUserId !== m.id && ch.type !== 'D') { button = ( - + ); } if (teamMembers[m.username] && teamMembers[m.username].delete_at <= 0) { popoverHtml.push(
@@ -135,14 +139,9 @@ export default class PopoverListMembers extends React.Component { > {m.username}
-
- {details} -
{button}
@@ -182,12 +181,11 @@ export default class PopoverListMembers extends React.Component { placement='bottom' > -
- {popoverHtml} -
+ {popoverHtml}
diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss index 9c65e2d1e7..206d5bfca6 100644 --- a/web/sass-files/sass/partials/_admin-console.scss +++ b/web/sass-files/sass/partials/_admin-console.scss @@ -2,65 +2,18 @@ > div { height: 100%; } + + h3 { + font-weight: 600; + border-bottom: 1px solid #ddd; + padding-bottom: 0.5em; + margin: 1em 0; + } + .table { background: #fff; } - .total-count { - width: 175px; - height: 100px; - border: 1px solid #ddd; - padding: 22px 10px 10px 10px; - margin: 10px 10px 10px 10px; - background: #fff; - float: left; - - > div { - font-size: 18px; - font-weight: 300; - } - } - - .total-count-by-day { - width: 760px; - height: 275px; - border: 1px solid #ddd; - padding: 5px 10px 10px 10px; - margin: 10px 10px 10px 10px; - background: #fff; - clear: both; - - > div { - font-size: 18px; - font-weight: 300; - } - } - - .recent-active-users { - width: 365px; - border: 1px solid #ddd; - padding: 5px 10px 10px 10px; - margin: 10px 10px 10px 10px; - background: #fff; - float: left; - - > div { - font-size: 18px; - font-weight: 300; - } - - > table { - margin: 10px 10px 10px 10px; - } - - .recent-active-users-td { - font-size: 14px; - font-weight: 300; - border: 1px solid #ddd; - padding: 3px 3px 3px 5px; - } - } - .sidebar--left { &.sidebar--collapsable { background: #333; diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss index 8bf163f90b..7e776bf763 100644 --- a/web/sass-files/sass/partials/_headers.scss +++ b/web/sass-files/sass/partials/_headers.scss @@ -215,7 +215,7 @@ color: #999; cursor: pointer; .fa { - margin-left: 3px; + margin-left: 4px; font-size: 16px; } } diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss index 4f5f1d2158..430813e63d 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/partials/_popover.scss @@ -41,6 +41,9 @@ padding: 6px 8px; margin: 3px 0; @include border-radius(2px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; &:hover { background: rgba(black, 0.1); @@ -94,33 +97,20 @@ #member-list-popover { max-width: initial; - .popover-content > div { + .popover-content { + position: relative; + padding: 0; + width: 260px; max-height: 350px; - overflow-y: auto; - overflow-x: hidden; - > div { - border-bottom: 1px solid rgba(51,51,51,0.1); - padding: 8px 8px 8px 15px; + .text-nowrap { + padding: 6px 10px; width: 100%; - box-sizing: content-box; - @include clearfix; - .profile-img { - border-radius: 50px; - margin-right: 8px; - } - .more-name { - font-weight: 600; - font-size: 0.95em; - overflow: hidden; - text-overflow: ellipsis; - } - .more-description { - @include opacity(0.7); - } - .profile-action { - margin-left: 8px; - margin-right: 18px; - } + overflow: hidden; + line-height: 26px; + font-size: 13px; + } + .more-name { + margin-left: 6px; } } } diff --git a/web/sass-files/sass/partials/_statistics.scss b/web/sass-files/sass/partials/_statistics.scss new file mode 100644 index 0000000000..a2401a70f2 --- /dev/null +++ b/web/sass-files/sass/partials/_statistics.scss @@ -0,0 +1,84 @@ +.team_statistics { + .total-count { + margin: 1em 0; + text-align: center; + background: #fff; + border: 1px solid #ddd; + width: 100%; + @include border-radius(3px); + + .title { + font-weight: 400; + padding: 7px 10px; + border-bottom: 1px solid #ddd; + text-align: left; + + .fa { + float: right; + margin: 3px 0 0; + color: #555; + font-size: 16px; + } + + } + + .content { + font-size: 30px; + font-weight: 600; + color: #555; + padding: 0.3em 0 0.35em; + overflow: auto; + } + + } + + .total-count--day { + width: 760px; + height: 275px; + border: 1px solid #ddd; + padding: 5px 10px 10px 10px; + margin: 10px 10px 10px 10px; + background: #fff; + clear: both; + + > div { + font-size: 18px; + font-weight: 300; + } + } + + .recent-active-users { + + table { + width: 100%; + table-layout: fixed; + } + + .content { + max-height: 400px; + overflow: auto; + padding: 0; + } + + tr { + &:first-child { + td { + border-top: none; + } + } + td { + font-weight: 400; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 13px; + border-left: 1px solid #ddd; + border-top: 1px solid #ddd; + padding: 5px 5px 6px; + @include clearfix; + &:first-child { + border-left: none; + } + } + } + } +} \ No newline at end of file diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss index c614052da2..ad2cae194e 100644 --- a/web/sass-files/sass/styles.scss +++ b/web/sass-files/sass/styles.scss @@ -38,6 +38,7 @@ @import "partials/loading"; @import "partials/get-link"; @import "partials/markdown"; +@import "partials/statistics"; // Responsive Css @import "partials/responsive";