mirror of
https://framagit.org/tykayn/mastodon.git
synced 2023-08-25 08:33:12 +02:00
todo on messaging
This commit is contained in:
parent
4e336c8e6b
commit
efe3acd0c5
@ -11,32 +11,57 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
export default class NavigationBar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
account : ImmutablePropTypes.map.isRequired,
|
||||
onLogout: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func,
|
||||
onClose : PropTypes.func,
|
||||
};
|
||||
|
||||
render () {
|
||||
render() {
|
||||
return (
|
||||
<div className='navigation-bar'>
|
||||
<Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}>
|
||||
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
|
||||
<Avatar account={this.props.account} size={48} />
|
||||
</Permalink>
|
||||
<Permalink
|
||||
href={this.props.account.get('url')}
|
||||
to={`/accounts/${this.props.account.get('id')}`}
|
||||
>
|
||||
<span style={{ display: 'none' }}>{this.props.account.get('acct')}</span >
|
||||
<Avatar
|
||||
account={this.props.account}
|
||||
size={48}
|
||||
/>
|
||||
</Permalink >
|
||||
|
||||
<div className='navigation-bar__profile'>
|
||||
<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>
|
||||
</Permalink>
|
||||
<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 >
|
||||
</Permalink >
|
||||
|
||||
<a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
|
||||
</div>
|
||||
<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 className='navigation-bar__actions'>
|
||||
<IconButton className='close' title='' icon='close' onClick={this.props.onClose} />
|
||||
<ActionBar account={this.props.account} onLogout={this.props.onLogout} />
|
||||
</div>
|
||||
</div>
|
||||
<IconButton
|
||||
className='close'
|
||||
title=''
|
||||
icon='close'
|
||||
onClick={this.props.onClose}
|
||||
/>
|
||||
<ActionBar
|
||||
account={this.props.account}
|
||||
onLogout={this.props.onLogout}
|
||||
/>
|
||||
</div >
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
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 BundleContainer from '../containers/bundle_container';
|
||||
@ -13,17 +13,17 @@ import ColumnLoading from './column_loading';
|
||||
import DrawerLoading from './drawer_loading';
|
||||
import BundleColumnError from './bundle_column_error';
|
||||
import {
|
||||
Compose,
|
||||
Notifications,
|
||||
HomeTimeline,
|
||||
BookmarkedStatuses,
|
||||
CommunityTimeline,
|
||||
PublicTimeline,
|
||||
HashtagTimeline,
|
||||
Compose,
|
||||
Directory,
|
||||
DirectTimeline,
|
||||
FavouritedStatuses,
|
||||
BookmarkedStatuses,
|
||||
HashtagTimeline,
|
||||
HomeTimeline,
|
||||
ListTimeline,
|
||||
Directory,
|
||||
Notifications,
|
||||
PublicTimeline,
|
||||
} from '../../ui/util/async-components';
|
||||
import Icon from 'mastodon/components/icon';
|
||||
import ComposePanel from './compose_panel';
|
||||
@ -33,17 +33,17 @@ import detectPassiveEvents from 'detect-passive-events';
|
||||
import { scrollRight } from '../../../scroll';
|
||||
|
||||
const componentMap = {
|
||||
'COMPOSE': Compose,
|
||||
'HOME': HomeTimeline,
|
||||
'COMPOSE' : Compose,
|
||||
'HOME' : HomeTimeline,
|
||||
'NOTIFICATIONS': Notifications,
|
||||
'PUBLIC': PublicTimeline,
|
||||
'COMMUNITY': CommunityTimeline,
|
||||
'HASHTAG': HashtagTimeline,
|
||||
'DIRECT': DirectTimeline,
|
||||
'FAVOURITES': FavouritedStatuses,
|
||||
'BOOKMARKS': BookmarkedStatuses,
|
||||
'LIST': ListTimeline,
|
||||
'DIRECTORY': Directory,
|
||||
'PUBLIC' : PublicTimeline,
|
||||
'COMMUNITY' : CommunityTimeline,
|
||||
'HASHTAG' : HashtagTimeline,
|
||||
'DIRECT' : DirectTimeline,
|
||||
'FAVOURITES' : FavouritedStatuses,
|
||||
'BOOKMARKS' : BookmarkedStatuses,
|
||||
'LIST' : ListTimeline,
|
||||
'DIRECTORY' : Directory,
|
||||
};
|
||||
|
||||
const messages = defineMessages({
|
||||
@ -60,16 +60,16 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
columns: ImmutablePropTypes.list.isRequired,
|
||||
isModalOpen: PropTypes.bool.isRequired,
|
||||
intl : PropTypes.object.isRequired,
|
||||
columns : ImmutablePropTypes.list.isRequired,
|
||||
isModalOpen : PropTypes.bool.isRequired,
|
||||
singleColumn: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
children : PropTypes.node,
|
||||
};
|
||||
|
||||
state = {
|
||||
shouldAnimate: false,
|
||||
}
|
||||
};
|
||||
|
||||
componentWillReceiveProps() {
|
||||
this.setState({ shouldAnimate: false });
|
||||
@ -77,10 +77,10 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.props.singleColumn) {
|
||||
this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false);
|
||||
this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false);
|
||||
}
|
||||
|
||||
this.lastIndex = getIndex(this.context.router.history.location.pathname);
|
||||
this.lastIndex = getIndex(this.context.router.history.location.pathname);
|
||||
this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
|
||||
|
||||
this.setState({ shouldAnimate: true });
|
||||
@ -94,13 +94,13 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.singleColumn !== prevProps.singleColumn && !this.props.singleColumn) {
|
||||
this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false);
|
||||
this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false);
|
||||
}
|
||||
this.lastIndex = getIndex(this.context.router.history.location.pathname);
|
||||
this.setState({ shouldAnimate: true });
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
componentWillUnmount() {
|
||||
if (!this.props.singleColumn) {
|
||||
this.node.removeEventListener('wheel', this.handleWheel);
|
||||
}
|
||||
@ -129,14 +129,14 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||
this.context.router.history.push(getLink(this.pendingIndex));
|
||||
this.pendingIndex = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleAnimationEnd = () => {
|
||||
if (typeof this.pendingIndex === 'number') {
|
||||
this.context.router.history.push(getLink(this.pendingIndex));
|
||||
this.pendingIndex = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleWheel = () => {
|
||||
if (typeof this._interruptScrollAnimation !== 'function') {
|
||||
@ -144,11 +144,11 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||
}
|
||||
|
||||
this._interruptScrollAnimation();
|
||||
}
|
||||
};
|
||||
|
||||
setRef = (node) => {
|
||||
this.node = node;
|
||||
}
|
||||
};
|
||||
|
||||
renderView = (link, index) => {
|
||||
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
||||
@ -157,38 +157,62 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||
|
||||
const view = (index === columnIndex) ?
|
||||
React.cloneElement(this.props.children) :
|
||||
<ColumnLoading title={title} icon={icon} />;
|
||||
<ColumnLoading
|
||||
title={title}
|
||||
icon={icon}
|
||||
/>;
|
||||
|
||||
return (
|
||||
<div className='columns-area columns-area--mobile' key={index}>
|
||||
<div
|
||||
className='columns-area columns-area--mobile'
|
||||
key={index}
|
||||
>
|
||||
{view}
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
renderLoading = columnId => () => {
|
||||
return columnId === 'COMPOSE' ? <DrawerLoading /> : <ColumnLoading />;
|
||||
}
|
||||
};
|
||||
|
||||
renderError = (props) => {
|
||||
return <BundleColumnError {...props} />;
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
render() {
|
||||
const { columns, children, singleColumn, isModalOpen, intl } = this.props;
|
||||
const { shouldAnimate } = this.state;
|
||||
|
||||
const columnIndex = getIndex(this.context.router.history.location.pathname);
|
||||
|
||||
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 ? (
|
||||
<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)}
|
||||
</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 (
|
||||
@ -196,40 +220,51 @@ class ColumnsArea extends ImmutablePureComponent {
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<ComposePanel />
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
</div >
|
||||
|
||||
<div className='columns-area__panels__main'>
|
||||
<TabsBar key='tabs' />
|
||||
{content}
|
||||
</div>
|
||||
</div >
|
||||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<NavigationPanel />
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
</div >
|
||||
|
||||
{floatingActionButton}
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`columns-area ${ isModalOpen ? 'unscrollable' : '' }`} ref={this.setRef}>
|
||||
<div
|
||||
className={`columns-area ${isModalOpen ? 'unscrollable' : ''}`}
|
||||
ref={this.setRef}
|
||||
>
|
||||
{columns.map(column => {
|
||||
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 (
|
||||
<BundleContainer 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
|
||||
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 >
|
||||
);
|
||||
})}
|
||||
|
||||
{React.Children.map(children, child => React.cloneElement(child, { multiColumn: true }))}
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
147
app/javascript/mastodon/features/ui/components/messaging.js
Normal file
147
app/javascript/mastodon/features/ui/components/messaging.js
Normal file
@ -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 TrendsContainer from 'mastodon/features/getting_started/containers/trends_container';
|
||||
|
||||
import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
|
||||
const showMessaging = true;
|
||||
|
||||
const NavigationPanel = () => (
|
||||
<div className='navigation-panel'>
|
||||
@ -151,76 +151,9 @@ const NavigationPanel = () => (
|
||||
|
||||
{showTrends && <div className='flex-spacer' />}
|
||||
{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 >
|
||||
);
|
||||
|
||||
|
||||
@ -12,3 +12,7 @@ $black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_sq
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
margin-right: 1ch;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user