MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix navigation panel

Browse Source
master
Thibaut Girka 6 years ago committed by ThibG
parent 127ead34c4
commit 9400ec43cc
3 changed files with 32 additions and 41 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      app/javascript/flavours/glitch/features/ui/components/columns_area.js
  2. 57
      app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
  3. 11
      app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js

5
app/javascript/flavours/glitch/features/ui/components/columns_area.js
Unescape View File

@ -52,6 +52,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
singleColumn: PropTypes.bool, singleColumn: PropTypes.bool,
children: PropTypes.node, children: PropTypes.node,
navbarUnder: PropTypes.bool, navbarUnder: PropTypes.bool,
openSettings: PropTypes.func,
}; };
state = { state = {
@ -157,7 +158,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
} }
render () { render () {
const { columns, children, singleColumn, swipeToChangeColumns, intl, navbarUnder } = this.props; const { columns, children, singleColumn, swipeToChangeColumns, intl, navbarUnder, openSettings } = this.props;
const { shouldAnimate } = this.state; const { shouldAnimate } = this.state;
const columnIndex = getIndex(this.context.router.history.location.pathname); const columnIndex = getIndex(this.context.router.history.location.pathname);
@ -190,7 +191,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'> <div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
<div className='columns-area__panels__pane__inner'> <div className='columns-area__panels__pane__inner'>
<NavigationPanel /> <NavigationPanel onOpenSettings={openSettings} />
</div> </div>
</div> </div>

57
app/javascript/flavours/glitch/features/ui/components/navigation_panel.js
Unescape View File

@ -1,50 +1,31 @@
import React from 'react'; import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { NavLink, withRouter } from 'react-router-dom'; import { NavLink, withRouter } from 'react-router-dom';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import NotificationsCounterIcon from './notifications_counter_icon'; import NotificationsCounterIcon from './notifications_counter_icon';
import FollowRequestsNavLink from './follow_requests_nav_link'; import FollowRequestsNavLink from './follow_requests_nav_link';
import ListPanel from './list_panel'; import ListPanel from './list_panel';
import { openModal } from 'flavours/glitch/actions/modal';
import { connect } from 'react-redux';
const mapStateToProps = () => {}; const NavigationPanel = ({ onOpenSettings }) => (
<div className='navigation-panel'>
<NavLink className='column-link column-link--transparent' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><Icon className='column-link__icon' icon='home' fixedWidth /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon className='column-link__icon' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>
<FollowRequestsNavLink />
<NavLink className='column-link column-link--transparent' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' icon='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
<NavLink className='column-link column-link--transparent' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' icon='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/timelines/direct'><Icon className='column-link__icon' icon='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/favourites'><Icon className='column-link__icon' icon='star' fixedWidth /><FormattedMessage id='navigation_bar.favourites' defaultMessage='Favourites' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/lists'><Icon className='column-link__icon' icon='list-ul' fixedWidth /><FormattedMessage id='navigation_bar.lists' defaultMessage='Lists' /></NavLink>
const mapDispatchToProps = dispatch => ({ <ListPanel />
openSettings (e) {
e.preventDefault();
e.stopPropagation();
dispatch(openModal('SETTINGS', {}));
},
});
export default @connect(mapStateToProps, mapDispatchToProps) <hr />
@withRouter
class NavigationPanel extends ImmutablePureComponent {
render() {
const { openSettings } = this.props;
return ( <a className='column-link column-link--transparent' href='/settings/preferences' target='_blank'><Icon className='column-link__icon' icon='cog' fixedWidth /><FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /></a>
<div className='navigation-panel'> <a className='column-link column-link--transparent' href='#' onClick={onOpenSettings}><Icon className='column-link__icon' icon='cogs' fixedWidth /><FormattedMessage id='navigation_bar.app_settings' defaultMessage='App settings' /></a>
<NavLink className='column-link column-link--transparent' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><Icon className='column-link__icon' icon='home' fixedWidth /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink> <a className='column-link column-link--transparent' href='/relationships' target='_blank'><Icon className='column-link__icon' icon='users' fixedWidth /><FormattedMessage id='navigation_bar.follows_and_followers' defaultMessage='Follows and followers' /></a>
<NavLink className='column-link column-link--transparent' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><NotificationsCounterIcon className='column-link__icon' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink> <a className='column-link column-link--transparent' href='/explore'><Icon className='column-link__icon' icon='address-book-o' fixedWidth /><FormattedMessage id='navigation_bar.profile_directory' defaultMessage='Profile directory' /></a>
<FollowRequestsNavLink /> </div>
<NavLink className='column-link column-link--transparent' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' icon='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink> );
<NavLink className='column-link column-link--transparent' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' icon='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/timelines/direct'><Icon className='column-link__icon' icon='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/favourites'><Icon className='column-link__icon' icon='star' fixedWidth /><FormattedMessage id='navigation_bar.favourites' defaultMessage='Favourites' /></NavLink>
<NavLink className='column-link column-link--transparent' to='/lists'><Icon className='column-link__icon' icon='list-ul' fixedWidth /><FormattedMessage id='navigation_bar.lists' defaultMessage='Lists' /></NavLink>
<ListPanel /> export default withRouter(NavigationPanel);
<hr />
<a className='column-link column-link--transparent' href='/settings/preferences' target='_blank'><Icon className='column-link__icon' icon='cog' fixedWidth /><FormattedMessage id='navigation_bar.preferences' defaultMessage='Preferences' /></a>
<a className='column-link column-link--transparent' href='#' onClick={openSettings}><Icon className='column-link__icon' icon='cogs' fixedWidth /><FormattedMessage id='navigation_bar.app_settings' defaultMessage='App settings' /></a>
<a className='column-link column-link--transparent' href='/relationships' target='_blank'><Icon className='column-link__icon' icon='users' fixedWidth /><FormattedMessage id='navigation_bar.follows_and_followers' defaultMessage='Follows and followers' /></a>
<a className='column-link column-link--transparent' href='/explore'><Icon className='column-link__icon' icon='address-book-o' fixedWidth /><FormattedMessage id='navigation_bar.profile_directory' defaultMessage='Profile directory' /></a>
</div>
);
};
};

11
app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js
Unescape View File

@ -1,9 +1,18 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ColumnsArea from '../components/columns_area'; import ColumnsArea from '../components/columns_area';
import { openModal } from 'flavours/glitch/actions/modal';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
columns: state.getIn(['settings', 'columns']), columns: state.getIn(['settings', 'columns']),
swipeToChangeColumns: state.getIn(['local_settings', 'swipe_to_change_columns']), swipeToChangeColumns: state.getIn(['local_settings', 'swipe_to_change_columns']),
}); });
export default connect(mapStateToProps, null, null, { forwardRef: true })(ColumnsArea); const mapDispatchToProps = dispatch => ({
openSettings (e) {
e.preventDefault();
e.stopPropagation();
dispatch(openModal('SETTINGS', {}));
},
});
export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(ColumnsArea);

Write Preview
Loading…
Cancel
Save