Add preference and logout

This commit is contained in:
noellabo 2021-02-09 12:06:34 +09:00
parent 9350fc3e52
commit a00ef472e8
4 changed files with 56 additions and 21 deletions

View file

@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import ReactSwipeableViews from 'react-swipeable-views'; import ReactSwipeableViews from 'react-swipeable-views';
import TabsBar, { links, getIndex, getLink } from './tabs_bar'; import TabsBar, { getSwipeableIndex, getSwipeableLink } from './tabs_bar';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { disableSwiping, place_tab_bar_at_bottom } from 'mastodon/initial_state'; import { disableSwiping, place_tab_bar_at_bottom } from 'mastodon/initial_state';
@ -75,6 +75,7 @@ class ColumnsArea extends ImmutablePureComponent {
isModalOpen: PropTypes.bool.isRequired, isModalOpen: PropTypes.bool.isRequired,
singleColumn: PropTypes.bool, singleColumn: PropTypes.bool,
children: PropTypes.node, children: PropTypes.node,
links: PropTypes.node,
}; };
// Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS // Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS
@ -86,7 +87,7 @@ class ColumnsArea extends ImmutablePureComponent {
} }
componentWillReceiveProps() { componentWillReceiveProps() {
if (typeof this.pendingIndex !== 'number' && this.lastIndex !== getIndex(this.context.router.history.location.pathname)) { if (typeof this.pendingIndex !== 'number' && this.lastIndex !== getSwipeableIndex(this.context.router.history.location.pathname)) {
this.setState({ shouldAnimate: false }); this.setState({ shouldAnimate: false });
} }
} }
@ -105,7 +106,7 @@ class ColumnsArea extends ImmutablePureComponent {
this.setState({ renderComposePanel: !this.mediaQuery.matches }); this.setState({ renderComposePanel: !this.mediaQuery.matches });
} }
this.lastIndex = getIndex(this.context.router.history.location.pathname); this.lastIndex = getSwipeableIndex(this.context.router.history.location.pathname);
this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl'); this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
this.setState({ shouldAnimate: true }); this.setState({ shouldAnimate: true });
@ -122,7 +123,7 @@ class ColumnsArea extends ImmutablePureComponent {
this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false); this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
} }
const newIndex = getIndex(this.context.router.history.location.pathname); const newIndex = getSwipeableIndex(this.context.router.history.location.pathname);
if (this.lastIndex !== newIndex) { if (this.lastIndex !== newIndex) {
this.lastIndex = newIndex; this.lastIndex = newIndex;
@ -158,7 +159,7 @@ class ColumnsArea extends ImmutablePureComponent {
handleSwipe = (index) => { handleSwipe = (index) => {
this.pendingIndex = index; this.pendingIndex = index;
const nextLinkTranslationId = links[index].props['data-preview-title-id']; const nextLinkTranslationId = this.props.links[index].props['data-preview-title-id'];
const currentLinkSelector = '.tabs-bar__link.active'; const currentLinkSelector = '.tabs-bar__link.active';
const nextLinkSelector = `.tabs-bar__link[data-preview-title-id="${nextLinkTranslationId}"]`; const nextLinkSelector = `.tabs-bar__link[data-preview-title-id="${nextLinkTranslationId}"]`;
@ -168,14 +169,14 @@ class ColumnsArea extends ImmutablePureComponent {
document.querySelector(nextLinkSelector).classList.add('active'); document.querySelector(nextLinkSelector).classList.add('active');
if (!this.state.shouldAnimate && typeof this.pendingIndex === 'number') { if (!this.state.shouldAnimate && typeof this.pendingIndex === 'number') {
this.context.router.history.push(getLink(this.pendingIndex)); this.context.router.history.push(getSwipeableLink(this.pendingIndex));
this.pendingIndex = null; this.pendingIndex = null;
} }
} }
handleAnimationEnd = () => { handleAnimationEnd = () => {
if (typeof this.pendingIndex === 'number') { if (typeof this.pendingIndex === 'number') {
this.context.router.history.push(getLink(this.pendingIndex)); this.context.router.history.push(getSwipeableLink(this.pendingIndex));
this.pendingIndex = null; this.pendingIndex = null;
} }
} }
@ -193,7 +194,7 @@ class ColumnsArea extends ImmutablePureComponent {
} }
renderView = (link, index) => { renderView = (link, index) => {
const columnIndex = getIndex(this.context.router.history.location.pathname); const columnIndex = getSwipeableIndex(this.context.router.history.location.pathname);
const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] }); const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] });
const icon = link.props['data-preview-icon']; const icon = link.props['data-preview-icon'];
@ -217,10 +218,10 @@ class ColumnsArea extends ImmutablePureComponent {
} }
render () { render () {
const { columns, children, singleColumn, isModalOpen, intl } = this.props; const { columns, children, singleColumn, isModalOpen, links, intl } = this.props;
const { shouldAnimate, renderComposePanel } = this.state; const { shouldAnimate, renderComposePanel } = this.state;
const columnIndex = getIndex(this.context.router.history.location.pathname); const columnIndex = getSwipeableIndex(this.context.router.history.location.pathname);
if (singleColumn) { if (singleColumn) {
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className={classNames('floating-action-button', { 'bottom-bar': place_tab_bar_at_bottom })} aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>; const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className={classNames('floating-action-button', { 'bottom-bar': place_tab_bar_at_bottom })} aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;

View file

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { NavLink, withRouter } from 'react-router-dom'; import { NavLink, withRouter } from 'react-router-dom';
import { FormattedMessage, injectIntl } from 'react-intl'; import { FormattedMessage, injectIntl } from 'react-intl';
import { debounce } from 'lodash'; import { debounce, memoize } from 'lodash';
import { isUserTouching } from '../../../is_mobile'; import { isUserTouching } from '../../../is_mobile';
import Icon from 'mastodon/components/icon'; import Icon from 'mastodon/components/icon';
import NotificationsCounterIcon from './notifications_counter_icon'; import NotificationsCounterIcon from './notifications_counter_icon';
@ -15,9 +15,23 @@ export const links = [
<NavLink className='tabs-bar__link' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon id='globe' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.public_timeline' defaultMessage='FTL' /></span></NavLink>, <NavLink className='tabs-bar__link' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon id='globe' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.public_timeline' defaultMessage='FTL' /></span></NavLink>,
<NavLink className='tabs-bar__link' exact to='/lists' data-preview-title-id='column.lists' data-preview-icon='list-ul' ><Icon id='list-ul' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='tabs_bar.lists' defaultMessage='Lists' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.lists' defaultMessage='List' /></span></NavLink>, <NavLink className='tabs-bar__link' exact to='/lists' data-preview-title-id='column.lists' data-preview-icon='list-ul' ><Icon id='list-ul' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='tabs_bar.lists' defaultMessage='Lists' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.lists' defaultMessage='List' /></span></NavLink>,
<NavLink className='tabs-bar__link optional' to='/search' data-preview-title-id='tabs_bar.search' data-preview-icon='bell' ><Icon id='search' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.search' defaultMessage='Search' /></span></NavLink>, <NavLink className='tabs-bar__link optional' to='/search' data-preview-title-id='tabs_bar.search' data-preview-icon='bell' ><Icon id='search' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.search' defaultMessage='Search' /></span></NavLink>,
// <a className='tabs-bar__external-link' href='/settings/preferences' to='/settings/preferences' data-preview-title-id='navigation_bar.preferences' data-preview-icon='cog' ><Icon id='cog' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.preferences' defaultMessage='Pref.' /></span></a>,
// <a className='tabs-bar__external-link' href='/auth/sign_out' to='/auth/sign_out' data-method='delete' data-preview-title-id='navigation_bar.logout' data-preview-icon='sign-out' ><Icon id='sign-out' fixedWidth /><span className='tabs-bar__link__full-label'><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></span><span className='tabs-bar__link__short-label'><FormattedMessage id='navigation_bar.short.logout' defaultMessage='Logout' /></span></a>,
<NavLink className='tabs-bar__link hamburger' to='/getting-started' data-preview-title-id='getting_started.heading' data-preview-icon='bars' ><Icon id='bars' fixedWidth /></NavLink>, <NavLink className='tabs-bar__link hamburger' to='/getting-started' data-preview-title-id='getting_started.heading' data-preview-icon='bars' ><Icon id='bars' fixedWidth /></NavLink>,
]; ];
export const getSwipeableLinks = memoize(() => {
return links.filter(link => link.props.className.split(/\s+/).includes('tabs-bar__link'));
});
export function getSwipeableIndex (path) {
return getSwipeableLinks().findIndex(link => link.props.to === path);
}
export function getSwipeableLink (index) {
return getSwipeableLinks()[index].props.to;
}
export function getIndex (path) { export function getIndex (path) {
return links.findIndex(link => link.props.to === path); return links.findIndex(link => link.props.to === path);
} }
@ -77,7 +91,7 @@ class TabsBar extends React.PureComponent {
return ( return (
<div className='tabs-bar__wrapper'> <div className='tabs-bar__wrapper'>
<nav className={classNames('tabs-bar', { 'bottom-bar': place_tab_bar_at_bottom })} ref={this.setRef}> <nav className={classNames('tabs-bar', { 'bottom-bar': place_tab_bar_at_bottom })} ref={this.setRef}>
{links.map(link => React.cloneElement(link, { key: link.props.to, className: classNames(link.props.className, { 'short-label': show_tab_bar_label }), onClick: this.handleClick, 'aria-label': formatMessage({ id: link.props['data-preview-title-id'] }) }))} {links.map(link => React.cloneElement(link, { key: link.props.to, className: classNames(link.props.className, { 'short-label': show_tab_bar_label }), onClick: link.props.href ? null : this.handleClick, 'aria-label': formatMessage({ id: link.props['data-preview-title-id'] }) }))}
</nav> </nav>
<div id='tabs-bar__portal' /> <div id='tabs-bar__portal' />

View file

@ -1,9 +1,11 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ColumnsArea from '../components/columns_area'; import ColumnsArea from '../components/columns_area';
import { getSwipeableLinks } from '../components/tabs_bar';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
columns: state.getIn(['settings', 'columns']), columns: state.getIn(['settings', 'columns']),
isModalOpen: !!state.get('modal').modalType, isModalOpen: !!state.get('modal').modalType,
links: getSwipeableLinks(),
}); });
export default connect(mapStateToProps, null, null, { forwardRef: true })(ColumnsArea); export default connect(mapStateToProps, null, null, { forwardRef: true })(ColumnsArea);

View file

@ -2165,6 +2165,10 @@ a.account__display-name {
.tabs-bar { .tabs-bar {
margin-bottom: 0; margin-bottom: 0;
&.bottom-bar {
border-top: 1px solid lighten($ui-base-color, 8%);
}
@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { @media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
&.bottom-bar { &.bottom-bar {
position: fixed; position: fixed;
@ -2312,12 +2316,19 @@ a.account__display-name {
background: lighten($ui-base-color, 8%); background: lighten($ui-base-color, 8%);
flex: 0 0 auto; flex: 0 0 auto;
overflow-y: auto; overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
} }
.tabs-bar__link { .tabs-bar__link,
.tabs-bar__external-link {
display: block; display: block;
flex: 1 1 auto; flex: 1 0 auto;
min-width: 40px; min-width: 50px;
color: $primary-text-color; color: $primary-text-color;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
@ -2363,11 +2374,12 @@ a.account__display-name {
@media screen and (max-width: 600px - 1px) { @media screen and (max-width: 600px - 1px) {
.tabs-bar { .tabs-bar {
.tabs-bar__link { .tabs-bar__link,
.tabs-bar__external-link {
&, &,
&.hamburger, &.hamburger,
&.hamburger.short-label { &.hamburger.short-label {
padding: 15px 10px 13px; padding: 15px 0 13px;
} }
&.hamburger.short-label { &.hamburger.short-label {
@ -2380,7 +2392,7 @@ a.account__display-name {
padding: 0; padding: 0;
i { i {
margin: 10px 5px 0; margin: 10px 0 0;
} }
.tabs-bar__link__short-label { .tabs-bar__link__short-label {
@ -2410,7 +2422,10 @@ a.account__display-name {
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
.tabs-bar { .tabs-bar {
.tabs-bar__link { white-space: nowrap;
.tabs-bar__link,
.tabs-bar__external-link {
&, &,
&.hamburger { &.hamburger {
padding: 15px 10px 13px; padding: 15px 10px 13px;
@ -2433,7 +2448,8 @@ a.account__display-name {
} }
.tabs-bar.bottom-bar { .tabs-bar.bottom-bar {
.tabs-bar__link { .tabs-bar__link,
.tabs-bar__external-link {
&, &,
&.hamburger { &.hamburger {
padding-bottom: calc(env(safe-area-inset-bottom) + 13px); padding-bottom: calc(env(safe-area-inset-bottom) + 13px);
@ -2450,6 +2466,7 @@ a.account__display-name {
&.bottom-bar { &.bottom-bar {
padding-bottom: 48px; padding-bottom: 48px;
padding-bottom: calc(env(safe-area-inset-bottom) + 48px);
} }
.column, .column,
@ -2649,7 +2666,8 @@ a.account__display-name {
@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
.floating-action-button, .floating-action-button,
.tabs-bar__link.optional { .tabs-bar__link.optional,
.tabs-bar__external-link.optional {
display: none; display: none;
} }