diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx index a08b1159b16..33835f9a05e 100644 --- a/app/assets/javascripts/components/components/icon_button.jsx +++ b/app/assets/javascripts/components/components/icon_button.jsx @@ -31,7 +31,7 @@ const IconButton = React.createClass({ e.preventDefault(); if (!this.props.disabled) { - this.props.onClick(); + this.props.onClick(e); } }, diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index 65db8f79bbb..c4d5f829bcf 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -27,6 +27,7 @@ const Status = React.createClass({ onOpenMedia: React.PropTypes.func, onBlock: React.PropTypes.func, me: React.PropTypes.number, + boostModal: React.PropTypes.bool, muted: React.PropTypes.bool }, diff --git a/app/assets/javascripts/components/components/status_action_bar.jsx b/app/assets/javascripts/components/components/status_action_bar.jsx index 4ebb76ea75b..02424e77c57 100644 --- a/app/assets/javascripts/components/components/status_action_bar.jsx +++ b/app/assets/javascripts/components/components/status_action_bar.jsx @@ -46,8 +46,8 @@ const StatusActionBar = React.createClass({ this.props.onFavourite(this.props.status); }, - handleReblogClick () { - this.props.onReblog(this.props.status); + handleReblogClick (e) { + this.props.onReblog(this.props.status, e); }, handleDeleteClick () { diff --git a/app/assets/javascripts/components/containers/status_container.jsx b/app/assets/javascripts/components/containers/status_container.jsx index fd3fbe4c327..f92c1cdf445 100644 --- a/app/assets/javascripts/components/containers/status_container.jsx +++ b/app/assets/javascripts/components/containers/status_container.jsx @@ -26,7 +26,8 @@ const makeMapStateToProps = () => { const mapStateToProps = (state, props) => ({ status: getStatus(state, props.id), - me: state.getIn(['meta', 'me']) + me: state.getIn(['meta', 'me']), + boostModal: state.getIn(['meta', 'boost_modal']) }); return mapStateToProps; @@ -38,11 +39,19 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(replyCompose(status, router)); }, - onReblog (status) { + onModalReblog (status) { + dispatch(reblog(status)); + }, + + onReblog (status, e) { if (status.get('reblogged')) { dispatch(unreblog(status)); } else { - dispatch(reblog(status)); + if (e.altKey || !this.boostModal) { + this.onModalReblog(status); + } else { + dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog })); + } } }, diff --git a/app/assets/javascripts/components/features/status/components/action_bar.jsx b/app/assets/javascripts/components/features/status/components/action_bar.jsx index 2aebcd7098f..fdcb8b98068 100644 --- a/app/assets/javascripts/components/features/status/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/status/components/action_bar.jsx @@ -37,8 +37,8 @@ const ActionBar = React.createClass({ this.props.onReply(this.props.status); }, - handleReblogClick () { - this.props.onReblog(this.props.status); + handleReblogClick (e) { + this.props.onReblog(this.props.status, e); }, handleFavouriteClick () { diff --git a/app/assets/javascripts/components/features/status/index.jsx b/app/assets/javascripts/components/features/status/index.jsx index f98fe1b013a..91302bc3f5a 100644 --- a/app/assets/javascripts/components/features/status/index.jsx +++ b/app/assets/javascripts/components/features/status/index.jsx @@ -38,7 +38,8 @@ const makeMapStateToProps = () => { status: getStatus(state, Number(props.params.statusId)), ancestorsIds: state.getIn(['timelines', 'ancestors', Number(props.params.statusId)]), descendantsIds: state.getIn(['timelines', 'descendants', Number(props.params.statusId)]), - me: state.getIn(['meta', 'me']) + me: state.getIn(['meta', 'me']), + boostModal: state.getIn(['meta', 'boost_modal']) }); return mapStateToProps; @@ -55,7 +56,8 @@ const Status = React.createClass({ status: ImmutablePropTypes.map, ancestorsIds: ImmutablePropTypes.list, descendantsIds: ImmutablePropTypes.list, - me: React.PropTypes.number + me: React.PropTypes.number, + boostModal: React.PropTypes.bool }, mixins: [PureRenderMixin], @@ -82,11 +84,19 @@ const Status = React.createClass({ this.props.dispatch(replyCompose(status, this.context.router)); }, - handleReblogClick (status) { + handleModalReblog (status) { + this.props.dispatch(reblog(status)); + }, + + handleReblogClick (status, e) { if (status.get('reblogged')) { this.props.dispatch(unreblog(status)); } else { - this.props.dispatch(reblog(status)); + if (e.altKey || !this.props.boostModal) { + this.handleModalReblog(status); + } else { + 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 00000000000..8b915418361 --- /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 d2ae5e145ed..e7ac02dde64 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 a2e6421f82f..6688f90f8d1 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 8c76ddf999f..316398874b9 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -1215,7 +1215,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; @@ -1227,7 +1227,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%; } @@ -1936,3 +1936,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%); + } + } +} diff --git a/app/controllers/settings/preferences_controller.rb b/app/controllers/settings/preferences_controller.rb index 60400e465f7..c758e4ef2fa 100644 --- a/app/controllers/settings/preferences_controller.rb +++ b/app/controllers/settings/preferences_controller.rb @@ -23,8 +23,9 @@ class Settings::PreferencesController < ApplicationController } current_user.settings['default_privacy'] = user_params[:setting_default_privacy] + current_user.settings['boost_modal'] = user_params[:setting_boost_modal] == '1' - if current_user.update(user_params.except(:notification_emails, :interactions, :setting_default_privacy)) + if current_user.update(user_params.except(:notification_emails, :interactions, :setting_default_privacy, :setting_boost_modal)) redirect_to settings_preferences_path, notice: I18n.t('generic.changes_saved_msg') else render action: :show @@ -34,6 +35,6 @@ class Settings::PreferencesController < ApplicationController private def user_params - params.require(:user).permit(:locale, :setting_default_privacy, notification_emails: [:follow, :follow_request, :reblog, :favourite, :mention, :digest], interactions: [:must_be_follower, :must_be_following]) + params.require(:user).permit(:locale, :setting_default_privacy, :setting_boost_modal, notification_emails: [:follow, :follow_request, :reblog, :favourite, :mention, :digest], interactions: [:must_be_follower, :must_be_following]) end end diff --git a/app/models/user.rb b/app/models/user.rb index bf2916d9046..d2aa5d809f8 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -26,4 +26,8 @@ class User < ApplicationRecord def setting_default_privacy settings.default_privacy || (account.locked? ? 'private' : 'public') end + + def setting_boost_modal + settings.boost_modal + end end diff --git a/app/views/home/initial_state.json.rabl b/app/views/home/initial_state.json.rabl index 71949ab0ecb..caee2bfc73e 100644 --- a/app/views/home/initial_state.json.rabl +++ b/app/views/home/initial_state.json.rabl @@ -5,6 +5,7 @@ node(:meta) do access_token: @token, locale: I18n.locale, me: current_account.id, + boost_modal: current_account.user.setting_boost_modal, } end diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml index 64cf32c3aca..e819429b626 100644 --- a/app/views/settings/preferences/show.html.haml +++ b/app/views/settings/preferences/show.html.haml @@ -22,5 +22,8 @@ = ff.input :must_be_follower, as: :boolean, wrapper: :with_label = ff.input :must_be_following, as: :boolean, wrapper: :with_label + .fields-group + = f.input :setting_boost_modal, as: :boolean, wrapper: :with_label + .actions = f.button :button, t('generic.save_changes'), type: :submit diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml index dfc67fdfd2b..6b6657a98d8 100644 --- a/config/locales/simple_form.en.yml +++ b/config/locales/simple_form.en.yml @@ -29,6 +29,7 @@ en: setting_default_privacy: Post privacy type: Import type username: Username + setting_boost_modal: Show confirmation dialog before boosting interactions: must_be_follower: Block notifications from non-followers must_be_following: Block notifications from people you don't follow diff --git a/config/settings.yml b/config/settings.yml index 038a84c55b1..d364120dbd3 100644 --- a/config/settings.yml +++ b/config/settings.yml @@ -14,6 +14,7 @@ defaults: &defaults site_contact_email: '' open_registrations: true closed_registrations_message: '' + boost_modal: true notification_emails: follow: false reblog: false