This repository has been archived by the owner on Jan 17, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 128
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update shot delete confirmation dialog. (#4186)
- Loading branch information
Showing
8 changed files
with
227 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| const React = require("react"); | ||
| const PropTypes = require("prop-types"); | ||
| const { Localized } = require("fluent-react/compat"); | ||
|
|
||
| exports.DeleteShotButton = class DeleteShotButton extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.elRef = React.createRef(); | ||
| this.trashButtonRef = React.createRef(); | ||
| this.state = {confirmationPanelOpen: false} | ||
| this.maybeCloseDeleteConfirmation = this.maybeCloseDeleteConfirmation.bind(this); | ||
| } | ||
|
|
||
| componentDidUpdate() { | ||
| if (this.state.confirmationPanelOpen) { | ||
| document.addEventListener("mousedown", this.maybeCloseDeleteConfirmation); | ||
| } else { | ||
| document.removeEventListener("mousedown", this.maybeCloseDeleteConfirmation); | ||
| } | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| document.removeEventListener("mousedown", this.maybeCloseDeleteConfirmation); | ||
| } | ||
|
|
||
| onClickDelete(e) { | ||
| e.stopPropagation(); | ||
| e.preventDefault(); | ||
| this.props.clickDeleteHandler && this.props.clickDeleteHandler(); | ||
| this.setState({confirmationPanelOpen: true}); | ||
| } | ||
|
|
||
| onConfirmDelete(e) { | ||
| e.stopPropagation(); | ||
| this.props.confirmDeleteHandler && this.props.confirmDeleteHandler(); | ||
| this.setState({confirmationPanelOpen: false}); | ||
| } | ||
|
|
||
| onCancelDelete(e) { | ||
| e.stopPropagation(); | ||
| this.props.cancelDeleteHandler && this.props.cancelDeleteHandler(); | ||
| this.setState({confirmationPanelOpen: false}); | ||
| } | ||
|
|
||
| maybeCloseDeleteConfirmation(e) { | ||
| if (this.elRef.current === e.target || this.elRef.current.contains(e.target)) { | ||
| return; | ||
| } | ||
|
|
||
| this.onCancelDelete(e); | ||
| } | ||
|
|
||
| render() { | ||
| let rightAlign = ""; | ||
| if (this.trashButtonRef.current && (this.trashButtonRef.current.getBoundingClientRect().left + 320) > document.body.scrollWidth) { | ||
| rightAlign = "right-align"; | ||
| } | ||
|
|
||
| let confirmationPanel = null, deletePanelOpenClass = null; | ||
| if (this.state.confirmationPanelOpen) { | ||
| confirmationPanel = <div className={`delete-confirmation-dialog ${rightAlign}`} ref={this.elRef}> | ||
| <div className="triangle"><div className="triangle-inner"></div></div> | ||
| <Localized id="shotDeleteConfirmationMessage"> | ||
| <div className="delete-confirmation-message">Are you sure you want to delete this shot?</div> | ||
| </Localized> | ||
| <div className="delete-confirmation-buttons"> | ||
| <Localized id="shotDeleteCancel"> | ||
| <button className="button primary" title="Cancel" onClick={ this.onCancelDelete.bind(this) }>Cancel</button> | ||
| </Localized> | ||
| <Localized id="shotDeleteConfirm"> | ||
| <button className="button secondary" title="Delete" onClick={ this.onConfirmDelete.bind(this) }>Delete</button> | ||
| </Localized> | ||
| </div> | ||
| </div>; | ||
| deletePanelOpenClass = "active"; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="delete-shot-button"> | ||
| <Localized id="shotPageDeleteButton"> | ||
| <button className={`button transparent trash ${deletePanelOpenClass}`} | ||
| title="Delete this shot permanently" | ||
| onClick={this.onClickDelete.bind(this)} | ||
| ref={this.trashButtonRef}></button> | ||
| </Localized> | ||
| { confirmationPanel } | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| exports.DeleteShotButton.propTypes = { | ||
| clickDeleteHandler: PropTypes.func, | ||
| confirmDeleteHandler: PropTypes.func, | ||
| cancelDeleteHandler: PropTypes.func | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| .delete-shot-button { | ||
| position: relative; | ||
| } | ||
|
|
||
| .delete-confirmation-dialog { | ||
| background-color: #fff; | ||
| border: 1px solid #c7c7c7 ; | ||
| border-radius: 3px; | ||
| box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(0, 0, 0, 0.29), inset 0 0 0 0 #fff; | ||
| min-height: 114px; | ||
| min-width: 320px; | ||
| padding: 18px; | ||
| position: absolute; | ||
| left: 3px; | ||
| top: 47px; | ||
| z-index: 3; | ||
|
|
||
| .triangle { | ||
| position: absolute; | ||
| width: 0; | ||
| height: 0; | ||
| border-left: 9px solid transparent; | ||
| border-right: 9px solid transparent; | ||
| border-bottom: 15px solid $light-border; | ||
| top: -15px; | ||
| left: 8px; | ||
|
|
||
| .triangle-inner { | ||
| position: absolute; | ||
| width: 0; | ||
| height: 0; | ||
| border-left: 8px solid transparent; | ||
| border-right: 8px solid transparent; | ||
| border-bottom: 13px solid #fff; | ||
| left: -8px; | ||
| top: 2px; | ||
| } | ||
| } | ||
| .delete-confirmation-message { | ||
| font-size: 15px; | ||
| } | ||
| .delete-confirmation-buttons { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| margin-top: 18px; | ||
|
|
||
| button { | ||
| &.primary { | ||
| width: 135px; | ||
| height: 40px; | ||
| } | ||
| &.secondary { | ||
| border: 1px solid #c7c7c7; | ||
| width: 133px; | ||
| height: 38px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &.right-align { | ||
| left: -281px; | ||
| .triangle { | ||
| left: 292px; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| @import "partials/partials"; | ||
| @import "partials/delete-confirmation"; | ||
|
|
||
| //Shot index page styles | ||
|
|
||
|
|
||