More additions to icons.

- Adding edit and trash icons for sidebars
- Adding pencil edit instead of modified.

ui/src/components/main.tsx

@@ -268,13 +268,16 @@ export class Main extends Component<any, MainState> {
           <div class="card-body">
             <h5 class="mb-0">{`${this.state.siteRes.site.name}`}</h5>
             {this.canAdmin && (
-              <ul class="list-inline mb-1 text-muted small font-weight-bold">
+              <ul class="list-inline mb-1 text-muted font-weight-bold">
-                <li className="list-inline-item">
+                <li className="list-inline-item-action">
                   <span
                     class="pointer"
                     onClick={linkEvent(this, this.handleEditClick)}
+                    data-tippy-content={i18n.t('edit')}
                   >
-                    {i18n.t('edit')}
+                    <svg class="icon icon-inline">
+                      <use xlinkHref="#icon-edit"></use>
+                    </svg>
                   </span>
                 </li>
               </ul>

ui/src/components/moment-time.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'inferno';
 import moment from 'moment';
-import { getMomentLanguage, setupTippy } from '../utils';
+import { getMomentLanguage, setupTippy, capitalizeFirstLetter } from '../utils';
 import { i18n } from '../i18next';
 
 interface MomentTimeProps {
@@ -28,10 +28,15 @@ export class MomentTime extends Component<MomentTimeProps, any> {
     if (this.props.data.updated) {
       return (
         <span
-          data-tippy-content={this.format(this.props.data.updated)}
+          data-tippy-content={`${capitalizeFirstLetter(
+            i18n.t('modified')
+          )} ${this.format(this.props.data.updated)}`}
           className="font-italics pointer unselectable"
         >
-          {i18n.t('modified')} {moment.utc(this.props.data.updated).fromNow()}
+          <svg class="icon icon-inline mr-1">
+            <use xlinkHref="#icon-edit-2"></use>
+          </svg>
+          {moment.utc(this.props.data.updated).fromNow()}
         </span>
       );
     } else {

ui/src/components/post-listing.tsx

@@ -579,8 +579,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             <span
                               className="pointer"
                               onClick={linkEvent(this, this.handleViewSource)}
+                              data-tippy-content={i18n.t('view_source')}
                             >
-                              {i18n.t('view_source')}
+                              <svg
+                                class={`icon icon-inline ${this.state
+                                  .viewSource && 'text-success'}`}
+                              >
+                                <use xlinkHref="#icon-eye"></use>
+                              </svg>
                             </span>
                           </li>
                         )}

ui/src/components/sidebar.tsx

@@ -13,6 +13,7 @@ import {
   getUnixTime,
   pictshareAvatarThumbnail,
   showAvatars,
+  setupTippy,
 } from '../utils';
 import { CommunityForm } from './community-form';
 import { i18n } from '../i18next';
@@ -46,6 +47,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     this.handleEditCancel = this.handleEditCancel.bind(this);
   }
 
+  componentDidUpdate() {
+    setupTippy();
+  }
+
   render() {
     return (
       <div>
@@ -84,26 +89,37 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             <Link className="text-muted" to={`/c/${community.name}`}>
               /c/{community.name}
             </Link>
-            <ul class="list-inline mb-1 text-muted small font-weight-bold">
+            <ul class="list-inline mb-1 text-muted font-weight-bold">
               {this.canMod && (
                 <>
-                  <li className="list-inline-item">
+                  <li className="list-inline-item-action">
                     <span
                       class="pointer"
                       onClick={linkEvent(this, this.handleEditClick)}
+                      data-tippy-content={i18n.t('edit')}
                     >
-                      {i18n.t('edit')}
+                      <svg class="icon icon-inline">
+                        <use xlinkHref="#icon-edit"></use>
+                      </svg>
                     </span>
                   </li>
                   {this.amCreator && (
-                    <li className="list-inline-item">
+                    <li className="list-inline-item-action">
                       <span
                         class="pointer"
                         onClick={linkEvent(this, this.handleDeleteClick)}
-                      >
+                        data-tippy-content={
-                        {!community.deleted
+                          !community.deleted
                             ? i18n.t('delete')
-                          : i18n.t('restore')}
+                            : i18n.t('restore')
+                        }
+                      >
+                        <svg
+                          class={`icon icon-inline ${community.deleted &&
+                            'text-danger'}`}
+                        >
+                          <use xlinkHref="#icon-trash"></use>
+                        </svg>
                       </span>
                     </li>
                   )}

ui/src/components/symbols.tsx

@@ -42,6 +42,9 @@ export class Symbols extends Component<any, any> {
           <symbol id="icon-edit" viewBox="0 0 24 24">
             <path d="M11 3h-7c-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-7c0-0.552-0.448-1-1-1s-1 0.448-1 1v7c0 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.293h7c0.552 0 1-0.448 1-1s-0.448-1-1-1zM17.793 1.793l-9.5 9.5c-0.122 0.121-0.217 0.28-0.263 0.465l-1 4c-0.039 0.15-0.042 0.318 0 0.485 0.134 0.536 0.677 0.862 1.213 0.728l4-1c0.167-0.041 0.33-0.129 0.465-0.263l9.5-9.5c0.609-0.609 0.914-1.41 0.914-2.207s-0.305-1.598-0.914-2.207-1.411-0.915-2.208-0.915-1.598 0.305-2.207 0.914zM19.207 3.207c0.219-0.219 0.504-0.328 0.793-0.328s0.574 0.109 0.793 0.328 0.328 0.504 0.328 0.793-0.109 0.574-0.328 0.793l-9.304 9.304-2.114 0.529 0.529-2.114z"></path>
           </symbol>
+          <symbol id="icon-edit-2" viewBox="0 0 24 24">
+            <path d="M16.293 2.293l-13.5 13.5c-0.117 0.116-0.21 0.268-0.258 0.444l-1.5 5.5c-0.046 0.163-0.049 0.346 0 0.526 0.145 0.533 0.695 0.847 1.228 0.702l5.5-1.5c0.159-0.042 0.315-0.129 0.444-0.258l13.5-13.5c0.747-0.747 1.121-1.729 1.121-2.707s-0.374-1.96-1.121-2.707-1.729-1.121-2.707-1.121-1.96 0.374-2.707 1.121zM17.707 3.707c0.357-0.357 0.824-0.535 1.293-0.535s0.936 0.178 1.293 0.536 0.535 0.823 0.535 1.292-0.178 0.936-0.535 1.293l-13.312 13.312-3.556 0.97 0.97-3.555z"></path>
+          </symbol>
           <symbol id="icon-trash" viewBox="0 0 24 24">
             <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>