Improving action / comment bar. Fixes #37

- Added abbreviations for relative fromNow times in english.

src/shared/components/comment-node.tsx

@@ -208,31 +208,20 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 </>
               )}
               <button
-                class="btn text-muted"
+                class="btn btn-sm text-muted"
                 onClick={linkEvent(this, this.handleCommentCollapse)}
               >
-                {this.state.collapsed ? (
-                  <svg class="icon icon-inline">
-                    <use xlinkHref="#icon-plus-square"></use>
-                  </svg>
-                ) : (
-                  <svg class="icon icon-inline">
-                    <use xlinkHref="#icon-minus-square"></use>
-                  </svg>
-                )}
+                {this.state.collapsed ? '+' : '—'}
               </button>
               {/* This is an expanding spacer for mobile */}
               <div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
-              <button
-                className={`btn p-0 unselectable pointer ${this.scoreColor}`}
+              <a
+                className={`unselectable pointer ${this.scoreColor}`}
                 onClick={linkEvent(node, this.handleCommentUpvote)}
                 data-tippy-content={this.pointsTippy}
               >
-                <svg class="icon icon-inline mr-1">
-                  <use xlinkHref="#icon-zap"></use>
-                </svg>
-                <span class="mr-1">{this.state.score}</span>
-              </button>
+                <span class="mr-1 font-weight-bold">{this.state.score}</span>
+              </a>
               <span className="mr-1">•</span>
               <span>
                 <MomentTime data={node.comment} />
@@ -295,7 +284,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         data-tippy-content={i18n.t('upvote')}
                       >
                         <svg class="icon icon-inline">
-                          <use xlinkHref="#icon-arrow-up"></use>
+                          <use xlinkHref="#icon-arrow-up1"></use>
                         </svg>
                         {this.state.upvotes !== this.state.score && (
                           <span class="ml-1">{this.state.upvotes}</span>
@@ -312,7 +301,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           data-tippy-content={i18n.t('downvote')}
                         >
                           <svg class="icon icon-inline">
-                            <use xlinkHref="#icon-arrow-down"></use>
+                            <use xlinkHref="#icon-arrow-down1"></use>
                           </svg>
                           {this.state.upvotes !== this.state.score && (
                             <span class="ml-1">{this.state.downvotes}</span>

src/shared/components/community.tsx

@@ -459,7 +459,8 @@ export class Community extends Component<any, State> {
       res.op == UserOperation.DeletePost ||
       res.op == UserOperation.RemovePost ||
       res.op == UserOperation.LockPost ||
-      res.op == UserOperation.StickyPost
+      res.op == UserOperation.StickyPost ||
+      res.op == UserOperation.SavePost
     ) {
       let data = res.data as PostResponse;
       editPostFindRes(data, this.state.posts);

src/shared/components/main.tsx

@@ -771,7 +771,14 @@ export class Main extends Component<any, MainState> {
         }
       }
       this.setState(this.state);
-    } else if (res.op == UserOperation.EditPost) {
+    } else if (
+      res.op == UserOperation.EditPost ||
+      res.op == UserOperation.DeletePost ||
+      res.op == UserOperation.RemovePost ||
+      res.op == UserOperation.LockPost ||
+      res.op == UserOperation.StickyPost ||
+      res.op == UserOperation.SavePost
+    ) {
       let data = res.data as PostResponse;
       editPostFindRes(data, this.state.posts);
       this.setState(this.state);

src/shared/components/post-listing.tsx

@@ -194,7 +194,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     if (isImage(post.url)) {
       return (
         <div
-          class="float-right text-body pointer d-inline-block position-relative"
+          class="float-right text-body pointer d-inline-block position-relative mb-2"
           data-tippy-content={i18n.t('expand_here')}
           onClick={linkEvent(this, this.handleImageExpandClick)}
         >
@@ -207,7 +207,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     } else if (post.thumbnail_url) {
       return (
         <a
-          class="float-right text-body d-inline-block position-relative"
+          class="float-right text-body d-inline-block position-relative mb-2"
           href={post.url}
           target="_blank"
           rel="noopener"
@@ -493,10 +493,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   commentsLine(showVotes: boolean = false) {
     let post = this.props.post;
     return (
-      <ul class="d-flex align-items-center list-inline mb-1 text-muted small">
-        <li className="list-inline-item">
+      <div class="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold">
+        <button class="btn btn-link text-muted p-0">
           <Link
-            className="text-muted"
+            className="text-muted small"
             title={i18n.t('number_of_comments', {
               count: post.number_of_comments,
             })}
@@ -509,43 +509,53 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               count: post.number_of_comments,
             })}
           </Link>
-        </li>
+        </button>
+        {/* This is an expanding spacer for mobile */}
+        <div className="flex-grow-1"></div>
         {(showVotes || this.state.upvotes !== this.state.score) && (
           <>
-            <span
-              class="unselectable pointer ml-3"
-              data-tippy-content={this.pointsTippy}
-            >
-              <li className="list-inline-item">
-                <a
-                  className={`btn-animate btn btn-link p-0 ${
+            <div>
+              <button
+                className={`btn-animate btn py-0 px-1 ${
                   this.state.my_vote == 1 ? 'text-info' : 'text-muted'
                 }`}
+                data-tippy-content={this.pointsTippy}
                 onClick={linkEvent(this, this.handlePostLike)}
               >
-                  <svg class="small icon icon-inline mx-1">
+                <svg class="small icon icon-inline mr-2">
                   <use xlinkHref="#icon-arrow-up1"></use>
                 </svg>
                 {this.state.upvotes}
-                </a>
-              </li>
-              <li className="list-inline-item">
-                <a
-                  className={`btn-animate btn btn-link p-0 ${
+              </button>
+              <button
+                className={`ml-2 btn-animate btn py-0 px-1 ${
                   this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
                 }`}
                 onClick={linkEvent(this, this.handlePostDisLike)}
+                data-tippy-content={this.pointsTippy}
               >
-                  <svg class="small icon icon-inline mx-1">
+                <svg class="small icon icon-inline mr-2">
                   <use xlinkHref="#icon-arrow-down1"></use>
                 </svg>
-                  {this.state.downvotes}
-                </a>
-              </li>
-            </span>
+                {this.state.downvotes !== 0 && (
+                  <span>{this.state.downvotes}</span>
+                )}
+              </button>
+            </div>
+            <button
+              class="btn btn-link btn-animate text-muted py-0 pl-1 pr-0"
+              onClick={linkEvent(this, this.handleSavePostClick)}
+              data-tippy-content={
+                post.saved ? i18n.t('unsave') : i18n.t('save')
+              }
+            >
+              <svg class={`icon icon-inline ${post.saved && 'text-warning'}`}>
+                <use xlinkHref="#icon-star"></use>
+              </svg>
+            </button>
           </>
         )}
-      </ul>
+      </div>
     );
   }
 
@@ -576,21 +586,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <>
             {this.props.showBody && (
               <>
-                <li className="list-inline-item">
-                  <button
-                    class="btn btn-link btn-animate text-muted"
-                    onClick={linkEvent(this, this.handleSavePostClick)}
-                    data-tippy-content={
-                      post.saved ? i18n.t('unsave') : i18n.t('save')
-                    }
-                  >
-                    <svg
-                      class={`icon icon-inline ${post.saved && 'text-warning'}`}
-                    >
-                      <use xlinkHref="#icon-star"></use>
-                    </svg>
-                  </button>
-                </li>
                 <li className="list-inline-item">
                   <Link
                     className="btn btn-link btn-animate text-muted"

src/shared/components/sidebar.tsx

@@ -175,9 +175,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             {i18n.t('modlog')}
           </Link>
         </li>
-        <li className="list-inline-item badge badge-secondary">
-          <CommunityLink community={community} realLink />
-        </li>
       </ul>
     );
   }

src/shared/utils.ts

@@ -927,6 +927,7 @@ export function editPostRes(data: PostResponse, post: Post) {
     post.stickied = data.post.stickied;
     post.body = data.post.body;
     post.locked = data.post.locked;
+    post.saved = data.post.saved;
   }
 }
 
@@ -1153,3 +1154,24 @@ export function wsSubscribe(parseMessage: any): Subscription {
     return null;
   }
 }
+
+moment.updateLocale('en', {
+  relativeTime: {
+    future: 'in %s',
+    past: '%s ago',
+    s: '<1m',
+    ss: '%ds',
+    m: '1m',
+    mm: '%dm',
+    h: '1h',
+    hh: '%dh',
+    d: '1d',
+    dd: '%dd',
+    w: '1w',
+    ww: '%dw',
+    M: '1m',
+    MM: '%dm',
+    y: '1y',
+    yy: '%dy',
+  },
+});