From 0ab19cb89890a24e51f5ca55291546234ff81e76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=81=A5=E8=BE=89?=
 <40563566+WangJianhui666@users.noreply.github.com>
Date: Thu, 14 Mar 2019 12:01:59 +0800
Subject: [PATCH] activity op color (#3109)

---
 frontend/src/css/files-activities.css          | 18 ++++++++++++++++++
 .../src/pages/dashboard/files-activities.js    | 10 +++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/src/css/files-activities.css b/frontend/src/css/files-activities.css
index b83fddccdb..03e57ba6de 100644
--- a/frontend/src/css/files-activities.css
+++ b/frontend/src/css/files-activities.css
@@ -3,4 +3,22 @@ table tr .activity-date {
 }
 table td .activity-detail {
   display: inline;
+}
+td .op-color-orange {
+  background-color: #FFA94D;
+  padding: 5px 8px;
+  border-radius: 5px;
+  color: #FFF;
+}
+td .op-color-red {
+  background-color: #DC143C;
+  padding: 5px 8px;
+  border-radius: 5px;
+  color: #FFF;
+}
+td .op-color-green {
+  background-color: #8DC72E;
+  padding: 5px 8px;
+  border-radius: 5px;
+  color: #FFF;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/dashboard/files-activities.js b/frontend/src/pages/dashboard/files-activities.js
index 412970a816..8d20981f1e 100644
--- a/frontend/src/pages/dashboard/files-activities.js
+++ b/frontend/src/pages/dashboard/files-activities.js
@@ -89,6 +89,7 @@ class ActivityItem extends Component {
   render() {
     let {item, index, items} = this.props;
     let op, details;
+    let opColor = '';
     let userProfileURL = `${siteRoot}profile/${encodeURIComponent(item.author_email)}/`;
 
     let libURL = siteRoot + 'library/' + item.repo_id + '/' + encodeURIComponent(item.repo_name) + '/';
@@ -126,6 +127,7 @@ class ActivityItem extends Component {
       let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
       let fileLink = <a href={fileURL} target="_blank">{item.name}</a>;
       op = gettext('Publish draft');
+      opColor = 'orange';
       details = <td>{fileLink}<br />{smallLibLink}</td>;
     } else if (item.obj_type == 'files') {
       let fileURL = `${siteRoot}lib/${item.repo_id}/file${Utils.encodePath(item.path)}`;
@@ -148,19 +150,23 @@ class ActivityItem extends Component {
         case 'create':
           if (item.name.endsWith('(draft).md')) {
             op = gettext('Created draft');
+            opColor = 'green';
             details = <td>{fileLink}<br />{smallLibLink}</td>;
             break;
           }
           op = gettext('Created file');
+          opColor = 'green';
           details = <td>{fileLink}<br />{smallLibLink}</td>;
           break;
         case 'delete':
           if (item.name.endsWith('(draft).md')) {
             op = gettext('Deleted draft');
+            opColor = 'red';
             details = <td>{item.name}<br />{smallLibLink}</td>;
             break;
           }
           op = gettext('Deleted file');
+          opColor = 'red';
           details = <td>{item.name}<br />{smallLibLink}</td>;
           break;
         case 'recover':
@@ -179,10 +185,12 @@ class ActivityItem extends Component {
         case 'edit': // update
           if (item.name.endsWith('(draft).md')) {
             op = gettext('Updated draft');
+            opColor = 'orange';
             details = <td>{fileLink}<br />{smallLibLink}</td>;
             break;
           }
           op = gettext('Updated file');
+          opColor = 'orange';
           details = <td>{fileLink}<br />{smallLibLink}</td>;
           break;
       }
@@ -234,7 +242,7 @@ class ActivityItem extends Component {
           <td>
             <a href={userProfileURL}>{item.author_name}</a>
           </td>
-          <td><span className="activity-op">{op}</span></td>
+          <td><span className={`activity-op op-color-${opColor}`}>{op}</span></td>
           {details}
           <td className="text-secondary">
             <time datetime={item.time} is="relative-time" title={moment(item.time).format('llll')}>{moment(item.time).fromNow()}</time>