diff options
| author | anika-ahluwalia <anika.ahluwalia@gmail.com> | 2020-07-08 13:22:49 -0500 |
|---|---|---|
| committer | anika-ahluwalia <anika.ahluwalia@gmail.com> | 2020-07-08 13:22:49 -0500 |
| commit | 2b1af3fab4cc51f8cbb577ed51842cec1774a355 (patch) | |
| tree | ba309a00472a9249c9d155470c9e8e6ee18a7e88 /src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx | |
| parent | 067fe1227d1acedb78dc3a1615c15ae936f3f677 (diff) | |
restructured textbox comment, cleaned menu UI
Diffstat (limited to 'src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx')
| -rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx | 53 |
1 files changed, 13 insertions, 40 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 56826e5c7..79b09b374 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -241,52 +241,22 @@ export class FormattedTextBoxComment { } if (target?.author) { FormattedTextBoxComment.showCommentbox("", view, nbef); - const docPreview = <div style={{ backgroundColor: "white", border: "8px solid white" }}> + + + const docPreview = <div className="FormattedTextBoxComment-title"> {target.title} <div className="wrapper" style={{ float: "right" }}> - <div title="Delete link" className="FormattedTextBoxComment-button" style={{ - display: "inline", - paddingLeft: "6px", - paddingRight: "6px", - paddingTop: "2.5px", - paddingBottom: "2.5px", - width: "20px", - height: "20px", - margin: 0, - marginRight: "6px", - borderRadius: "50%", - pointerEvents: "auto", - backgroundColor: "rgb(38, 40, 41)", - color: "rgb(178, 181, 184)", - transition: "transform 0.2s", - textAlign: "center", - position: "relative" - }} ref={(r) => this._deleteRef = r}> - <FontAwesomeIcon className="FormattedTextBox-fa-icon" icon="trash" + <div title="Delete link" className="FormattedTextBoxComment-button" + ref={(r) => this._deleteRef = r}> + <FontAwesomeIcon className="FormattedTextBoxComment-fa-icon" icon="trash" color="white" size="sm" /></div> - <div title="Follow link" className="FormattedTextBoxComment-button" style={{ - display: "inline", - paddingLeft: "6px", - paddingRight: "6px", - paddingTop: "2.5px", - paddingBottom: "2.5px", - width: "20px", - height: "20px", - margin: 0, - marginRight: "6px", - borderRadius: "50%", - pointerEvents: "auto", - backgroundColor: "rgb(38, 40, 41)", - color: "rgb(178, 181, 184)", - transition: "transform 0.2s", - textAlign: "center", - position: "relative" - }} ref={(r) => this._followRef = r}> - <FontAwesomeIcon className="FormattedTextBox-fa-icon" icon="arrow-right" + <div title="Follow link" className="FormattedTextBoxComment-button" + ref={(r) => this._followRef = r}> + <FontAwesomeIcon className="FormattedTextBoxComment-fa-icon" icon="arrow-right" color="white" size="sm" /> </div> </div> - <div className="wrapper" style={{ + <div className="FormattedTextBoxComment-preview-wrapper" style={{ maxWidth: "180px", maxHeight: "168px", overflow: "hidden", overflowY: "hidden", paddingTop: "5px" }}> @@ -318,6 +288,9 @@ export class FormattedTextBoxComment { /> </div> </div>; + + + FormattedTextBoxComment.showCommentbox("", view, nbef); ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText); |