tykayn
/
mastodon
mirror of https://framagit.org/tykayn/mastodon.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

todo on messaging

This commit is contained in:
Baptiste Lemoine 2019-12-18 16:16:08 +01:00
parent 4e336c8e6b
commit efe3acd0c5
5 changed files with 284 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/javascript/mastodon/features/compose/components/navigation_bar.js
View File

@ -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 >
);
}

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

@ -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
View 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 >
// );
}
};

73
app/javascript/mastodon/features/ui/components/navigation_panel.js
View File

@ -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 >
);

4
app/javascript/styles/bliss/accessibility.scss
View File

@ -12,3 +12,7 @@ $black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_sq
}
}
}
.fa {
margin-right: 1ch;
}