my-comments-ux

client/coral-framework/actions/asset.js

@@ -2,7 +2,7 @@ import * as actions from '../constants/asset';
 import coralApi from '../helpers/response';
 import {addNotification} from '../actions/notification';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
+import I18n from '../../coral-framework/modules/i18n/i18n';
 import translations from './../translations';
 const lang = new I18n(translations);
 

client/coral-framework/actions/auth.js

@@ -1,4 +1,4 @@
-import I18n from 'coral-framework/modules/i18n/i18n';
+import I18n from '../../coral-framework/modules/i18n/i18n';
 import translations from './../translations';
 const lang = new I18n(translations);
 import * as actions from '../constants/auth';

client/coral-framework/actions/notification.js

@@ -1,4 +1,4 @@
-import {pym} from 'coral-framework';
+import {pym} from '../../coral-framework';
 
 export const addNotification = (notifType, text) => {
   pym.sendMessage('coral-alert', `${notifType}|${text}`);

client/coral-framework/translations.json

@@ -1,5 +1,6 @@
 {
   "en": {
+    "MY_COMMENTS": "My Comments",
     "profile": "Profile",
     "successUpdateSettings": "The changes you have made have been applied to the comment stream on this article",
     "successNameUpdate": "Your username has been updated",
@@ -40,6 +41,7 @@
     }
   },
   "es": {
+    "MY_COMMENTS": "Mis Comentarios",
     "profile": "Perfil",
     "successUpdateSettings": "La configuración de este articulo fue actualizada",
     "successBioUpdate": "Tu bio fue actualizada",

client/coral-plugin-history/Comment.css

@@ -1,16 +1,74 @@
+@custom-media --big-viewport (min-width: 780px);
+
 .myComment {
   border-bottom: 1px solid lightgrey;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
 }
 
 .myComment:last-child {
-  border-bottom: none;
+  border-bottom: solid 1px #EBEBEB;
 }
 
 .assetURL {
   font-size: 16px;
   color: black;
+  text-decoration: none;
+  font-weight: bold;
 }
 
 .commentBody {
 
 }
+
+.sidebar {
+  ul {
+    min-width: 136px;
+  }
+
+  li {
+    margin-bottom: 10px;
+
+    &:nth-child(1) {
+      color: #5394D7;
+    }
+
+    &:nth-child(2) {
+      color: #909090;
+    }
+
+
+    i {
+      margin-right: 5px;
+      font-size: 15px;
+      vertical-align: bottom;
+    }
+
+    a:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+@custom-media --mobile-viewport (max-width: 480px);
+
+@media (--mobile-viewport) {
+  .myComment {
+    flex-direction: column;
+  }
+
+  .sidebar ul {
+    display: flex;
+    li {
+      margin-right: 20px;
+    }
+  }
+}
+
+.pubdate {
+  display: inline-block;
+  font-size: inherit;
+  margin: inherit;
+  color: inherit;
+}

client/coral-plugin-history/Comment.js

@@ -1,13 +1,42 @@
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
+import { Icon } from '../coral-ui';
 import styles from './Comment.css';
+import PubDate from '../coral-plugin-pubdate/PubDate';
+import Content from '../coral-plugin-commentcontent/CommentContent';
 
 const Comment = props => {
   return (
     <div className={styles.myComment}>
-      <p className="myCommentAsset">
-        <a className={`${styles.assetURL} myCommentAnchor`} href='#' onClick={props.link(`${props.asset.url}#${props.comment.id}`)}>{props.asset.title ? props.asset.title : props.asset.url}</a>
-      </p>
-      <p className={`${styles.commentBody} myCommentBody`}>{props.comment.body}</p>
+      <div>
+        <Content
+          className={`${styles.commentBody} myCommentBody`}
+          body={props.comment.body}
+        />
+        <p className="myCommentAsset">
+          <a
+            className={`${styles.assetURL} myCommentAnchor`}
+            href="#"
+            onClick={props.link(`${props.asset.url}`)}>
+            Story: {props.asset.title ? props.asset.title : props.asset.url}
+          </a>
+        </p>
+      </div>
+      <div className={styles.sidebar}>
+        <ul>
+          <li>
+            <a onClick={props.link(`${props.asset.url}#${props.comment.id}`)}>
+              <Icon name="open_in_new" />View Conversation
+            </a>
+          </li>
+          <li>
+            <Icon name="schedule" />
+            <PubDate
+              className={styles.pubdate}
+              created_at={props.comment.created_at}
+            />
+          </li>
+        </ul>
+      </div>
     </div>
   );
 };

client/coral-ui/components/TabBar.css

@@ -19,7 +19,7 @@
 }
 
 .base li:hover {
-  background: #f3f3f3;
+  background: #d5d5d5;
   cursor: pointer;
 }