bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SubNavigation: refactor to be contextual based on Column

Browse source
This commit is contained in:
Alex Gleason 2021-09-27 13:38:02 -05:00
parent db4a0d33c8
commit 60c3243fcb
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
11 changed files with 127 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
app/soapbox/components/column_header.js
View file

@ -2,17 +2,17 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; // import classNames from 'classnames';
import { injectIntl, defineMessages } from 'react-intl'; // import { injectIntl, defineMessages } from 'react-intl';
import Icon from 'soapbox/components/icon'; // import Icon from 'soapbox/components/icon';
import SubNavigation from 'soapbox/components/sub_navigation';
const messages = defineMessages({ // const messages = defineMessages({
show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' }, // show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' }, // hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
}); // });
export default @injectIntl export default class ColumnHeader extends React.PureComponent {
class ColumnHeader extends React.PureComponent {
static contextTypes = { static contextTypes = {
router: PropTypes.object, router: PropTypes.object,
@ -54,69 +54,75 @@ class ColumnHeader extends React.PureComponent {
} }
render() { render() {
const { title, icon, active, children, extraButton, intl: { formatMessage } } = this.props; const { title } = this.props;
const { collapsed, animating } = this.state;
const wrapperClassName = classNames('column-header__wrapper', { return <SubNavigation message={title} />;
'active': active,
});
const buttonClassName = classNames('column-header', {
'active': active,
});
const collapsibleClassName = classNames('column-header__collapsible', {
'collapsed': collapsed,
'animating': animating,
});
const collapsibleButtonClassName = classNames('column-header__button', {
'active': !collapsed,
});
let extraContent, collapseButton;
if (children) {
extraContent = (
<div key='extra-content' className='column-header__collapsible__extra'>
{children}
</div>
);
}
const collapsedContent = [
extraContent,
];
if (children) {
collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><Icon id='sliders' /></button>;
}
const hasTitle = icon && title;
return (
<div className={wrapperClassName}>
<h1 className={buttonClassName}>
{hasTitle && (
<button>
<Icon id={icon} fixedWidth className='column-header__icon' />
{title}
</button>
)}
<div className='column-header__buttons'>
{extraButton}
{collapseButton}
</div>
</h1>
<div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}>
<div className='column-header__collapsible-inner'>
{(!collapsed || animating) && collapsedContent}
</div>
</div>
</div>
);
} }
// render() {
// const { title, icon, active, children, extraButton, intl: { formatMessage } } = this.props;
// const { collapsed, animating } = this.state;
//
// const wrapperClassName = classNames('column-header__wrapper', {
// 'active': active,
// });
//
// const buttonClassName = classNames('column-header', {
// 'active': active,
// });
//
// const collapsibleClassName = classNames('column-header__collapsible', {
// 'collapsed': collapsed,
// 'animating': animating,
// });
//
// const collapsibleButtonClassName = classNames('column-header__button', {
// 'active': !collapsed,
// });
//
// let extraContent, collapseButton;
//
// if (children) {
// extraContent = (
// <div key='extra-content' className='column-header__collapsible__extra'>
// {children}
// </div>
// );
// }
//
// const collapsedContent = [
// extraContent,
// ];
//
// if (children) {
// collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><Icon id='cog' /></button>;
// }
//
// const hasTitle = icon && title;
//
// return (
// <div className={wrapperClassName}>
// <h1 className={buttonClassName}>
// {hasTitle && (
// <button>
// <Icon id={icon} fixedWidth className='column-header__icon' />
// {title}
// </button>
// )}
//
// <div className='column-header__buttons'>
// {extraButton}
// {collapseButton}
// </div>
// </h1>
//
// <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}>
// <div className='column-header__collapsible-inner'>
// {(!collapsed || animating) && collapsedContent}
// </div>
// </div>
// </div>
// );
// }
} }

65
app/soapbox/components/sub_navigation.js
View file

@ -1,52 +1,13 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { FormattedMessage } from 'react-intl';
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { withRouter, matchPath } from 'react-router-dom';
const routes = [ export default class SubNavigation extends React.PureComponent {
['status', { path: '/@:username/posts/:statusId' }],
['account', { path: '/@:username' }],
['local_timeline', { path: '/timeline/local' }],
['fediverse_timeline', { path: '/timeline/fediverse' }],
['remote_timeline', { path: '/timeline/:instance' }],
];
const findRoute = path => routes.find(v => matchPath(path, v[1]));
const findRouteType = path => {
const route = findRoute(path) || [];
return route[0];
};
const findMatch = path => {
const route = findRoute(path) || [];
return matchPath(path, route[1]);
};
const messages = defineMessages({
status: { id: 'sub_navigation.status', defaultMessage: 'Post' },
account: { id: 'sub_navigation.account', defaultMessage: 'Profile' },
local_timeline: { id: 'sub_navigation.local_timeline', defaultMessage: '{siteTitle}' },
fediverse_timeline: { id: 'sub_navigation.fediverse_timeline', defaultMessage: 'Fediverse' },
remote_timeline: { id: 'sub_navigation.remote_timeline', defaultMessage: '{instance}' },
});
const mapStateToProps = state => {
return {
siteTitle: state.getIn(['instance', 'title']),
};
};
export default @withRouter
@connect(mapStateToProps)
@injectIntl
class SubNavigation extends React.PureComponent {
static propTypes = { static propTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
siteTitle: PropTypes.string, message: PropTypes.string,
} }
static contextTypes = { static contextTypes = {
@ -67,24 +28,8 @@ class SubNavigation extends React.PureComponent {
} }
} }
getMessage = () => {
const path = this.context.router.history.location.pathname;
const type = findRouteType(path);
return messages[type] || null;
}
getParams = () => {
const path = this.context.router.history.location.pathname;
return (findMatch(path) || {}).params;
}
render() { render() {
const { intl, siteTitle } = this.props; const { message } = this.props;
const message = this.getMessage();
const params = this.getParams();
if (!message) return null;
return ( return (
<div className='sub-navigation'> <div className='sub-navigation'>
@ -98,7 +43,7 @@ class SubNavigation extends React.PureComponent {
<FormattedMessage id='sub_navigation.back' defaultMessage='Back' /> <FormattedMessage id='sub_navigation.back' defaultMessage='Back' />
</button> </button>
<div className='sub-navigation__message'> <div className='sub-navigation__message'>
{intl.formatMessage(message, { siteTitle, ...params })} {message}
</div> </div>
</div> </div>
</div> </div>

2
app/soapbox/features/community_timeline/index.js
View file

@ -7,6 +7,7 @@ import Column from '../../components/column';
import { expandCommunityTimeline } from '../../actions/timelines'; import { expandCommunityTimeline } from '../../actions/timelines';
import { connectCommunityStream } from '../../actions/streaming'; import { connectCommunityStream } from '../../actions/streaming';
import { getSettings } from 'soapbox/actions/settings'; import { getSettings } from 'soapbox/actions/settings';
import SubNavigation from 'soapbox/components/sub_navigation';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column.community', defaultMessage: 'Local timeline' }, title: { id: 'column.community', defaultMessage: 'Local timeline' },
@ -73,6 +74,7 @@ class CommunityTimeline extends React.PureComponent {
return ( return (
<Column label={intl.formatMessage(messages.title)}> <Column label={intl.formatMessage(messages.title)}>
<SubNavigation message={intl.formatMessage(messages.title)} />
<StatusListContainer <StatusListContainer
scrollKey={`${timelineId}_timeline`} scrollKey={`${timelineId}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`} timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}

2
app/soapbox/features/public_timeline/index.js
View file

@ -10,6 +10,7 @@ import { expandPublicTimeline } from '../../actions/timelines';
import { connectPublicStream } from '../../actions/streaming'; import { connectPublicStream } from '../../actions/streaming';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { changeSetting, getSettings } from 'soapbox/actions/settings'; import { changeSetting, getSettings } from 'soapbox/actions/settings';
import SubNavigation from 'soapbox/components/sub_navigation';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column.public', defaultMessage: 'Federated timeline' }, title: { id: 'column.public', defaultMessage: 'Federated timeline' },
@ -97,6 +98,7 @@ class CommunityTimeline extends React.PureComponent {
return ( return (
<Column label={intl.formatMessage(messages.title)}> <Column label={intl.formatMessage(messages.title)}>
<SubNavigation message={intl.formatMessage(messages.title)} />
<PinnedHostsPicker /> <PinnedHostsPicker />
{showExplanationBox && <div className='explanation-box'> {showExplanationBox && <div className='explanation-box'>
<Accordion <Accordion

3
app/soapbox/features/status/index.js
View file

@ -49,8 +49,10 @@ import { textForScreenReader, defaultMediaVisibility } from '../../components/st
import { getSettings } from 'soapbox/actions/settings'; import { getSettings } from 'soapbox/actions/settings';
import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation'; import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
import SubNavigation from 'soapbox/components/sub_navigation';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'status.title', defaultMessage: 'Post' },
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' }, deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' }, redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
@ -569,6 +571,7 @@ class Status extends ImmutablePureComponent {
return ( return (
<Column label={intl.formatMessage(messages.detailedStatus)} showBackBtn={false}> <Column label={intl.formatMessage(messages.detailedStatus)} showBackBtn={false}>
<SubNavigation message={intl.formatMessage(messages.title)} />
{/* {/*
Eye icon to show/hide all CWs in a thread. Eye icon to show/hide all CWs in a thread.
I'm not convinced of the value of this. It needs a better design at the very least. I'm not convinced of the value of this. It needs a better design at the very least.

10
app/soapbox/features/ui/components/column.js
View file

@ -1,8 +1,6 @@
import React from 'react'; import React from 'react';
import ColumnHeader from './column_header'; import ColumnHeader from './column_header';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ColumnBackButton from '../../../components/column_back_button';
import ColumnBackButtonSlim from '../../../components/column_back_button_slim';
export default class Column extends React.PureComponent { export default class Column extends React.PureComponent {
@ -11,9 +9,7 @@ export default class Column extends React.PureComponent {
icon: PropTypes.string, icon: PropTypes.string,
children: PropTypes.node, children: PropTypes.node,
active: PropTypes.bool, active: PropTypes.bool,
backBtnSlim: PropTypes.bool,
showBackBtn: PropTypes.bool, showBackBtn: PropTypes.bool,
back: PropTypes.string,
}; };
static defaultProps = { static defaultProps = {
@ -21,14 +17,12 @@ export default class Column extends React.PureComponent {
} }
render() { render() {
const { heading, icon, children, active, backBtnSlim, showBackBtn, back } = this.props; const { heading, icon, children, active, showBackBtn } = this.props;
const columnHeaderId = heading && heading.replace(/ /g, '-'); const columnHeaderId = heading && heading.replace(/ /g, '-');
const backBtn = backBtnSlim ? (<ColumnBackButtonSlim to={back} />) : (<ColumnBackButton to={back} />);
return ( return (
<div role='region' aria-labelledby={columnHeaderId} className='column'> <div role='region' aria-labelledby={columnHeaderId} className='column'>
{heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />} {heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} showBackBtn={showBackBtn} />}
{showBackBtn ? backBtn : null}
{children} {children}
</div> </div>
); );

30
app/soapbox/features/ui/components/column_header.js
View file

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; // import classNames from 'classnames';
import Icon from 'soapbox/components/icon'; // import Icon from 'soapbox/components/icon';
import SubNavigation from 'soapbox/components/sub_navigation';
export default class ColumnHeader extends React.PureComponent { export default class ColumnHeader extends React.PureComponent {
@ -18,16 +19,21 @@ export default class ColumnHeader extends React.PureComponent {
} }
render() { render() {
const { icon, type, active, columnHeaderId } = this.props; const { type } = this.props;
return <SubNavigation message={type} />;
return (
<h1 className={classNames('column-header', { active })} id={columnHeaderId || null}>
<button onClick={this.handleClick}>
{icon && <Icon id={icon} fixedWidth className='column-header__icon' />}
{type}
</button>
</h1>
);
} }
// render() {
// const { icon, type, active, columnHeaderId } = this.props;
//
// return (
// <h1 className={classNames('column-header', { active })} id={columnHeaderId || null}>
// <button onClick={this.handleClick}>
// {icon && <Icon id={icon} fixedWidth className='column-header__icon' />}
// {type}
// </button>
// </h1>
// );
// }
} }

2
app/soapbox/features/ui/index.js
View file

@ -41,7 +41,6 @@ import { getAccessToken } from 'soapbox/utils/auth';
import { getFeatures } from 'soapbox/utils/features'; import { getFeatures } from 'soapbox/utils/features';
import { fetchCustomEmojis } from 'soapbox/actions/custom_emojis'; import { fetchCustomEmojis } from 'soapbox/actions/custom_emojis';
import ThumbNavigation from 'soapbox/components/thumb_navigation'; import ThumbNavigation from 'soapbox/components/thumb_navigation';
import SubNavigation from 'soapbox/components/sub_navigation';
import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import { import {
@ -669,7 +668,6 @@ class UI extends React.PureComponent {
<HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused> <HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
<div className={classnames} ref={this.setRef} style={style}> <div className={classnames} ref={this.setRef} style={style}>
<TabsBar /> <TabsBar />
<SubNavigation />
<SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange} soapbox={soapbox}> <SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange} soapbox={soapbox}>
{children} {children}

4
app/soapbox/pages/status_page.js
View file

@ -39,7 +39,7 @@ class StatusPage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--left'> <div className='columns-area__panels__pane columns-area__panels__pane--left'>
<div className='columns-area__panels__pane__inner'> <div className='columns-area__panels__pane__inner'>
<Sticky top={106}> <Sticky top={65}>
<PrimaryNavigation /> <PrimaryNavigation />
</Sticky> </Sticky>
</div> </div>
@ -53,7 +53,7 @@ class StatusPage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--right'> <div className='columns-area__panels__pane columns-area__panels__pane--right'>
<div className='columns-area__panels__pane__inner'> <div className='columns-area__panels__pane__inner'>
<Sticky top={106}> <Sticky top={65}>
{me ? ( {me ? (
<BundleContainer fetchComponent={FeaturesPanel}> <BundleContainer fetchComponent={FeaturesPanel}>
{Component => <Component key='features-panel' />} {Component => <Component key='features-panel' />}

19
app/styles/components/columns.scss
View file

@ -42,9 +42,11 @@
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
padding: 0 20px; padding: 0 20px;
@media screen and (max-width: 375px) {
padding: 0 10px; @media screen and (max-width: 580px) {
padding: 0;
} }
@media screen and (min-width: 896px) { @media screen and (min-width: 896px) {
margin: 0 20px; margin: 0 20px;
padding: 0; padding: 0;
@ -105,7 +107,9 @@
padding: 0; padding: 0;
} }
.autosuggest-textarea__textarea { font-size: 16px; } .autosuggest-textarea__textarea {
font-size: 16px;
}
.search__input { .search__input {
line-height: 18px; line-height: 18px;
@ -116,7 +120,14 @@
background-color: var(--foreground-color); background-color: var(--foreground-color);
} }
.search__icon .fa { top: 15px; } .search__icon .fa {
top: 15px;
}
@media (max-width: 580px) {
padding: 0;
}
@media screen and (min-width: 630px) { @media screen and (min-width: 630px) {
.detailed-status { .detailed-status {
padding: 15px; padding: 15px;

2
app/styles/ui.scss
View file

@ -329,7 +329,7 @@
.ui { .ui {
display: block; display: block;
width: 100%; width: 100%;
padding: 0 0 100px; padding: 0 0 calc(var(--thumb-navigation-height) + 86px);
.page { .page {
display: flex; display: flex;