random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated tabs bar

Browse Source 
updated responsiveness of tabs bar
This commit is contained in:
mgabdev 2019-08-14 23:02:48 -04:00
parent 8812cda2a2
commit a2bb97d412
2 changed files with 295 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
app/javascript/gabsocial/features/ui/components/tabs_bar.js
View File

@ -2,11 +2,10 @@ 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 { throttle } from 'lodash';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { isUserTouching } from '../../../is_mobile';
import { me } from '../../../initial_state'; import { me } from '../../../initial_state';
import { Link } from 'react-router-dom'; import classNames from 'classnames';
import NotificationsCounterIcon from './notifications_counter_icon'; import NotificationsCounterIcon from './notifications_counter_icon';
import SearchContainer from 'gabsocial/features/compose/containers/search_container'; import SearchContainer from 'gabsocial/features/compose/containers/search_container';
import Avatar from '../../../components/avatar'; import Avatar from '../../../components/avatar';
@ -14,35 +13,42 @@ import ActionBar from 'gabsocial/features/compose/components/action_bar';
import { openModal } from '../../../actions/modal'; import { openModal } from '../../../actions/modal';
export const privateLinks = [ 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' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
</NavLink>, </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' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
</NavLink>, </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 /> <NotificationsCounterIcon />
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /> <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
</NavLink>, </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' /> <FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
</NavLink>, </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' /> <FormattedMessage id='tabs_bar.apps' defaultMessage='Apps' />
</a>, </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' /> <FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
</NavLink>, </NavLink>,
]; ];
export const publicLinks = [ 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' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
</a>, </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' /> <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
</a>, </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' /> <FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
</NavLink>, </NavLink>,
]; ];
@ -56,16 +62,101 @@ class TabsBar extends React.PureComponent {
onOpenCompose: PropTypes.func, 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 => { setRef = ref => {
this.node = 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 () { 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 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 ( return (
<nav className='tabs-bar' ref={this.setRef}> <nav className={classes} ref={this.setRef}>
<div className='tabs-bar__container'> <div className='tabs-bar__container'>
<div className='tabs-bar__split tabs-bar__split--left'> <div className='tabs-bar__split tabs-bar__split--left'>
{ {
@ -93,6 +184,7 @@ class TabsBar extends React.PureComponent {
<Avatar account={account} /> <Avatar account={account} />
<ActionBar account={account} size={34} /> <ActionBar account={account} size={34} />
</div> </div>
<span className='tabs-bar__page-name'>{pathTitle}</span>
<button className='tabs-bar__button-compose button' onClick={onOpenCompose} aria-label='Gab'> <button className='tabs-bar__button-compose button' onClick={onOpenCompose} aria-label='Gab'>
<span>Gab</span> <span>Gab</span>
</button> </button>

251
app/javascript/styles/gabsocial/components/tabs-bar.scss
View File

@ -8,6 +8,19 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; 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 { &__container {
display: flex; display: flex;
@ -19,7 +32,6 @@
// NOTE - might need to adjust this based on column sizing // NOTE - might need to adjust this based on column sizing
@media screen and (max-width: $nav-breakpoint-4) {padding: 0 10px;} @media screen and (max-width: $nav-breakpoint-4) {padding: 0 10px;}
} }
&__split { &__split {
@ -39,18 +51,10 @@
&__search-container { &__search-container {
display: block; display: block;
@media screen and (max-width: $nav-breakpoint-2) {display: none;}
width: 251px; width: 251px;
.search {
margin: 0;
}
@media (min-width:852px) and (max-width: 960px) { @media screen and (max-width: 1024px) {
width: 160px; display: none;
}
@media (min-width:$nav-breakpoint-2) and (max-width: 852px) {
width: 200px;
} }
} }
@ -77,8 +81,17 @@
height: 42px; height: 42px;
background-size: 42px 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 { .compose__action-bar {
@ -92,8 +105,41 @@
i { i {
display: none; 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 { &__button-compose {
display: block; display: block;
@media screen and (max-width: $nav-breakpoint-3) {display: none;} @media screen and (max-width: $nav-breakpoint-3) {display: none;}
@ -122,81 +168,162 @@
.flex { .flex {
display: 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 { .tabs-bar__link {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
margin: 0 25px 0 0; margin: 0 20px 0 0;
color: white; color: white;
text-decoration: none; text-decoration: none;
text-align: center;
background-repeat: no-repeat; @media screen and (max-width: 895px) {
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;
width: 36px; width: 36px;
height: 42px; height: 42px;
margin: 4px 4px 0 0; margin: 4px 4px 0 0;
padding: 0 !important; justify-content: center;
&.active { &.active {
border-bottom: 4px solid $gab-default-text-light; border-bottom: 2px solid $gab-brand-default;
} }
& > span {display: none;} & > span {display: none;}
} }
// REMINDER - to add the remaining icons (globe / word balloon) from the sprite into this css as necessary > span {
&.home { font-size: 15px;
padding: 16px 0 0 26px; line-height: 50px;
background-position: 0 18px; margin-left: 4px;
&.active {background-position: 0 -52px;}
@media screen and (max-width: $nav-breakpoint-1) {
background-position: 6px 11px;
&.active {background-position: 6px -89px;}
}
} }
&.notifications {
padding: 16px 0 0 22px; &--search {
background-position: -140px 18px; @media (min-width: 1024px) {
&.active {background-position: -140px -52px;} display: none;
@media screen and (max-width: $nav-breakpoint-1) { }
background-position: -190px 11px; }
&.active {background-position: -190px -89px;}
} @media screen and (max-width:895px) {
} &.apps {
&.groups { display: none;
padding: 16px 0 0 29px; }
background-position: -280px 18px; }
&.active {background-position: -280px -52px;}
@media screen and (max-width: $nav-breakpoint-1) { &__icon {
background-position: -395px 11px; width: 20px;
&.active {background-position: -395px -89px;} background-repeat: no-repeat;
} background-image: url('../images/sprite-main-navigation-links.png');
} background-size: auto 84px;
&.apps {
padding: 16px 0 0 29px; @media screen and (max-width: 895px) {
background-position: -825px 18px; width: 32px;
@media screen and (max-width: $nav-breakpoint-1) { background-size: auto 120px;
background-position: -1170px 11px; }
}
} &.home {
&.optional { background-position: 0 18px;
display: none; @media screen and (max-width: 895px) {
@media screen and (max-width: $nav-breakpoint-2) { background-position: 1px 11px;
display: flex; }
background-position: -992px 11px; }
&.active {background-position: -992px -89px;} &.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 { &--logo {
display: block; display: block;
// NOTE - Revisit right-margin of home button / positioning between 376px and 350px // 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 // - 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; width: 50px;
height: 50px; height: 50px;