diff --git a/app/assets/javascripts/components/containers/status_container.jsx b/app/assets/javascripts/components/containers/status_container.jsx
index fd3fbe4c3..918fb91a0 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 f98fe1b01..8b5019b57 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 000000000..8b9154183
--- /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 d2ae5e145..e7ac02dde 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 a2e6421f8..6688f90f8 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 696e89418..d31f148a2 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%);
+ }
+ }
+}