From c36f28ba77d784cff6f5dba109e1286b13204221 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 9 Oct 2022 15:55:32 +0200 Subject: [Glitch] Fix intermediary responsive layout, accessibility on navigation in web UI Port 07653246223251052f5150e1e74139bf8ff41ec4 to glitch-soc Co-authored-by: Yamagishi Kazutoshi Signed-off-by: Claire --- .../glitch/features/ui/components/column_link.js | 24 ++++++---- .../ui/components/follow_requests_column_link.js | 51 ++++++++++++++++++++ .../ui/components/follow_requests_nav_link.js | 39 --------------- .../glitch/features/ui/components/header.js | 3 +- .../features/ui/components/navigation_panel.js | 56 ++++++++++++++-------- 5 files changed, 103 insertions(+), 70 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js delete mode 100644 app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js (limited to 'app/javascript/flavours/glitch/features/ui') diff --git a/app/javascript/flavours/glitch/features/ui/components/column_link.js b/app/javascript/flavours/glitch/features/ui/components/column_link.js index d04b869b6..1c475d087 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_link.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_link.js @@ -1,26 +1,29 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; import Icon from 'flavours/glitch/components/icon'; +import classNames from 'classnames'; -const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => { +const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, ...other }) => { + const className = classNames('column-link', { 'column-link--transparent': transparent }); const badgeElement = typeof badge !== 'undefined' ? {badge} : null; + const iconElement = typeof icon === 'string' ? : icon; if (href) { return ( - - + + {iconElement} {text} {badgeElement} ); } else if (to) { return ( - - + + {iconElement} {text} {badgeElement} - + ); } else { const handleOnClick = (e) => { @@ -29,8 +32,8 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => { return onClick(e); } return ( - - + + {iconElement} {text} {badgeElement} @@ -39,13 +42,14 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => { }; ColumnLink.propTypes = { - icon: PropTypes.string.isRequired, + icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, text: PropTypes.string.isRequired, to: PropTypes.string, onClick: PropTypes.func, href: PropTypes.string, method: PropTypes.string, badge: PropTypes.node, + transparent: PropTypes.bool, }; export default ColumnLink; diff --git a/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js new file mode 100644 index 000000000..301392a52 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; +import { connect } from 'react-redux'; +import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; +import IconWithBadge from 'flavours/glitch/components/icon_with_badge'; +import { List as ImmutableList } from 'immutable'; +import { injectIntl, defineMessages } from 'react-intl'; + +const messages = defineMessages({ + text: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, +}); + +const mapStateToProps = state => ({ + count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, +}); + +export default @injectIntl +@connect(mapStateToProps) +class FollowRequestsColumnLink extends React.Component { + + static propTypes = { + dispatch: PropTypes.func.isRequired, + count: PropTypes.number.isRequired, + intl: PropTypes.object.isRequired, + }; + + componentDidMount () { + const { dispatch } = this.props; + + dispatch(fetchFollowRequests()); + } + + render () { + const { count, intl } = this.props; + + if (count === 0) { + return null; + } + + return ( + } + text={intl.formatMessage(messages.text)} + /> + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js b/app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js deleted file mode 100644 index c30427896..000000000 --- a/app/javascript/flavours/glitch/features/ui/components/follow_requests_nav_link.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; -import { connect } from 'react-redux'; -import { NavLink, withRouter } from 'react-router-dom'; -import IconWithBadge from 'flavours/glitch/components/icon_with_badge'; -import { List as ImmutableList } from 'immutable'; -import { FormattedMessage } from 'react-intl'; - -const mapStateToProps = state => ({ - count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, -}); - -export default @withRouter -@connect(mapStateToProps) -class FollowRequestsNavLink extends React.Component { - - static propTypes = { - dispatch: PropTypes.func.isRequired, - count: PropTypes.number.isRequired, - }; - - componentDidMount () { - const { dispatch } = this.props; - - dispatch(fetchFollowRequests()); - } - - render () { - const { count } = this.props; - - if (count === 0) { - return null; - } - - return ; - } - -} diff --git a/app/javascript/flavours/glitch/features/ui/components/header.js b/app/javascript/flavours/glitch/features/ui/components/header.js index 041bdff05..5fdef0af4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/header.js +++ b/app/javascript/flavours/glitch/features/ui/components/header.js @@ -11,8 +11,7 @@ import { connect } from 'react-redux'; const Account = connect(state => ({ account: state.getIn(['accounts', me]), }))(({ account }) => ( - - {account.get('acct')} + )); diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js index 754c651c2..0955b3cf8 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -1,17 +1,34 @@ -import PropTypes from 'prop-types'; import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Link, NavLink } from 'react-router-dom'; -import Icon from 'flavours/glitch/components/icon'; +import PropTypes from 'prop-types'; +import { defineMessages, injectIntl } from 'react-intl'; +import { Link } from 'react-router-dom'; import TrendsContainer from 'flavours/glitch/features/getting_started/containers/trends_container'; import { showTrends, timelinePreview } from 'flavours/glitch/initial_state'; -import FollowRequestsNavLink from './follow_requests_nav_link'; +import FollowRequestsColumnLink from './follow_requests_column_link'; import ListPanel from './list_panel'; import NotificationsCounterIcon from './notifications_counter_icon'; import SignInBanner from './sign_in_banner'; import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links'; +import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; + +const messages = defineMessages({ + home: { id: 'tabs_bar.home', defaultMessage: 'Home' }, + notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' }, + explore: { id: 'explore.title', defaultMessage: 'Explore' }, + local: { id: 'tabs_bar.local_timeline', defaultMessage: 'Local' }, + federated: { id: 'tabs_bar.federated_timeline', defaultMessage: 'Federated' }, + direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' }, + favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' }, + bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' }, + lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, + preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, + followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' }, + about: { id: 'navigation_bar.about', defaultMessage: 'About' }, + app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' }, +}); -export default class NavigationPanel extends React.Component { +export default @injectIntl +class NavigationPanel extends React.Component { static contextTypes = { router: PropTypes.object.isRequired, @@ -23,24 +40,24 @@ export default class NavigationPanel extends React.Component { }; render() { + const { intl, onOpenSettings } = this.props; const { signedIn } = this.context.identity; - const { onOpenSettings } = this.props; return (
{signedIn && ( - - - + + } text={intl.formatMessage(messages.notifications)} /> + )} - + {signedIn || timelinePreview && ( <> - - + + )} @@ -53,17 +70,18 @@ export default class NavigationPanel extends React.Component { {signedIn && ( - - - + + + +
- {!!preferencesLink && } - - {!!relationshipsLink && } + {!!preferencesLink && } + + {!!relationshipsLink && } )} -- cgit