Adding icon-plus and minus-square.

ui/src/components/comment-node.tsx

@@ -242,7 +242,15 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 className="unselectable pointer text-monospace"
                 onClick={linkEvent(this, this.handleCommentCollapse)}
               >
-                {this.state.collapsed ? '[+]' : '[-]'}
+                {this.state.collapsed ? (
+                  <svg class="icon">
+                    <use xlinkHref="#icon-plus-square"></use>
+                  </svg>
+                ) : (
+                  <svg class="icon">
+                    <use xlinkHref="#icon-minus-square"></use>
+                  </svg>
+                )}
               </div>
             </li>
           </ul>

ui/src/components/post-listing.tsx

@@ -353,7 +353,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                         data-tippy-content={i18n.t('expand_here')}
                         onClick={linkEvent(this, this.handleImageExpandClick)}
                       >
-                        [+]
+                        <svg class="icon icon-inline">
+                          <use xlinkHref="#icon-plus-square"></use>
+                        </svg>
                       </span>
                     ) : (
                       <span>
@@ -361,7 +363,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                           class="text-monospace unselectable pointer ml-2 text-muted small"
                           onClick={linkEvent(this, this.handleImageExpandClick)}
                         >
-                          [-]
+                          <svg class="icon icon-inline">
+                            <use xlinkHref="#icon-minus-square"></use>
+                          </svg>
                         </span>
                         <div>
                           <span

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-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>
+          <symbol id="icon-plus-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 13h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z"></path>
+          </symbol>
           <symbol id="icon-help-circle" viewBox="0 0 24 24">
             <path d="M23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222-5.789 1.232-7.778 3.222-3.222 4.741-3.222 7.778 1.232 5.789 3.222 7.778 4.741 3.222 7.778 3.222 5.789-1.232 7.778-3.222 3.222-4.741 3.222-7.778zM21 12c0 2.486-1.006 4.734-2.636 6.364s-3.878 2.636-6.364 2.636-4.734-1.006-6.364-2.636-2.636-3.878-2.636-6.364 1.006-4.734 2.636-6.364 3.878-2.636 6.364-2.636 4.734 1.006 6.364 2.636 2.636 3.878 2.636 6.364zM10.033 9.332c0.183-0.521 0.559-0.918 1.022-1.14s1.007-0.267 1.528-0.083c0.458 0.161 0.819 0.47 1.050 0.859 0.183 0.307 0.284 0.665 0.286 1.037 0 0.155-0.039 0.309-0.117 0.464-0.080 0.16-0.203 0.325-0.368 0.49-0.709 0.709-1.831 1.092-1.831 1.092-0.524 0.175-0.807 0.741-0.632 1.265s0.741 0.807 1.265 0.632c0 0 1.544-0.506 2.613-1.575 0.279-0.279 0.545-0.614 0.743-1.010 0.2-0.4 0.328-0.858 0.328-1.369-0.004-0.731-0.204-1.437-0.567-2.049-0.463-0.778-1.19-1.402-2.105-1.724-1.042-0.366-2.135-0.275-3.057 0.167s-1.678 1.238-2.044 2.28c-0.184 0.521 0.090 1.092 0.611 1.275s1.092-0.091 1.275-0.611zM12 18c0.552 0 1-0.448 1-1s-0.448-1-1-1-1 0.448-1 1 0.448 1 1 1z"></path>
           </symbol>

ui/src/utils.ts

@@ -34,7 +34,7 @@ import {
 } from './interfaces';
 import { UserService, WebSocketService } from './services';
 
-import Tribute from 'tributejs';
+import Tribute from 'tributejs/src/Tribute.js';
 import markdown_it from 'markdown-it';
 import markdownitEmoji from 'markdown-it-emoji/light';
 import markdown_it_container from 'markdown-it-container';
@@ -427,7 +427,7 @@ export function toast(text: string, background: string = 'success') {
   }).showToast();
 }
 
-export function setupTribute(): any {
+export function setupTribute(): Tribute {
   return new Tribute({
     collection: [
       // Emojis
@@ -445,7 +445,7 @@ export function setupTribute(): any {
         }),
         allowSpaces: false,
         autocompleteMode: true,
-        // menuItemLimit: mentionDropdownFetchLimit,
+        menuItemLimit: mentionDropdownFetchLimit,
         menuShowMinLength: 3,
       },
       // Users
@@ -459,7 +459,7 @@ export function setupTribute(): any {
         },
         allowSpaces: false,
         autocompleteMode: true,
-        // menuItemLimit: mentionDropdownFetchLimit,
+        menuItemLimit: mentionDropdownFetchLimit,
         menuShowMinLength: 3,
       },
 
@@ -474,7 +474,7 @@ export function setupTribute(): any {
         },
         allowSpaces: false,
         autocompleteMode: true,
-        // menuItemLimit: mentionDropdownFetchLimit,
+        menuItemLimit: mentionDropdownFetchLimit,
         menuShowMinLength: 3,
       },
     ],