From 01e5447e3582787bf2370b9a483963953bdbb075 Mon Sep 17 00:00:00 2001 From: blackle Date: Mon, 10 Apr 2017 22:28:52 -0400 Subject: [PATCH 1/3] 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 fd3fbe4c32..918fb91a02 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 f98fe1b013..8b5019b576 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 0000000000..8b91541836 --- /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 d2ae5e145e..e7ac02dde6 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 a2e6421f82..6688f90f8d 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 696e89418a..d31f148a21 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%); + } + } +} From f53fb6aa660834074bbbffac5b1fe5ea0cc85edf Mon Sep 17 00:00:00 2001 From: blackle Date: Tue, 11 Apr 2017 08:34:14 -0400 Subject: [PATCH 2/3] Bypass boost confirm modal if alt is pressed --- .../javascripts/components/components/icon_button.jsx | 2 +- .../components/components/status_action_bar.jsx | 4 ++-- .../components/containers/status_container.jsx | 8 ++++++-- .../components/features/status/components/action_bar.jsx | 4 ++-- .../javascripts/components/features/status/index.jsx | 8 ++++++-- 5 files changed, 17 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx index a08b1159b1..33835f9a05 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_action_bar.jsx b/app/assets/javascripts/components/components/status_action_bar.jsx index 4ebb76ea75..02424e77c5 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 918fb91a02..02746cc792 100644 --- a/app/assets/javascripts/components/containers/status_container.jsx +++ b/app/assets/javascripts/components/containers/status_container.jsx @@ -42,11 +42,15 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(reblog(status)); }, - onReblog (status) { + onReblog (status, e) { if (status.get('reblogged')) { dispatch(unreblog(status)); } else { - dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog })); + if (e.altKey) { + 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 2aebcd7098..fdcb8b9806 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 8b5019b576..94ccaf535f 100644 --- a/app/assets/javascripts/components/features/status/index.jsx +++ b/app/assets/javascripts/components/features/status/index.jsx @@ -86,11 +86,15 @@ const Status = React.createClass({ this.props.dispatch(reblog(status)); }, - handleReblogClick (status) { + handleReblogClick (status, e) { if (status.get('reblogged')) { this.props.dispatch(unreblog(status)); } else { - this.props.dispatch(openModal('BOOST', { status, onReblog: this.handleModalReblog })); + if (e.altKey) { + this.handleModalReblog(status); + } else { + this.props.dispatch(openModal('BOOST', { status, onReblog: this.handleModalReblog })); + } } }, From 06444bf050a267da7001c2801480c5fae3e1559e Mon Sep 17 00:00:00 2001 From: blackle Date: Tue, 11 Apr 2017 10:10:16 -0400 Subject: [PATCH 3/3] Allow user to disable the boost confirm dialog in preferences --- app/assets/javascripts/components/components/status.jsx | 1 + .../components/containers/status_container.jsx | 5 +++-- .../javascripts/components/features/status/index.jsx | 8 +++++--- app/controllers/settings/preferences_controller.rb | 5 +++-- app/models/user.rb | 4 ++++ app/views/home/initial_state.json.rabl | 1 + app/views/settings/preferences/show.html.haml | 3 +++ config/locales/simple_form.en.yml | 1 + config/settings.yml | 1 + 9 files changed, 22 insertions(+), 7 deletions(-) diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index 110d26c6d7..60bf531e52 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/containers/status_container.jsx b/app/assets/javascripts/components/containers/status_container.jsx index 02746cc792..f92c1cdf44 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; @@ -46,7 +47,7 @@ const mapDispatchToProps = (dispatch) => ({ if (status.get('reblogged')) { dispatch(unreblog(status)); } else { - if (e.altKey) { + 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/index.jsx b/app/assets/javascripts/components/features/status/index.jsx index 94ccaf535f..91302bc3f5 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], @@ -90,7 +92,7 @@ const Status = React.createClass({ if (status.get('reblogged')) { this.props.dispatch(unreblog(status)); } else { - if (e.altKey) { + if (e.altKey || !this.props.boostModal) { this.handleModalReblog(status); } else { this.props.dispatch(openModal('BOOST', { status, onReblog: this.handleModalReblog })); diff --git a/app/controllers/settings/preferences_controller.rb b/app/controllers/settings/preferences_controller.rb index 60400e465f..c758e4ef2f 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 bf2916d904..d2aa5d809f 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 71949ab0ec..caee2bfc73 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 64cf32c3ac..e819429b62 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 dfc67fdfd2..6b6657a98d 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 ffcc1eaa74..e4501e6e6e 100644 --- a/config/settings.yml +++ b/config/settings.yml @@ -7,6 +7,7 @@ defaults: &defaults site_contact_email: '' open_registrations: true closed_registrations_message: '' + boost_modal: true notification_emails: follow: false reblog: false