diff options
author | kibigo! <marrus-sh@users.noreply.github.com> | 2017-12-26 16:54:28 -0800 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2018-01-04 18:21:59 -0800 |
commit | 3c29f5740447270a4122b334281a907ecbdd4165 (patch) | |
tree | dd3daba631f2eddf0ede5af76b8e29eda8874854 /app/javascript/flavours/glitch/features/drawer/pager | |
parent | 924ffe81d477a8cf890c8117efb94b908760bccc (diff) |
WIP <Compose> Refactor; <Drawer> ed.
Diffstat (limited to 'app/javascript/flavours/glitch/features/drawer/pager')
-rw-r--r-- | app/javascript/flavours/glitch/features/drawer/pager/account/index.js | 70 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/features/drawer/pager/index.js | 43 |
2 files changed, 113 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/pager/account/index.js b/app/javascript/flavours/glitch/features/drawer/pager/account/index.js new file mode 100644 index 000000000..2ee95d5b9 --- /dev/null +++ b/app/javascript/flavours/glitch/features/drawer/pager/account/index.js @@ -0,0 +1,70 @@ +// Package imports. +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { + FormattedMessage, + defineMessages, +} from 'react-intl'; + +// Components. +import Avatar from 'flavours/glitch/components/avatar'; +import Permalink from 'flavours/glitch/components/permalink'; + +// Utils. +import { hiddenComponent } from 'flavours/glitch/util/react_helpers'; + +// Messages. +const messages = defineMessages({ + edit: { + defaultMessage: 'Edit profile', + id: 'navigation_bar.edit_profile', + }, +}); + +// The component. +export default function DrawerPagerAccount ({ account }) { + + // We need an account to render. + if (!account) { + return ( + <div className='drawer--pager--account'> + <a + className='edit' + href='/settings/profile' + > + <FormattedMessage {...messages.edit} /> + </a> + </div> + ); + } + + // The result. + return ( + <div className='drawer--pager--account'> + <Permalink + className='avatar' + href={account.get('url')} + to={`/accounts/${account.get('id')}`} + > + <span {...hiddenComponent}>{account.get('acct')}</span> + <Avatar + account={account} + size={40} + /> + </Permalink> + <Permalink + className='acct' + href={account.get('url')} + to={`/accounts/${account.get('id')}`} + > + <strong>@{account.get('acct')}</strong> + </Permalink> + <a + className='edit' + href='/settings/profile' + ><FormattedMessage {...messages.edit} /></a> + </div> + ); +} + +DrawerPagerAccount.propTypes = { account: ImmutablePropTypes.map }; diff --git a/app/javascript/flavours/glitch/features/drawer/pager/index.js b/app/javascript/flavours/glitch/features/drawer/pager/index.js new file mode 100644 index 000000000..8dc2d3ee9 --- /dev/null +++ b/app/javascript/flavours/glitch/features/drawer/pager/index.js @@ -0,0 +1,43 @@ +// Package imports. +import classNames from 'classnames'; +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; + +// Components. +import IconButton from 'flavours/glitch/components/icon_button'; +import Composer from 'flavours/glitch/features/composer'; +import DrawerPagerAccount from './account'; + +// The component. +export default function DrawerPager ({ + account, + active, + onClose, + onFocus, +}) { + const computedClass = classNames('drawer--pager', { active }); + + // The result. + return ( + <div + className={computedClass} + onFocus={onFocus} + > + <DrawerPagerAccount account={account} /> + <IconButton + icon='close' + onClick={onClose} + title='' + /> + <Composer /> + </div> + ); +} + +DrawerPager.propTypes = { + account: ImmutablePropTypes.map, + active: PropTypes.bool, + onClose: PropTypes.func, + onFocus: PropTypes.func, +}; |