feat(ZNTA-2171) css styling for Reject Translation History ActivityFe…

…edItem story
zanata · Aug 24, 2017 · 841d5cf · 841d5cf
1 parent 5ab9433
commit 841d5cf
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 7 deletions.
diff --git a/...ta-frontend/src/frontend/app/editor/components/ActivityFeedItem/ActivityFeedItem.story.js b/...ta-frontend/src/frontend/app/editor/components/ActivityFeedItem/ActivityFeedItem.story.js
@@ -71,14 +71,40 @@ storiesOf('ActivityFeedItem', module)
       user={user} />
   ))
 
-  .add('rejected', () => (
+  .add('rejected - minor priority', () => (
     <ActivityFeedItem
-      criteria="Spellign and Grammah"
+      criteria="Spelling and Grammar"
       type="revision"
       priority="Minor"
-      textStatus="u-textWarning"
+      textStatus="u-textHighlight"
       status="rejected"
+      commentText="You spelt this wrong."
       content={'নাম'}
       lastModifiedTime={lastModifiedTime}
       user={user} />
   ))
+    .add('rejected - major priority', () => (
+        <ActivityFeedItem
+            criteria="Spelling and Grammar"
+            type="revision"
+            priority="Major"
+            textStatus="u-textWarning"
+            status="rejected"
+            commentText="You spelt this wrong."
+            content={'নাম'}
+            lastModifiedTime={lastModifiedTime}
+            user={user} />
+    ))
+    .add('rejected - critical priority', () => (
+        <ActivityFeedItem
+            criteria="Spelling and Grammar"
+            type="revision"
+            priority="Critical"
+            textStatus="u-textDanger"
+            status="rejected"
+            commentText="You spelt this wrong."
+            content={'নাম'}
+            lastModifiedTime={lastModifiedTime}
+            user={user} />
+    ))
+
diff --git a/server/zanata-frontend/src/frontend/app/editor/components/ActivityFeedItem/index.js b/server/zanata-frontend/src/frontend/app/editor/components/ActivityFeedItem/index.js
@@ -52,21 +52,37 @@ class ActivityFeedItem extends Component {
       imageUrl: PropTypes.string.isRequired,
     }).isRequired,
     criteria: PropTypes.string.isRequired,
+    commentText: PropTypes.string.isRequired,
     priority: PropTypes.oneOf(['Major', 'Critical', 'Minor']).isRequired,
 
   }
 
   getMessage = () => {
-    const { user, type, status, criteria } = this.props
+    const { user, type, status } = this.props
     // Uses href because editor app is separate from frontend app
     const name = (
       <Link useHref link={profileUrl(user.username)}>{user.name}</Link>
     )
     const priority = (
-        <span className={this.props.textStatus}>{this.props.priority}</span>
+        <span className="criteria-text">
+          <Icon name="warning" className="s0" />
+          <span className={this.props.textStatus}>
+            {this.props.priority}
+          </span>
+        </span>
     )
     const comment = (
-        <span className="comment"><Well>Comment</Well></span>
+        <span className="comment">
+          <Well bsSize="small">
+          <Icon name="comment" className="s0" />
+            {this.props.commentText}
+          </Well>
+        </span>
+    )
+    const criteria = (
+        <span className="criteria-text">
+          {this.props.criteria}
+        </span>
     )
     if (type === 'comment') {
       return (
@@ -120,7 +136,7 @@ class ActivityFeedItem extends Component {
               'Title for an item in the activity feed showing a reviewer ' +
               'rejected the translation. The inserted section is from ' +
               'ActivityFeedItem.rejected.rejectedTranslation'}
-            defaultMessage="{name} has {rejectedTranslation} because of {criteria} (Priority: {priority}). {comment}"
+            defaultMessage="{name} has {rejectedTranslation} for the reason: {criteria} - {priority} priority. {comment}"
             values={{
               name,
               rejectedTranslation,

diff --git a/server/zanata-frontend/src/frontend/app/editor/containers/Sidebar/index.css b/server/zanata-frontend/src/frontend/app/editor/containers/Sidebar/index.css
@@ -511,6 +511,14 @@ img.activity-avatar {
   border-left: solid 5px var(--Editor-color-approved);
 }
 
+.revision-box .well-sm {
+  background-color: rgba(255, 255, 255, 0.35) !important;
+}
+
+.criteria-text {
+  font-weight: 600;
+}
+
 .trans-comment-box {
   padding: 0.75rem;
   margin-top: 1rem;