Large update for all components
reorganization, linting, updating file imports, consolidation warning: there will be errors in this commit todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*
This commit is contained in:
mgabdev
1
app/javascript/gabsocial/components/tabs_bar/index.js
Normal file
1
app/javascript/gabsocial/components/tabs_bar/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './tabs_bar';
|
||||
109
app/javascript/gabsocial/components/tabs_bar/tabs_bar.js
Normal file
109
app/javascript/gabsocial/components/tabs_bar/tabs_bar.js
Normal file
@@ -0,0 +1,109 @@
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { NavLink, withRouter } from 'react-router-dom';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { me } from '../../initial_state';
|
||||
import NotificationsCounter from '../notification_counter';
|
||||
import SearchContainer from 'gabsocial/features/compose/containers/search_container';
|
||||
import Avatar from '../avatar';
|
||||
import ActionBar from 'gabsocial/features/compose/components/action_bar';
|
||||
import { openModal } from '../../actions/modal';
|
||||
|
||||
import './tabs_bar.scss';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
account: state.getIn(['accounts', me]),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenCompose() {
|
||||
dispatch(openModal('COMPOSE'));
|
||||
},
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@withRouter
|
||||
class TabsBar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
history: PropTypes.object.isRequired,
|
||||
onOpenCompose: PropTypes.func.isRequired,
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { account, onOpenCompose } = this.props;
|
||||
|
||||
if (!account) {
|
||||
return (
|
||||
<nav className='tabs-bar'>
|
||||
<div className='tabs-bar__container'>
|
||||
<div className='tabs-bar__split tabs-bar__split--left'>
|
||||
<a className='tabs-bar-item--logo' href='/#' data-preview-title-id='column.home' style={{ padding: '0' }}>
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</a>
|
||||
<a className='tabs-bar-item home' href='/home' data-preview-title-id='column.home' >
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</a>
|
||||
<NavLink className='tabs-bar-item optional' to='/search' data-preview-title-id='tabs_bar.search' >
|
||||
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className='tabs-bar__split tabs-bar__split--right'>
|
||||
<div className='tabs-bar__search-container'>
|
||||
<SearchContainer openInRoute />
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<a className='tabs-bar__button button' href='/auth/sign_in'>
|
||||
<FormattedMessage id='account.login' defaultMessage='Log In' />
|
||||
</a>
|
||||
<a className='tabs-bar__button button button-alternative-2' href='/auth/sign_up'>
|
||||
<FormattedMessage id='account.register' defaultMessage='Sign up' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className='tabs-bar'>
|
||||
<div className='tabs-bar__container'>
|
||||
<div className='tabs-bar__split tabs-bar__split--left'>
|
||||
<NavLink className='tabs-bar-item--logo' to='/home#' data-preview-title-id='column.home' style={{ padding: '0' }}>
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item home' to='/home' data-preview-title-id='column.home' >
|
||||
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item notifications' to='/notifications' data-preview-title-id='column.notifications' >
|
||||
<NotificationsCounter />
|
||||
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item groups' to='/groups' data-preview-title-id='column.groups' >
|
||||
<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
|
||||
</NavLink>
|
||||
<NavLink className='tabs-bar-item optional' to='/search' data-preview-title-id='tabs_bar.search' >
|
||||
<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className='tabs-bar__split tabs-bar__split--right'>
|
||||
<div className='tabs-bar__search-container'>
|
||||
<SearchContainer openInRoute />
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='tabs-bar__profile'>
|
||||
<Avatar account={account} />
|
||||
<ActionBar account={account} size={34} />
|
||||
</div>
|
||||
<button className='tabs-bar__button-compose button' onClick={onOpenCompose} aria-label='Gab'>Gab</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
249
app/javascript/gabsocial/components/tabs_bar/tabs_bar.scss
Normal file
249
app/javascript/gabsocial/components/tabs_bar/tabs_bar.scss
Normal file
@@ -0,0 +1,249 @@
|
||||
.tabs-bar {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
background: #000;
|
||||
flex: 0 0 auto;
|
||||
overflow-y: auto;
|
||||
height: 50px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 0 15px;
|
||||
|
||||
@include margin-center;
|
||||
|
||||
// NOTE - might need to adjust this based on column sizing
|
||||
@media screen and (max-width: $nav-breakpoint-4) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__split {
|
||||
display: flex;
|
||||
width: auto;
|
||||
|
||||
&--left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&--right {
|
||||
margin-left: auto;
|
||||
padding-top: 8px;
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-3) {
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__search-container {
|
||||
display: block;
|
||||
width: 251px;
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__profile {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 20px;
|
||||
|
||||
@include size(34px);
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-3) {
|
||||
margin: 0;
|
||||
|
||||
@include size(42px);
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
background-size: 34px 34px;
|
||||
|
||||
@include size(34px);
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-3) {
|
||||
background-size: 42px 42px;
|
||||
|
||||
@include size(42px);
|
||||
}
|
||||
}
|
||||
|
||||
.compose__action-bar {
|
||||
display: block;
|
||||
|
||||
@include abs-position(0, 0, 0, -5px);
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button-compose {
|
||||
display: block;
|
||||
margin-left: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: $gab-brand-default !important;
|
||||
|
||||
@include background-image('/assets/images/sprite-main-navigation.png', 161px 152px, 18px 2px);
|
||||
@include size(70px, 34px);
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-3) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($gab-brand-default, 5%) !important;
|
||||
background-position: 18px -98px;
|
||||
box-shadow: inset 0px 0px 6px darken($gab-brand-default, 10%);
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-left: 12px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-bar-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
margin: 0 25px 0 0;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
@include background-image('/assets/images/sprite-main-navigation-links.png', auto 84px);
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
background-size: auto 120px;
|
||||
margin: 4px 0 0 0;
|
||||
padding: 0 !important;
|
||||
|
||||
@include size(46px, 42px);
|
||||
|
||||
&.active {
|
||||
height: 38px;
|
||||
border-bottom: 4px solid $gab-default-text-light;
|
||||
}
|
||||
|
||||
&>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: 11px 11px;
|
||||
|
||||
&.active {
|
||||
background-position: 11px -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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: -186px 11px;
|
||||
|
||||
&.active {
|
||||
background-position: -186px -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: -391px 11px;
|
||||
|
||||
&.active {
|
||||
background-position: -391px -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.optional {
|
||||
display: none;
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-2) {
|
||||
display: flex;
|
||||
background-position: -987px 11px;
|
||||
|
||||
&.active {
|
||||
background-position: -987px -89px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $gab-text-highlight;
|
||||
}
|
||||
|
||||
&--logo {
|
||||
display: block;
|
||||
margin-right: 35px;
|
||||
border: none;
|
||||
|
||||
@include background-image('/assets/images/gab_logo.svg', 50px 30px, 0 10px);
|
||||
@include size(50px);
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
& span {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #000 !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user