Commit a2bb97d4 authored by mgabdev's avatar mgabdev

Updated tabs bar

updated responsiveness of tabs bar
parent 8812cda2
......@@ -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;}
&--search {
@media (min-width: 1024px) {
display: none;
}
}
&.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;}
@media screen and (max-width:895px) {
&.apps {
display: none;
}
}
&.apps {
padding: 16px 0 0 29px;
background-position: -825px 18px;
@media screen and (max-width: $nav-breakpoint-1) {
background-position: -1170px 11px;
&__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;
}
}
}
&.optional {
display: none;
@media screen and (max-width: $nav-breakpoint-2) {
display: flex;
background-position: -992px 11px;
&.active {background-position: -992px -89px;}
&.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;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment