From 01e5447e3582787bf2370b9a483963953bdbb075 Mon Sep 17 00:00:00 2001 From: blackle Date: Mon, 10 Apr 2017 22:28:52 -0400 Subject: [PATCH 1/4] 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 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%); + } + } +} From f53fb6aa660834074bbbffac5b1fe5ea0cc85edf Mon Sep 17 00:00:00 2001 From: blackle Date: Tue, 11 Apr 2017 08:34:14 -0400 Subject: [PATCH 2/4] 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 a08b1159b..33835f9a0 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 4ebb76ea7..02424e77c 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 918fb91a0..02746cc79 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 2aebcd709..fdcb8b980 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 8b5019b57..94ccaf535 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/4] 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 110d26c6d..60bf531e5 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 02746cc79..f92c1cdf4 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 94ccaf535..91302bc3f 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 60400e465..c758e4ef2 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 bf2916d90..d2aa5d809 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 71949ab0e..caee2bfc7 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 64cf32c3a..e819429b6 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 dfc67fdfd..6b6657a98 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 ffcc1eaa7..e4501e6e6 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 From 960181fd99cad30f860356a04d8237c19e9c82c8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 11 Apr 2017 21:24:17 +0200 Subject: [PATCH 4/4] Fix look of the modals --- .../features/ui/components/boost_modal.jsx | 59 ++++++++----- app/assets/stylesheets/components.scss | 86 ++++++++++++++----- 2 files changed, 102 insertions(+), 43 deletions(-) diff --git a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx index 8b9154183..023abc6ac 100644 --- a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx +++ b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx @@ -1,27 +1,21 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import IconButton from '../../../components/icon_button'; import Button from '../../../components/button'; -import DetailedStatus from '../../status/components/detailed_status'; +import StatusContent from '../../../components/status_content'; +import Avatar from '../../../components/avatar'; +import RelativeTimestamp from '../../../components/relative_timestamp'; +import DisplayName from '../../../components/display_name'; 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({ + contextTypes: { + router: React.PropTypes.object + }, propTypes: { status: ImmutablePropTypes.map.isRequired, @@ -37,23 +31,42 @@ const BoostModal = React.createClass({ this.props.onClose(); }, - handleOpenMedia() { - // do nothing" + handleAccountClick (e) { + if (e.button === 0) { + e.preventDefault(); + this.props.onClose(); + this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`); + } }, render () { const { status, intl, onClose } = this.props; - const reblogButton = {intl.formatMessage(messages.reblog)}; - return (
- -
- +
+
+
+
+ +
+ + +
+ +
+ + + +
+ + +
-
-
); diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 316398874..d7473eddb 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -349,6 +349,43 @@ a.status__content__spoiler-link { .status__display-name { color: lighten($color1, 26%); } + + &.light { + .status__relative-time { + color: $color3; + } + + .status__display-name { + color: $color1; + } + + .display-name { + strong { + color: $color1; + } + + span { + color: $color3; + } + } + + .status__content { + color: $color1; + + a { + color: $color4; + } + + a.status__content__spoiler-link { + color: $color5; + background: $color3; + + &:hover { + background: lighten($color3, 8%); + } + } + } + } } .status-check-box { @@ -1938,30 +1975,39 @@ button.icon-button.active i.fa-retweet { } .boost-modal { - display: block; - - color: white; - background: lighten($color1, 13%); - + background: lighten($color2, 8%); + color: $color1; + border-radius: 8px; + overflow: hidden; max-width: 90vw; width: 480px; - - padding-top: 25px; - border-radius: 3px; - position: relative; + flex-direction: column; +} - & .detailed-status { - pointer-events: none; - max-height: 60vh; - overflow-y: auto; - } +.boost-modal__container { + padding: 10px; - & > .icon-button { - color: lighten($color1, 40%); - - &:hover, &:active { - color: lighten($color1, 60%); - } + .status { + user-select: text; + border-bottom: 0; + } +} + +.boost-modal__action-bar { + display: flex; + background: $color2; + padding: 10px; + line-height: 36px; + + & > div { + flex: 1 1 auto; + text-align: right; + color: lighten($color1, 33%); + padding-right: 10px; + } + + .button { + flex: 0 0 auto; } }