From 01e5447e3582787bf2370b9a483963953bdbb075 Mon Sep 17 00:00:00 2001 From: blackle Date: Mon, 10 Apr 2017 22:28:52 -0400 Subject: [PATCH] Add boost confirm modal --- .../containers/status_container.jsx | 6 +- .../components/features/status/index.jsx | 6 +- .../features/ui/components/boost_modal.jsx | 64 +++++++++++++++++++ .../features/ui/components/modal_root.jsx | 4 +- app/assets/stylesheets/boost.scss | 2 +- app/assets/stylesheets/components.scss | 33 +++++++++- 6 files changed, 109 insertions(+), 6 deletions(-) create mode 100644 app/assets/javascripts/components/features/ui/components/boost_modal.jsx diff --git a/app/assets/javascripts/components/containers/status_container.jsx b/app/assets/javascripts/components/containers/status_container.jsx index fd3fbe4c..918fb91a 100644 --- a/app/assets/javascripts/components/containers/status_container.jsx +++ b/app/assets/javascripts/components/containers/status_container.jsx @@ -38,11 +38,15 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(replyCompose(status, router)); }, + onModalReblog (status) { + dispatch(reblog(status)); + }, + onReblog (status) { if (status.get('reblogged')) { dispatch(unreblog(status)); } else { - dispatch(reblog(status)); + dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog })); } }, diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx index f98fe1b0..8b5019b5 100644 --- a/app/assets/javascripts/components/features/status/index.jsx +++ b/app/assets/javascripts/components/features/status/index.jsx @@ -82,11 +82,15 @@ const Status = React.createClass({ this.props.dispatch(replyCompose(status, this.context.router)); }, + handleModalReblog (status) { + this.props.dispatch(reblog(status)); + }, + handleReblogClick (status) { if (status.get('reblogged')) { this.props.dispatch(unreblog(status)); } else { - this.props.dispatch(reblog(status)); + this.props.dispatch(openModal('BOOST', { status, onReblog: this.handleModalReblog })); } }, diff --git a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx new file mode 100644 index 00000000..8b915418 --- /dev/null +++ b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx @@ -0,0 +1,64 @@ +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages, injectIntl } from 'react-intl'; +import IconButton from '../../../components/icon_button'; +import Button from '../../../components/button'; +import DetailedStatus from '../../status/components/detailed_status'; + +const messages = defineMessages({ + close: { id: 'lightbox.close', defaultMessage: 'Close' }, + reblog: { id: 'status.reblog', defaultMessage: 'Boost' } +}); + +const closeStyle = { + position: 'absolute', + top: '4px', + right: '4px' +}; + +const buttonContainerStyle = { + textAlign: 'right', + padding: '10px' +}; + +const BoostModal = React.createClass({ + + propTypes: { + status: ImmutablePropTypes.map.isRequired, + onReblog: React.PropTypes.func.isRequired, + onClose: React.PropTypes.func.isRequired, + intl: React.PropTypes.object.isRequired + }, + + mixins: [PureRenderMixin], + + handleReblog() { + this.props.onReblog(this.props.status); + this.props.onClose(); + }, + + handleOpenMedia() { + // do nothing" + }, + + render () { + const { status, intl, onClose } = this.props; + + const reblogButton = {intl.formatMessage(messages.reblog)}; + + return ( +
+ +
+ +
+
+
+
+ ); + } + +}); + +export default injectIntl(BoostModal); diff --git a/app/assets/javascripts/components/features/ui/components/modal_root.jsx b/app/assets/javascripts/components/features/ui/components/modal_root.jsx index d2ae5e14..e7ac02dd 100644 --- a/app/assets/javascripts/components/features/ui/components/modal_root.jsx +++ b/app/assets/javascripts/components/features/ui/components/modal_root.jsx @@ -1,9 +1,11 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import MediaModal from './media_modal'; +import BoostModal from './boost_modal'; import { TransitionMotion, spring } from 'react-motion'; const MODAL_COMPONENTS = { - 'MEDIA': MediaModal + 'MEDIA': MediaModal, + 'BOOST': BoostModal }; const ModalRoot = React.createClass({ diff --git a/app/assets/stylesheets/boost.scss b/app/assets/stylesheets/boost.scss index a2e6421f..6688f90f 100644 --- a/app/assets/stylesheets/boost.scss +++ b/app/assets/stylesheets/boost.scss @@ -2,6 +2,6 @@ @return '%23' + str-slice('#{$colour}', 2, -1) } -button i.fa-retweet { +button.icon-button i.fa-retweet { background-image: url("data:image/svg+xml;utf8,"); } diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 696e8941..d31f148a 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -1180,7 +1180,7 @@ a.status__content__spoiler-link { @import 'boost'; -button i.fa-retweet { +button.icon-button i.fa-retweet { height: 19px; width: 22px; background-position: 0 0; @@ -1192,7 +1192,7 @@ button i.fa-retweet { } } -button.active i.fa-retweet { +button.icon-button.active i.fa-retweet { transition-duration: 0.9s; background-position: 0 100%; } @@ -1896,3 +1896,32 @@ button.active i.fa-retweet { max-height: 80vh; } } + +.boost-modal { + display: block; + + color: white; + background: lighten($color1, 13%); + + max-width: 90vw; + width: 480px; + + padding-top: 25px; + border-radius: 3px; + + position: relative; + + & .detailed-status { + pointer-events: none; + max-height: 60vh; + overflow-y: auto; + } + + & > .icon-button { + color: lighten($color1, 40%); + + &:hover, &:active { + color: lighten($color1, 60%); + } + } +}