diff options
Diffstat (limited to 'frontend/src/components/objects')
| -rw-r--r-- | frontend/src/components/objects/Connection.js | 30 | ||||
| -rw-r--r-- | frontend/src/components/objects/MessageAction.js | 69 | ||||
| -rw-r--r-- | frontend/src/components/objects/MessageAction.scss | 8 |
3 files changed, 16 insertions, 91 deletions
diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js index b70b7f7..29c747a 100644 --- a/frontend/src/components/objects/Connection.js +++ b/frontend/src/components/objects/Connection.js @@ -16,11 +16,12 @@ */ import React, {Component} from "react"; -import {Form} from "react-bootstrap"; import backend from "../../backend"; import dispatcher from "../../dispatcher"; import {dateTimeToTime, durationBetween, formatSize} from "../../utils"; +import CommentDialog from "../dialogs/CommentDialog"; import ButtonField from "../fields/ButtonField"; +import TextField from "../fields/TextField"; import "./Connection.scss"; import CopyLinkPopover from "./CopyLinkPopover"; import LinkPopover from "./LinkPopover"; @@ -33,15 +34,7 @@ class Connection extends Component { update: false }; - handleAction = (name) => { - if (name === "hide") { - const enabled = !this.props.data.hidden; - backend.post(`/api/connections/${this.props.data.id}/${enabled ? "hide" : "show"}`) - .then((_) => { - this.props.onEnabled(!enabled); - this.setState({update: true}); - }); - } + handleAction = (name, comment) => { if (name === "mark") { const marked = this.props.data.marked; backend.post(`/api/connections/${this.props.data.id}/${marked ? "unmark" : "mark"}`) @@ -49,6 +42,9 @@ class Connection extends Component { this.props.onMarked(!marked); this.setState({update: true}); }); + } else if (name === "comment") { + this.props.onCommented(comment); + this.setState({showCommentDialog: false}); } }; @@ -70,9 +66,9 @@ class Connection extends Component { <span>Closed at {closedAt.toLocaleDateString() + " " + closedAt.toLocaleTimeString()}</span> </div>; - const commentPopoverContent = <div> - <span>Click to <strong>{conn.comment.length > 0 ? "edit" : "add"}</strong> comment</span> - {conn.comment && <Form.Control as="textarea" readOnly={true} rows={2} defaultValue={conn.comment}/>} + const commentPopoverContent = <div style={{"width": "250px"}}> + <span>Click to <strong>{conn.comment ? "edit" : "add"}</strong> comment</span> + {conn.comment && <TextField rows={3} value={conn.comment} readonly/>} </div>; return ( @@ -100,10 +96,16 @@ class Connection extends Component { onClick={() => this.handleAction("mark")}>!!</span>} content={<span>Mark this connection</span>} placement="right"/> <LinkPopover text={<span className={classNames("connection-icon", {"icon-enabled": conn.comment})} - onClick={() => this.handleAction("comment")}>@</span>} + onClick={() => this.setState({showCommentDialog: true})}>@</span>} content={commentPopoverContent} placement="right"/> <CopyLinkPopover text="#" value={conn.id} textClassName={classNames("connection-icon", {"icon-enabled": conn.hidden})}/> + { + this.state.showCommentDialog && + <CommentDialog onSave={(comment) => this.handleAction("comment", comment)} + initialComment={conn.comment} connectionId={conn.id}/> + } + </td> </tr> ); diff --git a/frontend/src/components/objects/MessageAction.js b/frontend/src/components/objects/MessageAction.js deleted file mode 100644 index e0c96e8..0000000 --- a/frontend/src/components/objects/MessageAction.js +++ /dev/null @@ -1,69 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - */ - -import React, {Component} from "react"; -import {Modal} from "react-bootstrap"; -import ButtonField from "../fields/ButtonField"; -import TextField from "../fields/TextField"; -import "./MessageAction.scss"; - -class MessageAction extends Component { - - constructor(props) { - super(props); - this.state = { - copyButtonText: "copy" - }; - this.actionValue = React.createRef(); - this.copyActionValue = this.copyActionValue.bind(this); - } - - copyActionValue() { - this.actionValue.current.select(); - document.execCommand("copy"); - this.setState({copyButtonText: "copied!"}); - setTimeout(() => this.setState({copyButtonText: "copy"}), 3000); - } - - render() { - return ( - <Modal - {...this.props} - show={true} - size="lg" - aria-labelledby="message-action-dialog" - centered - > - <Modal.Header> - <Modal.Title id="message-action-dialog"> - {this.props.actionName} - </Modal.Title> - </Modal.Header> - <Modal.Body> - <TextField readonly value={this.props.actionValue} textRef={this.actionValue} rows={15}/> - </Modal.Body> - <Modal.Footer className="dialog-footer"> - <ButtonField variant="green" bordered onClick={this.copyActionValue} - name={this.state.copyButtonText}/> - <ButtonField variant="red" bordered onClick={this.props.onHide} name="close"/> - </Modal.Footer> - </Modal> - ); - } -} - -export default MessageAction; diff --git a/frontend/src/components/objects/MessageAction.scss b/frontend/src/components/objects/MessageAction.scss deleted file mode 100644 index 996007b..0000000 --- a/frontend/src/components/objects/MessageAction.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import "../../colors"; - -.message-action-value { - font-size: 13px; - padding: 15px; - color: $color-primary-4; - background-color: $color-primary-2; -} |