tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow mounting arbitrary columns (#3207)

Browse Source 
* Allow mounting arbitrary columns

* Refactor column headers, allow pinning/unpinning and moving columns around

* Collapse animation

* Re-introduce scroll to top

* Save column settings properly, do not display pin options in
single-column view, do not display collapse icon if there is
nothing to collapse

* Fix one instance of public timeline being closed closing the stream
Fix back buttons inconsistently sending you back to / even if history exists

* Getting started displays links to columns that are not mounted
This commit is contained in:
Eugen Rochko
2017-06-04 01:39:38 +02:00
committed by GitHub
parent 20b647020b
commit 8ee2eb5d2e
21 changed files with 763 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/javascript/mastodon/features/ui/components/column.js
View File

@ -2,34 +2,7 @@ import React from 'react';
import ColumnHeader from './column_header';
import PropTypes from 'prop-types';
import { debounce } from 'lodash';
const easingOutQuint = (x, t, b, c, d) => c*((t=t/d-1)*t*t*t*t + 1) + b;
const scrollTop = (node) => {
const startTime = Date.now();
const offset = node.scrollTop;
const targetY = -offset;
const duration = 1000;
let interrupt = false;
const step = () => {
const elapsed = Date.now() - startTime;
const percentage = elapsed / duration;
if (percentage > 1 || interrupt) {
return;
}
node.scrollTop = easingOutQuint(0, elapsed, offset, targetY, duration);
requestAnimationFrame(step);
};
step();
return () => {
interrupt = true;
};
};
import scrollTop from '../../../scroll';
class Column extends React.PureComponent {
@ -43,9 +16,11 @@ class Column extends React.PureComponent {
handleHeaderClick = () => {
const scrollable = this.node.querySelector('.scrollable');
if (!scrollable) {
return;
}
this._interruptScrollAnimation = scrollTop(scrollable);
}

39
app/javascript/mastodon/features/ui/components/columns_area.js
View File

@ -1,16 +1,51 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import HomeTimeline from '../../home_timeline';
import Notifications from '../../notifications';
import PublicTimeline from '../../public_timeline';
import CommunityTimeline from '../../community_timeline';
import HashtagTimeline from '../../hashtag_timeline';
import Compose from '../../compose';
class ColumnsArea extends React.PureComponent {
const componentMap = {
'COMPOSE': Compose,
'HOME': HomeTimeline,
'NOTIFICATIONS': Notifications,
'PUBLIC': PublicTimeline,
'COMMUNITY': CommunityTimeline,
'HASHTAG': HashtagTimeline,
};
class ColumnsArea extends ImmutablePureComponent {
static propTypes = {
columns: ImmutablePropTypes.list.isRequired,
singleColumn: PropTypes.bool,
children: PropTypes.node,
};
render () {
const { columns, children, singleColumn } = this.props;
if (singleColumn) {
return (
<div className='columns-area'>
{children}
</div>
);
}
return (
<div className='columns-area'>
{this.props.children}
{columns.map(column => {
const SpecificComponent = componentMap[column.get('id')];
const params = column.get('params', null) === null ? null : column.get('params').toJS();
return <SpecificComponent key={column.get('uuid')} columnId={column.get('uuid')} params={params} multiColumn />;
})}
{React.Children.map(children, child => React.cloneElement(child, { multiColumn: true }))}
</div>
);
}