mirror of https://framagit.org/tykayn/mastodon.git
todo on messaging
This commit is contained in:
parent
4e336c8e6b
commit
efe3acd0c5
|
@ -19,22 +19,47 @@ export default class NavigationBar extends ImmutablePureComponent {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className='navigation-bar'>
|
<div className='navigation-bar'>
|
||||||
<Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}>
|
<Permalink
|
||||||
|
href={this.props.account.get('url')}
|
||||||
|
to={`/accounts/${this.props.account.get('id')}`}
|
||||||
|
>
|
||||||
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span >
|
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span >
|
||||||
<Avatar account={this.props.account} size={48} />
|
<Avatar
|
||||||
|
account={this.props.account}
|
||||||
|
size={48}
|
||||||
|
/>
|
||||||
</Permalink >
|
</Permalink >
|
||||||
|
|
||||||
<div className='navigation-bar__profile'>
|
<div className='navigation-bar__profile'>
|
||||||
<Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}>
|
<Permalink
|
||||||
|
href={this.props.account.get('url')}
|
||||||
|
to={`/accounts/${this.props.account.get('id')}`}
|
||||||
|
>
|
||||||
<strong className='navigation-bar__profile-account'>@{this.props.account.get('acct')}</strong >
|
<strong className='navigation-bar__profile-account'>@{this.props.account.get('acct')}</strong >
|
||||||
</Permalink >
|
</Permalink >
|
||||||
|
|
||||||
<a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
|
<a
|
||||||
|
href='/settings/profile'
|
||||||
|
className='navigation-bar__profile-edit'
|
||||||
|
>
|
||||||
|
<i className='fa fa-pencil'></i >
|
||||||
|
<FormattedMessage
|
||||||
|
id='navigation_bar.edit_profile'
|
||||||
|
defaultMessage='Edit profile'
|
||||||
|
/></a >
|
||||||
</div >
|
</div >
|
||||||
|
|
||||||
<div className='navigation-bar__actions'>
|
<div className='navigation-bar__actions'>
|
||||||
<IconButton className='close' title='' icon='close' onClick={this.props.onClose} />
|
<IconButton
|
||||||
<ActionBar account={this.props.account} onLogout={this.props.onLogout} />
|
className='close'
|
||||||
|
title=''
|
||||||
|
icon='close'
|
||||||
|
onClick={this.props.onClose}
|
||||||
|
/>
|
||||||
|
<ActionBar
|
||||||
|
account={this.props.account}
|
||||||
|
onLogout={this.props.onLogout}
|
||||||
|
/>
|
||||||
</div >
|
</div >
|
||||||
</div >
|
</div >
|
||||||
);
|
);
|
||||||
|
|
|
@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
|
||||||
import ReactSwipeableViews from 'react-swipeable-views';
|
import ReactSwipeableViews from 'react-swipeable-views';
|
||||||
import TabsBar, { links, getIndex, getLink } from './tabs_bar';
|
import TabsBar, { getIndex, getLink, links } from './tabs_bar';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
import BundleContainer from '../containers/bundle_container';
|
import BundleContainer from '../containers/bundle_container';
|
||||||
|
@ -13,17 +13,17 @@ import ColumnLoading from './column_loading';
|
||||||
import DrawerLoading from './drawer_loading';
|
import DrawerLoading from './drawer_loading';
|
||||||
import BundleColumnError from './bundle_column_error';
|
import BundleColumnError from './bundle_column_error';
|
||||||
import {
|
import {
|
||||||
Compose,
|
BookmarkedStatuses,
|
||||||
Notifications,
|
|
||||||
HomeTimeline,
|
|
||||||
CommunityTimeline,
|
CommunityTimeline,
|
||||||
PublicTimeline,
|
Compose,
|
||||||
HashtagTimeline,
|
Directory,
|
||||||
DirectTimeline,
|
DirectTimeline,
|
||||||
FavouritedStatuses,
|
FavouritedStatuses,
|
||||||
BookmarkedStatuses,
|
HashtagTimeline,
|
||||||
|
HomeTimeline,
|
||||||
ListTimeline,
|
ListTimeline,
|
||||||
Directory,
|
Notifications,
|
||||||
|
PublicTimeline,
|
||||||
} from '../../ui/util/async-components';
|
} from '../../ui/util/async-components';
|
||||||
import Icon from 'mastodon/components/icon';
|
import Icon from 'mastodon/components/icon';
|
||||||
import ComposePanel from './compose_panel';
|
import ComposePanel from './compose_panel';
|
||||||
|
@ -69,7 +69,7 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
shouldAnimate: false,
|
shouldAnimate: false,
|
||||||
}
|
};
|
||||||
|
|
||||||
componentWillReceiveProps() {
|
componentWillReceiveProps() {
|
||||||
this.setState({ shouldAnimate: false });
|
this.setState({ shouldAnimate: false });
|
||||||
|
@ -129,14 +129,14 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||||
this.context.router.history.push(getLink(this.pendingIndex));
|
this.context.router.history.push(getLink(this.pendingIndex));
|
||||||
this.pendingIndex = null;
|
this.pendingIndex = null;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleAnimationEnd = () => {
|
handleAnimationEnd = () => {
|
||||||
if (typeof this.pendingIndex === 'number') {
|
if (typeof this.pendingIndex === 'number') {
|
||||||
this.context.router.history.push(getLink(this.pendingIndex));
|
this.context.router.history.push(getLink(this.pendingIndex));
|
||||||
this.pendingIndex = null;
|
this.pendingIndex = null;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleWheel = () => {
|
handleWheel = () => {
|
||||||
if (typeof this._interruptScrollAnimation !== 'function') {
|
if (typeof this._interruptScrollAnimation !== 'function') {
|
||||||
|
@ -144,11 +144,11 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
this._interruptScrollAnimation();
|
this._interruptScrollAnimation();
|
||||||
}
|
};
|
||||||
|
|
||||||
setRef = (node) => {
|
setRef = (node) => {
|
||||||
this.node = node;
|
this.node = node;
|
||||||
}
|
};
|
||||||
|
|
||||||
renderView = (link, index) => {
|
renderView = (link, index) => {
|
||||||
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
||||||
|
@ -157,22 +157,28 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||||
|
|
||||||
const view = (index === columnIndex) ?
|
const view = (index === columnIndex) ?
|
||||||
React.cloneElement(this.props.children) :
|
React.cloneElement(this.props.children) :
|
||||||
<ColumnLoading title={title} icon={icon} />;
|
<ColumnLoading
|
||||||
|
title={title}
|
||||||
|
icon={icon}
|
||||||
|
/>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='columns-area columns-area--mobile' key={index}>
|
<div
|
||||||
|
className='columns-area columns-area--mobile'
|
||||||
|
key={index}
|
||||||
|
>
|
||||||
{view}
|
{view}
|
||||||
</div >
|
</div >
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
renderLoading = columnId => () => {
|
renderLoading = columnId => () => {
|
||||||
return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading />;
|
return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading />;
|
||||||
}
|
};
|
||||||
|
|
||||||
renderError = (props) => {
|
renderError = (props) => {
|
||||||
return <BundleColumnError {...props} />;
|
return <BundleColumnError {...props} />;
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { columns, children, singleColumn, isModalOpen, intl } = this.props;
|
const { columns, children, singleColumn, isModalOpen, intl } = this.props;
|
||||||
|
@ -181,14 +187,32 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||||
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
||||||
|
|
||||||
if (singleColumn) {
|
if (singleColumn) {
|
||||||
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' /></Link>;
|
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link
|
||||||
|
key='floating-action-button'
|
||||||
|
to='/statuses/new'
|
||||||
|
className='floating-action-button'
|
||||||
|
aria-label={intl.formatMessage(messages.publish)}
|
||||||
|
><Icon id='pencil' /></Link >;
|
||||||
|
|
||||||
const content = columnIndex !== -1 ? (
|
const content = columnIndex !== -1 ? (
|
||||||
<ReactSwipeableViews key='content' hysteresis={0.2} threshold={15} index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}>
|
<ReactSwipeableViews
|
||||||
|
key='content'
|
||||||
|
hysteresis={0.2}
|
||||||
|
threshold={15}
|
||||||
|
index={columnIndex}
|
||||||
|
onChangeIndex={this.handleSwipe}
|
||||||
|
onTransitionEnd={this.handleAnimationEnd}
|
||||||
|
animateTransitions={shouldAnimate}
|
||||||
|
springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }}
|
||||||
|
style={{ height: '100%' }}
|
||||||
|
>
|
||||||
{links.map(this.renderView)}
|
{links.map(this.renderView)}
|
||||||
</ReactSwipeableViews >
|
</ReactSwipeableViews >
|
||||||
) : (
|
) : (
|
||||||
<div key='content' className='columns-area columns-area--mobile'>{children}</div>
|
<div
|
||||||
|
key='content'
|
||||||
|
className='columns-area columns-area--mobile'
|
||||||
|
>{children}</div >
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -216,14 +240,25 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`columns-area ${ isModalOpen ? 'unscrollable' : '' }`} ref={this.setRef}>
|
<div
|
||||||
|
className={`columns-area ${isModalOpen ? 'unscrollable' : ''}`}
|
||||||
|
ref={this.setRef}
|
||||||
|
>
|
||||||
{columns.map(column => {
|
{columns.map(column => {
|
||||||
const params = column.get('params', null) === null ? null : column.get('params').toJS();
|
const params = column.get('params', null) === null ? null : column.get('params').toJS();
|
||||||
const other = params && params.other ? params.other : {};
|
const other = params && params.other ? params.other : {};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BundleContainer key={column.get('uuid')} fetchComponent={componentMap[column.get('id')]} loading={this.renderLoading(column.get('id'))} error={this.renderError}>
|
<BundleContainer
|
||||||
{SpecificComponent => <SpecificComponent columnId={column.get('uuid')} params={params} multiColumn {...other} />}
|
key={column.get('uuid')}
|
||||||
|
fetchComponent={componentMap[column.get('id')]}
|
||||||
|
loading={this.renderLoading(column.get('id'))}
|
||||||
|
error={this.renderError}
|
||||||
|
>
|
||||||
|
{SpecificComponent => <SpecificComponent
|
||||||
|
columnId={column.get('uuid')}
|
||||||
|
params={params}
|
||||||
|
multiColumn {...other} />}
|
||||||
</BundleContainer >
|
</BundleContainer >
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -0,0 +1,147 @@
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
|
||||||
|
export default class Messaging extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
// following : ImmutablePropTypes.list,
|
||||||
|
// conversations: ImmutablePropTypes.list,
|
||||||
|
// newMessage : ImmutablePropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
// openConversationWith(account) {
|
||||||
|
// let conversationFound = account;
|
||||||
|
// if conversation exist, focus on it
|
||||||
|
// if (conversationFound) {
|
||||||
|
//
|
||||||
|
// } else {
|
||||||
|
//
|
||||||
|
// }
|
||||||
|
// else, create conversation and focus on it
|
||||||
|
// };
|
||||||
|
|
||||||
|
submitCompose() {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
// this.props.newMessage = 'meh';
|
||||||
|
// this.props.conversations = [
|
||||||
|
// {
|
||||||
|
// withAccount: '@machin',
|
||||||
|
// messages : [],
|
||||||
|
// opened : true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// withAccount: '@chuck',
|
||||||
|
// messages : [],
|
||||||
|
// opened : false,
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
|
// this.props.following = [
|
||||||
|
// { username: 'wulfila', handle: '@wulfila' },
|
||||||
|
// { username: 'machin', handle: '@machin' },
|
||||||
|
// { username: 'chuck norris', handle: '@chuck' },
|
||||||
|
// ];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
// const contactlist = null;
|
||||||
|
return (
|
||||||
|
<div >
|
||||||
|
messagerie todo
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
// const contactlist = this.props.following.foreEach(elem => (
|
||||||
|
// <li className='user-item'>
|
||||||
|
// <div
|
||||||
|
// className='username'
|
||||||
|
// onClick={this.openConversationWith(elem.username)}
|
||||||
|
// >
|
||||||
|
// Machin
|
||||||
|
// </div >
|
||||||
|
// <div className='last-active'>3 min</div >
|
||||||
|
// </li >
|
||||||
|
// ));
|
||||||
|
// return (
|
||||||
|
// <div className='messaging-container'>
|
||||||
|
// <div className='messaging-box'>
|
||||||
|
// <div className='title'>
|
||||||
|
// <i
|
||||||
|
// role='img'
|
||||||
|
// className='fa fa-envelope column-header__icon fa-fw'
|
||||||
|
// />
|
||||||
|
// Messaging box
|
||||||
|
// </div >
|
||||||
|
// <div className='user-list column-header'>
|
||||||
|
// <h2 className='title'>User list</h2 >
|
||||||
|
// <ul >
|
||||||
|
// {contactlist}
|
||||||
|
// </ul >
|
||||||
|
// </div >
|
||||||
|
//
|
||||||
|
// </div >
|
||||||
|
// <div className='conversations_list'>
|
||||||
|
// <ul >
|
||||||
|
// <li className='conversations_item has-new-message'>
|
||||||
|
// <div className='title'>
|
||||||
|
// <i
|
||||||
|
// role='img'
|
||||||
|
// className='fa fa-envelope column-header__icon fa-fw'
|
||||||
|
// />
|
||||||
|
// Un Gens
|
||||||
|
// <span className='new-message-counter'>
|
||||||
|
// (3)</span >
|
||||||
|
// <button className='btn-small'>
|
||||||
|
// <i
|
||||||
|
// role='img'
|
||||||
|
// className='fa fa-caret-down column-header__icon fa-fw'
|
||||||
|
// />
|
||||||
|
// </button >
|
||||||
|
// </div >
|
||||||
|
// <div className='conversation_stream'>
|
||||||
|
// <div className='message theirs'>
|
||||||
|
// <p >oh hello there! 😋 </p >
|
||||||
|
// <div className='arrow-down' />
|
||||||
|
// </div >
|
||||||
|
// <div className='message mine'>
|
||||||
|
// <p >General Emoji</p >
|
||||||
|
// <div className='arrow-down' />
|
||||||
|
// </div >
|
||||||
|
// <div className='message theirs'>
|
||||||
|
// <p >we just achieved comedy</p >
|
||||||
|
// <div className='arrow-down' />
|
||||||
|
// </div >
|
||||||
|
// </div >
|
||||||
|
// <div className='conversation_input'>
|
||||||
|
// <form
|
||||||
|
// action='#'
|
||||||
|
// // onSubmit={this.submitCompose()}
|
||||||
|
// >
|
||||||
|
// {/*value={this.newMessage.toString()}*/}
|
||||||
|
// <textarea
|
||||||
|
// name='messager'
|
||||||
|
// id=''
|
||||||
|
// cols='30'
|
||||||
|
// rows='10'
|
||||||
|
// className='messager-textarea'
|
||||||
|
// placeholder='allez dis nous tout'
|
||||||
|
//
|
||||||
|
// />
|
||||||
|
// <input
|
||||||
|
// type='submit'
|
||||||
|
// name='submit'
|
||||||
|
// value='Send'
|
||||||
|
// />
|
||||||
|
// </form >
|
||||||
|
// </div >
|
||||||
|
// </li >
|
||||||
|
// </ul >
|
||||||
|
// </div >
|
||||||
|
// </div >
|
||||||
|
// );
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
|
@ -8,7 +8,7 @@ import FollowRequestsNavLink from './follow_requests_nav_link';
|
||||||
import ListPanel from './list_panel';
|
import ListPanel from './list_panel';
|
||||||
import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container';
|
import TrendsContainer from 'mastodon/features/getting_started/containers/trends_container';
|
||||||
|
|
||||||
import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
|
const showMessaging = true;
|
||||||
|
|
||||||
const NavigationPanel = () => (
|
const NavigationPanel = () => (
|
||||||
<div className='navigation-panel'>
|
<div className='navigation-panel'>
|
||||||
|
@ -151,76 +151,9 @@ const NavigationPanel = () => (
|
||||||
|
|
||||||
{showTrends && <div className='flex-spacer' />}
|
{showTrends && <div className='flex-spacer' />}
|
||||||
{showTrends && <TrendsContainer />}
|
{showTrends && <TrendsContainer />}
|
||||||
|
{/*{showMessaging && <Messaging />}*/}
|
||||||
|
{/*<Messaging />*/}
|
||||||
|
|
||||||
<div className='messaging-box'>
|
|
||||||
<div className='title'>
|
|
||||||
<i
|
|
||||||
role='img'
|
|
||||||
className='fa fa-envelope column-header__icon fa-fw'
|
|
||||||
/>
|
|
||||||
Messaging box
|
|
||||||
</div >
|
|
||||||
<div className='user-list column-header'>
|
|
||||||
<h2 className='title'>User list</h2 >
|
|
||||||
<ul >
|
|
||||||
<li >
|
|
||||||
someone is logged in, click on me
|
|
||||||
</li >
|
|
||||||
<li >
|
|
||||||
wulfila is here, click on me
|
|
||||||
</li >
|
|
||||||
<li >
|
|
||||||
chuck norris is here, click on me
|
|
||||||
</li >
|
|
||||||
</ul >
|
|
||||||
</div >
|
|
||||||
|
|
||||||
</div >
|
|
||||||
<div className='conversations_list'>
|
|
||||||
<ul >
|
|
||||||
<li className='conversations_item has-new-message'>
|
|
||||||
<div className='title'>
|
|
||||||
|
|
||||||
<i
|
|
||||||
role='img'
|
|
||||||
className='fa fa-envelope column-header__icon fa-fw'
|
|
||||||
/>
|
|
||||||
Un Gens
|
|
||||||
<span className='new-message-counter'>
|
|
||||||
(3)</span >
|
|
||||||
<button className='btn-small'>
|
|
||||||
<i
|
|
||||||
role='img'
|
|
||||||
className='fa fa-caret-down column-header__icon fa-fw'
|
|
||||||
/>
|
|
||||||
</button >
|
|
||||||
</div >
|
|
||||||
<div className='conversation_stream'>
|
|
||||||
<div className='message theirs'>
|
|
||||||
<p >oh hello there! 😋 </p >
|
|
||||||
<div className='arrow-down' />
|
|
||||||
</div >
|
|
||||||
<div className='message mine'>
|
|
||||||
<p >General Emoji</p >
|
|
||||||
<div className='arrow-down' />
|
|
||||||
</div >
|
|
||||||
<div className='message theirs'>
|
|
||||||
<p >we just achieved comedy</p >
|
|
||||||
<div className='arrow-down' />
|
|
||||||
</div >
|
|
||||||
</div >
|
|
||||||
<div className='conversation_input'>
|
|
||||||
{/*<form action="#" onSubmit={submitCompose()}>*/}
|
|
||||||
|
|
||||||
{/* <input type='text' name='compose'/>*/}
|
|
||||||
{/* <input type='submit' name='submit'/>*/}
|
|
||||||
{/*</form>*/}
|
|
||||||
<ComposeFormContainer singleColumn />
|
|
||||||
</div >
|
|
||||||
{/*<ConversationSmall></ConversationSmall>*/}
|
|
||||||
</li >
|
|
||||||
</ul >
|
|
||||||
</div >
|
|
||||||
</div >
|
</div >
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -12,3 +12,7 @@ $black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_sq
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
margin-right: 1ch;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue