From e13ab2ee468924eb42d3a858f093e23b31d9cf8f Mon Sep 17 00:00:00 2001 From: Dessalines <dessalines@users.noreply.github.com> Date: Mon, 14 Feb 2022 13:49:57 -0500 Subject: [PATCH] Add federated post and comment links. Fixes #569 (#575) --- .../components/comment/comment-node.tsx | 31 +++++++-- src/shared/components/common/symbols.tsx | 65 +++++++++++++++++++ src/shared/components/post/post-listing.tsx | 5 ++ 3 files changed, 94 insertions(+), 7 deletions(-) diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index 1af8e11..d9702ba 100644 --- a/src/shared/components/comment/comment-node.tsx +++ b/src/shared/components/comment/comment-node.tsx @@ -1,3 +1,4 @@ +import classNames from "classnames"; import { Component, linkEvent } from "inferno"; import { Link } from "inferno-router"; import { @@ -849,14 +850,30 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { linkBtn(small = false) { let cv = this.props.node.comment_view; + let classnames = classNames("btn btn-link btn-animate text-muted", { + "btn-sm": small, + }); + + let title = this.props.showContext + ? i18n.t("show_context") + : i18n.t("link"); + return ( - <Link - className={`btn ${small && "btn-sm"} btn-link btn-animate text-muted`} - to={`/post/${cv.post.id}/comment/${cv.comment.id}`} - title={this.props.showContext ? i18n.t("show_context") : i18n.t("link")} - > - <Icon icon="link" classes="icon-inline" /> - </Link> + <> + <Link + className={classnames} + to={`/post/${cv.post.id}/comment/${cv.comment.id}`} + title={title} + > + <Icon icon="link" classes="icon-inline" /> + </Link> + {/* TODO comment ap_ids are currently broken anyway, so use post.ap_id, and wait until comment tree / endpoint refactor */} + {!cv.comment.local && ( + <a className={classnames} title={title} href={cv.post.ap_id}> + <Icon icon="fedilink" classes="icon-inline" /> + </a> + )} + </> ); } diff --git a/src/shared/components/common/symbols.tsx b/src/shared/components/common/symbols.tsx index d730c15..03791d1 100644 --- a/src/shared/components/common/symbols.tsx +++ b/src/shared/components/common/symbols.tsx @@ -12,6 +12,71 @@ export const SYMBOLS = ( xmlnsXlink="http://www.w3.org/1999/xlink" > <defs> + <symbol + id="icon-fedilink" + viewBox="0 0 196.52 196.52" + xmlns="http://www.w3.org/2000/svg" + > + <g color="#000" font-weight="400" font-family="sans-serif"> + <path + d="M47.924 72.797a18.228 18.228 0 0 1-7.796 7.76l42.799 42.965 10.318-5.23zm56.453 56.67l-10.319 5.23 21.686 21.77a18.228 18.228 0 0 1 7.798-7.76z" + overflow="visible" + fill="#a730b8" + /> + <path + d="M153.894 89.797l-24.23 12.28 1.787 11.427 27.415-13.895a18.228 18.228 0 0 1-4.972-9.812zm-38.295 19.408l-57.29 29.034a18.228 18.228 0 0 1 4.973 9.813l54.103-27.42z" + overflow="visible" + fill="#5496be" + /> + <path + d="M97.175 37.687L69.53 91.654l8.162 8.193 29.269-57.138a18.228 18.228 0 0 1-9.787-5.022zM62.34 105.69L48.34 133.025a18.228 18.228 0 0 1 9.786 5.022l12.378-24.164z" + overflow="visible" + fill="#ce3d1a" + /> + <path + d="M39.89 80.676a18.228 18.228 0 0 1-9.105 1.904 18.228 18.228 0 0 1-1.76-.184l8.176 52.298a18.228 18.228 0 0 1 9.106-1.904 18.228 18.228 0 0 1 1.759.184z" + overflow="visible" + fill="#d0188f" + /> + <path + d="M63.326 148.31a18.228 18.228 0 0 1 .19 3.672 18.228 18.228 0 0 1-1.922 7.192l52.289 8.39a18.228 18.228 0 0 1-.191-3.672 18.228 18.228 0 0 1 1.923-7.19z" + overflow="visible" + fill="#5b36e9" + /> + <path + d="M159.05 99.8l-24.135 47.118a18.228 18.228 0 0 1 9.788 5.023l24.134-47.117a18.228 18.228 0 0 1-9.787-5.023z" + overflow="visible" + fill="#30b873" + /> + <path + d="M126.133 33.16a18.228 18.228 0 0 1-7.798 7.761l37.377 37.52a18.228 18.228 0 0 1 7.797-7.76z" + overflow="visible" + fill="#ebe305" + /> + <path + d="M92.019 27.684L44.77 51.628a18.228 18.228 0 0 1 4.973 9.812L96.99 37.495a18.228 18.228 0 0 1-4.971-9.811z" + overflow="visible" + fill="#f47601" + /> + <path + d="M118.25 40.964a18.228 18.228 0 0 1-9.257 1.98 18.228 18.228 0 0 1-1.595-.167l4.185 26.8 11.42 1.832zm-4.234 44.193l9.895 63.363a18.228 18.228 0 0 1 8.973-1.837 18.228 18.228 0 0 1 1.907.21l-9.355-59.904z" + overflow="visible" + fill="#57c115" + /> + <path + d="M49.776 61.641a18.228 18.228 0 0 1 .2 3.73 18.228 18.228 0 0 1-1.894 7.139l26.82 4.308 5.272-10.295zm45.968 7.382L90.472 79.32l63.371 10.177a18.228 18.228 0 0 1-.184-3.63 18.228 18.228 0 0 1 1.945-7.229z" + overflow="visible" + fill="#dbb210" + /> + </g> + <g transform="rotate(3.118 600.365 106.46)" fill-opacity=".996"> + <circle cx="106.266" cy="51.536" r="16.571" fill="#ffca00" /> + <circle cx="171.428" cy="110.193" r="16.571" fill="#64ff00" /> + <circle cx="135.764" cy="190.277" r="16.571" fill="#00a3ff" /> + <circle cx="48.559" cy="181.114" r="16.571" fill="#9500ff" /> + <circle cx="30.329" cy="95.367" r="16.571" fill="red" /> + </g> + </symbol> <symbol id="icon-clipboard" viewBox="0 0 24 24"> <path d="M7 5c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h6c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414h1c0.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-12c-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.293zM9 1c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414h-1c-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.879h12c0.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.879h-1c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM9 3h6v2h-6z"></path> </symbol> diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 1608d41..9b07d1c 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -445,6 +445,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> { /> </button> )} + {!post.local && ( + <a className="ml-2" title={i18n.t("link")} href={post.ap_id}> + <Icon icon="fedilink" /> + </a> + )} {post.removed && ( <small className="ml-2 text-muted font-italic"> {i18n.t("removed")} -- 2.44.1