Adding clearer goto context.

- Adding context props.
- Making link / context the first selectable on user and inbox page.
- Making icons a little bigger.
- #609

1 files changed, 17 insertions, 14 deletions

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index d5d872f5..c1dceed2 100644
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -66,6 +66,7 @@ interface CommentNodeProps {
   viewOnly?: boolean;
   locked?: boolean;
   markable?: boolean;
+  showContext?: boolean;
   moderators: Array<CommunityUser>;
   admins: Array<UserView>;
   // TODO is this necessary, can't I get it from the node itself?
@@ -249,10 +250,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   />
                 )}
                 <ul class="list-inline mb-0 text-muted font-weight-bold small">
+                  {this.props.showContext && this.linkBtn}
                   {this.props.markable && (
                     <li className="list-inline-item">
                       <button
-                        class="btn btn-link btn-sm btn-animate text-muted"
+                        class="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleMarkRead)}
                         data-tippy-content={
                           node.comment.read
@@ -277,7 +279,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     <>
                       <li className="list-inline-item">
                         <button
-                          className={`btn btn-link btn-sm btn-animate ${
+                          className={`btn btn-link btn-animate ${
                             this.state.my_vote == 1 ? 'text-info' : 'text-muted'
                           }`}
                           onClick={linkEvent(node, this.handleCommentUpvote)}
@@ -294,7 +296,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       {WebSocketService.Instance.site.enable_downvotes && (
                         <li className="list-inline-item">
                           <button
-                            className={`btn btn-link btn-sm btn-animate ${
+                            className={`btn btn-link btn-animate ${
                               this.state.my_vote == -1
                                 ? 'text-danger'
                                 : 'text-muted'
@@ -316,7 +318,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       )}
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-sm btn-animate text-muted"
+                          class="btn btn-link btn-animate text-muted"
                           onClick={linkEvent(this, this.handleSaveCommentClick)}
                           data-tippy-content={
                             node.comment.saved
@@ -338,7 +340,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       </li>
                       <li className="list-inline-item">
                         <button
-                          class="btn btn-link btn-sm btn-animate text-muted"
+                          class="btn btn-link btn-animate text-muted"
                           onClick={linkEvent(this, this.handleReplyClick)}
                           data-tippy-content={i18n.t('reply')}
                         >
@@ -347,11 +349,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           </svg>
                         </button>
                       </li>
-                      {this.props.markable && this.linkBtn}
                       {!this.state.showAdvanced ? (
                         <li className="list-inline-item">
                           <button
-                            className="btn btn-link btn-sm btn-animate text-muted"
+                            className="btn btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleShowAdvanced)}
                             data-tippy-content={i18n.t('more')}
                           >
@@ -365,7 +366,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           {!this.myComment && (
                             <li className="list-inline-item">
                               <Link
-                                class="btn btn-link btn-sm btn-animate text-muted"
+                                class="btn btn-link btn-animate text-muted"
                                 to={`/create_private_message?recipient_id=${node.comment.creator_id}`}
                                 title={i18n.t('message').toLowerCase()}
                               >
@@ -375,10 +376,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               </Link>
                             </li>
                           )}
-                          {!this.props.markable && this.linkBtn}
+                          {!this.props.showContext && this.linkBtn}
                           <li className="list-inline-item">
                             <button
-                              className="btn btn-link btn-sm btn-animate text-muted"
+                              className="btn btn-link btn-animate text-muted"
                               onClick={linkEvent(this, this.handleViewSource)}
                               data-tippy-content={i18n.t('view_source')}
                             >
@@ -395,7 +396,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               <li className="list-inline-item">•</li>
                               <li className="list-inline-item">
                                 <button
-                                  class="btn btn-link btn-sm btn-animate text-muted"
+                                  class="btn btn-link btn-animate text-muted"
                                   onClick={linkEvent(
                                     this,
                                     this.handleEditClick
@@ -409,7 +410,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                               </li>
                               <li className="list-inline-item">
                                 <button
-                                  class="btn btn-link btn-sm btn-animate text-muted"
+                                  class="btn btn-link btn-animate text-muted"
                                   onClick={linkEvent(
                                     this,
                                     this.handleDeleteClick
@@ -762,9 +763,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return (
       <li className="list-inline-item">
         <Link
-          className="btn btn-link btn-sm btn-animate text-muted"
+          className="btn btn-link btn-animate text-muted"
           to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
-          title={i18n.t('link')}
+          title={
+            this.props.showContext ? i18n.t('show_context') : i18n.t('link')
+          }
         >
           <svg class="icon icon-inline">
             <use xlinkHref="#icon-link"></use>