Moving comment voting to action bar. Adding plurals.

ui/assets/css/main.css

@@ -74,10 +74,6 @@
   border-top: 2px solid var(--dark);
 }
 
-.comment-node {
-  margin-bottom: 10px;
-}
-
 .vote-bar {
   margin-top: -6.5px;
 }

ui/src/components/comment-node.tsx

@@ -131,47 +131,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''
         }`}
       >
-        {!this.state.collapsed && (
-          <div
-            className={`vote-bar mr-2 float-left small text-center ${this.props
-              .viewOnly && 'no-click'}`}
-          >
-            <button
-              className={`vote-animate btn btn-link p-0 ${
-                this.state.my_vote == 1 ? 'text-info' : 'text-muted'
-              }`}
-              onClick={linkEvent(node, this.handleCommentUpvote)}
-              data-tippy-content={i18n.t('upvote')}
-            >
-              <svg class="icon upvote">
-                <use xlinkHref="#icon-arrow-up"></use>
-              </svg>
-            </button>
-            <div class={`unselectable font-weight-bold text-muted`}>
-              {this.state.score}
-            </div>
-            {WebSocketService.Instance.site.enable_downvotes && (
-              <button
-                className={`vote-animate btn btn-link p-0 ${
-                  this.state.my_vote == -1 ? 'text-danger' : 'text-muted'
-                }`}
-                onClick={linkEvent(node, this.handleCommentDownvote)}
-                data-tippy-content={i18n.t('downvote')}
-              >
-                <svg class="icon downvote">
-                  <use xlinkHref="#icon-arrow-down"></use>
-                </svg>
-              </button>
-            )}
-          </div>
-        )}
         <div
           id={`comment-${node.comment.id}`}
-          className={`details comment-node ml-4 ${
+          className={`details comment-node mb-1 ${
             this.isCommentNew ? 'mark' : ''
           }`}
         >
-          <ul class="list-inline mb-0 text-muted small">
+          <ul class="list-inline mb-1 text-muted small">
             <li className="list-inline-item">
               <Link
                 className="text-info"
@@ -208,22 +174,37 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 {i18n.t('banned')}
               </li>
             )}
-            <li className="list-inline-item">
-              <span className="text-info">
-                <svg class="small icon icon-inline mr-1">
-                  <use xlinkHref="#icon-arrow-up"></use>
-                </svg>
-                {this.state.upvotes}
-              </span>
-            </li>
-            <li className="list-inline-item">
-              <span className="text-danger">
-                <svg class="small icon icon-inline mr-1">
-                  <use xlinkHref="#icon-arrow-down"></use>
-                </svg>
-                {this.state.downvotes}
-              </span>
-            </li>
+            <span
+              class="unselectable pointer mr-2"
+              data-tippy-content={i18n.t('number_of_points', {
+                count: this.state.score,
+              })}
+            >
+              <li className="list-inline-item">
+                <span className="text-danger">
+                  <svg class="small icon icon-inline mr-1">
+                    <use xlinkHref="#icon-heart"></use>
+                  </svg>
+                  {this.state.score}
+                </span>
+              </li>
+              <li className="list-inline-item">
+                <span className="text-info">
+                  <svg class="small icon icon-inline mr-1">
+                    <use xlinkHref="#icon-arrow-up"></use>
+                  </svg>
+                  {this.state.upvotes}
+                </span>
+              </li>
+              <li className="list-inline-item">
+                <span className="text-danger">
+                  <svg class="small icon icon-inline mr-1">
+                    <use xlinkHref="#icon-arrow-down"></use>
+                  </svg>
+                  {this.state.downvotes}
+                </span>
+              </li>
+            </span>
             {this.props.showCommunity && (
               <li className="list-inline-item">
                 <span> {i18n.t('to')} </span>
@@ -272,7 +253,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   dangerouslySetInnerHTML={mdToHtml(this.commentUnlessRemoved)}
                 />
               )}
-              <ul class="list-inline mb-1 text-muted font-weight-bold h5">
+              <ul class="list-inline mb-0 text-muted font-weight-bold h5">
                 {this.props.markable && (
                   <li className="list-inline-item-action">
                     <span
@@ -295,6 +276,36 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 )}
                 {UserService.Instance.user && !this.props.viewOnly && (
                   <>
+                    <li className="list-inline-item-action">
+                      <button
+                        className={`vote-animate btn btn-link p-0 mb-1 ${
+                          this.state.my_vote == 1 ? 'text-info' : 'text-muted'
+                        }`}
+                        onClick={linkEvent(node, this.handleCommentUpvote)}
+                        data-tippy-content={i18n.t('upvote')}
+                      >
+                        <svg class="icon">
+                          <use xlinkHref="#icon-arrow-up"></use>
+                        </svg>
+                      </button>
+                    </li>
+                    {WebSocketService.Instance.site.enable_downvotes && (
+                      <li className="list-inline-item-action">
+                        <button
+                          className={`vote-animate btn btn-link p-0 mb-1 ${
+                            this.state.my_vote == -1
+                              ? 'text-danger'
+                              : 'text-muted'
+                          }`}
+                          onClick={linkEvent(node, this.handleCommentDownvote)}
+                          data-tippy-content={i18n.t('downvote')}
+                        >
+                          <svg class="icon">
+                            <use xlinkHref="#icon-arrow-down"></use>
+                          </svg>
+                        </button>
+                      </li>
+                    )}
                     <li className="list-inline-item-action">
                       <span
                         class="pointer"
@@ -306,22 +317,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         </svg>
                       </span>
                     </li>
-                    <li className="list-inline-item-action">
-                      <span
-                        class="pointer"
-                        onClick={linkEvent(this, this.handleSaveCommentClick)}
-                        data-tippy-content={
-                          node.comment.saved ? i18n.t('unsave') : i18n.t('save')
-                        }
-                      >
-                        <svg
-                          class={`icon icon-inline ${node.comment.saved &&
-                            'text-warning'}`}
-                        >
-                          <use xlinkHref="#icon-star"></use>
-                        </svg>
-                      </span>
-                    </li>
                     {!this.myComment && (
                       <li className="list-inline-item-action">
                         <Link
@@ -342,7 +337,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         title={i18n.t('link')}
                       >
                         <svg class="icon icon-inline">
-                          <use xlinkHref="#icon-external-link"></use>
+                          <use xlinkHref="#icon-link"></use>
                         </svg>
                       </Link>
                     </li>
@@ -360,6 +355,27 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                       </li>
                     ) : (
                       <>
+                        <li className="list-inline-item-action">
+                          <span
+                            class="pointer"
+                            onClick={linkEvent(
+                              this,
+                              this.handleSaveCommentClick
+                            )}
+                            data-tippy-content={
+                              node.comment.saved
+                                ? i18n.t('unsave')
+                                : i18n.t('save')
+                            }
+                          >
+                            <svg
+                              class={`icon icon-inline ${node.comment.saved &&
+                                'text-warning'}`}
+                            >
+                              <use xlinkHref="#icon-star"></use>
+                            </svg>
+                          </span>
+                        </li>
                         <li className="list-inline-item-action">
                           <span
                             className="pointer"

ui/src/components/post-listing.tsx

@@ -266,7 +266,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               <use xlinkHref="#icon-arrow-up"></use>
             </svg>
           </button>
-          <div class={`unselectable font-weight-bold text-muted px-1`}>
+          <div
+            class={`unselectable pointer font-weight-bold text-muted px-1`}
+            data-tippy-content={i18n.t('number_of_points', {
+              count: this.state.score,
+            })}
+          >
             {this.state.score}
           </div>
           {WebSocketService.Instance.site.enable_downvotes && (

ui/src/components/symbols.tsx

@@ -15,6 +15,12 @@ export class Symbols extends Component<any, any> {
         xmlnsXlink="http://www.w3.org/1999/xlink"
       >
         <defs>
+          <symbol id="icon-heart" viewBox="0 0 24 24">
+            <path d="M20.133 5.317c0.88 0.881 1.319 2.031 1.319 3.184s-0.44 2.303-1.319 3.182l-8.133 8.133-8.133-8.133c-0.879-0.879-1.318-2.029-1.318-3.183s0.439-2.304 1.318-3.183 2.029-1.318 3.183-1.318 2.304 0.439 3.183 1.318l1.060 1.060c0.391 0.391 1.024 0.391 1.414 0l1.062-1.062c0.879-0.879 2.029-1.318 3.182-1.317s2.303 0.44 3.182 1.319zM21.547 3.903c-1.269-1.269-2.934-1.904-4.596-1.905s-3.327 0.634-4.597 1.903l-0.354 0.355-0.353-0.353c-1.269-1.269-2.935-1.904-4.597-1.904s-3.328 0.635-4.597 1.904-1.904 2.935-1.904 4.597 0.635 3.328 1.904 4.597l8.84 8.84c0.391 0.391 1.024 0.391 1.414 0l8.84-8.84c1.269-1.269 1.904-2.934 1.905-4.596s-0.634-3.327-1.905-4.598z"></path>
+          </symbol>
+          <symbol id="icon-link" viewBox="0 0 24 24">
+            <path d="M9.199 13.599c0.992 1.327 2.43 2.126 3.948 2.345s3.123-0.142 4.45-1.134c0.239-0.179 0.465-0.375 0.655-0.568l2.995-2.995c1.163-1.204 1.722-2.751 1.696-4.285s-0.639-3.061-1.831-4.211c-1.172-1.132-2.688-1.692-4.199-1.683-1.492 0.008-2.984 0.571-4.137 1.683l-1.731 1.721c-0.392 0.389-0.394 1.023-0.004 1.414s1.023 0.394 1.414 0.004l1.709-1.699c0.77-0.742 1.763-1.117 2.76-1.123 1.009-0.006 2.016 0.367 2.798 1.122 0.795 0.768 1.203 1.783 1.221 2.808s-0.355 2.054-1.11 2.836l-3.005 3.005c-0.114 0.116-0.263 0.247-0.428 0.37-0.885 0.662-1.952 0.902-2.967 0.756s-1.971-0.678-2.632-1.563c-0.331-0.442-0.957-0.533-1.4-0.202s-0.533 0.957-0.202 1.4zM14.801 10.401c-0.992-1.327-2.43-2.126-3.948-2.345s-3.124 0.142-4.451 1.134c-0.239 0.179-0.464 0.375-0.655 0.568l-2.995 2.995c-1.163 1.204-1.722 2.751-1.696 4.285s0.639 3.061 1.831 4.211c1.172 1.132 2.688 1.692 4.199 1.683 1.492-0.008 2.984-0.571 4.137-1.683l1.723-1.723c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.696 1.698c-0.77 0.742-1.763 1.117-2.76 1.123-1.009 0.006-2.016-0.367-2.798-1.122-0.795-0.768-1.203-1.783-1.221-2.808s0.355-2.054 1.11-2.836l3.005-3.005c0.114-0.116 0.263-0.247 0.428-0.37 0.885-0.662 1.952-0.902 2.967-0.756s1.971 0.678 2.632 1.563c0.331 0.442 0.957 0.533 1.4 0.202s0.533-0.957 0.202-1.4z"></path>
+          </symbol>
           <symbol id="icon-minus-square" viewBox="0 0 24 24">
             <path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
           </symbol>
@@ -58,7 +64,7 @@ export class Symbols extends Component<any, any> {
             <path d="M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1z"></path>
           </symbol>
           <symbol id="icon-reply1" viewBox="0 0 20 20">
-            <path d="M15 17v-2.99c0-0.003 0-0.006 0-0.010 0-2.209-1.791-4-4-4 0 0-0 0-0 0h-3v5l-6-6 6-6v5h3c3.314 0 6 2.686 6 6v0 3h-2z"></path>
+            <path d="M19 16.685c0 0-2.225-9.732-11-9.732v-3.984l-7 6.573 7 6.69v-4.357c4.763-0.001 8.516 0.421 11 4.81z"></path>
           </symbol>
           <symbol id="icon-star" viewBox="0 0 24 24">
             <path d="M12.897 1.557c-0.092-0.189-0.248-0.352-0.454-0.454-0.495-0.244-1.095-0.041-1.339 0.454l-2.858 5.789-6.391 0.935c-0.208 0.029-0.411 0.127-0.571 0.291-0.386 0.396-0.377 1.029 0.018 1.414l4.623 4.503-1.091 6.362c-0.036 0.207-0.006 0.431 0.101 0.634 0.257 0.489 0.862 0.677 1.351 0.42l5.714-3.005 5.715 3.005c0.186 0.099 0.408 0.139 0.634 0.101 0.544-0.093 0.91-0.61 0.817-1.155l-1.091-6.362 4.623-4.503c0.151-0.146 0.259-0.344 0.292-0.572 0.080-0.546-0.298-1.054-0.845-1.134l-6.39-0.934zM12 4.259l2.193 4.444c0.151 0.305 0.436 0.499 0.752 0.547l4.906 0.717-3.549 3.457c-0.244 0.238-0.341 0.569-0.288 0.885l0.837 4.883-4.386-2.307c-0.301-0.158-0.647-0.148-0.931 0l-4.386 2.307 0.837-4.883c0.058-0.336-0.059-0.661-0.288-0.885l-3.549-3.457 4.907-0.718c0.336-0.049 0.609-0.26 0.752-0.546z"></path>

ui/src/utils.ts

@@ -446,7 +446,7 @@ export function setupTribute(): Tribute {
         allowSpaces: false,
         autocompleteMode: true,
         menuItemLimit: mentionDropdownFetchLimit,
-        menuShowMinLength: 3,
+        menuShowMinLength: 2,
       },
       // Users
       {
@@ -460,7 +460,7 @@ export function setupTribute(): Tribute {
         allowSpaces: false,
         autocompleteMode: true,
         menuItemLimit: mentionDropdownFetchLimit,
-        menuShowMinLength: 3,
+        menuShowMinLength: 2,
       },
 
       // Communities
@@ -475,7 +475,7 @@ export function setupTribute(): Tribute {
         allowSpaces: false,
         autocompleteMode: true,
         menuItemLimit: mentionDropdownFetchLimit,
-        menuShowMinLength: 3,
+        menuShowMinLength: 2,
       },
     ],
   });

ui/translations/en.json

@@ -4,14 +4,16 @@
     "no_posts": "No Posts.",
     "create_a_post": "Create a post",
     "create_post": "Create Post",
-    "number_of_posts": "{{count}} Posts",
+    "number_of_posts": "{{count}} Post",
+    "number_of_posts_plural": "{{count}} Posts",
     "posts": "Posts",
     "related_posts": "These posts might be related",
     "cross_posts": "This link has also been posted to:",
     "cross_post": "cross-post",
     "cross_posted_to": "cross-posted to: ",
     "comments": "Comments",
-    "number_of_comments": "{{count}} Comments",
+    "number_of_comments": "{{count}} Comment",
+    "number_of_comments_plural": "{{count}} Comments",
     "remove_comment": "Remove Comment",
     "communities": "Communities",
     "users": "Users",
@@ -21,7 +23,8 @@
     "subscribed_to_communities": "Subscribed to <1>communities</1>",
     "trending_communities": "Trending <1>communities</1>",
     "list_of_communities": "List of communities",
-    "number_of_communities": "{{count}} Communities",
+    "number_of_communities": "{{count}} Community",
+    "number_of_communities_plural": "{{count}} Communities",
     "community_reqs": "lowercase, underscores, and no spaces.",
     "create_private_message": "Create Private Message",
     "send_secure_message": "Send Secure Message",
@@ -79,10 +82,14 @@
     "creator": "creator",
     "username": "Username",
     "email_or_username": "Email or Username",
-    "number_of_users": "{{count}} Users",
-    "number_of_subscribers": "{{count}} Subscribers",
-    "number_of_points": "{{count}} Points",
-    "number_online": "{{count}} Users Online",
+    "number_of_users": "{{count}} User",
+    "number_of_users_plural": "{{count}} Users",
+    "number_of_subscribers": "{{count}} Subscriber",
+    "number_of_subscribers_plural": "{{count}} Subscribers",
+    "number_of_points": "{{count}} Point",
+    "number_of_points_plural": "{{count}} Points",
+    "number_online": "{{count}} User Online",
+    "number_online_plural": "{{count}} Users Online",
     "name": "Name",
     "title": "Title",
     "category": "Category",