diff options
Diffstat (limited to 'app/javascript/flavours')
9 files changed, 318 insertions, 115 deletions
diff --git a/app/javascript/flavours/glitch/actions/reports.js b/app/javascript/flavours/glitch/actions/reports.js index ad4fd18a9..80c3b3280 100644 --- a/app/javascript/flavours/glitch/actions/reports.js +++ b/app/javascript/flavours/glitch/actions/reports.js @@ -10,6 +10,7 @@ export const REPORT_SUBMIT_FAIL = 'REPORT_SUBMIT_FAIL'; export const REPORT_STATUS_TOGGLE = 'REPORT_STATUS_TOGGLE'; export const REPORT_COMMENT_CHANGE = 'REPORT_COMMENT_CHANGE'; +export const REPORT_FORWARD_CHANGE = 'REPORT_FORWARD_CHANGE'; export function initReport(account, status) { return dispatch => { @@ -45,6 +46,7 @@ export function submitReport() { account_id: getState().getIn(['reports', 'new', 'account_id']), status_ids: getState().getIn(['reports', 'new', 'status_ids']), comment: getState().getIn(['reports', 'new', 'comment']), + forward: getState().getIn(['reports', 'new', 'forward']), }).then(response => { dispatch(closeModal()); dispatch(submitReportSuccess(response.data)); @@ -78,3 +80,10 @@ export function changeReportComment(comment) { comment, }; }; + +export function changeReportForward(forward) { + return { + type: REPORT_FORWARD_CHANGE, + forward, + }; +}; diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index d63b6a639..e8105e705 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import StatusPrepend from './status_prepend'; import StatusHeader from './status_header'; +import StatusIcons from './status_icons'; import StatusContent from './status_content'; import StatusActionBar from './status_action_bar'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -392,23 +393,31 @@ export default class Status extends ImmutablePureComponent { ref={handleRef} tabIndex='0' > - {prepend && account ? ( - <StatusPrepend - type={prepend} - account={account} - parseClick={parseClick} - notificationId={this.props.notificationId} + <header className='status__info'> + {prepend && account ? ( + <StatusPrepend + type={prepend} + account={account} + parseClick={parseClick} + notificationId={this.props.notificationId} + /> + ) : null} + {!muted ? ( + <StatusHeader + status={status} + friend={account} + collapsed={isExpanded === false} + parseClick={parseClick} + /> + ) : null} + <StatusIcons + status={status} + mediaIcon={mediaIcon} + collapsible={settings.getIn(['collapsed', 'enabled'])} + collapsed={isExpanded === false} + setExpansion={setExpansion} /> - ) : null} - <StatusHeader - status={status} - friend={account} - mediaIcon={mediaIcon} - collapsible={settings.getIn(['collapsed', 'enabled'])} - collapsed={isExpanded === false} - parseClick={parseClick} - setExpansion={setExpansion} - /> + </header> <StatusContent status={status} media={media} @@ -418,7 +427,7 @@ export default class Status extends ImmutablePureComponent { parseClick={parseClick} disabled={!router} /> - {isExpanded !== false ? ( + {isExpanded !== false && !muted ? ( <StatusActionBar {...other} status={status} diff --git a/app/javascript/flavours/glitch/components/status_header.js b/app/javascript/flavours/glitch/components/status_header.js index e8c7a771e..65458e3f0 100644 --- a/app/javascript/flavours/glitch/components/status_header.js +++ b/app/javascript/flavours/glitch/components/status_header.js @@ -2,48 +2,20 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages, injectIntl } from 'react-intl'; // Mastodon imports. import Avatar from './avatar'; import AvatarOverlay from './avatar_overlay'; import DisplayName from './display_name'; -import IconButton from './icon_button'; -import VisibilityIcon from './status_visibility_icon'; -// Messages for use with internationalization stuff. -const messages = defineMessages({ - collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, - uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, - public: { id: 'privacy.public.short', defaultMessage: 'Public' }, - unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, - private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, - direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, -}); - -@injectIntl export default class StatusHeader extends React.PureComponent { static propTypes = { status: ImmutablePropTypes.map.isRequired, friend: ImmutablePropTypes.map, - mediaIcon: PropTypes.string, - collapsible: PropTypes.bool, - collapsed: PropTypes.bool, parseClick: PropTypes.func.isRequired, - setExpansion: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, }; - // Handles clicks on collapsed button - handleCollapsedClick = (e) => { - const { collapsed, setExpansion } = this.props; - if (e.button === 0) { - setExpansion(collapsed ? null : false); - e.preventDefault(); - } - } - // Handles clicks on account name/image handleAccountClick = (e) => { const { status, parseClick } = this.props; @@ -55,16 +27,12 @@ export default class StatusHeader extends React.PureComponent { const { status, friend, - mediaIcon, - collapsible, - collapsed, - intl, } = this.props; const account = status.get('account'); return ( - <header className='status__info'> + <div className='status__info__account' > <a href={account.get('url')} target='_blank' @@ -87,33 +55,7 @@ export default class StatusHeader extends React.PureComponent { > <DisplayName account={account} /> </a> - <div className='status__info__icons'> - {mediaIcon ? ( - <i - className={`fa fa-fw fa-${mediaIcon}`} - aria-hidden='true' - /> - ) : null} - {( - <VisibilityIcon visibility={status.get('visibility')} /> - )} - {collapsible ? ( - <IconButton - className='status__collapse-button' - animate flip - active={collapsed} - title={ - collapsed ? - intl.formatMessage(messages.uncollapse) : - intl.formatMessage(messages.collapse) - } - icon='angle-double-up' - onClick={this.handleCollapsedClick} - /> - ) : null} - </div> - - </header> + </div> ); } diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js new file mode 100644 index 000000000..2e558cc77 --- /dev/null +++ b/app/javascript/flavours/glitch/components/status_icons.js @@ -0,0 +1,81 @@ +// Package imports. +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages, injectIntl } from 'react-intl'; + +// Mastodon imports. +import IconButton from './icon_button'; +import VisibilityIcon from './status_visibility_icon'; + +// Messages for use with internationalization stuff. +const messages = defineMessages({ + collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, + uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, + public: { id: 'privacy.public.short', defaultMessage: 'Public' }, + unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, + private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, + direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, +}); + +@injectIntl +export default class StatusIcons extends React.PureComponent { + + static propTypes = { + status: ImmutablePropTypes.map.isRequired, + mediaIcon: PropTypes.string, + collapsible: PropTypes.bool, + collapsed: PropTypes.bool, + setExpansion: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + // Handles clicks on collapsed button + handleCollapsedClick = (e) => { + const { collapsed, setExpansion } = this.props; + if (e.button === 0) { + setExpansion(collapsed ? null : false); + e.preventDefault(); + } + } + + // Rendering. + render () { + const { + status, + mediaIcon, + collapsible, + collapsed, + intl, + } = this.props; + + return ( + <div className='status__info__icons'> + {mediaIcon ? ( + <i + className={`fa fa-fw fa-${mediaIcon}`} + aria-hidden='true' + /> + ) : null} + {( + <VisibilityIcon visibility={status.get('visibility')} /> + )} + {collapsible ? ( + <IconButton + className='status__collapse-button' + animate flip + active={collapsed} + title={ + collapsed ? + intl.formatMessage(messages.uncollapse) : + intl.formatMessage(messages.collapse) + } + icon='angle-double-up' + onClick={this.handleCollapsedClick} + /> + ) : null} + </div> + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/report/components/status_check_box.js b/app/javascript/flavours/glitch/features/report/components/status_check_box.js index cc9232201..d72a0fd07 100644 --- a/app/javascript/flavours/glitch/features/report/components/status_check_box.js +++ b/app/javascript/flavours/glitch/features/report/components/status_check_box.js @@ -2,6 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Toggle from 'react-toggle'; +import noop from 'lodash/noop'; +import StatusContent from 'flavours/glitch/components/status_content'; +import { MediaGallery, Video } from 'flavours/glitch/util/async-components'; +import Bundle from 'flavours/glitch/features/ui/components/bundle'; export default class StatusCheckBox extends React.PureComponent { @@ -14,18 +18,50 @@ export default class StatusCheckBox extends React.PureComponent { render () { const { status, checked, onToggle, disabled } = this.props; - const content = { __html: status.get('contentHtml') }; + let media = null; if (status.get('reblog')) { return null; } + if (status.get('media_attachments').size > 0) { + if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) { + + } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { + const video = status.getIn(['media_attachments', 0]); + + media = ( + <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} > + {Component => ( + <Component + preview={video.get('preview_url')} + src={video.get('url')} + width={239} + height={110} + inline + sensitive={status.get('sensitive')} + onOpenVideo={noop} + /> + )} + </Bundle> + ); + } else { + media = ( + <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} > + {Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={noop} />} + </Bundle> + ); + } + } + return ( <div className='status-check-box'> - <div - className='status__content' - dangerouslySetInnerHTML={content} - /> + <div className='status-check-box__status'> + <StatusContent + status={status} + media={media} + /> + </div> <div className='status-check-box-toggle'> <Toggle checked={checked} onChange={onToggle} disabled={disabled} /> diff --git a/app/javascript/flavours/glitch/features/ui/components/report_modal.js b/app/javascript/flavours/glitch/features/ui/components/report_modal.js index b4dc1e3d6..b5fc33d03 100644 --- a/app/javascript/flavours/glitch/features/ui/components/report_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/report_modal.js @@ -1,6 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; -import { changeReportComment, submitReport } from 'flavours/glitch/actions/reports'; +import { changeReportComment, changeReportForward, submitReport } from 'flavours/glitch/actions/reports'; import { refreshAccountTimeline } from 'flavours/glitch/actions/timelines'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; @@ -10,8 +10,11 @@ import StatusCheckBox from 'flavours/glitch/features/report/containers/status_ch import { OrderedSet } from 'immutable'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Button from 'flavours/glitch/components/button'; +import Toggle from 'react-toggle'; +import IconButton from '../../../components/icon_button'; const messages = defineMessages({ + close: { id: 'lightbox.close', defaultMessage: 'Close' }, placeholder: { id: 'report.placeholder', defaultMessage: 'Additional comments' }, submit: { id: 'report.submit', defaultMessage: 'Submit' }, }); @@ -26,6 +29,7 @@ const makeMapStateToProps = () => { isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']), account: getAccount(state, accountId), comment: state.getIn(['reports', 'new', 'comment']), + forward: state.getIn(['reports', 'new', 'forward']), statusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}`, 'items'])).union(state.getIn(['reports', 'new', 'status_ids'])), }; }; @@ -42,14 +46,19 @@ export default class ReportModal extends ImmutablePureComponent { account: ImmutablePropTypes.map, statusIds: ImmutablePropTypes.orderedSet.isRequired, comment: PropTypes.string.isRequired, + forward: PropTypes.bool, dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; - handleCommentChange = (e) => { + handleCommentChange = e => { this.props.dispatch(changeReportComment(e.target.value)); } + handleForwardChange = e => { + this.props.dispatch(changeReportForward(e.target.checked)); + } + handleSubmit = () => { this.props.dispatch(submitReport()); } @@ -65,26 +74,25 @@ export default class ReportModal extends ImmutablePureComponent { } render () { - const { account, comment, intl, statusIds, isSubmitting } = this.props; + const { account, comment, intl, statusIds, isSubmitting, forward, onClose } = this.props; if (!account) { return null; } + const domain = account.get('acct').split('@')[1]; + return ( <div className='modal-root__modal report-modal'> <div className='report-modal__target'> + <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} /> <FormattedMessage id='report.target' defaultMessage='Report {target}' values={{ target: <strong>{account.get('acct')}</strong> }} /> </div> <div className='report-modal__container'> - <div className='report-modal__statuses'> - <div> - {statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)} - </div> - </div> - <div className='report-modal__comment'> + <p><FormattedMessage id='report.hint' defaultMessage='The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:' /></p> + <textarea className='setting-text light' placeholder={intl.formatMessage(messages.placeholder)} @@ -92,11 +100,26 @@ export default class ReportModal extends ImmutablePureComponent { onChange={this.handleCommentChange} disabled={isSubmitting} /> + + {domain && ( + <div> + <p><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p> + + <div className='setting-toggle'> + <Toggle id='report-forward' checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} /> + <label htmlFor='report-forward' className='setting-toggle__label'><FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} /></label> + </div> + </div> + )} + + <Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /> </div> - </div> - <div className='report-modal__action-bar'> - <Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} /> + <div className='report-modal__statuses'> + <div> + {statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)} + </div> + </div> </div> </div> ); diff --git a/app/javascript/flavours/glitch/reducers/reports.js b/app/javascript/flavours/glitch/reducers/reports.js index c18fbcdc6..fdcfb14a0 100644 --- a/app/javascript/flavours/glitch/reducers/reports.js +++ b/app/javascript/flavours/glitch/reducers/reports.js @@ -6,6 +6,7 @@ import { REPORT_CANCEL, REPORT_STATUS_TOGGLE, REPORT_COMMENT_CHANGE, + REPORT_FORWARD_CHANGE, } from 'flavours/glitch/actions/reports'; import { Map as ImmutableMap, Set as ImmutableSet } from 'immutable'; @@ -15,6 +16,7 @@ const initialState = ImmutableMap({ account_id: null, status_ids: ImmutableSet(), comment: '', + forward: false, }), }); @@ -42,6 +44,8 @@ export default function reports(state = initialState, action) { }); case REPORT_COMMENT_CHANGE: return state.setIn(['new', 'comment'], action.comment); + case REPORT_FORWARD_CHANGE: + return state.setIn(['new', 'forward'], action.forward); case REPORT_SUBMIT_REQUEST: return state.setIn(['new', 'isSubmitting'], true); case REPORT_SUBMIT_FAIL: diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 1ac399fa1..d424b1eda 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -476,8 +476,7 @@ .boost-modal__action-bar, .favourite-modal__action-bar, .confirmation-modal__action-bar, -.mute-modal__action-bar, -.report-modal__action-bar { +.mute-modal__action-bar { display: flex; justify-content: space-between; background: $ui-secondary-color; @@ -523,21 +522,103 @@ vertical-align: middle; } +.report-modal { + width: 90vw; + max-width: 700px; +} + +.report-modal__container { + display: flex; + border-top: 1px solid $ui-secondary-color; + + @media screen and (max-width: 480px) { + flex-wrap: wrap; + overflow-y: auto; + } +} + .report-modal__statuses, .report-modal__comment { - padding: 10px; + box-sizing: border-box; + width: 50%; + + @media screen and (max-width: 480px) { + width: 100%; + } } .report-modal__statuses { + flex: 1 1 auto; min-height: 20vh; max-height: 40vh; overflow-y: auto; overflow-x: hidden; + + @media screen and (max-width: 480px) { + max-height: 10vh; + } } .report-modal__comment { + padding: 20px; + border-right: 1px solid $ui-secondary-color; + max-width: 320px; + + p { + font-size: 14px; + line-height: 20px; + margin-bottom: 20px; + } + .setting-text { - margin-top: 10px; + display: block; + box-sizing: border-box; + width: 100%; + margin: 0; + color: $ui-base-color; + background: $white; + padding: 10px; + font-family: inherit; + font-size: 14px; + resize: vertical; + border: 0; + outline: 0; + border-radius: 4px; + border: 1px solid $ui-secondary-color; + margin-bottom: 20px; + + &:focus { + border: 1px solid darken($ui-secondary-color, 8%); + } + } + + .setting-toggle { + margin-top: 20px; + margin-bottom: 24px; + + &__label { + color: $ui-base-color; + font-size: 14px; + } + } + + @media screen and (max-width: 480px) { + padding: 10px; + max-width: 100%; + order: 2; + + .setting-toggle { + margin-bottom: 4px; + } + } +} + +.report-modal__target { + padding: 20px; + + .media-modal__close { + top: 19px; + right: 15px; } } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 1ee5cba9e..dfe60e2be 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -8,7 +8,6 @@ padding: 0 12px; font-size: 15px; line-height: 20px; - color: $primary-text-color; word-wrap: break-word; font-weight: 400; overflow: visible; @@ -254,7 +253,7 @@ } .notification__message { - margin: -10px 0px 10px 32px; + margin: -10px 0px 10px 0; } } @@ -287,45 +286,58 @@ overflow: hidden; } -.status__info .status__display-name { +.status__info__account .status__display-name { display: block; max-width: 100%; padding-right: 25px; } .status__info { - display: flex; - margin: 2px 0 5px; + position: relative; + padding: 2px 0 5px; font-size: 15px; line-height: 24px; } .status__info__icons { - flex: none; - position: relative; + position: absolute; color: lighten($ui-base-color, 26%); + top: 0; + right: 0; .status__visibility-icon { padding-left: 6px; } } +.status__info__account { + display: flex; +} + .status-check-box { border-bottom: 1px solid $ui-secondary-color; display: flex; - .status__content { - flex: 1 1 auto; - padding: 10px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + .status-check-box__status { + margin: 10px 0 10px 10px; + flex: 1; + + .media-gallery { + max-width: 250px; + } .status__content { - color: #3a3a3a; - a { - color: #005aa9; - } + padding: 0; + white-space: normal; + } + + .video-player { + margin-top: 8px; + max-width: 250px; + } + + .media-gallery__item-thumbnail { + cursor: default; } } } @@ -527,6 +539,12 @@ text-decoration: none; } } + + .status__content { + margin-top: -15px; + margin-bottom: 0; + padding-top: 0; + } } .status__relative-time, |