From a00ef472e820e252566438fe9a79d484069946af Mon Sep 17 00:00:00 2001 From: noellabo Date: Tue, 9 Feb 2021 12:06:34 +0900 Subject: [PATCH] Add preference and logout --- .../features/ui/components/columns_area.js | 21 +++++------ .../features/ui/components/tabs_bar.js | 18 ++++++++-- .../ui/containers/columns_area_container.js | 2 ++ .../styles/mastodon/components.scss | 36 ++++++++++++++----- 4 files changed, 56 insertions(+), 21 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index e05021df6..bbb04f36f 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; 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 { disableSwiping, place_tab_bar_at_bottom } from 'mastodon/initial_state'; @@ -75,6 +75,7 @@ class ColumnsArea extends ImmutablePureComponent { isModalOpen: PropTypes.bool.isRequired, singleColumn: PropTypes.bool, children: PropTypes.node, + links: PropTypes.node, }; // Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS @@ -86,7 +87,7 @@ class ColumnsArea extends ImmutablePureComponent { } 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 }); } } @@ -105,7 +106,7 @@ class ColumnsArea extends ImmutablePureComponent { 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.setState({ shouldAnimate: true }); @@ -122,7 +123,7 @@ class ColumnsArea extends ImmutablePureComponent { 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) { this.lastIndex = newIndex; @@ -158,7 +159,7 @@ class ColumnsArea extends ImmutablePureComponent { handleSwipe = (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 nextLinkSelector = `.tabs-bar__link[data-preview-title-id="${nextLinkTranslationId}"]`; @@ -168,14 +169,14 @@ class ColumnsArea extends ImmutablePureComponent { document.querySelector(nextLinkSelector).classList.add('active'); 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; } } handleAnimationEnd = () => { if (typeof this.pendingIndex === 'number') { - this.context.router.history.push(getLink(this.pendingIndex)); + this.context.router.history.push(getSwipeableLink(this.pendingIndex)); this.pendingIndex = null; } } @@ -193,7 +194,7 @@ class ColumnsArea extends ImmutablePureComponent { } 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 icon = link.props['data-preview-icon']; @@ -217,10 +218,10 @@ class ColumnsArea extends ImmutablePureComponent { } render () { - const { columns, children, singleColumn, isModalOpen, intl } = this.props; + const { columns, children, singleColumn, isModalOpen, links, intl } = this.props; 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) { const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : ; diff --git a/app/javascript/mastodon/features/ui/components/tabs_bar.js b/app/javascript/mastodon/features/ui/components/tabs_bar.js index e0328dc9e..607611cdc 100644 --- a/app/javascript/mastodon/features/ui/components/tabs_bar.js +++ b/app/javascript/mastodon/features/ui/components/tabs_bar.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { NavLink, withRouter } from 'react-router-dom'; import { FormattedMessage, injectIntl } from 'react-intl'; -import { debounce } from 'lodash'; +import { debounce, memoize } from 'lodash'; import { isUserTouching } from '../../../is_mobile'; import Icon from 'mastodon/components/icon'; import NotificationsCounterIcon from './notifications_counter_icon'; @@ -15,9 +15,23 @@ export const links = [ , , , + // , + // , , ]; +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) { return links.findIndex(link => link.props.to === path); } @@ -77,7 +91,7 @@ class TabsBar extends React.PureComponent { return (
diff --git a/app/javascript/mastodon/features/ui/containers/columns_area_container.js b/app/javascript/mastodon/features/ui/containers/columns_area_container.js index 42b9e4824..770f57bc8 100644 --- a/app/javascript/mastodon/features/ui/containers/columns_area_container.js +++ b/app/javascript/mastodon/features/ui/containers/columns_area_container.js @@ -1,9 +1,11 @@ import { connect } from 'react-redux'; import ColumnsArea from '../components/columns_area'; +import { getSwipeableLinks } from '../components/tabs_bar'; const mapStateToProps = state => ({ columns: state.getIn(['settings', 'columns']), isModalOpen: !!state.get('modal').modalType, + links: getSwipeableLinks(), }); export default connect(mapStateToProps, null, null, { forwardRef: true })(ColumnsArea); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index a4d92048f..6d2127fc5 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2165,6 +2165,10 @@ a.account__display-name { .tabs-bar { margin-bottom: 0; + &.bottom-bar { + border-top: 1px solid lighten($ui-base-color, 8%); + } + @media screen and (max-width: 600px + (285px * 2) + (10px * 2)) { &.bottom-bar { position: fixed; @@ -2312,12 +2316,19 @@ a.account__display-name { background: lighten($ui-base-color, 8%); flex: 0 0 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; - flex: 1 1 auto; - min-width: 40px; + flex: 1 0 auto; + min-width: 50px; color: $primary-text-color; text-decoration: none; text-align: center; @@ -2363,11 +2374,12 @@ a.account__display-name { @media screen and (max-width: 600px - 1px) { .tabs-bar { - .tabs-bar__link { + .tabs-bar__link, + .tabs-bar__external-link { &, &.hamburger, &.hamburger.short-label { - padding: 15px 10px 13px; + padding: 15px 0 13px; } &.hamburger.short-label { @@ -2380,7 +2392,7 @@ a.account__display-name { padding: 0; i { - margin: 10px 5px 0; + margin: 10px 0 0; } .tabs-bar__link__short-label { @@ -2410,7 +2422,10 @@ a.account__display-name { @media screen and (min-width: 600px) { .tabs-bar { - .tabs-bar__link { + white-space: nowrap; + + .tabs-bar__link, + .tabs-bar__external-link { &, &.hamburger { padding: 15px 10px 13px; @@ -2433,7 +2448,8 @@ a.account__display-name { } .tabs-bar.bottom-bar { - .tabs-bar__link { + .tabs-bar__link, + .tabs-bar__external-link { &, &.hamburger { padding-bottom: calc(env(safe-area-inset-bottom) + 13px); @@ -2450,6 +2466,7 @@ a.account__display-name { &.bottom-bar { padding-bottom: 48px; + padding-bottom: calc(env(safe-area-inset-bottom) + 48px); } .column, @@ -2649,7 +2666,8 @@ a.account__display-name { @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) { .floating-action-button, - .tabs-bar__link.optional { + .tabs-bar__link.optional, + .tabs-bar__external-link.optional { display: none; }