From 8d57c0e70ea76b2f482c0919fc815d40352ef477 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 15 Apr 2019 20:40:05 +0200 Subject: When selecting a toot via keyboard, ensure it is scrolled into view --- app/javascript/flavours/glitch/features/ui/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index a19b3abf1..348125c97 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -341,11 +341,16 @@ export default class UI extends React.Component { handleHotkeyFocusColumn = e => { const index = (e.key * 1) + 1; // First child is drawer, skip that const column = this.node.querySelector(`.column:nth-child(${index})`); + if (!column) return; + const container = column.querySelector('.scrollable'); - if (column) { - const status = column.querySelector('.focusable'); + if (container) { + const status = container.querySelector('.focusable'); if (status) { + if (container.scrollTop > status.offsetTop) { + status.scrollIntoView(true); + } status.focus(); } } -- cgit From e3c1472040105651fe55158b741c7ba92c1a7332 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 15 Apr 2019 22:23:05 +0200 Subject: Shift+click on column Back button to return to last pinable column --- .../flavours/glitch/components/column_back_button.js | 9 +++++++-- .../glitch/components/column_back_button_slim.js | 9 +++++++-- .../flavours/glitch/components/column_header.js | 13 +++++++++---- app/javascript/flavours/glitch/components/permalink.js | 4 +++- app/javascript/flavours/glitch/components/status.js | 18 ++++++++++++++---- .../flavours/glitch/components/status_action_bar.js | 4 +++- .../features/account_timeline/components/moved_note.js | 4 +++- .../features/status/components/detailed_status.js | 8 ++++++-- .../flavours/glitch/features/status/index.js | 4 +++- .../glitch/features/ui/components/boost_modal.js | 4 +++- .../glitch/features/ui/components/favourite_modal.js | 4 +++- 11 files changed, 61 insertions(+), 20 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/components/column_back_button.js b/app/javascript/flavours/glitch/components/column_back_button.js index a562ef9b9..82556d22e 100644 --- a/app/javascript/flavours/glitch/components/column_back_button.js +++ b/app/javascript/flavours/glitch/components/column_back_button.js @@ -8,10 +8,15 @@ export default class ColumnBackButton extends React.PureComponent { router: PropTypes.object, }; - handleClick = () => { + handleClick = (event) => { // if history is exhausted, or we would leave mastodon, just go to root. if (window.history.state) { - this.context.router.history.goBack(); + const state = this.context.router.history.location.state; + if (event.shiftKey && state && state.mastodonBackSteps) { + this.context.router.history.go(-state.mastodonBackSteps); + } else { + this.context.router.history.goBack(); + } } else { this.context.router.history.push('/'); } diff --git a/app/javascript/flavours/glitch/components/column_back_button_slim.js b/app/javascript/flavours/glitch/components/column_back_button_slim.js index c99c202af..38afd3df3 100644 --- a/app/javascript/flavours/glitch/components/column_back_button_slim.js +++ b/app/javascript/flavours/glitch/components/column_back_button_slim.js @@ -8,10 +8,15 @@ export default class ColumnBackButtonSlim extends React.PureComponent { router: PropTypes.object, }; - handleClick = () => { + handleClick = (event) => { // if history is exhausted, or we would leave mastodon, just go to root. if (window.history.state) { - this.context.router.history.goBack(); + const state = this.context.router.history.location.state; + if (event.shiftKey && state && state.mastodonBackSteps) { + this.context.router.history.go(-state.mastodonBackSteps); + } else { + this.context.router.history.goBack(); + } } else { this.context.router.history.push('/'); } diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index 87e848a59..a0ff09986 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -47,10 +47,15 @@ export default class ColumnHeader extends React.PureComponent { animatingNCD: false, }; - historyBack = () => { + historyBack = (skip) => { // if history is exhausted, or we would leave mastodon, just go to root. if (window.history.state) { - this.context.router.history.goBack(); + const state = this.context.router.history.location.state; + if (skip && state && state.mastodonBackSteps) { + this.context.router.history.go(-state.mastodonBackSteps); + } else { + this.context.router.history.goBack(); + } } else { this.context.router.history.push('/'); } @@ -73,8 +78,8 @@ export default class ColumnHeader extends React.PureComponent { this.props.onMove(1); } - handleBackClick = () => { - this.historyBack(); + handleBackClick = (event) => { + this.historyBack(event.shiftKey); } handleTransitionEnd = () => { diff --git a/app/javascript/flavours/glitch/components/permalink.js b/app/javascript/flavours/glitch/components/permalink.js index 1ea6a2915..718b02115 100644 --- a/app/javascript/flavours/glitch/components/permalink.js +++ b/app/javascript/flavours/glitch/components/permalink.js @@ -24,7 +24,9 @@ export default class Permalink extends React.PureComponent { if (this.context.router) { e.preventDefault(); - this.context.router.history.push(this.props.to); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(this.props.to, state); } } } diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index c8bf75f79..cd22fb593 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -295,7 +295,11 @@ export default class Status extends ImmutablePureComponent { else if (e.shiftKey) { this.setCollapsed(true); document.getSelection().removeAllRanges(); - } else router.history.push(destination); + } else { + let state = {...router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + router.history.push(destination, state); + } e.preventDefault(); } } @@ -304,7 +308,9 @@ export default class Status extends ImmutablePureComponent { if (this.context.router && e.button === 0) { const id = e.currentTarget.getAttribute('data-id'); e.preventDefault(); - this.context.router.history.push(`/accounts/${id}`); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(`/accounts/${id}`, state); } } @@ -337,11 +343,15 @@ export default class Status extends ImmutablePureComponent { } handleHotkeyOpen = () => { - this.context.router.history.push(`/statuses/${this.props.status.get('id')}`); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(`/statuses/${this.props.status.get('id')}`, state); } handleHotkeyOpenProfile = () => { - this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`, state); } handleHotkeyMoveUp = e => { diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js index e0cc652d2..6d1f54c60 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar.js +++ b/app/javascript/flavours/glitch/components/status_action_bar.js @@ -150,7 +150,9 @@ export default class StatusActionBar extends ImmutablePureComponent { } handleOpen = () => { - this.context.router.history.push(`/statuses/${this.props.status.get('id')}`); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(`/statuses/${this.props.status.get('id')}`, state); } handleEmbed = () => { diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.js b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.js index 280389bba..1fab083db 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.js +++ b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.js @@ -20,7 +20,9 @@ export default class MovedNote extends ImmutablePureComponent { handleAccountClick = e => { if (e.button === 0) { e.preventDefault(); - this.context.router.history.push(`/accounts/${this.props.to.get('id')}`); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(`/accounts/${this.props.to.get('id')}`, state); } e.stopPropagation(); diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index e9130b1b0..69b646427 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -42,7 +42,9 @@ export default class DetailedStatus extends ImmutablePureComponent { handleAccountClick = (e) => { if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) { e.preventDefault(); - this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`, state); } e.stopPropagation(); @@ -51,7 +53,9 @@ export default class DetailedStatus extends ImmutablePureComponent { parseClick = (e, destination) => { if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) { e.preventDefault(); - this.context.router.history.push(destination); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(destination, state); } e.stopPropagation(); diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js index 7f8f02188..a0a9b986c 100644 --- a/app/javascript/flavours/glitch/features/status/index.js +++ b/app/javascript/flavours/glitch/features/status/index.js @@ -331,7 +331,9 @@ export default class Status extends ImmutablePureComponent { } handleHotkeyOpenProfile = () => { - this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`, state); } handleMoveUp = id => { diff --git a/app/javascript/flavours/glitch/features/ui/components/boost_modal.js b/app/javascript/flavours/glitch/features/ui/components/boost_modal.js index 9652bcb2d..0a914dce2 100644 --- a/app/javascript/flavours/glitch/features/ui/components/boost_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/boost_modal.js @@ -40,7 +40,9 @@ export default class BoostModal extends ImmutablePureComponent { if (e.button === 0) { e.preventDefault(); this.props.onClose(); - this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`, state); } } diff --git a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.js b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.js index 70722411d..e0037a15f 100644 --- a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.js @@ -40,7 +40,9 @@ export default class FavouriteModal extends ImmutablePureComponent { if (e.button === 0) { e.preventDefault(); this.props.onClose(); - this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`); + let state = {...this.context.router.history.location.state}; + state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; + this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`, state); } } -- cgit From eed2c9dd44d7f58bbb54554c2271c465b67b827c Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Fri, 19 Apr 2019 20:14:32 +0200 Subject: Rename flavours/glitch/features/drawer to flavours/glitch/features/compose --- .../glitch/features/compose/account/index.js | 76 +++++++++ .../glitch/features/compose/header/index.js | 127 +++++++++++++++ .../flavours/glitch/features/compose/index.js | 166 +++++++++++++++++++ .../glitch/features/compose/results/index.js | 117 ++++++++++++++ .../glitch/features/compose/search/index.js | 152 ++++++++++++++++++ .../glitch/features/compose/search/popout/index.js | 109 +++++++++++++ .../glitch/features/drawer/account/index.js | 76 --------- .../glitch/features/drawer/header/index.js | 127 --------------- .../flavours/glitch/features/drawer/index.js | 175 --------------------- .../glitch/features/drawer/results/index.js | 117 -------------- .../glitch/features/drawer/search/index.js | 152 ------------------ .../glitch/features/drawer/search/popout/index.js | 109 ------------- .../glitch/features/ui/components/columns_area.js | 4 +- .../features/ui/components/onboarding_modal.js | 4 +- .../flavours/glitch/features/ui/index.js | 6 +- app/javascript/flavours/glitch/theme.yml | 2 +- .../flavours/glitch/util/async-components.js | 4 +- 17 files changed, 757 insertions(+), 766 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/compose/account/index.js create mode 100644 app/javascript/flavours/glitch/features/compose/header/index.js create mode 100644 app/javascript/flavours/glitch/features/compose/index.js create mode 100644 app/javascript/flavours/glitch/features/compose/results/index.js create mode 100644 app/javascript/flavours/glitch/features/compose/search/index.js create mode 100644 app/javascript/flavours/glitch/features/compose/search/popout/index.js delete mode 100644 app/javascript/flavours/glitch/features/drawer/account/index.js delete mode 100644 app/javascript/flavours/glitch/features/drawer/header/index.js delete mode 100644 app/javascript/flavours/glitch/features/drawer/index.js delete mode 100644 app/javascript/flavours/glitch/features/drawer/results/index.js delete mode 100644 app/javascript/flavours/glitch/features/drawer/search/index.js delete mode 100644 app/javascript/flavours/glitch/features/drawer/search/popout/index.js (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/features/compose/account/index.js b/app/javascript/flavours/glitch/features/compose/account/index.js new file mode 100644 index 000000000..552848641 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/account/index.js @@ -0,0 +1,76 @@ +// Package imports. +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { + FormattedMessage, + defineMessages, +} from 'react-intl'; + +// Components. +import Avatar from 'flavours/glitch/components/avatar'; +import Permalink from 'flavours/glitch/components/permalink'; + +// Utils. +import { hiddenComponent } from 'flavours/glitch/util/react_helpers'; +import { profileLink } from 'flavours/glitch/util/backend_links'; + +// Messages. +const messages = defineMessages({ + edit: { + defaultMessage: 'Edit profile', + id: 'navigation_bar.edit_profile', + }, +}); + +// The component. +export default function DrawerAccount ({ account }) { + + // We need an account to render. + if (!account) { + return ( +
+ { profileLink !== undefined && ( + + + + )} +
+ ); + } + + // The result. + return ( +
+ + {account.get('acct')} + + + + @{account.get('acct')} + + { profileLink !== undefined && ( + + )} +
+ ); +} + +// Props. +DrawerAccount.propTypes = { account: ImmutablePropTypes.map }; diff --git a/app/javascript/flavours/glitch/features/compose/header/index.js b/app/javascript/flavours/glitch/features/compose/header/index.js new file mode 100644 index 000000000..da5599732 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/header/index.js @@ -0,0 +1,127 @@ +// Package imports. +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages } from 'react-intl'; +import { Link } from 'react-router-dom'; + +// Components. +import Icon from 'flavours/glitch/components/icon'; + +// Utils. +import { conditionalRender } from 'flavours/glitch/util/react_helpers'; +import { signOutLink } from 'flavours/glitch/util/backend_links'; + +// Messages. +const messages = defineMessages({ + community: { + defaultMessage: 'Local timeline', + id: 'navigation_bar.community_timeline', + }, + home_timeline: { + defaultMessage: 'Home', + id: 'tabs_bar.home', + }, + logout: { + defaultMessage: 'Logout', + id: 'navigation_bar.logout', + }, + notifications: { + defaultMessage: 'Notifications', + id: 'tabs_bar.notifications', + }, + public: { + defaultMessage: 'Federated timeline', + id: 'navigation_bar.public_timeline', + }, + settings: { + defaultMessage: 'App settings', + id: 'navigation_bar.app_settings', + }, + start: { + defaultMessage: 'Getting started', + id: 'getting_started.heading', + }, +}); + +// The component. +export default function DrawerHeader ({ + columns, + unreadNotifications, + showNotificationsBadge, + intl, + onSettingsClick, +}) { + + // Only renders the component if the column isn't being shown. + const renderForColumn = conditionalRender.bind(null, + columnId => !columns || !columns.some( + column => column.get('id') === columnId + ) + ); + + // The result. + return ( + + ); +} + +// Props. +DrawerHeader.propTypes = { + columns: ImmutablePropTypes.list, + unreadNotifications: PropTypes.number, + showNotificationsBadge: PropTypes.bool, + intl: PropTypes.object, + onSettingsClick: PropTypes.func, +}; diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js new file mode 100644 index 000000000..cb261f9d6 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/index.js @@ -0,0 +1,166 @@ +// Package imports. +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { injectIntl, defineMessages } from 'react-intl'; +import classNames from 'classnames'; + +// Actions. +import { openModal } from 'flavours/glitch/actions/modal'; +import { + changeSearch, + clearSearch, + showSearch, + submitSearch, +} from 'flavours/glitch/actions/search'; +import { cycleElefriendCompose } from 'flavours/glitch/actions/compose'; + +// Components. +import Composer from 'flavours/glitch/features/composer'; +import DrawerAccount from './account'; +import DrawerHeader from './header'; +import DrawerResults from './results'; +import DrawerSearch from './search'; + +// Utils. +import { me, mascot } from 'flavours/glitch/util/initial_state'; +import { wrap } from 'flavours/glitch/util/redux_helpers'; + +// Messages. +const messages = defineMessages({ + compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new toot' }, +}); + +// State mapping. +const mapStateToProps = state => ({ + account: state.getIn(['accounts', me]), + columns: state.getIn(['settings', 'columns']), + elefriend: state.getIn(['compose', 'elefriend']), + results: state.getIn(['search', 'results']), + searchHidden: state.getIn(['search', 'hidden']), + searchValue: state.getIn(['search', 'value']), + submitted: state.getIn(['search', 'submitted']), + unreadNotifications: state.getIn(['notifications', 'unread']), + showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']), +}); + +// Dispatch mapping. +const mapDispatchToProps = (dispatch, { intl }) => ({ + onChange (value) { + dispatch(changeSearch(value)); + }, + onClear () { + dispatch(clearSearch()); + }, + onClickElefriend () { + dispatch(cycleElefriendCompose()); + }, + onShow () { + dispatch(showSearch()); + }, + onSubmit () { + dispatch(submitSearch()); + }, + onOpenSettings (e) { + e.preventDefault(); + e.stopPropagation(); + dispatch(openModal('SETTINGS', {})); + }, +}); + +// The component. +export default @connect(mapStateToProps, mapDispatchToProps) +@injectIntl +class Compose extends React.PureComponent { + static propTypes = { + intl: PropTypes.object.isRequired, + isSearchPage: PropTypes.bool, + multiColumn: PropTypes.bool, + + // State props. + account: ImmutablePropTypes.map, + columns: ImmutablePropTypes.list, + results: ImmutablePropTypes.map, + elefriend: PropTypes.number, + searchHidden: PropTypes.bool, + searchValue: PropTypes.string, + submitted: PropTypes.bool, + unreadNotifications: PropTypes.number, + showNotificationsBadge: PropTypes.bool, + + // Dispatch props. + onChange: PropTypes.func, + onClear: PropTypes.func, + onClickElefriend: PropTypes.func, + onShow: PropTypes.func, + onSubmit: PropTypes.func, + onOpenSettings: PropTypes.func, + }; + + // Rendering. + render () { + const { + account, + columns, + elefriend, + intl, + multiColumn, + onChange, + onClear, + onClickElefriend, + onOpenSettings, + onShow, + onSubmit, + results, + searchHidden, + searchValue, + submitted, + isSearchPage, + unreadNotifications, + showNotificationsBadge, + } = this.props; + const computedClass = classNames('drawer', `mbstobon-${elefriend}`); + + // The result. + return ( +
+ {multiColumn && ( + + )} + {(multiColumn || isSearchPage) && } +
+ {!isSearchPage &&
+ + + {multiColumn && ( +
+ {mascot ? :
+ )} +
} + + {(multiColumn || isSearchPage) && + } +
+
+ ); + } +} diff --git a/app/javascript/flavours/glitch/features/compose/results/index.js b/app/javascript/flavours/glitch/features/compose/results/index.js new file mode 100644 index 000000000..4574c0e1e --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/results/index.js @@ -0,0 +1,117 @@ +// Package imports. +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { + FormattedMessage, + defineMessages, +} from 'react-intl'; +import spring from 'react-motion/lib/spring'; +import { Link } from 'react-router-dom'; + +// Components. +import Icon from 'flavours/glitch/components/icon'; +import AccountContainer from 'flavours/glitch/containers/account_container'; +import StatusContainer from 'flavours/glitch/containers/status_container'; +import Hashtag from 'flavours/glitch/components/hashtag'; + +// Utils. +import Motion from 'flavours/glitch/util/optional_motion'; + +// Messages. +const messages = defineMessages({ + total: { + defaultMessage: '{count, number} {count, plural, one {result} other {results}}', + id: 'search_results.total', + }, +}); + +// The component. +export default function DrawerResults ({ + results, + visible, +}) { + const accounts = results ? results.get('accounts') : null; + const statuses = results ? results.get('statuses') : null; + const hashtags = results ? results.get('hashtags') : null; + + // This gets the total number of items. + const count = [accounts, statuses, hashtags].reduce(function (size, item) { + if (item && item.size) { + return size + item.size; + } + return size; + }, 0); + + // The result. + return ( + + {({ x }) => ( +
+
+ + +
+ {accounts && accounts.size ? ( +
+
+ + {accounts.map( + accountId => ( + + ) + )} +
+ ) : null} + {statuses && statuses.size ? ( +
+
+ + {statuses.map( + statusId => ( + + ) + )} +
+ ) : null} + {hashtags && hashtags.size ? ( +
+
+ + {hashtags.map(hashtag => )} +
+ ) : null} +
+ )} + + ); +} + +// Props. +DrawerResults.propTypes = { + results: ImmutablePropTypes.map, + visible: PropTypes.bool, +}; diff --git a/app/javascript/flavours/glitch/features/compose/search/index.js b/app/javascript/flavours/glitch/features/compose/search/index.js new file mode 100644 index 000000000..8cbb0906c --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/search/index.js @@ -0,0 +1,152 @@ +// Package imports. +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { + FormattedMessage, + defineMessages, +} from 'react-intl'; +import Overlay from 'react-overlays/lib/Overlay'; + +// Components. +import Icon from 'flavours/glitch/components/icon'; +import DrawerSearchPopout from './popout'; + +// Utils. +import { focusRoot } from 'flavours/glitch/util/dom_helpers'; +import { + assignHandlers, + hiddenComponent, +} from 'flavours/glitch/util/react_helpers'; + +// Messages. +const messages = defineMessages({ + placeholder: { + defaultMessage: 'Search', + id: 'search.placeholder', + }, +}); + +// Handlers. +const handlers = { + + handleBlur () { + this.setState({ expanded: false }); + }, + + handleChange ({ target: { value } }) { + const { onChange } = this.props; + if (onChange) { + onChange(value); + } + }, + + handleClear (e) { + const { + onClear, + submitted, + value, + } = this.props; + e.preventDefault(); // Prevents focus change ?? + if (onClear && (submitted || value && value.length)) { + onClear(); + } + }, + + handleFocus () { + const { onShow } = this.props; + this.setState({ expanded: true }); + if (onShow) { + onShow(); + } + }, + + handleKeyUp (e) { + const { onSubmit } = this.props; + switch (e.key) { + case 'Enter': + if (onSubmit) { + onSubmit(); + } + break; + case 'Escape': + focusRoot(); + } + }, +}; + +// The component. +export default class DrawerSearch extends React.PureComponent { + + // Constructor. + constructor (props) { + super(props); + assignHandlers(this, handlers); + this.state = { expanded: false }; + } + + // Rendering. + render () { + const { + handleBlur, + handleChange, + handleClear, + handleFocus, + handleKeyUp, + } = this.handlers; + const { + intl, + submitted, + value, + } = this.props; + const { expanded } = this.state; + const active = value && value.length || submitted; + const computedClass = classNames('drawer--search', { active }); + + return ( +
+ +
+ + +
+ +
+ ); + } + +} + +// Props. +DrawerSearch.propTypes = { + value: PropTypes.string, + submitted: PropTypes.bool, + onChange: PropTypes.func, + onSubmit: PropTypes.func, + onClear: PropTypes.func, + onShow: PropTypes.func, + intl: PropTypes.object, +}; diff --git a/app/javascript/flavours/glitch/features/compose/search/popout/index.js b/app/javascript/flavours/glitch/features/compose/search/popout/index.js new file mode 100644 index 000000000..fec090b64 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/search/popout/index.js @@ -0,0 +1,109 @@ +// Package imports. +import PropTypes from 'prop-types'; +import React from 'react'; +import { + FormattedMessage, + defineMessages, +} from 'react-intl'; +import spring from 'react-motion/lib/spring'; + +// Utils. +import Motion from 'flavours/glitch/util/optional_motion'; +import { searchEnabled } from 'flavours/glitch/util/initial_state'; + +// Messages. +const messages = defineMessages({ + format: { + defaultMessage: 'Advanced search format', + id: 'search_popout.search_format', + }, + hashtag: { + defaultMessage: 'hashtag', + id: 'search_popout.tips.hashtag', + }, + status: { + defaultMessage: 'status', + id: 'search_popout.tips.status', + }, + text: { + defaultMessage: 'Simple text returns matching display names, usernames and hashtags', + id: 'search_popout.tips.text', + }, + full_text: { + defaultMessage: 'Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.', + id: 'search_popout.tips.full_text', + }, + user: { + defaultMessage: 'user', + id: 'search_popout.tips.user', + }, +}); + +// The spring used by our motion. +const motionSpring = spring(1, { damping: 35, stiffness: 400 }); + +// The component. +export default function DrawerSearchPopout ({ style }) { + + // The result. + return ( +
+ + {({ opacity, scaleX, scaleY }) => ( +
+

+
    +
  • + #example + {' '} + +
    • +
  • + @username@domain + {' '} + +
    • +
  • + URL + {' '} + +
    • +
  • + URL + {' '} + +
    • +
+ { searchEnabled ? : } +
+ )} + +
+ ); +} + +// Props. +DrawerSearchPopout.propTypes = { style: PropTypes.object }; diff --git a/app/javascript/flavours/glitch/features/drawer/account/index.js b/app/javascript/flavours/glitch/features/drawer/account/index.js deleted file mode 100644 index 552848641..000000000 --- a/app/javascript/flavours/glitch/features/drawer/account/index.js +++ /dev/null @@ -1,76 +0,0 @@ -// Package imports. -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { - FormattedMessage, - defineMessages, -} from 'react-intl'; - -// Components. -import Avatar from 'flavours/glitch/components/avatar'; -import Permalink from 'flavours/glitch/components/permalink'; - -// Utils. -import { hiddenComponent } from 'flavours/glitch/util/react_helpers'; -import { profileLink } from 'flavours/glitch/util/backend_links'; - -// Messages. -const messages = defineMessages({ - edit: { - defaultMessage: 'Edit profile', - id: 'navigation_bar.edit_profile', - }, -}); - -// The component. -export default function DrawerAccount ({ account }) { - - // We need an account to render. - if (!account) { - return ( -
- { profileLink !== undefined && ( - - - - )} -
- ); - } - - // The result. - return ( -
- - {account.get('acct')} - - - - @{account.get('acct')} - - { profileLink !== undefined && ( - - )} -
- ); -} - -// Props. -DrawerAccount.propTypes = { account: ImmutablePropTypes.map }; diff --git a/app/javascript/flavours/glitch/features/drawer/header/index.js b/app/javascript/flavours/glitch/features/drawer/header/index.js deleted file mode 100644 index da5599732..000000000 --- a/app/javascript/flavours/glitch/features/drawer/header/index.js +++ /dev/null @@ -1,127 +0,0 @@ -// Package imports. -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages } from 'react-intl'; -import { Link } from 'react-router-dom'; - -// Components. -import Icon from 'flavours/glitch/components/icon'; - -// Utils. -import { conditionalRender } from 'flavours/glitch/util/react_helpers'; -import { signOutLink } from 'flavours/glitch/util/backend_links'; - -// Messages. -const messages = defineMessages({ - community: { - defaultMessage: 'Local timeline', - id: 'navigation_bar.community_timeline', - }, - home_timeline: { - defaultMessage: 'Home', - id: 'tabs_bar.home', - }, - logout: { - defaultMessage: 'Logout', - id: 'navigation_bar.logout', - }, - notifications: { - defaultMessage: 'Notifications', - id: 'tabs_bar.notifications', - }, - public: { - defaultMessage: 'Federated timeline', - id: 'navigation_bar.public_timeline', - }, - settings: { - defaultMessage: 'App settings', - id: 'navigation_bar.app_settings', - }, - start: { - defaultMessage: 'Getting started', - id: 'getting_started.heading', - }, -}); - -// The component. -export default function DrawerHeader ({ - columns, - unreadNotifications, - showNotificationsBadge, - intl, - onSettingsClick, -}) { - - // Only renders the component if the column isn't being shown. - const renderForColumn = conditionalRender.bind(null, - columnId => !columns || !columns.some( - column => column.get('id') === columnId - ) - ); - - // The result. - return ( - - ); -} - -// Props. -DrawerHeader.propTypes = { - columns: ImmutablePropTypes.list, - unreadNotifications: PropTypes.number, - showNotificationsBadge: PropTypes.bool, - intl: PropTypes.object, - onSettingsClick: PropTypes.func, -}; diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js deleted file mode 100644 index c8121b8e5..000000000 --- a/app/javascript/flavours/glitch/features/drawer/index.js +++ /dev/null @@ -1,175 +0,0 @@ -// Package imports. -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages } from 'react-intl'; -import classNames from 'classnames'; - -// Actions. -import { openModal } from 'flavours/glitch/actions/modal'; -import { - changeSearch, - clearSearch, - showSearch, - submitSearch, -} from 'flavours/glitch/actions/search'; -import { cycleElefriendCompose } from 'flavours/glitch/actions/compose'; - -// Components. -import Composer from 'flavours/glitch/features/composer'; -import DrawerAccount from './account'; -import DrawerHeader from './header'; -import DrawerResults from './results'; -import DrawerSearch from './search'; - -// Utils. -import { me, mascot } from 'flavours/glitch/util/initial_state'; -import { wrap } from 'flavours/glitch/util/redux_helpers'; - -// Messages. -const messages = defineMessages({ - compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new toot' }, -}); - -// State mapping. -const mapStateToProps = state => ({ - account: state.getIn(['accounts', me]), - columns: state.getIn(['settings', 'columns']), - elefriend: state.getIn(['compose', 'elefriend']), - results: state.getIn(['search', 'results']), - searchHidden: state.getIn(['search', 'hidden']), - searchValue: state.getIn(['search', 'value']), - submitted: state.getIn(['search', 'submitted']), - unreadNotifications: state.getIn(['notifications', 'unread']), - showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']), -}); - -// Dispatch mapping. -const mapDispatchToProps = (dispatch, { intl }) => ({ - onChange (value) { - dispatch(changeSearch(value)); - }, - onClear () { - dispatch(clearSearch()); - }, - onClickElefriend () { - dispatch(cycleElefriendCompose()); - }, - onShow () { - dispatch(showSearch()); - }, - onSubmit () { - dispatch(submitSearch()); - }, - onOpenSettings (e) { - e.preventDefault(); - e.stopPropagation(); - dispatch(openModal('SETTINGS', {})); - }, -}); - -// The component. -class Drawer extends React.Component { - - // Constructor. - constructor (props) { - super(props); - } - - // Rendering. - render () { - const { - account, - columns, - elefriend, - intl, - multiColumn, - onChange, - onClear, - onClickElefriend, - onOpenSettings, - onShow, - onSubmit, - results, - searchHidden, - searchValue, - submitted, - isSearchPage, - unreadNotifications, - showNotificationsBadge, - } = this.props; - const computedClass = classNames('drawer', `mbstobon-${elefriend}`); - - // The result. - return ( -
- {multiColumn ? ( - - ) : null} - {(multiColumn || isSearchPage) && } -
- {!isSearchPage &&
- - - {multiColumn && ( -
- {mascot ? :
- )} -
} - - {(multiColumn || isSearchPage) && - } -
-
- ); - } - -} - -// Props. -Drawer.propTypes = { - intl: PropTypes.object.isRequired, - isSearchPage: PropTypes.bool, - multiColumn: PropTypes.bool, - - // State props. - account: ImmutablePropTypes.map, - columns: ImmutablePropTypes.list, - results: ImmutablePropTypes.map, - elefriend: PropTypes.number, - searchHidden: PropTypes.bool, - searchValue: PropTypes.string, - submitted: PropTypes.bool, - unreadNotifications: PropTypes.number, - showNotificationsBadge: PropTypes.bool, - - // Dispatch props. - onChange: PropTypes.func, - onClear: PropTypes.func, - onClickElefriend: PropTypes.func, - onShow: PropTypes.func, - onSubmit: PropTypes.func, - onOpenSettings: PropTypes.func, -}; - -// Connecting and export. -export { Drawer as WrappedComponent }; -export default wrap(Drawer, mapStateToProps, mapDispatchToProps, true); diff --git a/app/javascript/flavours/glitch/features/drawer/results/index.js b/app/javascript/flavours/glitch/features/drawer/results/index.js deleted file mode 100644 index 4574c0e1e..000000000 --- a/app/javascript/flavours/glitch/features/drawer/results/index.js +++ /dev/null @@ -1,117 +0,0 @@ -// Package imports. -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { - FormattedMessage, - defineMessages, -} from 'react-intl'; -import spring from 'react-motion/lib/spring'; -import { Link } from 'react-router-dom'; - -// Components. -import Icon from 'flavours/glitch/components/icon'; -import AccountContainer from 'flavours/glitch/containers/account_container'; -import StatusContainer from 'flavours/glitch/containers/status_container'; -import Hashtag from 'flavours/glitch/components/hashtag'; - -// Utils. -import Motion from 'flavours/glitch/util/optional_motion'; - -// Messages. -const messages = defineMessages({ - total: { - defaultMessage: '{count, number} {count, plural, one {result} other {results}}', - id: 'search_results.total', - }, -}); - -// The component. -export default function DrawerResults ({ - results, - visible, -}) { - const accounts = results ? results.get('accounts') : null; - const statuses = results ? results.get('statuses') : null; - const hashtags = results ? results.get('hashtags') : null; - - // This gets the total number of items. - const count = [accounts, statuses, hashtags].reduce(function (size, item) { - if (item && item.size) { - return size + item.size; - } - return size; - }, 0); - - // The result. - return ( - - {({ x }) => ( -
-
- - -
- {accounts && accounts.size ? ( -
-
- - {accounts.map( - accountId => ( - - ) - )} -
- ) : null} - {statuses && statuses.size ? ( -
-
- - {statuses.map( - statusId => ( - - ) - )} -
- ) : null} - {hashtags && hashtags.size ? ( -
-
- - {hashtags.map(hashtag => )} -
- ) : null} -
- )} - - ); -} - -// Props. -DrawerResults.propTypes = { - results: ImmutablePropTypes.map, - visible: PropTypes.bool, -}; diff --git a/app/javascript/flavours/glitch/features/drawer/search/index.js b/app/javascript/flavours/glitch/features/drawer/search/index.js deleted file mode 100644 index 8cbb0906c..000000000 --- a/app/javascript/flavours/glitch/features/drawer/search/index.js +++ /dev/null @@ -1,152 +0,0 @@ -// Package imports. -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { - FormattedMessage, - defineMessages, -} from 'react-intl'; -import Overlay from 'react-overlays/lib/Overlay'; - -// Components. -import Icon from 'flavours/glitch/components/icon'; -import DrawerSearchPopout from './popout'; - -// Utils. -import { focusRoot } from 'flavours/glitch/util/dom_helpers'; -import { - assignHandlers, - hiddenComponent, -} from 'flavours/glitch/util/react_helpers'; - -// Messages. -const messages = defineMessages({ - placeholder: { - defaultMessage: 'Search', - id: 'search.placeholder', - }, -}); - -// Handlers. -const handlers = { - - handleBlur () { - this.setState({ expanded: false }); - }, - - handleChange ({ target: { value } }) { - const { onChange } = this.props; - if (onChange) { - onChange(value); - } - }, - - handleClear (e) { - const { - onClear, - submitted, - value, - } = this.props; - e.preventDefault(); // Prevents focus change ?? - if (onClear && (submitted || value && value.length)) { - onClear(); - } - }, - - handleFocus () { - const { onShow } = this.props; - this.setState({ expanded: true }); - if (onShow) { - onShow(); - } - }, - - handleKeyUp (e) { - const { onSubmit } = this.props; - switch (e.key) { - case 'Enter': - if (onSubmit) { - onSubmit(); - } - break; - case 'Escape': - focusRoot(); - } - }, -}; - -// The component. -export default class DrawerSearch extends React.PureComponent { - - // Constructor. - constructor (props) { - super(props); - assignHandlers(this, handlers); - this.state = { expanded: false }; - } - - // Rendering. - render () { - const { - handleBlur, - handleChange, - handleClear, - handleFocus, - handleKeyUp, - } = this.handlers; - const { - intl, - submitted, - value, - } = this.props; - const { expanded } = this.state; - const active = value && value.length || submitted; - const computedClass = classNames('drawer--search', { active }); - - return ( -
- -
- - -
- -
- ); - } - -} - -// Props. -DrawerSearch.propTypes = { - value: PropTypes.string, - submitted: PropTypes.bool, - onChange: PropTypes.func, - onSubmit: PropTypes.func, - onClear: PropTypes.func, - onShow: PropTypes.func, - intl: PropTypes.object, -}; diff --git a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js deleted file mode 100644 index fec090b64..000000000 --- a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js +++ /dev/null @@ -1,109 +0,0 @@ -// Package imports. -import PropTypes from 'prop-types'; -import React from 'react'; -import { - FormattedMessage, - defineMessages, -} from 'react-intl'; -import spring from 'react-motion/lib/spring'; - -// Utils. -import Motion from 'flavours/glitch/util/optional_motion'; -import { searchEnabled } from 'flavours/glitch/util/initial_state'; - -// Messages. -const messages = defineMessages({ - format: { - defaultMessage: 'Advanced search format', - id: 'search_popout.search_format', - }, - hashtag: { - defaultMessage: 'hashtag', - id: 'search_popout.tips.hashtag', - }, - status: { - defaultMessage: 'status', - id: 'search_popout.tips.status', - }, - text: { - defaultMessage: 'Simple text returns matching display names, usernames and hashtags', - id: 'search_popout.tips.text', - }, - full_text: { - defaultMessage: 'Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.', - id: 'search_popout.tips.full_text', - }, - user: { - defaultMessage: 'user', - id: 'search_popout.tips.user', - }, -}); - -// The spring used by our motion. -const motionSpring = spring(1, { damping: 35, stiffness: 400 }); - -// The component. -export default function DrawerSearchPopout ({ style }) { - - // The result. - return ( -
- - {({ opacity, scaleX, scaleY }) => ( -
-

-
    -
  • - #example - {' '} - -
    • -
  • - @username@domain - {' '} - -
    • -
  • - URL - {' '} - -
    • -
  • - URL - {' '} - -
    • -
- { searchEnabled ? : } -
- )} - -
- ); -} - -// Props. -DrawerSearchPopout.propTypes = { style: PropTypes.object }; diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js index 83b797305..0fe580b9b 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -12,13 +12,13 @@ import BundleContainer from '../containers/bundle_container'; import ColumnLoading from './column_loading'; import DrawerLoading from './drawer_loading'; import BundleColumnError from './bundle_column_error'; -import { Drawer, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, BookmarkedStatuses, ListTimeline } from 'flavours/glitch/util/async-components'; +import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, DirectTimeline, FavouritedStatuses, BookmarkedStatuses, ListTimeline } from 'flavours/glitch/util/async-components'; import detectPassiveEvents from 'detect-passive-events'; import { scrollRight } from 'flavours/glitch/util/scroll'; const componentMap = { - 'COMPOSE': Drawer, + 'COMPOSE': Compose, 'HOME': HomeTimeline, 'NOTIFICATIONS': Notifications, 'PUBLIC': PublicTimeline, diff --git a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js index 16355a446..e9c634a50 100644 --- a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js @@ -7,8 +7,8 @@ import ReactSwipeableViews from 'react-swipeable-views'; import classNames from 'classnames'; import Permalink from 'flavours/glitch/components/permalink'; import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer'; -import DrawerAccount from 'flavours/glitch/features/drawer/account'; -import DrawerSearch from 'flavours/glitch/features/drawer/search'; +import DrawerAccount from 'flavours/glitch/features/compose/account'; +import DrawerSearch from 'flavours/glitch/features/compose/search'; import ColumnHeader from './column_header'; import { me } from 'flavours/glitch/util/initial_state'; diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 348125c97..dd527d528 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -19,7 +19,7 @@ import ColumnsAreaContainer from './containers/columns_area_container'; import classNames from 'classnames'; import Favico from 'favico.js'; import { - Drawer, + Compose, Status, GettingStarted, KeyboardShortcuts, @@ -488,9 +488,9 @@ export default class UI extends React.Component { - + - + diff --git a/app/javascript/flavours/glitch/theme.yml b/app/javascript/flavours/glitch/theme.yml index 587cc0f1e..06e26ade2 100644 --- a/app/javascript/flavours/glitch/theme.yml +++ b/app/javascript/flavours/glitch/theme.yml @@ -11,7 +11,7 @@ pack: home: filename: packs/home.js preload: - - flavours/glitch/async/drawer + - flavours/glitch/async/compose - flavours/glitch/async/getting_started - flavours/glitch/async/home_timeline - flavours/glitch/async/notifications diff --git a/app/javascript/flavours/glitch/util/async-components.js b/app/javascript/flavours/glitch/util/async-components.js index e96af845f..094952204 100644 --- a/app/javascript/flavours/glitch/util/async-components.js +++ b/app/javascript/flavours/glitch/util/async-components.js @@ -2,8 +2,8 @@ export function EmojiPicker () { return import(/* webpackChunkName: "flavours/glitch/async/emoji_picker" */'flavours/glitch/util/emoji/emoji_picker'); } -export function Drawer () { - return import(/* webpackChunkName: "flavours/glitch/async/drawer" */'flavours/glitch/features/drawer'); +export function Compose () { + return import(/* webpackChunkName: "flavours/glitch/async/compose" */'flavours/glitch/features/compose'); } export function Notifications () { -- cgit From ab3e8fc542f53ce9c7a8d1b39ae57bdb60667dac Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 20 Apr 2019 17:50:12 +0200 Subject: Move DrawerSearch to Search + SearchContainer --- .../glitch/features/compose/components/search.js | 158 +++++++++++++++++++++ .../compose/containers/search_container.js | 35 +++++ .../flavours/glitch/features/compose/index.js | 41 +----- .../glitch/features/compose/search/index.js | 158 --------------------- .../features/ui/components/onboarding_modal.js | 12 +- 5 files changed, 205 insertions(+), 199 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/compose/components/search.js create mode 100644 app/javascript/flavours/glitch/features/compose/containers/search_container.js delete mode 100644 app/javascript/flavours/glitch/features/compose/search/index.js (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/features/compose/components/search.js b/app/javascript/flavours/glitch/features/compose/components/search.js new file mode 100644 index 000000000..5fed1567a --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/components/search.js @@ -0,0 +1,158 @@ +// Package imports. +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { connect } from 'react-redux'; +import spring from 'react-motion/lib/spring'; +import { + injectIntl, + FormattedMessage, + defineMessages, +} from 'react-intl'; +import Overlay from 'react-overlays/lib/Overlay'; + +// Components. +import Icon from 'flavours/glitch/components/icon'; + +// Utils. +import { focusRoot } from 'flavours/glitch/util/dom_helpers'; +import { searchEnabled } from 'flavours/glitch/util/initial_state'; +import Motion from 'flavours/glitch/util/optional_motion'; + +const messages = defineMessages({ + placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }, +}); + +class SearchPopout extends React.PureComponent { + + static propTypes = { + style: PropTypes.object, + }; + + render () { + const { style } = this.props; + const extraInformation = searchEnabled ? : ; + return ( +
+ + {({ opacity, scaleX, scaleY }) => ( +
+

+ +
    +
  • #example
    • +
  • @username@domain
    • +
  • URL
    • +
  • URL
    • +
+ + {extraInformation} +
+ )} + +
+ ); + } + +} + +// The component. +export default @injectIntl +class Search extends React.PureComponent { + + static propTypes = { + value: PropTypes.string.isRequired, + submitted: PropTypes.bool, + onChange: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + onClear: PropTypes.func.isRequired, + onShow: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + state = { + expanded: false, + }; + + handleChange = (e) => { + const { onChange } = this.props; + if (onChange) { + onChange(e.target.value); + } + } + + handleClear = (e) => { + const { + onClear, + submitted, + value, + } = this.props; + e.preventDefault(); // Prevents focus change ?? + if (onClear && (submitted || value && value.length)) { + onClear(); + } + } + + handleBlur = () => { + this.setState({ expanded: false }); + } + + handleFocus = () => { + const { onShow } = this.props; + this.setState({ expanded: true }); + if (onShow) { + onShow(); + } + } + + handleKeyUp = (e) => { + const { onSubmit } = this.props; + switch (e.key) { + case 'Enter': + if (onSubmit) { + onSubmit(); + } + break; + case 'Escape': + focusRoot(); + } + } + + render () { + const { intl, value, submitted } = this.props; + const { expanded } = this.state; + const active = value.length > 0 || submitted; + const computedClass = classNames('drawer--search', { active }); + + return ( +
+ +
+ + +
+ + + +
+ ); + } + +} diff --git a/app/javascript/flavours/glitch/features/compose/containers/search_container.js b/app/javascript/flavours/glitch/features/compose/containers/search_container.js new file mode 100644 index 000000000..8f4bfcf08 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/containers/search_container.js @@ -0,0 +1,35 @@ +import { connect } from 'react-redux'; +import { + changeSearch, + clearSearch, + submitSearch, + showSearch, +} from 'flavours/glitch/actions/search'; +import Search from '../components/search'; + +const mapStateToProps = state => ({ + value: state.getIn(['search', 'value']), + submitted: state.getIn(['search', 'submitted']), +}); + +const mapDispatchToProps = dispatch => ({ + + onChange (value) { + dispatch(changeSearch(value)); + }, + + onClear () { + dispatch(clearSearch()); + }, + + onSubmit () { + dispatch(submitSearch()); + }, + + onShow () { + dispatch(showSearch()); + }, + +}); + +export default connect(mapStateToProps, mapDispatchToProps)(Search); diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js index cb261f9d6..83c5d82b0 100644 --- a/app/javascript/flavours/glitch/features/compose/index.js +++ b/app/javascript/flavours/glitch/features/compose/index.js @@ -8,12 +8,6 @@ import classNames from 'classnames'; // Actions. import { openModal } from 'flavours/glitch/actions/modal'; -import { - changeSearch, - clearSearch, - showSearch, - submitSearch, -} from 'flavours/glitch/actions/search'; import { cycleElefriendCompose } from 'flavours/glitch/actions/compose'; // Components. @@ -21,7 +15,7 @@ import Composer from 'flavours/glitch/features/composer'; import DrawerAccount from './account'; import DrawerHeader from './header'; import DrawerResults from './results'; -import DrawerSearch from './search'; +import SearchContainer from './containers/search_container'; // Utils. import { me, mascot } from 'flavours/glitch/util/initial_state'; @@ -39,7 +33,6 @@ const mapStateToProps = state => ({ elefriend: state.getIn(['compose', 'elefriend']), results: state.getIn(['search', 'results']), searchHidden: state.getIn(['search', 'hidden']), - searchValue: state.getIn(['search', 'value']), submitted: state.getIn(['search', 'submitted']), unreadNotifications: state.getIn(['notifications', 'unread']), showNotificationsBadge: state.getIn(['local_settings', 'notifications', 'tab_badge']), @@ -47,21 +40,9 @@ const mapStateToProps = state => ({ // Dispatch mapping. const mapDispatchToProps = (dispatch, { intl }) => ({ - onChange (value) { - dispatch(changeSearch(value)); - }, - onClear () { - dispatch(clearSearch()); - }, onClickElefriend () { dispatch(cycleElefriendCompose()); }, - onShow () { - dispatch(showSearch()); - }, - onSubmit () { - dispatch(submitSearch()); - }, onOpenSettings (e) { e.preventDefault(); e.stopPropagation(); @@ -84,17 +65,12 @@ class Compose extends React.PureComponent { results: ImmutablePropTypes.map, elefriend: PropTypes.number, searchHidden: PropTypes.bool, - searchValue: PropTypes.string, submitted: PropTypes.bool, unreadNotifications: PropTypes.number, showNotificationsBadge: PropTypes.bool, // Dispatch props. - onChange: PropTypes.func, - onClear: PropTypes.func, onClickElefriend: PropTypes.func, - onShow: PropTypes.func, - onSubmit: PropTypes.func, onOpenSettings: PropTypes.func, }; @@ -106,15 +82,10 @@ class Compose extends React.PureComponent { elefriend, intl, multiColumn, - onChange, - onClear, onClickElefriend, onOpenSettings, - onShow, - onSubmit, results, searchHidden, - searchValue, submitted, isSearchPage, unreadNotifications, @@ -134,15 +105,7 @@ class Compose extends React.PureComponent { onSettingsClick={onOpenSettings} /> )} - {(multiColumn || isSearchPage) && } + {(multiColumn || isSearchPage) && }
{!isSearchPage &&
diff --git a/app/javascript/flavours/glitch/features/compose/search/index.js b/app/javascript/flavours/glitch/features/compose/search/index.js deleted file mode 100644 index 06b99dcf0..000000000 --- a/app/javascript/flavours/glitch/features/compose/search/index.js +++ /dev/null @@ -1,158 +0,0 @@ -// Package imports. -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { connect } from 'react-redux'; -import spring from 'react-motion/lib/spring'; -import { - injectIntl, - FormattedMessage, - defineMessages, -} from 'react-intl'; -import Overlay from 'react-overlays/lib/Overlay'; - -// Components. -import Icon from 'flavours/glitch/components/icon'; - -// Utils. -import { focusRoot } from 'flavours/glitch/util/dom_helpers'; -import { searchEnabled } from 'flavours/glitch/util/initial_state'; -import Motion from 'flavours/glitch/util/optional_motion'; - -const messages = defineMessages({ - placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }, -}); - -class SearchPopout extends React.PureComponent { - - static propTypes = { - style: PropTypes.object, - }; - - render () { - const { style } = this.props; - const extraInformation = searchEnabled ? : ; - return ( -
- - {({ opacity, scaleX, scaleY }) => ( -
-

- -
    -
  • #example
    • -
  • @username@domain
    • -
  • URL
    • -
  • URL
    • -
- - {extraInformation} -
- )} - -
- ); - } - -} - -// The component. -export default @injectIntl -class DrawerSearch extends React.PureComponent { - - static propTypes = { - value: PropTypes.string.isRequired, - submitted: PropTypes.bool, - onChange: PropTypes.func.isRequired, - onSubmit: PropTypes.func.isRequired, - onClear: PropTypes.func.isRequired, - onShow: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - }; - - state = { - expanded: false, - }; - - handleChange = (e) => { - const { onChange } = this.props; - if (onChange) { - onChange(e.target.value); - } - } - - handleClear = (e) => { - const { - onClear, - submitted, - value, - } = this.props; - e.preventDefault(); // Prevents focus change ?? - if (onClear && (submitted || value && value.length)) { - onClear(); - } - } - - handleBlur = () => { - this.setState({ expanded: false }); - } - - handleFocus = () => { - const { onShow } = this.props; - this.setState({ expanded: true }); - if (onShow) { - onShow(); - } - } - - handleKeyUp = (e) => { - const { onSubmit } = this.props; - switch (e.key) { - case 'Enter': - if (onSubmit) { - onSubmit(); - } - break; - case 'Escape': - focusRoot(); - } - } - - render () { - const { intl, value, submitted } = this.props; - const { expanded } = this.state; - const active = value.length > 0 || submitted; - const computedClass = classNames('drawer--search', { active }); - - return ( -
- -
- - -
- - - -
- ); - } - -} diff --git a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js index e9c634a50..38e9b63ec 100644 --- a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js @@ -8,10 +8,12 @@ import classNames from 'classnames'; import Permalink from 'flavours/glitch/components/permalink'; import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer'; import DrawerAccount from 'flavours/glitch/features/compose/account'; -import DrawerSearch from 'flavours/glitch/features/compose/search'; +import Search from 'flavours/glitch/features/compose/components/search'; import ColumnHeader from './column_header'; import { me } from 'flavours/glitch/util/initial_state'; +const noop = () => { }; + const messages = defineMessages({ home_title: { id: 'column.home', defaultMessage: 'Home' }, notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' }, @@ -63,7 +65,13 @@ PageTwo.propTypes = { const PageThree = ({ intl, myAccount }) => (
- +
-- cgit From 9a2f10fe8b24d48f0b7c5dde545b2df3c8952330 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 20 Apr 2019 20:32:16 +0200 Subject: DrawerAccount → NavigationBar + NavigationContainer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../glitch/features/compose/account/index.js | 76 ---------------------- .../features/compose/components/navigation_bar.js | 36 ++++++++++ .../compose/containers/navigation_container.js | 11 ++++ .../flavours/glitch/features/compose/index.js | 7 +- .../features/ui/components/onboarding_modal.js | 2 +- 5 files changed, 50 insertions(+), 82 deletions(-) delete mode 100644 app/javascript/flavours/glitch/features/compose/account/index.js create mode 100644 app/javascript/flavours/glitch/features/compose/components/navigation_bar.js create mode 100644 app/javascript/flavours/glitch/features/compose/containers/navigation_container.js (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/features/compose/account/index.js b/app/javascript/flavours/glitch/features/compose/account/index.js deleted file mode 100644 index 552848641..000000000 --- a/app/javascript/flavours/glitch/features/compose/account/index.js +++ /dev/null @@ -1,76 +0,0 @@ -// Package imports. -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { - FormattedMessage, - defineMessages, -} from 'react-intl'; - -// Components. -import Avatar from 'flavours/glitch/components/avatar'; -import Permalink from 'flavours/glitch/components/permalink'; - -// Utils. -import { hiddenComponent } from 'flavours/glitch/util/react_helpers'; -import { profileLink } from 'flavours/glitch/util/backend_links'; - -// Messages. -const messages = defineMessages({ - edit: { - defaultMessage: 'Edit profile', - id: 'navigation_bar.edit_profile', - }, -}); - -// The component. -export default function DrawerAccount ({ account }) { - - // We need an account to render. - if (!account) { - return ( -
- { profileLink !== undefined && ( - - - - )} -
- ); - } - - // The result. - return ( -
- - {account.get('acct')} - - - - @{account.get('acct')} - - { profileLink !== undefined && ( - - )} -
- ); -} - -// Props. -DrawerAccount.propTypes = { account: ImmutablePropTypes.map }; diff --git a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js new file mode 100644 index 000000000..59172bb23 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.js @@ -0,0 +1,36 @@ +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import Avatar from 'flavours/glitch/components/avatar'; +import Permalink from 'flavours/glitch/components/permalink'; +import { FormattedMessage } from 'react-intl'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { profileLink } from 'flavours/glitch/util/backend_links'; + +export default class NavigationBar extends ImmutablePureComponent { + + static propTypes = { + account: ImmutablePropTypes.map.isRequired, + }; + + render () { + return ( +
+ + {this.props.account.get('acct')} + + + + + @{this.props.account.get('acct')} + + + { profileLink !== undefined && ( + + )} +
+ ); + }; +} diff --git a/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js b/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js new file mode 100644 index 000000000..eb630ffbb --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/containers/navigation_container.js @@ -0,0 +1,11 @@ +import { connect } from 'react-redux'; +import NavigationBar from '../components/navigation_bar'; +import { me } from 'flavours/glitch/util/initial_state'; + +const mapStateToProps = state => { + return { + account: state.getIn(['accounts', me]), + }; +}; + +export default connect(mapStateToProps)(NavigationBar); diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js index 0865a7ff9..9fe510028 100644 --- a/app/javascript/flavours/glitch/features/compose/index.js +++ b/app/javascript/flavours/glitch/features/compose/index.js @@ -12,10 +12,10 @@ import { cycleElefriendCompose } from 'flavours/glitch/actions/compose'; // Components. import Composer from 'flavours/glitch/features/composer'; -import DrawerAccount from './account'; import DrawerHeader from './header'; import SearchContainer from './containers/search_container'; import SearchResultsContainer from './containers/search_results_container'; +import NavigationContainer from './containers/navigation_container'; import spring from 'react-motion/lib/spring'; // Utils. @@ -29,7 +29,6 @@ const messages = defineMessages({ // State mapping. const mapStateToProps = (state, ownProps) => ({ - account: state.getIn(['accounts', me]), columns: state.getIn(['settings', 'columns']), elefriend: state.getIn(['compose', 'elefriend']), showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage, @@ -60,7 +59,6 @@ class Compose extends React.PureComponent { showSearch: PropTypes.bool, // State props. - account: ImmutablePropTypes.map, columns: ImmutablePropTypes.list, elefriend: PropTypes.number, unreadNotifications: PropTypes.number, @@ -74,7 +72,6 @@ class Compose extends React.PureComponent { // Rendering. render () { const { - account, columns, elefriend, intl, @@ -103,7 +100,7 @@ class Compose extends React.PureComponent { {(multiColumn || isSearchPage) && }
{!isSearchPage &&
- + {multiColumn && (
diff --git a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js index 38e9b63ec..a8ac83366 100644 --- a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js @@ -7,7 +7,7 @@ import ReactSwipeableViews from 'react-swipeable-views'; import classNames from 'classnames'; import Permalink from 'flavours/glitch/components/permalink'; import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer'; -import DrawerAccount from 'flavours/glitch/features/compose/account'; +import DrawerAccount from 'flavours/glitch/features/compose/components/navigation_bar'; import Search from 'flavours/glitch/features/compose/components/search'; import ColumnHeader from './column_header'; import { me } from 'flavours/glitch/util/initial_state'; -- cgit From 1bc4b8a0a57a4046364f4afbb741f2d4e7d48dcb Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 20 Apr 2019 21:28:03 +0200 Subject: features/composer/index.js → ComposeForm MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/compose/components/compose_form.js | 415 ++++++++++++++ .../compose/containers/compose_form_container.js | 175 ++++++ .../flavours/glitch/features/compose/index.js | 7 +- .../flavours/glitch/features/composer/index.js | 600 --------------------- .../glitch/features/standalone/compose/index.js | 4 +- .../features/ui/components/onboarding_modal.js | 5 +- 6 files changed, 599 insertions(+), 607 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/compose/components/compose_form.js create mode 100644 app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js delete mode 100644 app/javascript/flavours/glitch/features/composer/index.js (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js new file mode 100644 index 000000000..0f9b11fa3 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -0,0 +1,415 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages, injectIntl } from 'react-intl'; +import ImmutablePureComponent from 'react-immutable-pure-component'; + +const APPROX_HASHTAG_RE = /(?:^|[^\/\)\w])#(\S+)/i; + +// Components. +import ComposerOptions from '../../composer/options'; +import ComposerPublisher from '../../composer/publisher'; +import ComposerReply from '../../composer/reply'; +import ComposerSpoiler from '../../composer/spoiler'; +import ComposerTextarea from '../../composer/textarea'; +import ComposerUploadForm from '../../composer/upload_form'; +import ComposerPollForm from '../../composer/poll_form'; +import ComposerWarning from '../../composer/warning'; +import ComposerHashtagWarning from '../../composer/hashtag_warning'; +import ComposerDirectWarning from '../../composer/direct_warning'; + +// Utils. +import { countableText } from 'flavours/glitch/util/counter'; +import { isMobile } from 'flavours/glitch/util/is_mobile'; + +const messages = defineMessages({ + missingDescriptionMessage: { id: 'confirmations.missing_media_description.message', + defaultMessage: 'At least one media attachment is lacking a description. Consider describing all media attachments for the visually impaired before sending your toot.' }, + missingDescriptionConfirm: { id: 'confirmations.missing_media_description.confirm', + defaultMessage: 'Send anyway' }, +}); + +export default @injectIntl +class ComposeForm extends ImmutablePureComponent { + + static contextTypes = { + router: PropTypes.object, + }; + + static propTypes = { + intl: PropTypes.object.isRequired, + + // State props. + acceptContentTypes: PropTypes.string, + advancedOptions: ImmutablePropTypes.map, + amUnlocked: PropTypes.bool, + focusDate: PropTypes.instanceOf(Date), + caretPosition: PropTypes.number, + isSubmitting: PropTypes.bool, + isChangingUpload: PropTypes.bool, + isUploading: PropTypes.bool, + layout: PropTypes.string, + media: ImmutablePropTypes.list, + preselectDate: PropTypes.instanceOf(Date), + privacy: PropTypes.string, + progress: PropTypes.number, + inReplyTo: ImmutablePropTypes.map, + resetFileKey: PropTypes.number, + sideArm: PropTypes.string, + sensitive: PropTypes.bool, + showSearch: PropTypes.bool, + spoiler: PropTypes.bool, + spoilerText: PropTypes.string, + suggestionToken: PropTypes.string, + suggestions: ImmutablePropTypes.list, + text: PropTypes.string, + anyMedia: PropTypes.bool, + spoilersAlwaysOn: PropTypes.bool, + mediaDescriptionConfirmation: PropTypes.bool, + preselectOnReply: PropTypes.bool, + + // Dispatch props. + onCancelReply: PropTypes.func, + onChangeAdvancedOption: PropTypes.func, + onChangeDescription: PropTypes.func, + onChangeSensitivity: PropTypes.func, + onChangeSpoilerText: PropTypes.func, + onChangeSpoilerness: PropTypes.func, + onChangeText: PropTypes.func, + onChangeVisibility: PropTypes.func, + onClearSuggestions: PropTypes.func, + onCloseModal: PropTypes.func, + onFetchSuggestions: PropTypes.func, + onInsertEmoji: PropTypes.func, + onMount: PropTypes.func, + onOpenActionsModal: PropTypes.func, + onOpenDoodleModal: PropTypes.func, + onSelectSuggestion: PropTypes.func, + onSubmit: PropTypes.func, + onUndoUpload: PropTypes.func, + onUnmount: PropTypes.func, + onUpload: PropTypes.func, + onMediaDescriptionConfirm: PropTypes.func, + }; + + // Changes the text value of the spoiler. + handleChangeSpoiler = ({ target: { value } }) => { + const { onChangeSpoilerText } = this.props; + if (onChangeSpoilerText) { + onChangeSpoilerText(value); + } + } + + // Inserts an emoji at the caret. + handleEmoji = (data) => { + const { textarea: { selectionStart } } = this; + const { onInsertEmoji } = this.props; + if (onInsertEmoji) { + onInsertEmoji(selectionStart, data); + } + } + + // Handles the secondary submit button. + handleSecondarySubmit = () => { + const { handleSubmit } = this.handlers; + const { + onChangeVisibility, + sideArm, + } = this.props; + if (sideArm !== 'none' && onChangeVisibility) { + onChangeVisibility(sideArm); + } + handleSubmit(); + } + + // Selects a suggestion from the autofill. + handleSelect = (tokenStart, token, value) => { + const { onSelectSuggestion } = this.props; + if (onSelectSuggestion) { + onSelectSuggestion(tokenStart, token, value); + } + } + + // Submits the status. + handleSubmit = () => { + const { textarea: { value }, uploadForm } = this; + const { + onChangeText, + onSubmit, + isSubmitting, + isChangingUpload, + isUploading, + media, + anyMedia, + text, + mediaDescriptionConfirmation, + onMediaDescriptionConfirm, + } = this.props; + + // If something changes inside the textarea, then we update the + // state before submitting. + if (onChangeText && text !== value) { + onChangeText(value); + } + + // Submit disabled: + if (isSubmitting || isUploading || isChangingUpload || (!text.trim().length && !anyMedia)) { + return; + } + + // Submit unless there are media with missing descriptions + if (mediaDescriptionConfirmation && onMediaDescriptionConfirm && media && media.some(item => !item.get('description'))) { + const firstWithoutDescription = media.findIndex(item => !item.get('description')); + if (uploadForm) { + const inputs = uploadForm.querySelectorAll('.composer--upload_form--item input'); + if (inputs.length == media.size && firstWithoutDescription !== -1) { + inputs[firstWithoutDescription].focus(); + } + } + onMediaDescriptionConfirm(this.context.router ? this.context.router.history : null); + } else if (onSubmit) { + onSubmit(this.context.router ? this.context.router.history : null); + } + } + + // Sets a reference to the upload form. + handleRefUploadForm = (uploadFormComponent) => { + this.uploadForm = uploadFormComponent; + } + + // Sets a reference to the textarea. + handleRefTextarea = (textareaComponent) => { + if (textareaComponent) { + this.textarea = textareaComponent.textarea; + } + } + + // Sets a reference to the CW field. + handleRefSpoilerText = (spoilerComponent) => { + if (spoilerComponent) { + this.spoilerText = spoilerComponent.spoilerText; + } + } + + // Tells our state the composer has been mounted. + componentDidMount () { + const { onMount } = this.props; + if (onMount) { + onMount(); + } + } + + // Tells our state the composer has been unmounted. + componentWillUnmount () { + const { onUnmount } = this.props; + if (onUnmount) { + onUnmount(); + } + } + + // This statement does several things: + // - If we're beginning a reply, and, + // - Replying to zero or one users, places the cursor at the end + // of the textbox. + // - Replying to more than one user, selects any usernames past + // the first; this provides a convenient shortcut to drop + // everyone else from the conversation. + componentDidUpdate (prevProps) { + const { + textarea, + spoilerText, + } = this; + const { + focusDate, + caretPosition, + isSubmitting, + preselectDate, + text, + preselectOnReply, + } = this.props; + let selectionEnd, selectionStart; + + // Caret/selection handling. + if (focusDate !== prevProps.focusDate) { + switch (true) { + case preselectDate !== prevProps.preselectDate && preselectOnReply: + selectionStart = text.search(/\s/) + 1; + selectionEnd = text.length; + break; + case !isNaN(caretPosition) && caretPosition !== null: + selectionStart = selectionEnd = caretPosition; + break; + default: + selectionStart = selectionEnd = text.length; + } + if (textarea) { + textarea.setSelectionRange(selectionStart, selectionEnd); + textarea.focus(); + textarea.scrollIntoView(); + } + + // Refocuses the textarea after submitting. + } else if (textarea && prevProps.isSubmitting && !isSubmitting) { + textarea.focus(); + } else if (this.props.spoiler !== prevProps.spoiler) { + if (this.props.spoiler) { + if (spoilerText) { + spoilerText.focus(); + } + } else { + if (textarea) { + textarea.focus(); + } + } + } + } + + render () { + const { + handleChangeSpoiler, + handleEmoji, + handleSecondarySubmit, + handleSelect, + handleSubmit, + handleRefUploadForm, + handleRefTextarea, + handleRefSpoilerText, + } = this; + const { + acceptContentTypes, + advancedOptions, + amUnlocked, + anyMedia, + intl, + isSubmitting, + isChangingUpload, + isUploading, + layout, + media, + poll, + onCancelReply, + onChangeAdvancedOption, + onChangeDescription, + onChangeSensitivity, + onChangeSpoilerness, + onChangeText, + onChangeVisibility, + onTogglePoll, + onClearSuggestions, + onCloseModal, + onFetchSuggestions, + onOpenActionsModal, + onOpenDoodleModal, + onOpenFocalPointModal, + onUndoUpload, + onUpload, + privacy, + progress, + inReplyTo, + resetFileKey, + sensitive, + showSearch, + sideArm, + spoiler, + spoilerText, + suggestions, + text, + spoilersAlwaysOn, + } = this.props; + + let disabledButton = isSubmitting || isUploading || isChangingUpload || (!text.trim().length && !anyMedia); + + return ( +
+ {privacy === 'direct' ? : null} + {privacy === 'private' && amUnlocked ? : null} + {privacy !== 'public' && APPROX_HASHTAG_RE.test(text) ? : null} + {inReplyTo && ( + + )} +
+ ); + } + +} diff --git a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js new file mode 100644 index 000000000..18fc31dce --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js @@ -0,0 +1,175 @@ +import { connect } from 'react-redux'; +import ComposeForm from '../components/compose_form'; +import { + cancelReplyCompose, + changeCompose, + changeComposeAdvancedOption, + changeComposeSensitivity, + changeComposeSpoilerText, + changeComposeSpoilerness, + changeComposeVisibility, + changeUploadCompose, + clearComposeSuggestions, + fetchComposeSuggestions, + insertEmojiCompose, + mountCompose, + selectComposeSuggestion, + submitCompose, + undoUploadCompose, + unmountCompose, + uploadCompose, +} from 'flavours/glitch/actions/compose'; +import { + closeModal, + openModal, +} from 'flavours/glitch/actions/modal'; +import { changeLocalSetting } from 'flavours/glitch/actions/local_settings'; +import { addPoll, removePoll } from 'flavours/glitch/actions/compose'; + +import { privacyPreference } from 'flavours/glitch/util/privacy_preference'; +import { me } from 'flavours/glitch/util/initial_state'; + +const messages = defineMessages({ + missingDescriptionMessage: { id: 'confirmations.missing_media_description.message', + defaultMessage: 'At least one media attachment is lacking a description. Consider describing all media attachments for the visually impaired before sending your toot.' }, + missingDescriptionConfirm: { id: 'confirmations.missing_media_description.confirm', + defaultMessage: 'Send anyway' }, +}); +import { defineMessages } from 'react-intl'; + +// State mapping. +function mapStateToProps (state) { + const spoilersAlwaysOn = state.getIn(['local_settings', 'always_show_spoilers_field']); + const inReplyTo = state.getIn(['compose', 'in_reply_to']); + const replyPrivacy = inReplyTo ? state.getIn(['statuses', inReplyTo, 'visibility']) : null; + const sideArmBasePrivacy = state.getIn(['local_settings', 'side_arm']); + const sideArmRestrictedPrivacy = replyPrivacy ? privacyPreference(replyPrivacy, sideArmBasePrivacy) : null; + let sideArmPrivacy = null; + switch (state.getIn(['local_settings', 'side_arm_reply_mode'])) { + case 'copy': + sideArmPrivacy = replyPrivacy; + break; + case 'restrict': + sideArmPrivacy = sideArmRestrictedPrivacy; + break; + } + sideArmPrivacy = sideArmPrivacy || sideArmBasePrivacy; + return { + acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']).toArray().join(','), + advancedOptions: state.getIn(['compose', 'advanced_options']), + amUnlocked: !state.getIn(['accounts', me, 'locked']), + focusDate: state.getIn(['compose', 'focusDate']), + caretPosition: state.getIn(['compose', 'caretPosition']), + isSubmitting: state.getIn(['compose', 'is_submitting']), + isChangingUpload: state.getIn(['compose', 'is_changing_upload']), + isUploading: state.getIn(['compose', 'is_uploading']), + layout: state.getIn(['local_settings', 'layout']), + media: state.getIn(['compose', 'media_attachments']), + preselectDate: state.getIn(['compose', 'preselectDate']), + privacy: state.getIn(['compose', 'privacy']), + progress: state.getIn(['compose', 'progress']), + inReplyTo: inReplyTo ? state.getIn(['statuses', inReplyTo]) : null, + replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null, + replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null, + resetFileKey: state.getIn(['compose', 'resetFileKey']), + sideArm: sideArmPrivacy, + sensitive: state.getIn(['compose', 'sensitive']), + showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']), + spoiler: spoilersAlwaysOn || state.getIn(['compose', 'spoiler']), + spoilerText: state.getIn(['compose', 'spoiler_text']), + suggestionToken: state.getIn(['compose', 'suggestion_token']), + suggestions: state.getIn(['compose', 'suggestions']), + text: state.getIn(['compose', 'text']), + anyMedia: state.getIn(['compose', 'media_attachments']).size > 0, + poll: state.getIn(['compose', 'poll']), + spoilersAlwaysOn: spoilersAlwaysOn, + mediaDescriptionConfirmation: state.getIn(['local_settings', 'confirm_missing_media_description']), + preselectOnReply: state.getIn(['local_settings', 'preselect_on_reply']), + }; +}; + +// Dispatch mapping. +const mapDispatchToProps = (dispatch, { intl }) => ({ + onCancelReply() { + dispatch(cancelReplyCompose()); + }, + onChangeAdvancedOption(option, value) { + dispatch(changeComposeAdvancedOption(option, value)); + }, + onChangeDescription(id, description) { + dispatch(changeUploadCompose(id, { description })); + }, + onChangeSensitivity() { + dispatch(changeComposeSensitivity()); + }, + onChangeSpoilerText(text) { + dispatch(changeComposeSpoilerText(text)); + }, + onChangeSpoilerness() { + dispatch(changeComposeSpoilerness()); + }, + onChangeText(text) { + dispatch(changeCompose(text)); + }, + onChangeVisibility(value) { + dispatch(changeComposeVisibility(value)); + }, + onTogglePoll() { + dispatch((_, getState) => { + if (getState().getIn(['compose', 'poll'])) { + dispatch(removePoll()); + } else { + dispatch(addPoll()); + } + }); + }, + onClearSuggestions() { + dispatch(clearComposeSuggestions()); + }, + onCloseModal() { + dispatch(closeModal()); + }, + onFetchSuggestions(token) { + dispatch(fetchComposeSuggestions(token)); + }, + onInsertEmoji(position, emoji) { + dispatch(insertEmojiCompose(position, emoji)); + }, + onMount() { + dispatch(mountCompose()); + }, + onOpenActionsModal(props) { + dispatch(openModal('ACTIONS', props)); + }, + onOpenDoodleModal() { + dispatch(openModal('DOODLE', { noEsc: true })); + }, + onOpenFocalPointModal(id) { + dispatch(openModal('FOCAL_POINT', { id })); + }, + onSelectSuggestion(position, token, suggestion) { + dispatch(selectComposeSuggestion(position, token, suggestion)); + }, + onMediaDescriptionConfirm(routerHistory) { + dispatch(openModal('CONFIRM', { + message: intl.formatMessage(messages.missingDescriptionMessage), + confirm: intl.formatMessage(messages.missingDescriptionConfirm), + onConfirm: () => dispatch(submitCompose(routerHistory)), + onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_missing_media_description'], false)), + })); + }, + onSubmit(routerHistory) { + dispatch(submitCompose(routerHistory)); + }, + onUndoUpload(id) { + dispatch(undoUploadCompose(id)); + }, + onUnmount() { + dispatch(unmountCompose()); + }, + onUpload(files) { + dispatch(uploadCompose(files)); + }, +}); + +export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm); diff --git a/app/javascript/flavours/glitch/features/compose/index.js b/app/javascript/flavours/glitch/features/compose/index.js index 923d379ec..01e7d1906 100644 --- a/app/javascript/flavours/glitch/features/compose/index.js +++ b/app/javascript/flavours/glitch/features/compose/index.js @@ -10,7 +10,7 @@ import classNames from 'classnames'; import { cycleElefriendCompose } from 'flavours/glitch/actions/compose'; // Components. -import Composer from 'flavours/glitch/features/composer'; +import ComposeFormContainer from './containers/compose_form_container'; import HeaderContainer from './containers/header_container'; import SearchContainer from './containers/search_container'; import SearchResultsContainer from './containers/search_results_container'; @@ -73,11 +73,13 @@ class Compose extends React.PureComponent { return (
{multiColumn && } + {(multiColumn || isSearchPage) && } +
{!isSearchPage &&
- + {multiColumn && (
{mascot ? :
); } + } diff --git a/app/javascript/flavours/glitch/features/composer/index.js b/app/javascript/flavours/glitch/features/composer/index.js deleted file mode 100644 index 9d2e0b3da..000000000 --- a/app/javascript/flavours/glitch/features/composer/index.js +++ /dev/null @@ -1,600 +0,0 @@ -// Package imports. -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages } from 'react-intl'; - -const APPROX_HASHTAG_RE = /(?:^|[^\/\)\w])#(\S+)/i; - -// Actions. -import { - cancelReplyCompose, - changeCompose, - changeComposeAdvancedOption, - changeComposeSensitivity, - changeComposeSpoilerText, - changeComposeSpoilerness, - changeComposeVisibility, - changeUploadCompose, - clearComposeSuggestions, - fetchComposeSuggestions, - insertEmojiCompose, - mountCompose, - selectComposeSuggestion, - submitCompose, - undoUploadCompose, - unmountCompose, - uploadCompose, -} from 'flavours/glitch/actions/compose'; -import { - closeModal, - openModal, -} from 'flavours/glitch/actions/modal'; -import { changeLocalSetting } from 'flavours/glitch/actions/local_settings'; -import { addPoll, removePoll } from 'flavours/glitch/actions/compose'; - -// Components. -import ComposerOptions from './options'; -import ComposerPublisher from './publisher'; -import ComposerReply from './reply'; -import ComposerSpoiler from './spoiler'; -import ComposerTextarea from './textarea'; -import ComposerUploadForm from './upload_form'; -import ComposerPollForm from './poll_form'; -import ComposerWarning from './warning'; -import ComposerHashtagWarning from './hashtag_warning'; -import ComposerDirectWarning from './direct_warning'; - -// Utils. -import { countableText } from 'flavours/glitch/util/counter'; -import { me } from 'flavours/glitch/util/initial_state'; -import { isMobile } from 'flavours/glitch/util/is_mobile'; -import { assignHandlers } from 'flavours/glitch/util/react_helpers'; -import { wrap } from 'flavours/glitch/util/redux_helpers'; -import { privacyPreference } from 'flavours/glitch/util/privacy_preference'; - -const messages = defineMessages({ - missingDescriptionMessage: { id: 'confirmations.missing_media_description.message', - defaultMessage: 'At least one media attachment is lacking a description. Consider describing all media attachments for the visually impaired before sending your toot.' }, - missingDescriptionConfirm: { id: 'confirmations.missing_media_description.confirm', - defaultMessage: 'Send anyway' }, -}); - -// State mapping. -function mapStateToProps (state) { - const spoilersAlwaysOn = state.getIn(['local_settings', 'always_show_spoilers_field']); - const inReplyTo = state.getIn(['compose', 'in_reply_to']); - const replyPrivacy = inReplyTo ? state.getIn(['statuses', inReplyTo, 'visibility']) : null; - const sideArmBasePrivacy = state.getIn(['local_settings', 'side_arm']); - const sideArmRestrictedPrivacy = replyPrivacy ? privacyPreference(replyPrivacy, sideArmBasePrivacy) : null; - let sideArmPrivacy = null; - switch (state.getIn(['local_settings', 'side_arm_reply_mode'])) { - case 'copy': - sideArmPrivacy = replyPrivacy; - break; - case 'restrict': - sideArmPrivacy = sideArmRestrictedPrivacy; - break; - } - sideArmPrivacy = sideArmPrivacy || sideArmBasePrivacy; - return { - acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']).toArray().join(','), - advancedOptions: state.getIn(['compose', 'advanced_options']), - amUnlocked: !state.getIn(['accounts', me, 'locked']), - focusDate: state.getIn(['compose', 'focusDate']), - caretPosition: state.getIn(['compose', 'caretPosition']), - isSubmitting: state.getIn(['compose', 'is_submitting']), - isChangingUpload: state.getIn(['compose', 'is_changing_upload']), - isUploading: state.getIn(['compose', 'is_uploading']), - layout: state.getIn(['local_settings', 'layout']), - media: state.getIn(['compose', 'media_attachments']), - preselectDate: state.getIn(['compose', 'preselectDate']), - privacy: state.getIn(['compose', 'privacy']), - progress: state.getIn(['compose', 'progress']), - inReplyTo: inReplyTo ? state.getIn(['statuses', inReplyTo]) : null, - replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null, - replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null, - resetFileKey: state.getIn(['compose', 'resetFileKey']), - sideArm: sideArmPrivacy, - sensitive: state.getIn(['compose', 'sensitive']), - showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']), - spoiler: spoilersAlwaysOn || state.getIn(['compose', 'spoiler']), - spoilerText: state.getIn(['compose', 'spoiler_text']), - suggestionToken: state.getIn(['compose', 'suggestion_token']), - suggestions: state.getIn(['compose', 'suggestions']), - text: state.getIn(['compose', 'text']), - anyMedia: state.getIn(['compose', 'media_attachments']).size > 0, - poll: state.getIn(['compose', 'poll']), - spoilersAlwaysOn: spoilersAlwaysOn, - mediaDescriptionConfirmation: state.getIn(['local_settings', 'confirm_missing_media_description']), - preselectOnReply: state.getIn(['local_settings', 'preselect_on_reply']), - }; -}; - -// Dispatch mapping. -const mapDispatchToProps = (dispatch, { intl }) => ({ - onCancelReply() { - dispatch(cancelReplyCompose()); - }, - onChangeAdvancedOption(option, value) { - dispatch(changeComposeAdvancedOption(option, value)); - }, - onChangeDescription(id, description) { - dispatch(changeUploadCompose(id, { description })); - }, - onChangeSensitivity() { - dispatch(changeComposeSensitivity()); - }, - onChangeSpoilerText(text) { - dispatch(changeComposeSpoilerText(text)); - }, - onChangeSpoilerness() { - dispatch(changeComposeSpoilerness()); - }, - onChangeText(text) { - dispatch(changeCompose(text)); - }, - onChangeVisibility(value) { - dispatch(changeComposeVisibility(value)); - }, - onTogglePoll() { - dispatch((_, getState) => { - if (getState().getIn(['compose', 'poll'])) { - dispatch(removePoll()); - } else { - dispatch(addPoll()); - } - }); - }, - onClearSuggestions() { - dispatch(clearComposeSuggestions()); - }, - onCloseModal() { - dispatch(closeModal()); - }, - onFetchSuggestions(token) { - dispatch(fetchComposeSuggestions(token)); - }, - onInsertEmoji(position, emoji) { - dispatch(insertEmojiCompose(position, emoji)); - }, - onMount() { - dispatch(mountCompose()); - }, - onOpenActionsModal(props) { - dispatch(openModal('ACTIONS', props)); - }, - onOpenDoodleModal() { - dispatch(openModal('DOODLE', { noEsc: true })); - }, - onOpenFocalPointModal(id) { - dispatch(openModal('FOCAL_POINT', { id })); - }, - onSelectSuggestion(position, token, suggestion) { - dispatch(selectComposeSuggestion(position, token, suggestion)); - }, - onMediaDescriptionConfirm(routerHistory) { - dispatch(openModal('CONFIRM', { - message: intl.formatMessage(messages.missingDescriptionMessage), - confirm: intl.formatMessage(messages.missingDescriptionConfirm), - onConfirm: () => dispatch(submitCompose(routerHistory)), - onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_missing_media_description'], false)), - })); - }, - onSubmit(routerHistory) { - dispatch(submitCompose(routerHistory)); - }, - onUndoUpload(id) { - dispatch(undoUploadCompose(id)); - }, - onUnmount() { - dispatch(unmountCompose()); - }, - onUpload(files) { - dispatch(uploadCompose(files)); - }, -}); - -// Handlers. -const handlers = { - - // Changes the text value of the spoiler. - handleChangeSpoiler ({ target: { value } }) { - const { onChangeSpoilerText } = this.props; - if (onChangeSpoilerText) { - onChangeSpoilerText(value); - } - }, - - // Inserts an emoji at the caret. - handleEmoji (data) { - const { textarea: { selectionStart } } = this; - const { onInsertEmoji } = this.props; - if (onInsertEmoji) { - onInsertEmoji(selectionStart, data); - } - }, - - // Handles the secondary submit button. - handleSecondarySubmit () { - const { handleSubmit } = this.handlers; - const { - onChangeVisibility, - sideArm, - } = this.props; - if (sideArm !== 'none' && onChangeVisibility) { - onChangeVisibility(sideArm); - } - handleSubmit(); - }, - - // Selects a suggestion from the autofill. - handleSelect (tokenStart, token, value) { - const { onSelectSuggestion } = this.props; - if (onSelectSuggestion) { - onSelectSuggestion(tokenStart, token, value); - } - }, - - // Submits the status. - handleSubmit () { - const { textarea: { value }, uploadForm } = this; - const { - onChangeText, - onSubmit, - isSubmitting, - isChangingUpload, - isUploading, - media, - anyMedia, - text, - mediaDescriptionConfirmation, - onMediaDescriptionConfirm, - } = this.props; - - // If something changes inside the textarea, then we update the - // state before submitting. - if (onChangeText && text !== value) { - onChangeText(value); - } - - // Submit disabled: - if (isSubmitting || isUploading || isChangingUpload || (!text.trim().length && !anyMedia)) { - return; - } - - // Submit unless there are media with missing descriptions - if (mediaDescriptionConfirmation && onMediaDescriptionConfirm && media && media.some(item => !item.get('description'))) { - const firstWithoutDescription = media.findIndex(item => !item.get('description')); - if (uploadForm) { - const inputs = uploadForm.querySelectorAll('.composer--upload_form--item input'); - if (inputs.length == media.size && firstWithoutDescription !== -1) { - inputs[firstWithoutDescription].focus(); - } - } - onMediaDescriptionConfirm(this.context.router ? this.context.router.history : null); - } else if (onSubmit) { - onSubmit(this.context.router ? this.context.router.history : null); - } - }, - - // Sets a reference to the upload form. - handleRefUploadForm (uploadFormComponent) { - this.uploadForm = uploadFormComponent; - }, - - // Sets a reference to the textarea. - handleRefTextarea (textareaComponent) { - if (textareaComponent) { - this.textarea = textareaComponent.textarea; - } - }, - - // Sets a reference to the CW field. - handleRefSpoilerText (spoilerComponent) { - if (spoilerComponent) { - this.spoilerText = spoilerComponent.spoilerText; - } - } -}; - -// The component. -class Composer extends React.Component { - - // Constructor. - constructor (props) { - super(props); - assignHandlers(this, handlers); - - // Instance variables. - this.textarea = null; - this.spoilerText = null; - } - - // Tells our state the composer has been mounted. - componentDidMount () { - const { onMount } = this.props; - if (onMount) { - onMount(); - } - } - - // Tells our state the composer has been unmounted. - componentWillUnmount () { - const { onUnmount } = this.props; - if (onUnmount) { - onUnmount(); - } - } - - // This statement does several things: - // - If we're beginning a reply, and, - // - Replying to zero or one users, places the cursor at the end - // of the textbox. - // - Replying to more than one user, selects any usernames past - // the first; this provides a convenient shortcut to drop - // everyone else from the conversation. - componentDidUpdate (prevProps) { - const { - textarea, - spoilerText, - } = this; - const { - focusDate, - caretPosition, - isSubmitting, - preselectDate, - text, - preselectOnReply, - } = this.props; - let selectionEnd, selectionStart; - - // Caret/selection handling. - if (focusDate !== prevProps.focusDate) { - switch (true) { - case preselectDate !== prevProps.preselectDate && preselectOnReply: - selectionStart = text.search(/\s/) + 1; - selectionEnd = text.length; - break; - case !isNaN(caretPosition) && caretPosition !== null: - selectionStart = selectionEnd = caretPosition; - break; - default: - selectionStart = selectionEnd = text.length; - } - if (textarea) { - textarea.setSelectionRange(selectionStart, selectionEnd); - textarea.focus(); - textarea.scrollIntoView(); - } - - // Refocuses the textarea after submitting. - } else if (textarea && prevProps.isSubmitting && !isSubmitting) { - textarea.focus(); - } else if (this.props.spoiler !== prevProps.spoiler) { - if (this.props.spoiler) { - if (spoilerText) { - spoilerText.focus(); - } - } else { - if (textarea) { - textarea.focus(); - } - } - } - } - - render () { - const { - handleChangeSpoiler, - handleEmoji, - handleSecondarySubmit, - handleSelect, - handleSubmit, - handleRefUploadForm, - handleRefTextarea, - handleRefSpoilerText, - } = this.handlers; - const { - acceptContentTypes, - advancedOptions, - amUnlocked, - anyMedia, - intl, - isSubmitting, - isChangingUpload, - isUploading, - layout, - media, - poll, - onCancelReply, - onChangeAdvancedOption, - onChangeDescription, - onChangeSensitivity, - onChangeSpoilerness, - onChangeText, - onChangeVisibility, - onTogglePoll, - onClearSuggestions, - onCloseModal, - onFetchSuggestions, - onOpenActionsModal, - onOpenDoodleModal, - onOpenFocalPointModal, - onUndoUpload, - onUpload, - privacy, - progress, - inReplyTo, - resetFileKey, - sensitive, - showSearch, - sideArm, - spoiler, - spoilerText, - suggestions, - text, - spoilersAlwaysOn, - } = this.props; - - let disabledButton = isSubmitting || isUploading || isChangingUpload || (!text.trim().length && !anyMedia); - - return ( -
- {privacy === 'direct' ? : null} - {privacy === 'private' && amUnlocked ? : null} - {privacy !== 'public' && APPROX_HASHTAG_RE.test(text) ? : null} - {inReplyTo && ( - - )} -
- ); - } - -} - -// Props. -Composer.propTypes = { - intl: PropTypes.object.isRequired, - - // State props. - acceptContentTypes: PropTypes.string, - advancedOptions: ImmutablePropTypes.map, - amUnlocked: PropTypes.bool, - focusDate: PropTypes.instanceOf(Date), - caretPosition: PropTypes.number, - isSubmitting: PropTypes.bool, - isChangingUpload: PropTypes.bool, - isUploading: PropTypes.bool, - layout: PropTypes.string, - media: ImmutablePropTypes.list, - preselectDate: PropTypes.instanceOf(Date), - privacy: PropTypes.string, - progress: PropTypes.number, - inReplyTo: ImmutablePropTypes.map, - resetFileKey: PropTypes.number, - sideArm: PropTypes.string, - sensitive: PropTypes.bool, - showSearch: PropTypes.bool, - spoiler: PropTypes.bool, - spoilerText: PropTypes.string, - suggestionToken: PropTypes.string, - suggestions: ImmutablePropTypes.list, - text: PropTypes.string, - anyMedia: PropTypes.bool, - spoilersAlwaysOn: PropTypes.bool, - mediaDescriptionConfirmation: PropTypes.bool, - preselectOnReply: PropTypes.bool, - - // Dispatch props. - onCancelReply: PropTypes.func, - onChangeAdvancedOption: PropTypes.func, - onChangeDescription: PropTypes.func, - onChangeSensitivity: PropTypes.func, - onChangeSpoilerText: PropTypes.func, - onChangeSpoilerness: PropTypes.func, - onChangeText: PropTypes.func, - onChangeVisibility: PropTypes.func, - onClearSuggestions: PropTypes.func, - onCloseModal: PropTypes.func, - onFetchSuggestions: PropTypes.func, - onInsertEmoji: PropTypes.func, - onMount: PropTypes.func, - onOpenActionsModal: PropTypes.func, - onOpenDoodleModal: PropTypes.func, - onSelectSuggestion: PropTypes.func, - onSubmit: PropTypes.func, - onUndoUpload: PropTypes.func, - onUnmount: PropTypes.func, - onUpload: PropTypes.func, - onMediaDescriptionConfirm: PropTypes.func, -}; - -Composer.contextTypes = { - router: PropTypes.object, -}; - -// Connecting and export. -export { Composer as WrappedComponent }; -export default wrap(Composer, mapStateToProps, mapDispatchToProps, true); diff --git a/app/javascript/flavours/glitch/features/standalone/compose/index.js b/app/javascript/flavours/glitch/features/standalone/compose/index.js index a77b59448..b33c21cb5 100644 --- a/app/javascript/flavours/glitch/features/standalone/compose/index.js +++ b/app/javascript/flavours/glitch/features/standalone/compose/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import Composer from 'flavours/glitch/features/composer'; +import ComposeFormContainer from 'flavours/glitch/features/compose/containers/compose_form_container'; import NotificationsContainer from 'flavours/glitch/features/ui/containers/notifications_container'; import LoadingBarContainer from 'flavours/glitch/features/ui/containers/loading_bar_container'; import ModalContainer from 'flavours/glitch/features/ui/containers/modal_container'; @@ -9,7 +9,7 @@ export default class Compose extends React.PureComponent { render () { return (
- + diff --git a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js index a8ac83366..f13e2e645 100644 --- a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js @@ -6,7 +6,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ReactSwipeableViews from 'react-swipeable-views'; import classNames from 'classnames'; import Permalink from 'flavours/glitch/components/permalink'; -import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer'; +import { ComposeForm } from 'flavours/glitch/features/compose/components/compose_form'; import DrawerAccount from 'flavours/glitch/features/compose/components/navigation_bar'; import Search from 'flavours/glitch/features/compose/components/search'; import ColumnHeader from './column_header'; @@ -45,8 +45,7 @@ const PageTwo = ({ intl, myAccount }) => (
- -- cgit From 039e35560c04e4af1bb35b8ab11b9e145c8a4985 Mon Sep 17 00:00:00 2001 From: kedama Date: Mon, 22 Apr 2019 21:55:50 +0900 Subject: [Glitch] Fix modal items cannot scroll on touch devices Port d763d39d2628bef123cdc801b2a3a3922b7e37f2 to glitch-soc --- .../flavours/glitch/features/ui/components/actions_modal.js | 2 +- app/javascript/flavours/glitch/styles/components/modal.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/features/ui/components/actions_modal.js b/app/javascript/flavours/glitch/features/ui/components/actions_modal.js index 9ac6dcf49..724f1c764 100644 --- a/app/javascript/flavours/glitch/features/ui/components/actions_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/actions_modal.js @@ -114,7 +114,7 @@ export default class ActionsModal extends ImmutablePureComponent {
{status} -
    +
      {this.props.actions.map(this.renderAction)}
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index 05af34680..2e5b7be55 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -621,6 +621,11 @@ ul { overflow-y: auto; flex-shrink: 0; + max-height: 80vh; + + &.with-status { + max-height: calc(80vh - 75px); + } li:empty { margin: 0; -- cgit From f3acf8f41422e70b88371f0f6ed4a0b6d9723783 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 27 Apr 2019 19:08:38 +0200 Subject: Add hotkey for bookmarking a toot --- app/javascript/flavours/glitch/components/status.js | 6 ++++++ app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js | 4 ++++ app/javascript/flavours/glitch/features/status/index.js | 5 +++++ app/javascript/flavours/glitch/features/ui/index.js | 1 + 4 files changed, 16 insertions(+) (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index cd22fb593..b28abbc42 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -53,6 +53,7 @@ export default class Status extends ImmutablePureComponent { onReply: PropTypes.func, onFavourite: PropTypes.func, onReblog: PropTypes.func, + onBookmark: PropTypes.func, onDelete: PropTypes.func, onDirect: PropTypes.func, onMention: PropTypes.func, @@ -337,6 +338,10 @@ export default class Status extends ImmutablePureComponent { this.props.onReblog(this.props.status, e); } + handleHotkeyBookmark = e => { + this.props.onBookmark(this.props.status, e); + } + handleHotkeyMention = e => { e.preventDefault(); this.props.onMention(this.props.status.get('account'), this.context.router.history); @@ -550,6 +555,7 @@ export default class Status extends ImmutablePureComponent { moveUp: this.handleHotkeyMoveUp, moveDown: this.handleHotkeyMoveDown, toggleSpoiler: this.handleExpandedToggle, + bookmark: this.handleHotkeyBookmark, }; const computedClass = classNames('status', `status-${status.get('visibility')}`, { diff --git a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js index 75eb5653c..465754153 100644 --- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js +++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js @@ -52,6 +52,10 @@ export default class KeyboardShortcuts extends ImmutablePureComponent { b + + d + + enter, o diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js index a0a9b986c..6cf8b8151 100644 --- a/app/javascript/flavours/glitch/features/status/index.js +++ b/app/javascript/flavours/glitch/features/status/index.js @@ -325,6 +325,10 @@ export default class Status extends ImmutablePureComponent { this.handleReblogClick(this.props.status); } + handleHotkeyBookmark = () => { + this.handleBookmarkClick(this.props.status); + } + handleHotkeyMention = e => { e.preventDefault(); this.handleMentionClick(this.props.status); @@ -463,6 +467,7 @@ export default class Status extends ImmutablePureComponent { reply: this.handleHotkeyReply, favourite: this.handleHotkeyFavourite, boost: this.handleHotkeyBoost, + bookmark: this.handleHotkeyBookmark, mention: this.handleHotkeyMention, openProfile: this.handleHotkeyOpenProfile, toggleSpoiler: this.handleExpandedToggle, diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index dd527d528..947fdac93 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -98,6 +98,7 @@ const keyMap = { goToMuted: 'g m', goToRequests: 'g r', toggleSpoiler: 'x', + bookmark: 'd', }; @connect(mapStateToProps) -- cgit From 67fb9a867956207ce52e5d683634bd58c82340ad Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 27 Apr 2019 19:17:42 +0200 Subject: Add keyboard shortcut to collapse/uncollapse toots --- app/javascript/flavours/glitch/components/status.js | 9 +++++++++ .../flavours/glitch/features/keyboard_shortcuts/index.js | 15 ++++++++++++++- app/javascript/flavours/glitch/features/ui/index.js | 1 + 3 files changed, 24 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index b28abbc42..94297260b 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -367,6 +367,14 @@ export default class Status extends ImmutablePureComponent { this.props.onMoveDown(this.props.containerId || this.props.id, e.target.getAttribute('data-featured')); } + handleHotkeyCollapse = e => { + if (!this.props.settings.getIn(['collapsed', 'enabled'])) + return; + + this.setCollapsed(!this.state.isCollapsed); + } + + handleRef = c => { this.node = c; } @@ -556,6 +564,7 @@ export default class Status extends ImmutablePureComponent { moveDown: this.handleHotkeyMoveDown, toggleSpoiler: this.handleExpandedToggle, bookmark: this.handleHotkeyBookmark, + toggleCollapse: this.handleHotkeyCollapse, }; const computedClass = classNames('status', `status-${status.get('visibility')}`, { diff --git a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js index 465754153..2935a6021 100644 --- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js +++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js @@ -1,6 +1,7 @@ import React from 'react'; import Column from 'flavours/glitch/features/ui/components/column'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; +import { connect } from 'react-redux'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -9,16 +10,22 @@ const messages = defineMessages({ heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' }, }); +const mapStateToProps = state => ({ + collapseEnabled: state.getIn(['local_settings', 'collapsed', 'enabled']), +}); + +@connect(mapStateToProps) @injectIntl export default class KeyboardShortcuts extends ImmutablePureComponent { static propTypes = { intl: PropTypes.object.isRequired, multiColumn: PropTypes.bool, + collapseEnabled: PropTypes.bool, }; render () { - const { intl } = this.props; + const { intl, collapseEnabled } = this.props; return ( @@ -64,6 +71,12 @@ export default class KeyboardShortcuts extends ImmutablePureComponent { x + {collapseEnabled && ( + + shift+x + + + )} up, k diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 947fdac93..f95571d25 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -99,6 +99,7 @@ const keyMap = { goToRequests: 'g r', toggleSpoiler: 'x', bookmark: 'd', + toggleCollapse: 'shift+x', }; @connect(mapStateToProps) -- cgit From ac54292d69984e8ecc38dc53321c20cecea5d421 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 27 Apr 2019 17:41:49 +0200 Subject: Add high color privacy icons Fixes #1015 --- .../glitch/features/local_settings/page/index.js | 9 +++++++++ .../flavours/glitch/features/ui/index.js | 2 ++ .../flavours/glitch/reducers/local_settings.js | 1 + .../flavours/glitch/styles/accessibility.scss | 22 ++++++++++++++++++++++ 4 files changed, 34 insertions(+) (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index bc4ad359c..a13bffa3a 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -42,6 +42,15 @@ export default class LocalSettingsPage extends React.PureComponent { > + + + +

({ dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null, unreadNotifications: state.getIn(['notifications', 'unread']), showFaviconBadge: state.getIn(['local_settings', 'notifications', 'favicon_badge']), + hicolorPrivacyIcons: state.getIn(['local_settings', 'hicolor_privacy_icons']), }); const keyMap = { @@ -446,6 +447,7 @@ export default class UI extends React.Component { 'wide': isWide, 'system-font': this.props.systemFontUi, 'navbar-under': navbarUnder, + 'hicolor-privacy-icons': this.props.hicolorPrivacyIcons, }); const handlers = { diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js index ef694d4ea..93ab1a9ed 100644 --- a/app/javascript/flavours/glitch/reducers/local_settings.js +++ b/app/javascript/flavours/glitch/reducers/local_settings.js @@ -18,6 +18,7 @@ const initialState = ImmutableMap({ confirm_before_clearing_draft: true, preselect_on_reply: true, inline_preview_cards: true, + hicolor_privacy_icons: true, content_warnings : ImmutableMap({ auto_unfold : false, filter : null, diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss index 4fe5c8b1c..35e91da80 100644 --- a/app/javascript/flavours/glitch/styles/accessibility.scss +++ b/app/javascript/flavours/glitch/styles/accessibility.scss @@ -11,3 +11,25 @@ $emojis-requiring-outlines: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'b } } } + +.hicolor-privacy-icons { + .status__visibility-icon.fa-globe, + .composer--options--dropdown--content--item .fa-globe { + color: #1976D2; + } + + .status__visibility-icon.fa-unlock, + .composer--options--dropdown--content--item .fa-unlock { + color: #388E3C; + } + + .status__visibility-icon.fa-lock, + .composer--options--dropdown--content--item .fa-lock { + color: #FFA000; + } + + .status__visibility-icon.fa-envelope, + .composer--options--dropdown--content--item .fa-envelope { + color: #D32F2F; + } +} -- cgit From 7617f78359e3767b0c0311928a786d7007687d17 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Fri, 3 May 2019 18:54:06 +0200 Subject: Fix crash in onboarding modal Fixes #1027 --- .../flavours/glitch/features/compose/components/compose_form.js | 4 ++-- .../flavours/glitch/features/ui/components/onboarding_modal.js | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index bd6d5b1fa..e8f000b1e 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -321,8 +321,8 @@ class ComposeForm extends ImmutablePureComponent { onSuggestionsClearRequested={onClearSuggestions} onSuggestionSelected={this.onSpoilerSuggestionSelected} searchTokens={[':']} - id='glitch.composer.spoiler.input' - className='spoiler-input__input' + id='glitch.composer.spoiler.input' + className='spoiler-input__input' />
diff --git a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js index f13e2e645..3fda97afc 100644 --- a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.js @@ -6,7 +6,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ReactSwipeableViews from 'react-swipeable-views'; import classNames from 'classnames'; import Permalink from 'flavours/glitch/components/permalink'; -import { ComposeForm } from 'flavours/glitch/features/compose/components/compose_form'; +import ComposeForm from 'flavours/glitch/features/compose/components/compose_form'; import DrawerAccount from 'flavours/glitch/features/compose/components/navigation_bar'; import Search from 'flavours/glitch/features/compose/components/search'; import ColumnHeader from './column_header'; @@ -48,6 +48,8 @@ const PageTwo = ({ intl, myAccount }) => (
-- cgit From ccf4f3240ae80f4b1410d816f03d0bef33062a71 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 27 Apr 2019 03:24:09 +0200 Subject: [Glitch] Add blurhash Port front-end changes from fba96c808d25d2fc35ec63ee6745a1e55a95d707 to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/components/media_gallery.js | 107 ++++++++++++++------- .../flavours/glitch/components/status.js | 1 + .../features/report/components/status_check_box.js | 1 + .../features/status/components/detailed_status.js | 1 + .../glitch/features/ui/components/media_modal.js | 1 + .../glitch/features/ui/components/video_modal.js | 1 + .../flavours/glitch/features/video/index.js | 48 +++++++-- .../flavours/glitch/styles/components/index.scss | 44 ++++++++- .../flavours/glitch/styles/components/media.scss | 17 ++++ .../flavours/glitch/styles/components/status.scss | 9 +- 10 files changed, 179 insertions(+), 51 deletions(-) (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index b7360bae4..d1dde45b1 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -7,6 +7,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { isIOS } from 'flavours/glitch/util/is_mobile'; import classNames from 'classnames'; import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state'; +import { decode } from 'blurhash'; const messages = defineMessages({ hidden: { @@ -41,6 +42,7 @@ class Item extends React.PureComponent { letterbox: PropTypes.bool, onClick: PropTypes.func.isRequired, displayWidth: PropTypes.number, + visible: PropTypes.bool.isRequired, }; static defaultProps = { @@ -49,6 +51,10 @@ class Item extends React.PureComponent { size: 1, }; + state = { + loaded: false, + }; + handleMouseEnter = (e) => { if (this.hoverToPlay()) { e.target.play(); @@ -82,8 +88,40 @@ class Item extends React.PureComponent { e.stopPropagation(); } + componentDidMount () { + if (this.props.attachment.get('blurhash')) { + this._decode(); + } + } + + componentDidUpdate (prevProps) { + if (prevProps.attachment.get('blurhash') !== this.props.attachment.get('blurhash') && this.props.attachment.get('blurhash')) { + this._decode(); + } + } + + _decode () { + const hash = this.props.attachment.get('blurhash'); + const pixels = decode(hash, 32, 32); + + if (pixels) { + const ctx = this.canvas.getContext('2d'); + const imageData = new ImageData(pixels, 32, 32); + + ctx.putImageData(imageData, 0, 0); + } + } + + setCanvasRef = c => { + this.canvas = c; + } + + handleImageLoad = () => { + this.setState({ loaded: true }); + } + render () { - const { attachment, index, size, standalone, letterbox, displayWidth } = this.props; + const { attachment, index, size, standalone, letterbox, displayWidth, visible } = this.props; let width = 50; let height = 100; @@ -136,12 +174,20 @@ class Item extends React.PureComponent { let thumbnail = ''; - if (attachment.get('type') === 'image') { + if (attachment.get('type') === 'unknown') { + return ( +
+ + + +
+ ); + } else if (attachment.get('type') === 'image') { const previewUrl = attachment.get('preview_url'); const previewWidth = attachment.getIn(['meta', 'small', 'width']); - const originalUrl = attachment.get('url'); - const originalWidth = attachment.getIn(['meta', 'original', 'width']); + const originalUrl = attachment.get('url'); + const originalWidth = attachment.getIn(['meta', 'original', 'width']); const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number'; @@ -168,6 +214,7 @@ class Item extends React.PureComponent { alt={attachment.get('description')} title={attachment.get('description')} style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }} + onLoad={this.handleImageLoad} /> ); @@ -197,7 +244,8 @@ class Item extends React.PureComponent { return (
- {thumbnail} + + {visible && thumbnail}
); } @@ -257,6 +305,7 @@ export default class MediaGallery extends React.PureComponent { this.node = node; if (node && node.offsetWidth && node.offsetWidth != this.state.width) { if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth); + this.setState({ width: node.offsetWidth, }); @@ -275,7 +324,7 @@ export default class MediaGallery extends React.PureComponent { const width = this.state.width || defaultWidth; - let children; + let children, spoilerButton; const style = {}; @@ -289,40 +338,32 @@ export default class MediaGallery extends React.PureComponent { return (
); } - if (!visible) { - let warning = ; + if (this.isStandaloneEligible()) { + children = ; + } else { + children = media.take(4).map((attachment, i) => ); + } - children = ( - ); - } else { - if (this.isStandaloneEligible()) { - children = ; - } else { - children = media.take(4).map((attachment, i) => ); - } } return (
- {visible ? ( -
- - {sensitive ? ( - - - - ) : null} -
- ) : null} +
+ {spoilerButton} + {visible && sensitive && ( + + + + )} +
{children}
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 94297260b..5f10e0c52 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -479,6 +479,7 @@ export default class Status extends ImmutablePureComponent { {Component => ( (