Adding a text body preview and icon for posts with a body. Fixes #617

diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index ff863dcb0d98f154f48f7b9fb80baa55fc61775a..101d18078997b93ff2d6deedd5fcebc2317a9587 100644 (file)
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -20,6 +20,7 @@ import { MomentTime } from './moment-time';
 import { PostForm } from './post-form';
 import { IFramelyCard } from './iframely-card';
 import {
+  md,
   mdToHtml,
   canMod,
   isMod,
@@ -30,6 +31,7 @@ import {
   showAvatars,
   pictshareImage,
   setupTippy,
+  previewLines,
 } from '../utils';
 import { i18n } from '../i18next';
 
@@ -459,6 +461,24 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                     <MomentTime data={post} />
                   </span>
                 </li>
+                {post.body && (
+                  <>
+                    <li className="list-inline-item">•</li>
+                    <li className="list-inline-item">
+                      {/* Using a link with tippy doesn't work on touch devices unfortunately */}
+                      <Link
+                        className="text-muted"
+                        data-tippy-content={md.render(previewLines(post.body))}
+                        data-tippy-allowHtml={true}
+                        to={`/post/${post.id}`}
+                      >
+                        <svg class="mr-1 icon icon-inline">
+                          <use xlinkHref="#icon-book-open"></use>
+                        </svg>
+                      </Link>
+                    </li>
+                  </>
+                )}
                 <li className="list-inline-item">•</li>
                 {this.state.upvotes !== this.state.score && (
                   <>

diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx
index 16deec3eb7d4b2611884d6f251de87b94858c84f..dae734a80aa5d496d63f24a1ef49e08ecc5460db 100644 (file)
--- a/ui/src/components/symbols.tsx
+++ b/ui/src/components/symbols.tsx
@@ -15,6 +15,9 @@ export class Symbols extends Component<any, any> {
         xmlnsXlink="http://www.w3.org/1999/xlink"
       >
         <defs>
+          <symbol id="icon-book-open" viewBox="0 0 24 24">
+            <path d="M21 4v13h-6c-0.728 0-1.412 0.195-2 0.535v-10.535c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879zM11 17.535c-0.588-0.34-1.272-0.535-2-0.535h-6v-13h5c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121zM22 2h-6c-1.38 0-2.632 0.561-3.536 1.464-0.167 0.167-0.322 0.346-0.464 0.536-0.142-0.19-0.297-0.369-0.464-0.536-0.904-0.903-2.156-1.464-3.536-1.464h-6c-0.552 0-1 0.448-1 1v15c0 0.552 0.448 1 1 1h7c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414c0 0.552 0.448 1 1 1s1-0.448 1-1c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586h7c0.552 0 1-0.448 1-1v-15c0-0.552-0.448-1-1-1z"></path>
+          </symbol>
           <symbol id="icon-alert-triangle" viewBox="0 0 24 24">
             <path d="M11.148 4.374c0.073-0.123 0.185-0.242 0.334-0.332 0.236-0.143 0.506-0.178 0.756-0.116s0.474 0.216 0.614 0.448l8.466 14.133c0.070 0.12 0.119 0.268 0.128 0.434-0.015 0.368-0.119 0.591-0.283 0.759-0.18 0.184-0.427 0.298-0.693 0.301l-16.937-0.001c-0.152-0.001-0.321-0.041-0.481-0.134-0.239-0.138-0.399-0.359-0.466-0.607s-0.038-0.519 0.092-0.745zM9.432 3.346l-8.47 14.14c-0.422 0.731-0.506 1.55-0.308 2.29s0.68 1.408 1.398 1.822c0.464 0.268 0.976 0.4 1.475 0.402h16.943c0.839-0.009 1.587-0.354 2.123-0.902s0.864-1.303 0.855-2.131c-0.006-0.536-0.153-1.044-0.406-1.474l-8.474-14.147c-0.432-0.713-1.11-1.181-1.854-1.363s-1.561-0.081-2.269 0.349c-0.429 0.26-0.775 0.615-1.012 1.014zM11 9v4c0 0.552 0.448 1 1 1s1-0.448 1-1v-4c0-0.552-0.448-1-1-1s-1 0.448-1 1zM12 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>

diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 8ecef19b68aa0d976566a8fc4e9177cc2953f53b..d659509c8e58a9a923c386bd2664395b5e396954 100644 (file)
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -823,3 +823,11 @@ function hsl(num: number) {
 function randomHsl() {
   return `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
 }
+
+export function previewLines(text: string, lines: number = 3): string {
+  // Use lines * 2 because markdown requires 2 lines
+  return text
+    .split('\n')
+    .slice(0, lines * 2)
+    .join('\n');
+}