diff --git a/client/coral-admin/src/components/KarmaTooltip.css b/client/coral-admin/src/components/KarmaTooltip.css
new file mode 100644
index 000000000..1f7e1b732
--- /dev/null
+++ b/client/coral-admin/src/components/KarmaTooltip.css
@@ -0,0 +1,76 @@
+.karmaTooltip {
+ position: relative;
+ display: inline-block;
+ margin: 0 4px;
+}
+
+.icon {
+ font-size: 16px;
+ color: #0D5B8F;
+ -ms-user-select:none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -webkit-touch-callout:none;
+ user-select: none;
+ -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+
+.icon:hover {
+ cursor: pointer;
+}
+
+.menu {
+ background-color: white;
+ border: solid 1px #999;
+ border-radius: 3px;
+ padding: 10px;
+ position: absolute;
+ -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+ z-index: 10;
+ top: 32px;
+ left: -100px;
+ width: 150px;
+ text-align: left;
+ color: #616161;
+}
+
+.menu::before{
+ content: '';
+ border: 10px solid transparent;
+ border-top-color: #999;
+ position: absolute;
+ left: 96px;
+ top: -20px;
+ transform: rotate(180deg);
+}
+
+.menu::after{
+ content: '';
+ border: 10px solid transparent;
+ border-top-color: white;
+ position: absolute;
+ left: 96px;
+ top: -19px;
+ transform: rotate(180deg);
+}
+
+.descriptionList {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+
+.strongItem {
+ margin-right: 3px;
+}
+
+.descriptionItem {
+ font-size: 0.9em;
+}
+
+.link {
+ color: #2B7EB5;
+ text-decoration: underline;
+ display: block;
+}
\ No newline at end of file
diff --git a/client/coral-admin/src/components/KarmaTooltip.js b/client/coral-admin/src/components/KarmaTooltip.js
new file mode 100644
index 000000000..370856f1f
--- /dev/null
+++ b/client/coral-admin/src/components/KarmaTooltip.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import cn from 'classnames';
+import { Icon } from 'coral-ui';
+import styles from './KarmaTooltip.css';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+import t from 'coral-framework/services/i18n';
+
+const initialState = { menuVisible: false };
+
+class KarmaTooltip extends React.Component {
+ state = initialState;
+
+ toogleMenu = () => {
+ this.setState({ menuVisible: !this.state.menuVisible });
+ };
+
+ hideMenu = () => {
+ this.setState({ menuVisible: false });
+ };
+
+ render() {
+ const { menuVisible } = this.state;
+
+ return (
+
+
+
+
+
+
+ {menuVisible && (
+
+ )}
+
+
+ );
+ }
+}
+
+export default KarmaTooltip;
diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index 58faee5c4..0f034d419 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/client/coral-admin/src/components/UserDetail.css
@@ -39,17 +39,16 @@
margin-right: 0px;
}
-.statItem,
-.statReportResult {
+.statItem, .statReportResult, .statKarmaResult {
padding: 3px 5px;
background-color: #D8D8D8;
border-radius: 3px;
font-weight: 500;
- display: block;
font-size: 0.9em;
line-height: normal;
letter-spacing: 0.4px;
- min-width: 60px;
+ min-width: 35px;
+ display: inline-block;
}
.statResult {
@@ -58,21 +57,21 @@
display: inline-block;
}
-.statReportResult {
+.statReportResult, .statKarmaResult {
color: white;
margin: 5px 0;
font-weight: 400;
}
-.statReportResult.reliable {
- background-color: #749C48;
+.statReportResult.reliable, .statKarmaResult.good {
+ background-color: #03AB61;
}
-.statReportResult.neutral {
+.statReportResult.neutral, .statKarmaResult.neutral {
background-color: #616161;
}
-.statReportResult.unreliable {
+.statReportResult.unreliable, .statKarmaResult.bad {
background-color: #F44336;
}
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 5dabc5b6f..723a71eef 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -10,6 +10,7 @@ import {
getReliability,
isSuspended,
isBanned,
+ getKarma,
} from 'coral-framework/utils/user';
import ButtonCopyToClipboard from './ButtonCopyToClipboard';
import ClickOutside from 'coral-framework/components/ClickOutside';
@@ -25,6 +26,7 @@ import {
import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
import UserInfoTooltip from './UserInfoTooltip';
+import KarmaTooltip from './KarmaTooltip';
import t from 'coral-framework/services/i18n';
class UserDetail extends React.Component {
@@ -203,23 +205,29 @@ class UserDetail extends React.Component {
-
-
- {t('user_detail.total_comments')}
-
+
+
+ {t('user_detail.total_comments')}
+
+
{totalComments}
-
-
- {t('user_detail.reject_rate')}
-
+
+
+ {t('user_detail.reject_rate')}
+
+
{rejectedPercent.toFixed(1)}%
-
-
- {t('user_detail.reports')}
-
+
+
+ {t('user_detail.reports')}
+
+
+ -
+
+
+ {t('user_detail.karma')}
+
+
+
+
+ {100}
+
+
diff --git a/client/coral-framework/utils/user.js b/client/coral-framework/utils/user.js
index 610557542..693652994 100644
--- a/client/coral-framework/utils/user.js
+++ b/client/coral-framework/utils/user.js
@@ -49,3 +49,18 @@ export const canUsernameBeUpdated = status => {
moment(created_at).isAfter(oldestEditTime)
);
};
+
+/**
+ * getKarma
+ * retrieves karma value as string
+ */
+
+export const getKarma = score => {
+ if (score === 0) {
+ return 'neutral';
+ } else if (score) {
+ return 'good';
+ } else {
+ return 'bad';
+ }
+};
diff --git a/locales/en.yml b/locales/en.yml
index f60219472..ab7be8e9d 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -470,6 +470,10 @@ en:
all: "All"
rejected: "Rejected"
user_history: "User History"
+ karma: "Karma"
+ learn_more: "Learn More"
+ user_karma_score: "User Karma Score"
+ karma_docs_link: "https://docs.coralproject.net/talk/trust/#user-karma-score"
user_history:
user_banned: "User banned"
ban_removed: "Ban removed"