Updated tabs bar
updated responsiveness of tabs bar
This commit is contained in:
mgabdev
parent
8812cda2a2
commit
a2bb97d412
@ -2,11 +2,10 @@ 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 { throttle } from 'lodash';
|
||||
import { connect } from 'react-redux';
|
||||
import { isUserTouching } from '../../../is_mobile';
|
||||
import { me } from '../../../initial_state';
|
||||
import { Link } from 'react-router-dom';
|
||||
import classNames from 'classnames';
|
||||
import NotificationsCounterIcon from './notifications_counter_icon';
|
||||
import SearchContainer from 'gabsocial/features/compose/containers/search_container';
|
||||
import Avatar from '../../../components/avatar';
|
||||
@ -14,35 +13,42 @@ import ActionBar from 'gabsocial/features/compose/components/action_bar';
|
||||
import { openModal } from '../../../actions/modal';
|
||||
|
||||
export const privateLinks = [
|
||||
<NavLink className='tabs-bar__link--logo' to='/home#' data-preview-title-id='column.home' style={{ padding: '0' }}>
|
||||
<NavLink key='pr0' className='tabs-bar__link--logo' to='/home#' data-preview-title-id='column.home' style={{ padding: '0' }}>
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</NavLink>,
|
||||
<NavLink className='tabs-bar__link home' to='/home' data-preview-title-id='column.home' >
|
||||
<NavLink key='pr1' className='tabs-bar__link' to='/home' data-preview-title-id='column.home' >
|
||||
<i className='tabs-bar__link__icon home'/>
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</NavLink>,
|
||||
<NavLink className='tabs-bar__link notifications' to='/notifications' data-preview-title-id='column.notifications' >
|
||||
<NavLink key='pr2' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications' >
|
||||
<i className='tabs-bar__link__icon notifications'/>
|
||||
<NotificationsCounterIcon />
|
||||
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
|
||||
</NavLink>,
|
||||
<NavLink className='tabs-bar__link groups' to='/groups' data-preview-title-id='column.groups' >
|
||||
<NavLink key='pr3' className='tabs-bar__link' to='/groups' data-preview-title-id='column.groups' >
|
||||
<i className='tabs-bar__link__icon groups'/>
|
||||
<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
|
||||
</NavLink>,
|
||||
<a className='tabs-bar__link apps' href='https://apps.gab.com' data-preview-title-id='tabs_bar.apps' >
|
||||
<a key='pr4' className='tabs-bar__link apps' href='https://apps.gab.com' data-preview-title-id='tabs_bar.apps' >
|
||||
<i className='tabs-bar__link__icon apps'/>
|
||||
<FormattedMessage id='tabs_bar.apps' defaultMessage='Apps' />
|
||||
</a>,
|
||||
<NavLink className='tabs-bar__link optional' to='/search' data-preview-title-id='tabs_bar.search' >
|
||||
<NavLink key='pr5' className='tabs-bar__link tabs-bar__link--search' to='/search' data-preview-title-id='tabs_bar.search' >
|
||||
<i className='tabs-bar__link__icon tabs-bar__link__icon--search'/>
|
||||
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
|
||||
</NavLink>,
|
||||
];
|
||||
|
||||
export const publicLinks = [
|
||||
<a className='tabs-bar__link--logo' href='/#' data-preview-title-id='column.home' style={{ padding: '0' }}>
|
||||
<a key='pl0' className='tabs-bar__link--logo' href='/#' data-preview-title-id='column.home' style={{ padding: '0' }}>
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</a>,
|
||||
<a className='tabs-bar__link home' href='/home' data-preview-title-id='column.home' >
|
||||
<a key='pl1' className='tabs-bar__link' href='/home' data-preview-title-id='column.home' >
|
||||
<i className='tabs-bar__link__icon home'/>
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</a>,
|
||||
<NavLink className='tabs-bar__link optional' to='/search' data-preview-title-id='tabs_bar.search' >
|
||||
<NavLink key='pl2' className='tabs-bar__link tabs-bar__link--search' to='/search' data-preview-title-id='tabs_bar.search' >
|
||||
<i className='tabs-bar__link__icon tabs-bar__link__icon--search'/>
|
||||
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
|
||||
</NavLink>,
|
||||
];
|
||||
@ -56,16 +62,101 @@ class TabsBar extends React.PureComponent {
|
||||
onOpenCompose: PropTypes.func,
|
||||
}
|
||||
|
||||
state = {
|
||||
collapsed: false,
|
||||
}
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
}
|
||||
|
||||
lastScrollTop = 0;
|
||||
|
||||
componentDidMount () {
|
||||
this.window = window;
|
||||
this.documentElement = document.scrollingElement || document.documentElement;
|
||||
|
||||
this.attachScrollListener();
|
||||
// Handle initial scroll posiiton
|
||||
this.handleScroll();
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this.detachScrollListener();
|
||||
}
|
||||
|
||||
setRef = ref => {
|
||||
this.node = ref;
|
||||
}
|
||||
|
||||
attachScrollListener () {
|
||||
this.window.addEventListener('scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
detachScrollListener () {
|
||||
this.window.removeEventListener('scroll', this.handleScroll);
|
||||
}
|
||||
|
||||
handleScroll = throttle(() => {
|
||||
if (this.window) {
|
||||
const { pageYOffset, innerWidth } = this.window;
|
||||
if (innerWidth > 895) return;
|
||||
const { scrollTop } = this.documentElement;
|
||||
|
||||
let st = pageYOffset || scrollTop;
|
||||
if (st > this.lastScrollTop){
|
||||
let offset = st - this.lastScrollTop;
|
||||
if (offset > 50) this.setState({collapsed: true});
|
||||
} else {
|
||||
let offset = this.lastScrollTop - st;
|
||||
if (offset > 50) this.setState({collapsed: false});
|
||||
}
|
||||
|
||||
this.lastScrollTop = st <= 0 ? 0 : st;
|
||||
}
|
||||
}, 150, {
|
||||
trailing: true,
|
||||
});
|
||||
|
||||
render () {
|
||||
const { intl: { formatMessage }, account, onOpenCompose } = this.props;
|
||||
const { intl: { formatMessage }, account, onOpenCompose, onOpenSidebar } = this.props;
|
||||
const { collapsed } = this.state;
|
||||
const links = account ? privateLinks : publicLinks;
|
||||
|
||||
const pathname = this.context.router.route.location.pathname || '';
|
||||
let pathTitle = '';
|
||||
if (pathname.includes('/home')) {
|
||||
pathTitle = 'Home';
|
||||
} else if (pathname.includes('/timeline/all')) {
|
||||
pathTitle = 'All';
|
||||
} else if (pathname.includes('/group')) {
|
||||
pathTitle = 'Groups';
|
||||
} else if (pathname.includes('/tags')) {
|
||||
pathTitle = 'Tags';
|
||||
} else if (pathname.includes('/list')) {
|
||||
pathTitle = 'Lists';
|
||||
} else if (pathname.includes('/notifications')) {
|
||||
pathTitle = 'Notifications';
|
||||
} else if (pathname.includes('/search')) {
|
||||
pathTitle = 'Search';
|
||||
} else if (pathname.includes('/follow_requests')) {
|
||||
pathTitle = 'Requests';
|
||||
} else if (pathname.includes('/blocks')) {
|
||||
pathTitle = 'Blocks';
|
||||
} else if (pathname.includes('/domain_blocks')) {
|
||||
pathTitle = 'Domain Blocks';
|
||||
} else if (pathname.includes('/mutes')) {
|
||||
pathTitle = 'Mutes';
|
||||
} else {
|
||||
pathTitle = 'Profile';
|
||||
}
|
||||
|
||||
const classes = classNames('tabs-bar', {
|
||||
'tabs-bar--collapsed': collapsed,
|
||||
})
|
||||
|
||||
return (
|
||||
<nav className='tabs-bar' ref={this.setRef}>
|
||||
<nav className={classes} ref={this.setRef}>
|
||||
<div className='tabs-bar__container'>
|
||||
<div className='tabs-bar__split tabs-bar__split--left'>
|
||||
{
|
||||
@ -93,6 +184,7 @@ class TabsBar extends React.PureComponent {
|
||||
<Avatar account={account} />
|
||||
<ActionBar account={account} size={34} />
|
||||
</div>
|
||||
<span className='tabs-bar__page-name'>{pathTitle}</span>
|
||||
<button className='tabs-bar__button-compose button' onClick={onOpenCompose} aria-label='Gab'>
|
||||
<span>Gab</span>
|
||||
</button>
|
||||
|
||||
@ -8,6 +8,19 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
// body.theme-gabsocial-light & {
|
||||
// background: #fff;
|
||||
// border-bottom: 1px solid #ddd;
|
||||
// }
|
||||
|
||||
&--collapsed {
|
||||
@media screen and (max-width: 895px) {
|
||||
margin-top: -46px;
|
||||
transform: translateY(-46px);
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
@ -19,7 +32,6 @@
|
||||
|
||||
// NOTE - might need to adjust this based on column sizing
|
||||
@media screen and (max-width: $nav-breakpoint-4) {padding: 0 10px;}
|
||||
|
||||
}
|
||||
|
||||
&__split {
|
||||
@ -39,18 +51,10 @@
|
||||
|
||||
&__search-container {
|
||||
display: block;
|
||||
@media screen and (max-width: $nav-breakpoint-2) {display: none;}
|
||||
width: 251px;
|
||||
.search {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (min-width:852px) and (max-width: 960px) {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
@media (min-width:$nav-breakpoint-2) and (max-width: 852px) {
|
||||
width: 200px;
|
||||
@media screen and (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,8 +81,17 @@
|
||||
height: 42px;
|
||||
background-size: 42px 42px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 895px) {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-size: 30px 30px;
|
||||
|
||||
.account__avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.compose__action-bar {
|
||||
@ -92,8 +105,41 @@
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 895px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__sidebar-btn {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 30px;
|
||||
opacity: 0;
|
||||
|
||||
@media (min-width: 895px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__page-name {
|
||||
display: block;
|
||||
margin-left: 18px;
|
||||
line-height: 30px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
|
||||
@media (min-width: 895px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-compose {
|
||||
display: block;
|
||||
@media screen and (max-width: $nav-breakpoint-3) {display: none;}
|
||||
@ -122,81 +168,162 @@
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (max-width: 895px) {
|
||||
height: 92px;
|
||||
|
||||
&__search-container,
|
||||
&__button-compose {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__container {
|
||||
max-width: 560px;
|
||||
flex-direction: column-reverse;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__profile {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__split {
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
|
||||
&--left {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--right {
|
||||
padding: 6px 0 6px 20px;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-bar__link {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
margin: 0 25px 0 0;
|
||||
margin: 0 20px 0 0;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/sprite-main-navigation-links.png');
|
||||
background-size: auto 84px;
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
background-size: auto 120px;
|
||||
|
||||
@media screen and (max-width: 895px) {
|
||||
width: 36px;
|
||||
height: 42px;
|
||||
margin: 4px 4px 0 0;
|
||||
padding: 0 !important;
|
||||
justify-content: center;
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid $gab-default-text-light;
|
||||
border-bottom: 2px solid $gab-brand-default;
|
||||
}
|
||||
& > span {display: none;}
|
||||
}
|
||||
|
||||
// REMINDER - to add the remaining icons (globe / word balloon) from the sprite into this css as necessary
|
||||
&.home {
|
||||
padding: 16px 0 0 26px;
|
||||
background-position: 0 18px;
|
||||
&.active {background-position: 0 -52px;}
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
background-position: 6px 11px;
|
||||
&.active {background-position: 6px -89px;}
|
||||
}
|
||||
> span {
|
||||
font-size: 15px;
|
||||
line-height: 50px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
&.notifications {
|
||||
padding: 16px 0 0 22px;
|
||||
background-position: -140px 18px;
|
||||
&.active {background-position: -140px -52px;}
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
background-position: -190px 11px;
|
||||
&.active {background-position: -190px -89px;}
|
||||
}
|
||||
}
|
||||
&.groups {
|
||||
padding: 16px 0 0 29px;
|
||||
background-position: -280px 18px;
|
||||
&.active {background-position: -280px -52px;}
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
background-position: -395px 11px;
|
||||
&.active {background-position: -395px -89px;}
|
||||
}
|
||||
}
|
||||
&.apps {
|
||||
padding: 16px 0 0 29px;
|
||||
background-position: -825px 18px;
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
background-position: -1170px 11px;
|
||||
}
|
||||
}
|
||||
&.optional {
|
||||
display: none;
|
||||
@media screen and (max-width: $nav-breakpoint-2) {
|
||||
display: flex;
|
||||
background-position: -992px 11px;
|
||||
&.active {background-position: -992px -89px;}
|
||||
|
||||
&--search {
|
||||
@media (min-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:895px) {
|
||||
&.apps {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/sprite-main-navigation-links.png');
|
||||
background-size: auto 84px;
|
||||
|
||||
@media screen and (max-width: 895px) {
|
||||
width: 32px;
|
||||
background-size: auto 120px;
|
||||
}
|
||||
|
||||
&.home {
|
||||
background-position: 0 18px;
|
||||
@media screen and (max-width: 895px) {
|
||||
background-position: 1px 11px;
|
||||
}
|
||||
}
|
||||
&.notifications {
|
||||
background-position: -140px 18px;
|
||||
@media screen and (max-width: 895px) {
|
||||
background-position: -195px 11px;
|
||||
}
|
||||
}
|
||||
&.groups {
|
||||
background-position: -280px 18px;
|
||||
@media screen and (max-width: 895px) {
|
||||
background-position: -400px 11px;
|
||||
}
|
||||
}
|
||||
&.apps {
|
||||
background-position: -825px 18px;
|
||||
}
|
||||
&.tabs-bar__link__icon--search {
|
||||
background-position: -697px 18px;
|
||||
@media screen and (max-width: 895px) {
|
||||
background-position: -995px 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $gab-text-highlight;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&.active & {
|
||||
&__icon {
|
||||
&.home {
|
||||
background-position: 0 -52px;
|
||||
@media screen and (max-width: 895px) {
|
||||
background-position: 1px -89px;
|
||||
}
|
||||
}
|
||||
&.notifications {
|
||||
background-position: -140px -52px;
|
||||
@media screen and (max-width: 895px) {
|
||||
background-position: -195px -89px;
|
||||
}
|
||||
}
|
||||
&.groups {
|
||||
background-position: -280px -52px;
|
||||
@media screen and (max-width: 895px) {
|
||||
background-position: -400px -89px;
|
||||
}
|
||||
}
|
||||
&.tabs-bar__link__icon--search {
|
||||
@media (min-width: 895px) and (max-width: 1024px) {
|
||||
background-position: -697px -52px;
|
||||
}
|
||||
@media screen and (max-width: 895px) {
|
||||
background-position: -995px -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {color: $gab-text-highlight;}
|
||||
&--logo {
|
||||
display: block;
|
||||
|
||||
// NOTE - Revisit right-margin of home button / positioning between 376px and 350px
|
||||
// - want to keep the icons centered between logo and profile image while shrinking
|
||||
@media screen and (max-width: $nav-breakpoint-4) {display:none;}
|
||||
@media screen and (max-width: 895px) {display:none;}
|
||||
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user