Enhancements Podcastindex-org#240, Podcastindex-org#233 Comments repl…

…y and other actions This commit implements Podcastindex-org#240 and initial support for Podcastindex-org#233. A menu is added to comments that support initiating the following actions: - Reply to post - currently just navigates to the post in it is original system - Copy link to post - Open in original site - opens the post in its original system at another tab - Follow author of the post - currently just navigates to the profile of the author on its original system This commit is based on nathangathright/comment-thread-mockup@6b2f716 Related issues: - Podcastindex-org#240 - Podcastindex-org#233 Co-authored-by: Nathan Gathright <[email protected]>
podStation · Apr 19, 2023 · 40e8e99 · 40e8e99
1 parent de423ff
commit 40e8e99
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 4 deletions.
diff --git a/ui/src/components/CommentMenu/index.tsx b/ui/src/components/CommentMenu/index.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react'
+
+import './styles.scss'
+
+interface ICommentMenuProps {
+    /**
+     * URL of the comment
+     */
+    url: string,
+    commenterUrl: string,
+    commenterAccount: string,
+}
+
+interface ICommentMenuState {
+
+}
+
+class CommentMenu extends React.PureComponent<ICommentMenuProps, ICommentMenuState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+
+        }
+    }
+
+    onClickCopyLink(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+        e.preventDefault();
+        navigator.clipboard.writeText(this.props.url);
+
+        // Some form of "toast message" would be better, but I don't
+        // think something like that is already implemented, meanwhile,
+        // we use an alert, it is ugly, but it show the user there was
+        // a reaction.
+        alert('Link to post copied');
+    }
+
+    render(): React.ReactNode {
+        return (
+            <menu>
+                <a href={this.props.url}>Reply to this post</a>
+                <a href={this.props.url} onClick={(e) => this.onClickCopyLink(e)}>Copy link to this post</a>
+                <a href={this.props.url} target='_blank'>Open in original site</a>
+                <a href={this.props.commenterUrl}>Follow {this.props.commenterAccount}</a>
+            </menu>
+        )
+    }
+}
+
+export default CommentMenu;
diff --git a/ui/src/components/CommentMenu/styles.scss b/ui/src/components/CommentMenu/styles.scss
@@ -0,0 +1,84 @@
+.context-menu {
+    all: unset;
+    position: relative;
+}
+
+.context-menu svg {
+    display: block;
+}
+
+.context-menu menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    background: #FFF;
+    margin: 0;
+    padding: .75rem;
+    z-index: 1;
+    border-radius: .25rem;
+    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}
+
+.context-menu menu a {
+    white-space: nowrap;
+    text-decoration: none;
+    line-height: 2;
+}
+
+.dialog-homeinstance {
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 0.5rem;
+    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+    width: calc((100% - 6px) - 2em);
+    max-width: 28rem;
+}
+
+.dialog-homeinstance form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 0;
+}
+
+.dialog-homeinstance input {
+    padding: 0.5rem;
+}
+
+.dialog-homeinstance menu {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: .5rem;
+    margin: 1.5rem 0 0 0;
+}
+
+.dialog-homeinstance button {
+    border: none;
+    padding: .5rem;
+    border-radius: 4px;
+    min-width: 4.5rem;
+    background-color: #2962ff;
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: .25px;
+    line-height: 1rem;
+    outline: none;
+    color: #FFF;
+}
+
+.dialog-homeinstance button:hover {
+    background-color: #2F7DE2;
+}
+
+.dialog-homeinstance button[type="reset"] {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px #DADCE0;
+    color: #2962ff;
+}
+
+.dialog-homeinstance button[type="reset"]:hover {
+    background-color: #EAF2FD;
+}
diff --git a/ui/src/components/Comments/index.tsx b/ui/src/components/Comments/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import DOMPurify from 'dompurify'
 
 import './styles.scss'
+import CommentMenu from '../CommentMenu'
 
 interface IProps {
     id: number,
@@ -36,9 +37,20 @@ interface ICommentProps {
     comment: StateComment 
 }
 
-class Comment extends React.PureComponent<ICommentProps> {
+interface ICommentState {
+    showMenu: boolean
+}
+
+class Comment extends React.PureComponent<ICommentProps, ICommentState> {
     constructor(props) {
         super(props);
+        this.state = {
+            showMenu: false
+        }
+    }
+
+    onClickShowMenu() {
+        this.setState({showMenu: !this.state.showMenu});
     }
 
     render(): React.ReactNode {
@@ -53,10 +65,21 @@ class Comment extends React.PureComponent<ICommentProps> {
                             <span className='handle'>{this.props.comment.attributedTo.account}</span>
                         </div>
                     </a>
-                    <span aria-hidden="true">·</span>
                     <a href={this.props.comment.url} className='permalink'>
                         <time>{this.props.comment.publishedAt.toLocaleString()}</time>
                     </a>
+                    <button className="context-menu" aria-label="More" onClick={() => this.onClickShowMenu()}>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="24" height="24" stroke-width="1.5" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+                        </svg>
+                        { this.state.showMenu && 
+                            <CommentMenu 
+                                url={this.props.comment.url}
+                                commenterUrl={this.props.comment.attributedTo.url}
+                                commenterAccount={this.props.comment.attributedTo.account}
+                            />
+                        }
+                    </button>
                 </summary>
             }
             {   this.props.comment.summary ? 

diff --git a/ui/src/components/Comments/styles.scss b/ui/src/components/Comments/styles.scss
@@ -23,8 +23,6 @@
     font-size: .75rem;
     line-height: 1rem;
     width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
   }
 
   details > summary::-webkit-details-marker {