diff options
author | Dessalines <tyhou13@gmx.com> | 2020-04-03 13:46:25 -0400 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-04-03 13:46:25 -0400 |
commit | 0ca385deaf00d905081c66d0e0164558531e0e70 (patch) | |
tree | 8521f8f9a571fa644bc940abaa84a61faf539aa8 /ui | |
parent | a497a568db6349b25f7b662079141f8a3ddfb6cd (diff) |
Adding a text body preview and icon for posts with a body. Fixes #617
Diffstat (limited to 'ui')
-rw-r--r-- | ui/src/components/post-listing.tsx | 20 | ||||
-rw-r--r-- | ui/src/components/symbols.tsx | 3 | ||||
-rw-r--r-- | ui/src/utils.ts | 8 |
3 files changed, 31 insertions, 0 deletions
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index ff863dcb..101d1807 100644 --- 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 16deec3e..dae734a8 100644 --- 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 8ecef19b..d659509c 100644 --- 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'); +} |