From 2653651bfa7d23bc17dbd96b27f882338d25ee80 Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Fri, 27 Oct 2023 15:21:07 +0200 Subject: [PATCH] [Glitch] Simplify column headers Port 13d310e64df9aee293d434eb68d541b9002ec2e9 to glitch-soc Signed-off-by: Claire --- .../glitch/components/column_back_button.tsx | 25 -------- .../glitch/components/column_header.jsx | 55 +++++++++------- .../flavours/glitch/features/blocks/index.jsx | 4 +- .../glitch/features/domain_blocks/index.jsx | 5 +- .../glitch/features/follow_requests/index.jsx | 4 +- .../features/getting_started_misc/index.jsx | 6 +- .../flavours/glitch/features/lists/index.jsx | 5 +- .../flavours/glitch/features/mutes/index.jsx | 4 +- .../glitch/features/pinned_statuses/index.jsx | 4 +- .../glitch/features/ui/components/column.jsx | 9 +-- .../features/ui/components/column_header.jsx | 41 ------------ .../glitch/styles/components/columns.scss | 14 ----- .../flavours/glitch/test_helpers.tsx | 62 +++++++++++++++++++ 13 files changed, 108 insertions(+), 130 deletions(-) delete mode 100644 app/javascript/flavours/glitch/features/ui/components/column_header.jsx create mode 100644 app/javascript/flavours/glitch/test_helpers.tsx diff --git a/app/javascript/flavours/glitch/components/column_back_button.tsx b/app/javascript/flavours/glitch/components/column_back_button.tsx index 3c71a9ce5f..9f90f1dddc 100644 --- a/app/javascript/flavours/glitch/components/column_back_button.tsx +++ b/app/javascript/flavours/glitch/components/column_back_button.tsx @@ -43,28 +43,3 @@ export const ColumnBackButton: React.FC<{ onClick: OnClickCallback }> = ({ return {component}; }; - -export const ColumnBackButtonSlim: React.FC<{ onClick: OnClickCallback }> = ({ - onClick, -}) => { - const handleClick = useHandleClick(onClick); - - return ( -
- {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */} -
- - -
-
- ); -}; diff --git a/app/javascript/flavours/glitch/components/column_header.jsx b/app/javascript/flavours/glitch/components/column_header.jsx index e372ad183a..8cc9fde9d3 100644 --- a/app/javascript/flavours/glitch/components/column_header.jsx +++ b/app/javascript/flavours/glitch/components/column_header.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import { PureComponent } from 'react'; +import { PureComponent, useCallback } from 'react'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; @@ -14,9 +14,11 @@ import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/ import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg'; import { Icon } from 'flavours/glitch/components/icon'; -import { ButtonInTabsBar } from 'flavours/glitch/features/ui/util/columns_context'; +import { ButtonInTabsBar, useColumnsContext } from 'flavours/glitch/features/ui/util/columns_context'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; +import { useAppHistory } from './router'; + const messages = defineMessages({ show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' }, hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' }, @@ -24,6 +26,34 @@ const messages = defineMessages({ moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' }, }); +const BackButton = ({ pinned, show }) => { + const history = useAppHistory(); + const { multiColumn } = useColumnsContext(); + + const handleBackClick = useCallback(() => { + if (history.location?.state?.fromMastodon) { + history.goBack(); + } else { + history.push('/'); + } + }, [history]); + + const showButton = history && !pinned && ((multiColumn && history.location?.state?.fromMastodon) || show); + + if(!showButton) return null; + + return (); + +}; + +BackButton.propTypes = { + pinned: PropTypes.bool, + show: PropTypes.bool, +}; + class ColumnHeader extends PureComponent { static contextTypes = { @@ -72,16 +102,6 @@ class ColumnHeader extends PureComponent { this.props.onMove(1); }; - handleBackClick = () => { - const { history } = this.props; - - if (history.location?.state?.fromMastodon) { - history.goBack(); - } else { - history.push('/'); - } - }; - handleTransitionEnd = () => { this.setState({ animating: false }); }; @@ -95,7 +115,7 @@ class ColumnHeader extends PureComponent { }; render () { - const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props; + const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props; const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { @@ -138,14 +158,7 @@ class ColumnHeader extends PureComponent { pinButton = ; } - if (!pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) { - backButton = ( - - ); - } + backButton = ; const collapsedContent = [ extraContent, diff --git a/app/javascript/flavours/glitch/features/blocks/index.jsx b/app/javascript/flavours/glitch/features/blocks/index.jsx index 21b7a263f1..615e4c8be2 100644 --- a/app/javascript/flavours/glitch/features/blocks/index.jsx +++ b/app/javascript/flavours/glitch/features/blocks/index.jsx @@ -10,7 +10,6 @@ import { ReactComponent as BlockIcon } from '@material-symbols/svg-600/outlined/ import { debounce } from 'lodash'; import { fetchBlocks, expandBlocks } from '../../actions/blocks'; -import { ColumnBackButtonSlim } from '../../components/column_back_button'; import { LoadingIndicator } from '../../components/loading_indicator'; import ScrollableList from '../../components/scrollable_list'; import AccountContainer from '../../containers/account_container'; @@ -60,8 +59,7 @@ class Blocks extends ImmutablePureComponent { const emptyMessage = ; return ( - - + ; return ( - - - + - + - - +
{signedIn && ()} diff --git a/app/javascript/flavours/glitch/features/lists/index.jsx b/app/javascript/flavours/glitch/features/lists/index.jsx index 415d4c181a..89aea03321 100644 --- a/app/javascript/flavours/glitch/features/lists/index.jsx +++ b/app/javascript/flavours/glitch/features/lists/index.jsx @@ -12,7 +12,6 @@ import { connect } from 'react-redux'; import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg'; import { fetchLists } from 'flavours/glitch/actions/lists'; -import { ColumnBackButtonSlim } from 'flavours/glitch/components/column_back_button'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; import Column from 'flavours/glitch/features/ui/components/column'; @@ -66,9 +65,7 @@ class Lists extends ImmutablePureComponent { const emptyMessage = ; return ( - - - + diff --git a/app/javascript/flavours/glitch/features/mutes/index.jsx b/app/javascript/flavours/glitch/features/mutes/index.jsx index afecd72d60..7f66edc03d 100644 --- a/app/javascript/flavours/glitch/features/mutes/index.jsx +++ b/app/javascript/flavours/glitch/features/mutes/index.jsx @@ -12,7 +12,6 @@ import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outli import { debounce } from 'lodash'; import { fetchMutes, expandMutes } from '../../actions/mutes'; -import { ColumnBackButtonSlim } from '../../components/column_back_button'; import { LoadingIndicator } from '../../components/loading_indicator'; import ScrollableList from '../../components/scrollable_list'; import AccountContainer from '../../containers/account_container'; @@ -62,8 +61,7 @@ class Mutes extends ImmutablePureComponent { const emptyMessage = ; return ( - - + - + + ); return (
{ - this.props.onClick(); - }; - - render () { - const { icon, iconComponent, type, active, columnHeaderId } = this.props; - let iconElement = ''; - - if (icon) { - iconElement = ; - } - - return ( -

- -

- ); - } - -} diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index e210c553bb..5a2962e881 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -218,20 +218,6 @@ $ui-header-height: 55px; margin-inline-end: 5px; } -.column-back-button--slim { - position: relative; -} - -.column-back-button--slim-button { - cursor: pointer; - flex: 0 0 auto; - font-size: 16px; - padding: 15px; - position: absolute; - inset-inline-end: 0; - top: -48px; -} - .switch-to-advanced { color: $light-text-color; background-color: $ui-base-color; diff --git a/app/javascript/flavours/glitch/test_helpers.tsx b/app/javascript/flavours/glitch/test_helpers.tsx new file mode 100644 index 0000000000..6895895569 --- /dev/null +++ b/app/javascript/flavours/glitch/test_helpers.tsx @@ -0,0 +1,62 @@ +import PropTypes from 'prop-types'; +import type { PropsWithChildren } from 'react'; +import { Component } from 'react'; + +import { IntlProvider } from 'react-intl'; + +import { MemoryRouter } from 'react-router'; + +// eslint-disable-next-line import/no-extraneous-dependencies +import { render as rtlRender } from '@testing-library/react'; + +class FakeIdentityWrapper extends Component< + PropsWithChildren<{ signedIn: boolean }> +> { + static childContextTypes = { + identity: PropTypes.shape({ + signedIn: PropTypes.bool.isRequired, + accountId: PropTypes.string, + disabledAccountId: PropTypes.string, + accessToken: PropTypes.string, + }).isRequired, + }; + + getChildContext() { + return { + identity: { + signedIn: this.props.signedIn, + accountId: '123', + accessToken: 'test-access-token', + }, + }; + } + + render() { + return this.props.children; + } +} + +function render( + ui: React.ReactElement, + { locale = 'en', signedIn = true, ...renderOptions } = {}, +) { + const Wrapper = (props: { children: React.ReactElement }) => { + return ( + + + + {props.children} + + + + ); + }; + return rtlRender(ui, { wrapper: Wrapper, ...renderOptions }); +} + +// re-export everything +// eslint-disable-next-line import/no-extraneous-dependencies +export * from '@testing-library/react'; + +// override render method +export { render };