random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev 2020-02-24 16:56:07 -05:00
parent d255982ec5
commit 7679012e2f
84 changed files with 1048 additions and 1132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/gabsocial/components/account/account.js
View File

@ -21,7 +21,8 @@ const messages = defineMessages({
unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' }, unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
}) })
export default @injectIntl export default
@injectIntl
class Account extends ImmutablePureComponent { class Account extends ImmutablePureComponent {
static propTypes = { static propTypes = {

3
app/javascript/gabsocial/components/autosuggest_account/autosuggest_account.js
View File

@ -14,7 +14,8 @@ const makeMapStateToProps = () => {
return mapStateToProps; return mapStateToProps;
}; };
export default @connect(makeMapStateToProps) export default
@connect(makeMapStateToProps)
class AutosuggestAccount extends ImmutablePureComponent { class AutosuggestAccount extends ImmutablePureComponent {
static propTypes = { static propTypes = {

3
app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js
View File

@ -8,7 +8,8 @@ const messages = defineMessages({
retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' }, retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' },
}); });
export default @injectIntl export default
@injectIntl
class BundleColumnError extends PureComponent { class BundleColumnError extends PureComponent {
static propTypes = { static propTypes = {

5
app/javascript/gabsocial/components/bundle_modal_error/bundle_modal_error.js → app/javascript/gabsocial/components/bundle_modal_error.js
View File

@ -1,5 +1,5 @@
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../icon_button'; import IconButton from './icon_button';
const messages = defineMessages({ const messages = defineMessages({
error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' }, error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' },
@ -7,7 +7,8 @@ const messages = defineMessages({
close: { id: 'bundle_modal_error.close', defaultMessage: 'Close' }, close: { id: 'bundle_modal_error.close', defaultMessage: 'Close' },
}); });
export default @injectIntl export default
@injectIntl
class BundleModalError extends PureComponent { class BundleModalError extends PureComponent {
static propTypes = { static propTypes = {

0
app/javascript/gabsocial/components/bundle_modal_error/bundle_modal_error.scss
View File

1
app/javascript/gabsocial/components/bundle_modal_error/index.js
View File

@ -1 +0,0 @@
export { default } from './bundle_modal_error';

3
app/javascript/gabsocial/components/column_header.js
View File

@ -9,7 +9,8 @@ const messages = defineMessages({
hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' }, hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
}) })
export default @injectIntl export default
@injectIntl
class ColumnHeader extends PureComponent { class ColumnHeader extends PureComponent {
static contextTypes = { static contextTypes = {

3
app/javascript/gabsocial/components/column_indicator.js
View File

@ -6,7 +6,8 @@ const messages = defineMessages({
missing: { id: 'missing_indicator.sublabel', defaultMessage: 'This resource could not be found.' }, missing: { id: 'missing_indicator.sublabel', defaultMessage: 'This resource could not be found.' },
}) })
export default @injectIntl export default
@injectIntl
class ColumnIndicator extends PureComponent { class ColumnIndicator extends PureComponent {
static propTypes = { static propTypes = {

3
app/javascript/gabsocial/components/domain/domain.js
View File

@ -5,7 +5,8 @@ const messages = defineMessages({
unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' }, unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },
}); });
export default @injectIntl export default
@injectIntl
class Domain extends PureComponent { class Domain extends PureComponent {
static propTypes = { static propTypes = {

30
app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.js
View File

@ -3,12 +3,36 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import detectPassiveEvents from 'detect-passive-events'; import detectPassiveEvents from 'detect-passive-events';
import Overlay from 'react-overlays/lib/Overlay'; import Overlay from 'react-overlays/lib/Overlay';
import spring from 'react-motion/lib/spring'; import spring from 'react-motion/lib/spring';
import Motion from '../../features/ui/util/optional_motion'; import { openDropdownMenu, closeDropdownMenu } from '../../actions/dropdown_menu';
import { openModal, closeModal } from '../../actions/modal';
import { isUserTouching } from '../../utils/is_mobile';
import Motion from '../../features/ui/util/optional_motion'
import IconButton from '../icon_button'; import IconButton from '../icon_button';
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false; const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
let id = 0; let id = 0;
const mapStateToProps = state => ({
isModalOpen: state.get('modal').modalType === 'ACTIONS',
dropdownPlacement: state.getIn(['dropdown_menu', 'placement']),
openDropdownId: state.getIn(['dropdown_menu', 'openId']),
openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']),
});
const mapDispatchToProps = (dispatch, { status, items }) => ({
onOpen(id, onItemClick, dropdownPlacement, keyboard) {
dispatch(isUserTouching() ? openModal('ACTIONS', {
status,
actions: items,
onClick: onItemClick,
}) : openDropdownMenu(id, dropdownPlacement, keyboard));
},
onClose(id) {
dispatch(closeModal());
dispatch(closeDropdownMenu(id));
},
});
class DropdownMenu extends PureComponent { class DropdownMenu extends PureComponent {
static contextTypes = { static contextTypes = {
@ -158,7 +182,9 @@ class DropdownMenu extends PureComponent {
} }
export default class Dropdown extends ImmutablePureComponent { export default
@connect(mapStateToProps, mapDispatchToProps)
class Dropdown extends ImmutablePureComponent {
static contextTypes = { static contextTypes = {
router: PropTypes.object, router: PropTypes.object,

9
app/javascript/gabsocial/components/floating_action_button/floating_action_button.js → app/javascript/gabsocial/components/floating_action_button.js
View File

@ -1,4 +1,5 @@
import ComposeIcon from './assets/compose_icon'; import Icon from './icon'
import Button from './button'
export default class FloatingActionButton extends Component { export default class FloatingActionButton extends Component {
static propTypes = { static propTypes = {
@ -14,9 +15,9 @@ export default class FloatingActionButton extends Component {
const { onClick, message } = this.props; const { onClick, message } = this.props;
return ( return (
<button onClick={onClick} className='floating-action-button' aria-label={message}> <Button onClick={onClick} className='floating-action-button' aria-label={message}>
<ComposeIcon /> <Icon id='compose' />
</button> </Button>
) )
} }
} }

25
app/javascript/gabsocial/components/floating_action_button/assets/compose_icon.js
View File

@ -1,25 +0,0 @@
const ComposeIcon = ({
className = 'compose-icon',
width = '26px',
height = '26px',
viewBox = '0 0 50 50'
}) => (
<svg
className={className}
version='1.1'
xmlns='http://www.w3.org/2000/svg'
width={width}
height={height}
viewBox={viewBox}
>
<g>
<path className='compose-icon__path' d="M 37.007812 16.101562 C 36.582031 15.675781 35.828125 15.675781 35.402344 16.101562 L 13.820312 37.703125 C 13.5625 37.960938 13.445312 38.328125 13.503906 38.6875 C 13.5625 39.050781 13.789062 39.359375 14.113281 39.523438 L 15.886719 40.410156 L 15.886719 43.394531 L 10.457031 44.945312 L 4.976562 39.460938 L 6.53125 34.027344 L 9.511719 34.027344 L 10.398438 35.800781 C 10.5625 36.128906 10.871094 36.355469 11.230469 36.414062 C 11.292969 36.425781 11.351562 36.429688 11.414062 36.429688 C 11.710938 36.429688 12 36.3125 12.214844 36.097656 L 33.800781 14.496094 C 34.011719 14.28125 34.132812 13.996094 34.132812 13.691406 C 34.132812 13.390625 34.011719 13.101562 33.800781 12.890625 L 29.625 8.710938 C 29.414062 8.5 29.125 8.378906 28.824219 8.378906 L 28.820312 8.378906 C 28.519531 8.382812 28.230469 8.503906 28.019531 8.714844 L 4.867188 32.09375 C 4.855469 32.105469 4.859375 32.121094 4.847656 32.132812 C 4.730469 32.261719 4.632812 32.40625 4.582031 32.582031 L 2.613281 39.480469 L 0.0429688 48.480469 C -0.0703125 48.878906 0.0429688 49.304688 0.332031 49.597656 C 0.550781 49.8125 0.839844 49.929688 1.136719 49.929688 C 1.238281 49.929688 1.34375 49.914062 1.445312 49.886719 L 10.4375 47.316406 L 17.332031 45.34375 C 17.355469 45.335938 17.367188 45.320312 17.386719 45.316406 C 17.460938 45.289062 17.523438 45.25 17.589844 45.210938 C 17.652344 45.171875 17.71875 45.136719 17.773438 45.089844 C 17.789062 45.074219 17.804688 45.070312 17.820312 45.058594 L 41.179688 21.886719 C 41.390625 21.675781 41.511719 21.386719 41.515625 21.082031 C 41.515625 20.78125 41.394531 20.492188 41.179688 20.277344 Z M 37.007812 16.101562"/>
<path className='compose-icon__path' d="M 48.597656 8.101562 L 41.792969 1.289062 C 40.074219 -0.429688 37.089844 -0.429688 35.371094 1.292969 L 31.210938 5.488281 C 30.773438 5.933594 30.773438 6.648438 31.214844 7.09375 L 42.800781 18.6875 C 43.023438 18.910156 43.3125 19.019531 43.601562 19.019531 C 43.890625 19.019531 44.179688 18.910156 44.402344 18.691406 L 48.597656 14.527344 C 49.457031 13.667969 49.929688 12.527344 49.929688 11.316406 C 49.929688 10.101562 49.457031 8.960938 48.597656 8.101562 Z M 48.597656 8.101562"/>
</g>
<g>
<path className='compose-icon__path' d="M 17.015625 7.59375 L 10.40625 7.59375 L 10.40625 0.996094 C 10.40625 0.453125 9.964844 0 9.421875 0 L 8.578125 0 C 8.035156 0 7.59375 0.453125 7.59375 0.996094 L 7.59375 7.59375 L 0.984375 7.59375 C 0.441406 7.59375 0 8.03125 0 8.574219 L 0 9.425781 C 0 9.96875 0.441406 10.40625 0.984375 10.40625 L 7.59375 10.40625 L 7.59375 17.027344 C 7.59375 17.570312 8.035156 18 8.578125 18 L 9.421875 18 C 9.964844 18 10.40625 17.570312 10.40625 17.027344 L 10.40625 10.40625 L 17.015625 10.40625 C 17.558594 10.40625 18 9.96875 18 9.425781 L 18 8.574219 C 18 8.03125 17.558594 7.59375 17.015625 7.59375 Z M 17.015625 7.59375"/>
</g>
</svg>
)
export default ComposeIcon

28
app/javascript/gabsocial/components/floating_action_button/floating_action_button.scss
View File

@ -1,28 +0,0 @@
.floating-action-button {
display: none;
position: fixed;
z-index: 1000;
border: none;
background-color: $gab-brand-default;
padding-top: 6px;
padding-left: 10px;
@include circle(56px);
@include abs-position(auto, 14px, 14px, auto, false);
@media screen and (max-width: $nav-breakpoint-3) {
display: block !important;
}
&:hover,
&:focus,
&:active {
background-color: lighten($gab-brand-default, 5%);
}
.compose-icon {
&__path {
fill: #fff;
}
}
}

1
app/javascript/gabsocial/components/floating_action_button/index.js
View File

@ -1 +0,0 @@
export { default } from './floating_action_button';

39
app/javascript/gabsocial/components/group_list_item/group_list_item.js
View File

@ -1,39 +0,0 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { shortNumberFormat } from '../../utils/numbers';
const messages = defineMessages({
members: { id: 'groups.card.members', defaultMessage: 'Members' },
});
export default
@injectIntl
class GroupListItem extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map.isRequired,
}
render() {
const { intl, group } = this.props;
if (!group) return null;
return (
<div className='trends__item'>
<div className='trends__item__name'>
<Link to={`/groups/${group.get('id')}`}>
<strong>{group.get('title')}</strong>
<br />
<span>
{shortNumberFormat(group.get('member_count'))}
&nbsp;
{intl.formatMessage(messages.members)}
</span>
</Link>
</div>
</div>
);
}
}

0
app/javascript/gabsocial/components/group_list_item/index.js
View File

39
app/javascript/gabsocial/components/layouts/profile_layout.js
View File

@ -1,39 +0,0 @@
import Sidebar from '../sidebar'
export default class ProfileLayout extends PureComponent {
static propTypes = {
layout: PropTypes.object,
title: PropTypes.string,
showBackBtn: PropTypes.bool,
}
render() {
const { children } = this.props
return (
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundcolorSecondary3].join(' ')}>
<Sidebar />
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
<div className={[_s.default, _s.height350PX, _s.width100PC].join(' ')}>
<img
className={[_s.default, _s.height350PX, _s.width100PC, _s.objectFitCover].join(' ')}
src='https://gab.com/media/user/bz-5cf53d08403d4.jpeg'
/>
</div>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
<div className={[_s.default, _s.z1].join(' ')}>
{children}
</div>
</div>
</main>
</div>
)
}
}

3
app/javascript/gabsocial/components/link_footer.js
View File

@ -33,7 +33,8 @@ const mapDispatchToProps = (dispatch) => ({
}, },
}) })
export default @connect(null, mapDispatchToProps) export default
@connect(null, mapDispatchToProps)
@injectIntl @injectIntl
class LinkFooter extends PureComponent { class LinkFooter extends PureComponent {

3
app/javascript/gabsocial/components/load_more.js
View File

@ -5,7 +5,8 @@ const messages = defineMessages({
load_more: { id: 'status.load_more', defaultMessage: 'Load more' }, load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
}) })
export default @injectIntl export default
@injectIntl
class LoadMore extends PureComponent { class LoadMore extends PureComponent {
static propTypes = { static propTypes = {

153
app/javascript/gabsocial/components/modal/hotkeys_modal.js Normal file
View File

@ -0,0 +1,153 @@
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ModalLayout from './modal_layout'
import Text from '../text'
import Heading from '../heading'
const messages = defineMessages({
heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' },
close: { id: 'lightbox.close', defaultMessage: 'Close' },
hotkey: { id: 'keyboard_shortcuts.hotkey', defaultMessage: 'Hotkey' },
reply: { id: 'keyboard_shortcuts.reply', defaultMessage: 'reply' },
mention: { id: 'keyboard_shortcuts.mention', defaultMessage: 'mention author' },
profile: { id: 'keyboard_shortcuts.profile', defaultMessage: 'open author\'s profile' },
favourite: { id: 'keyboard_shortcuts.favourite', defaultMessage: 'favorite' },
boost: { id: 'keyboard_shortcuts.boost', defaultMessage: 'repost' },
enter: { id: 'keyboard_shortcuts.enter', defaultMessage: 'open status' },
toggle_hidden: { id: 'keyboard_shortcuts.toggle_hidden', defaultMessage: 'show/hide text behind CW' },
toggle_sensitivity: { id: 'keyboard_shortcuts.toggle_sensitivity', defaultMessage: 'show/hide media' },
up: { id: 'keyboard_shortcuts.up', defaultMessage: 'move up in the list' },
down: { id: 'keyboard_shortcuts.down', defaultMessage: 'move down in the list' },
column: { id: 'keyboard_shortcuts.column', defaultMessage: 'focus a status in one of the columns' },
compose: { id: 'keyboard_shortcuts.compose', defaultMessage: 'focus the compose textarea' },
gab: { id: 'keyboard_shortcuts.toot', defaultMessage: 'start a brand new gab' },
back: { id: 'keyboard_shortcuts.back', defaultMessage: 'navigate back' },
search: { id: 'keyboard_shortcuts.search', defaultMessage: 'focus search' },
unfocus: { id: 'keyboard_shortcuts.unfocus', defaultMessage: 'un-focus compose textarea/search' },
home: { id: 'keyboard_shortcuts.home', defaultMessage: 'open home timeline' },
notifications: { id: 'keyboard_shortcuts.notifications', defaultMessage: 'open notifications column' },
direct: { id: 'keyboard_shortcuts.direct', defaultMessage: 'open direct messages column' },
start: { id: 'keyboard_shortcuts.start', defaultMessage: 'open "get started" column' },
favourites: { id: 'keyboard_shortcuts.favourites', defaultMessage: 'open favorites list' },
pinned: { id: 'keyboard_shortcuts.pinned', defaultMessage: 'open pinned gabs list' },
my_profile: { id: 'keyboard_shortcuts.my_profile', defaultMessage: 'open your profile' },
blocked: { id: 'keyboard_shortcuts.blocked', defaultMessage: 'open blocked users list' },
muted: { id: 'keyboard_shortcuts.muted', defaultMessage: 'open muted users list' },
requests: { id: 'keyboard_shortcuts.requests', defaultMessage: 'open follow requests list' },
legend: { id: 'keyboard_shortcuts.legend', defaultMessage: 'display this legend' },
})
export default
@injectIntl
class HotkeysModal extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
}
render() {
const { intl } = this.props
return (
<ModalLayout title={intl.formatMessage(messages.heading)}>
<div className={[_s.default, _s.flexRow].join(' ')}>
<table>
<thead>
<tr>
<th>
<Heading size='h4'>
{intl.formatMessage(messages.hotkey)}
</Heading>
</th>
</tr>
</thead>
<tbody>
<HotKeysModalRow hotkey='r' action={intl.formatMessage(messages.reply)} />
<HotKeysModalRow hotkey='m' action={intl.formatMessage(messages.mention)} />
<HotKeysModalRow hotkey='p' action={intl.formatMessage(messages.profile)} />
<HotKeysModalRow hotkey='f' action={intl.formatMessage(messages.favourite)} />
<HotKeysModalRow hotkey='b' action={intl.formatMessage(messages.boost)} />
<HotKeysModalRow hotkey='enter, o' action={intl.formatMessage(messages.enter)} />
<HotKeysModalRow hotkey='x' action={intl.formatMessage(messages.toggle_hidden)} />
<HotKeysModalRow hotkey='h' action={intl.formatMessage(messages.toggle_sensitivity)} />
<HotKeysModalRow hotkey='up, k' action={intl.formatMessage(messages.up)} />
</tbody>
</table>
<table>
<thead>
<tr>
<th>
<Heading size='h4'>
{intl.formatMessage(messages.hotkey)}
</Heading>
</th>
</tr>
</thead>
<tbody>
<HotKeysModalRow hotkey='down, j' action={intl.formatMessage(messages.down)} />
<HotKeysModalRow hotkey='1 - 9' action={intl.formatMessage(messages.column)} />
<HotKeysModalRow hotkey='n' action={intl.formatMessage(messages.compose)} />
<HotKeysModalRow hotkey='alt + n' action={intl.formatMessage(messages.gab)} />
<HotKeysModalRow hotkey='backspace' action={intl.formatMessage(messages.back)} />
<HotKeysModalRow hotkey='s' action={intl.formatMessage(messages.search)} />
<HotKeysModalRow hotkey='esc' action={intl.formatMessage(messages.unfocus)} />
<HotKeysModalRow hotkey='g + h' action={intl.formatMessage(messages.home)} />
<HotKeysModalRow hotkey='g + n' action={intl.formatMessage(messages.notifications)} />
<HotKeysModalRow hotkey='g + d' action={intl.formatMessage(messages.direct)} />
</tbody>
</table>
<table>
<thead>
<tr>
<th>
<Heading size='h4'>
{intl.formatMessage(messages.hotkey)}
</Heading>
</th>
</tr>
</thead>
<tbody>
<HotKeysModalRow hotkey='g + s' action={intl.formatMessage(messages.start)} />
<HotKeysModalRow hotkey='g + f' action={intl.formatMessage(messages.favourites)} />
<HotKeysModalRow hotkey='g + p' action={intl.formatMessage(messages.pinned)} />
<HotKeysModalRow hotkey='g + u' action={intl.formatMessage(messages.my_profile)} />
<HotKeysModalRow hotkey='g + b' action={intl.formatMessage(messages.blocked)} />
<HotKeysModalRow hotkey='g + m' action={intl.formatMessage(messages.muted)} />
<HotKeysModalRow hotkey='g + r' action={intl.formatMessage(messages.requests)} />
<HotKeysModalRow hotkey='?' action={intl.formatMessage(messages.legend)} />
</tbody>
</table>
</div>
</ModalLayout>
)
}
}
class HotKeysModalRow extends PureComponent {
static propTypes = {
hotkey: PropTypes.string.isRequired,
action: PropTypes.string.isRequired,
}
render() {
const { hotkey, action } = this.props
return (
<tr>
<td>
<kbd>
<Text size='small'>
{hotkey}
</Text>
</kbd>
</td>
<td>
<Text size='small'>
{action}
</Text>
</td>
</tr>
)
}
}

206
app/javascript/gabsocial/components/modal/hotkeys_modal/hotkeys_modal.js
View File

@ -1,206 +0,0 @@
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import IconButton from '../../icon_button';
const messages = defineMessages({
heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' },
close: { id: 'lightbox.close', defaultMessage: 'Close' },
hotkey: { id: 'keyboard_shortcuts.hotkey', defaultMessage: 'Hotkey' },
reply: { id: 'keyboard_shortcuts.reply', defaultMessage: 'reply' },
mention: { id: 'keyboard_shortcuts.mention', defaultMessage: 'mention author' },
profile: { id: 'keyboard_shortcuts.profile', defaultMessage: 'open author\'s profile' },
favourite: { id: 'keyboard_shortcuts.favourite', defaultMessage: 'favorite' },
boost: { id: 'keyboard_shortcuts.boost', defaultMessage: 'repost' },
enter: { id: 'keyboard_shortcuts.enter', defaultMessage: 'open status' },
toggle_hidden: { id: 'keyboard_shortcuts.toggle_hidden', defaultMessage: 'show/hide text behind CW' },
toggle_sensitivity: { id: 'keyboard_shortcuts.toggle_sensitivity', defaultMessage: 'show/hide media' },
up: { id: 'keyboard_shortcuts.up', defaultMessage: 'move up in the list' },
down: { id: 'keyboard_shortcuts.down', defaultMessage: 'move down in the list' },
column: { id: 'keyboard_shortcuts.column', defaultMessage: 'focus a status in one of the columns' },
compose: { id: 'keyboard_shortcuts.compose', defaultMessage: 'focus the compose textarea' },
gab: { id: 'keyboard_shortcuts.toot', defaultMessage: 'start a brand new gab' },
back: { id: 'keyboard_shortcuts.back', defaultMessage: 'navigate back' },
search: { id: 'keyboard_shortcuts.search', defaultMessage: 'focus search' },
unfocus: { id: 'keyboard_shortcuts.unfocus', defaultMessage: 'un-focus compose textarea/search' },
home: { id: 'keyboard_shortcuts.home', defaultMessage: 'open home timeline' },
notifications: { id: 'keyboard_shortcuts.notifications', defaultMessage: 'open notifications column' },
direct: { id: 'keyboard_shortcuts.direct', defaultMessage: 'open direct messages column' },
start: { id: 'keyboard_shortcuts.start', defaultMessage: 'open "get started" column' },
favourites: { id: 'keyboard_shortcuts.favourites', defaultMessage: 'open favorites list' },
pinned: { id: 'keyboard_shortcuts.pinned', defaultMessage: 'open pinned gabs list' },
my_profile: { id: 'keyboard_shortcuts.my_profile', defaultMessage: 'open your profile' },
blocked: { id: 'keyboard_shortcuts.blocked', defaultMessage: 'open blocked users list' },
muted: { id: 'keyboard_shortcuts.muted', defaultMessage: 'open muted users list' },
requests: { id: 'keyboard_shortcuts.requests', defaultMessage: 'open follow requests list' },
legend: { id: 'keyboard_shortcuts.legend', defaultMessage: 'display this legend' },
});
export default @injectIntl
class HotkeysModal extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
};
render () {
const { intl, onClose } = this.props;
return (
<div className='modal-root__modal hotkeys-modal'>
<div className='keyboard-shortcuts'>
<div className='keyboard-shortcuts__header'>
<h3 className='keyboard-shortcuts__header__title'>
{intl.formatMessage(messages.heading)}
</h3>
<IconButton
className='keyboard-shortcuts__close'
title={intl.formatMessage(messages.close)}
icon='times'
onClick={onClose}
size={20}
/>
</div>
<div className='keyboard-shortcuts__content'>
<table>
<thead>
<tr>
<th>{intl.formatMessage(messages.hotkey)}</th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>r</kbd></td>
<td>{intl.formatMessage(messages.reply)}</td>
</tr>
<tr>
<td><kbd>m</kbd></td>
<td>{intl.formatMessage(messages.mention)}</td>
</tr>
<tr>
<td><kbd>p</kbd></td>
<td>{intl.formatMessage(messages.profile)}</td>
</tr>
<tr>
<td><kbd>f</kbd></td>
<td>{intl.formatMessage(messages.favourite)}</td>
</tr>
<tr>
<td><kbd>b</kbd></td>
<td>{intl.formatMessage(messages.boost)}</td>
</tr>
<tr>
<td><kbd>enter</kbd>, <kbd>o</kbd></td>
<td>{intl.formatMessage(messages.enter)}</td>
</tr>
<tr>
<td><kbd>x</kbd></td>
<td>{intl.formatMessage(messages.toggle_hidden)}</td>
</tr>
<tr>
<td><kbd>h</kbd></td>
<td>{intl.formatMessage(messages.toggle_sensitivity)}</td>
</tr>
<tr>
<td><kbd>up</kbd>, <kbd>k</kbd></td>
<td>{intl.formatMessage(messages.up)}</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>{intl.formatMessage(messages.hotkey)}</th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>down</kbd>, <kbd>j</kbd></td>
<td>{intl.formatMessage(messages.down)}</td>
</tr>
<tr>
<td><kbd>1</kbd> - <kbd>9</kbd></td>
<td>{intl.formatMessage(messages.column)}</td>
</tr>
<tr>
<td><kbd>n</kbd></td>
<td>{intl.formatMessage(messages.compose)}</td>
</tr>
<tr>
<td><kbd>alt</kbd> + <kbd>n</kbd></td>
<td>{intl.formatMessage(messages.gab)}</td>
</tr>
<tr>
<td><kbd>backspace</kbd></td>
<td>{intl.formatMessage(messages.back)}</td>
</tr>
<tr>
<td><kbd>s</kbd></td>
<td>{intl.formatMessage(messages.search)}</td>
</tr>
<tr>
<td><kbd>esc</kbd></td>
<td>{intl.formatMessage(messages.unfocus)}</td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>h</kbd></td>
<td>{intl.formatMessage(messages.home)}</td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>n</kbd></td>
<td>{intl.formatMessage(messages.notifications)}</td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>d</kbd></td>
<td>{intl.formatMessage(messages.direct)}</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>{intl.formatMessage(messages.hotkey)}</th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>g</kbd> + <kbd>s</kbd></td>
<td>{intl.formatMessage(messages.start)}</td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>f</kbd></td>
<td>{intl.formatMessage(messages.favourites)}</td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>p</kbd></td>
<td>{intl.formatMessage(messages.pinned)}</td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>u</kbd></td>
<td>{intl.formatMessage(messages.my_profile)}</td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>b</kbd></td>
<td>{intl.formatMessage(messages.blocked)}</td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>m</kbd></td>
<td>{intl.formatMessage(messages.muted)}</td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>r</kbd></td>
<td>{intl.formatMessage(messages.requests)}</td>
</tr>
<tr>
<td><kbd>?</kbd></td>
<td>{intl.formatMessage(messages.legend)}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
);
}
}

72
app/javascript/gabsocial/components/modal/hotkeys_modal/hotkeys_modal.scss
View File

@ -1,72 +0,0 @@
.keyboard-shortcuts {
padding: 8px 0 0;
overflow: hidden;
background-color: $classic-base-color;
border-radius: 6px;
@media screen and (max-width: 960px) {
height: 90vh;
}
&__header {
display: block;
position: relative;
border-bottom: 1px solid lighten($classic-base-color, 8%);
border-radius: 6px 6px 0 0;
padding: 12px 0;
&__title {
display: block;
width: 80%;
color: $primary-text-color;
@include text-sizing(18px, 700, 24px, center);
@include margin-center;
}
}
&__close {
@include abs-position(10px, 10px);
}
&__content {
display: flex;
flex-direction: row;
padding: 15px;
@media screen and (max-width: 960px) {
flex-direction: column;
overflow: hidden;
overflow-y: scroll;
height: calc(100% - 80px);
-webkit-overflow-scrolling: touch;
}
}
table {
thead {
display: block;
padding-left: 10px;
margin-bottom: 10px;
color: $primary-text-color;
@include text-sizing(16px, 600);
}
tr {
font-size: 12px;
}
td {
padding: 0 10px 8px;
}
kbd {
display: inline-block;
padding: 2px 8px;
background-color: lighten($ui-base-color, 8%);
@include border-design(darken($ui-base-color, 4%), 1px, 4px);
}
}
}

4
app/javascript/gabsocial/components/modal/index.js
View File

@ -4,11 +4,11 @@ import ComposeModal from './compose_modal/compose_modal';
import ConfirmationModal from './confirmation_modal/confirmation_modal'; import ConfirmationModal from './confirmation_modal/confirmation_modal';
import EmbedModal from './embed_modal/embed_modal'; import EmbedModal from './embed_modal/embed_modal';
import FocalPointModal from './focal_point_modal/focal_point_modal'; import FocalPointModal from './focal_point_modal/focal_point_modal';
import HotkeysModal from './hotkeys_modal/hotkeys_modal'; import HotkeysModal from './hotkeys_modal';
import MediaModal from './media_modal/media_modal'; import MediaModal from './media_modal/media_modal';
import MuteModal from './mute_modal/mute_modal'; import MuteModal from './mute_modal/mute_modal';
import ReportModal from './report_modal/report_modal'; import ReportModal from './report_modal/report_modal';
import UnauthorizedModal from './unauthorized_modal/unauthorized_modal'; import UnauthorizedModal from './unauthorized_modal';
import VideoModal from './video_modal/video_modal'; import VideoModal from './video_modal/video_modal';
export { export {

44
app/javascript/gabsocial/components/modal/modal.scss
View File

@ -1,44 +0,0 @@
.modal {
padding: 8px 0 0;
overflow: hidden;
background-color: $classic-base-color;
border-radius: 6px;
flex-direction: column;
margin: 10px 0;
&__content {
display: flex;
flex-direction: row;
flex: 1;
padding: 10px;
overflow-y: hidden;
}
@media screen and (max-width:895px) {
margin: 0;
@include size(98vw, 98vh);
}
}
.modal-header {
display: block;
position: relative;
border-bottom: 1px solid lighten($classic-base-color, 8%);
border-radius: 6px 6px 0 0;
@include vertical-padding(12px);
&__title {
display: block;
width: 80%;
color: $gab-background-base-light;
@include text-sizing(18px, 700, 24px, center);
@include margin-center;
}
&__close {
@include abs-position(10px, 10px);
}
}

101
app/javascript/gabsocial/components/modal_base/modal_base.js → app/javascript/gabsocial/components/modal/modal_base.js
View File

@ -1,25 +1,28 @@
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'; import { Fragment } from 'react'
import classNames from 'classnames'; import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'
import { openModal } from '../../actions/modal'; import classNames from 'classnames/bind'
import { cancelReplyCompose } from '../../actions/compose'; import { openModal } from '../../actions/modal'
import { cancelReplyCompose } from '../../actions/compose'
const messages = defineMessages({ const messages = defineMessages({
confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
}); })
const mapStateToProps = state => ({ const mapStateToProps = state => ({
composeId: state.getIn(['compose', 'id']), composeId: state.getIn(['compose', 'id']),
composeText: state.getIn(['compose', 'text']), composeText: state.getIn(['compose', 'text']),
}); })
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
onOpenModal(type, opts) { onOpenModal(type, opts) {
dispatch(openModal(type, opts)); dispatch(openModal(type, opts))
}, },
onCancelReplyCompose() { onCancelReplyCompose() {
dispatch(cancelReplyCompose()); dispatch(cancelReplyCompose())
}, },
}); })
const cx = classNames.bind(_s)
export default @connect(mapStateToProps, mapDispatchToProps) export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl @injectIntl
@ -34,23 +37,23 @@ class ModalBase extends PureComponent {
composeId: PropTypes.string, composeId: PropTypes.string,
composeText: PropTypes.string, composeText: PropTypes.string,
type: PropTypes.string, type: PropTypes.string,
}; }
state = { state = {
revealed: !!this.props.children, revealed: !!this.props.children,
}; }
activeElement = this.state.revealed ? document.activeElement : null; activeElement = this.state.revealed ? document.activeElement : null
handleKeyUp = (e) => { handleKeyUp = (e) => {
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
&& !!this.props.children) { && !!this.props.children) {
this.handleOnClose(); this.handleOnClose()
} }
} }
handleOnClose = () => { handleOnClose = () => {
const { onOpenModal, composeText, composeId, onClose, intl, type, onCancelReplyCompose } = this.props; const { onOpenModal, composeText, composeId, onClose, intl, type, onCancelReplyCompose } = this.props
if (!composeId && composeText && type == 'COMPOSE') { if (!composeId && composeText && type == 'COMPOSE') {
onOpenModal('CONFIRM', { onOpenModal('CONFIRM', {
@ -58,80 +61,86 @@ class ModalBase extends PureComponent {
confirm: intl.formatMessage(messages.confirm), confirm: intl.formatMessage(messages.confirm),
onConfirm: () => onCancelReplyCompose(), onConfirm: () => onCancelReplyCompose(),
onCancel: () => onOpenModal('COMPOSE'), onCancel: () => onOpenModal('COMPOSE'),
}); })
} else { } else {
onClose(); onClose()
}
} }
};
componentDidMount () { componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false); window.addEventListener('keyup', this.handleKeyUp, false)
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
if (!!nextProps.children && !this.props.children) { if (!!nextProps.children && !this.props.children) {
this.activeElement = document.activeElement; this.activeElement = document.activeElement
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true)); this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true))
} else if (!nextProps.children) { } else if (!nextProps.children) {
this.setState({ revealed: false }); this.setState({ revealed: false })
} }
if (!nextProps.children && !!this.props.children) { if (!nextProps.children && !!this.props.children) {
this.activeElement.focus(); this.activeElement.focus()
this.activeElement = null; this.activeElement = null
} }
} }
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
if (!this.props.children && !!prevProps.children) { if (!this.props.children && !!prevProps.children) {
this.getSiblings().forEach(sibling => sibling.removeAttribute('inert')); this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'))
} }
if (this.props.children) { if (this.props.children) {
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.setState({ revealed: true }); this.setState({ revealed: true })
}); })
} }
} }
componentWillUnmount () { componentWillUnmount () {
window.removeEventListener('keyup', this.handleKeyUp); window.removeEventListener('keyup', this.handleKeyUp)
} }
getSiblings = () => { getSiblings = () => {
return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node); return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node)
} }
setRef = ref => { setRef = ref => {
this.node = ref; this.node = ref
} }
render () { render () {
const { children } = this.props; const { children } = this.props
const { revealed } = this.state;
const visible = !!children;
if (!visible) { const visible = !!children
return (
<div className='modal-base modal-base--hidden' ref={this.setRef} />
);
}
const classes = classNames('modal-base', { const containerClasses = cx({
'modal-base--hidden': !revealed, default: 1,
}); z4: 1,
displayNone: !visible,
})
return ( return (
<div className={classes} ref={this.setRef}> <div ref={this.setRef} className={containerClasses}>
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}> {
<div role='presentation' className='modal-base__overlay' onClick={() => this.handleOnClose()} /> !!visible &&
<div role='dialog' className='modal-base__container'> <Fragment>
<div
role='presentation'
className={[_s.default, _s.backgroundColorPrimaryOpaque, _s.positionFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
onClick={this.handleOnClose}
/>
<div
role='dialog'
className={[_s.default, _s.positionFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.pointerEventsNone, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
>
{children} {children}
</div> </div>
</Fragment>
}
</div> </div>
</div> )
);
} }
} }

40
app/javascript/gabsocial/components/modal/modal_layout.js
View File

@ -1,40 +1,46 @@
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl'
import IconButton from '../icon_button'; import Button from '../button'
import Block from '../block'
import './modal_layout'; import Heading from '../heading'
const messages = defineMessages({ const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' }, close: { id: 'lightbox.close', defaultMessage: 'Close' },
}); })
export default @injectIntl export default
@injectIntl
class ModalLayout extends PureComponent { class ModalLayout extends PureComponent {
static propTypes = { static propTypes = {
title: PropTypes.string, title: PropTypes.string,
children: PropTypes.node, children: PropTypes.node,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
}; }
render() { render() {
const { title, children, intl, onClose } = this.props; const { title, children, intl, onClose } = this.props
return ( return (
<div className='modal modal--layout modal--root'> <div className={[_s.width645PX].join(' ')}>
<div className='modal-header'> <Block>
<h3 className='modal-header__title'>{title}</h3> <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.paddingHorizontal15PX].join(' ')}>
<IconButton <Heading size='h3'>
className='modal-header__close-btn' {title}
</Heading>
<Button
className=''
title={intl.formatMessage(messages.close)} title={intl.formatMessage(messages.close)}
icon='times'
onClick={onClose} onClick={onClose}
size={20} icon='times'
iconWidth='20px'
iconWidth='20px'
/> />
</div> </div>
<div className='modal__content'> <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
{children} {children}
</div> </div>
</Block>
</div> </div>
) )
}; }
} }

57
app/javascript/gabsocial/components/modal_root/modal_root.js → app/javascript/gabsocial/components/modal/modal_root.js
View File

@ -1,6 +1,6 @@
import Base from '../modal_base'; import ModalBase from './modal_base'
import Bundle from '../../features/ui/util/bundle'; import Bundle from '../../features/ui/util/bundle'
import BundleModalError from '../bundle_modal_error'; import BundleModalError from '../bundle_modal_error'
import { import {
ActionsModal, ActionsModal,
MediaModal, MediaModal,
@ -11,7 +11,8 @@ import {
HotkeysModal, HotkeysModal,
ComposeModal, ComposeModal,
UnauthorizedModal, UnauthorizedModal,
} from '../modal'; ProUpgradeModal,
} from '.'
import { import {
MuteModal, MuteModal,
ReportModal, ReportModal,
@ -19,8 +20,8 @@ import {
ListEditor, ListEditor,
ListAdder, ListAdder,
StatusRevisionModal, StatusRevisionModal,
} from '../../features/ui/util/async-components'; } from '../../features/ui/util/async-components'
import ModalLoading from '../modal_loading'; import ModalLoading from '../modal_loading'
const MODAL_COMPONENTS = { const MODAL_COMPONENTS = {
'MEDIA': () => Promise.resolve({ default: MediaModal }), 'MEDIA': () => Promise.resolve({ default: MediaModal }),
@ -39,7 +40,7 @@ const MODAL_COMPONENTS = {
'COMPOSE': () => Promise.resolve({ default: ComposeModal }), 'COMPOSE': () => Promise.resolve({ default: ComposeModal }),
'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }), 'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }),
'PRO_UPGRADE': () => Promise.resolve({ default: ProUpgradeModal }), 'PRO_UPGRADE': () => Promise.resolve({ default: ProUpgradeModal }),
}; }
export default class ModalRoot extends PureComponent { export default class ModalRoot extends PureComponent {
@ -47,46 +48,54 @@ export default class ModalRoot extends PureComponent {
type: PropTypes.string, type: PropTypes.string,
props: PropTypes.object, props: PropTypes.object,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
}; }
getSnapshotBeforeUpdate () { getSnapshotBeforeUpdate () {
return { visible: !!this.props.type }; return { visible: !!this.props.type }
} }
componentDidUpdate (prevProps, prevState, { visible }) { componentDidUpdate (prevProps, prevState, { visible }) {
if (visible) { if (visible) {
document.body.classList.add('with-modals--active'); document.body.classList.add('with-modals--active')
} else { } else {
document.body.classList.remove('with-modals--active'); document.body.classList.remove('with-modals--active')
} }
} }
renderLoading = modalId => () => { renderLoading = modalId => () => {
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null; return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null
} }
renderError = (props) => { renderError = (props) => {
return <BundleModalError {...props} onClose={this.onClickClose} />; return <BundleModalError {...props} onClose={this.onClickClose} />
} }
onClickClose = () => { onClickClose = () => {
const { onClose, type } = this.props; const { onClose, type } = this.props
onClose(type); onClose(type)
} }
render () { render () {
const { type, props } = this.props; const { type, props } = this.props
const visible = !!type; const visible = !!type
return ( return (
<Base onClose={this.onClickClose} type={type}> <ModalBase onClose={this.onClickClose} type={type}>
{visible && ( {
<Bundle fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}> visible &&
{(SpecificComponent) => <SpecificComponent {...props} onClose={this.onClickClose} />} <Bundle
fetchComponent={MODAL_COMPONENTS[type]}
loading={this.renderLoading(type)}
error={this.renderError}
renderDelay={200}
>
{
(SpecificComponent) => <SpecificComponent {...props} onClose={this.onClickClose} />
}
</Bundle> </Bundle>
)} }
</Base> </ModalBase>
); )
} }
} }

0
app/javascript/gabsocial/components/modal/pro_upgrade_modal/pro_upgrade_modal.js → app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
View File

0
app/javascript/gabsocial/components/modal/pro_upgrade_modal/index.js
View File

53
app/javascript/gabsocial/components/modal/unauthorized_modal.js Normal file
View File

@ -0,0 +1,53 @@
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ModalLayout from './modal_layout'
import Text from '../text'
import Button from '../button'
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
signup: { id: 'unauthorized_modal.title', defaultMessage: 'Sign up for Gab' },
text: { id: 'unauthorized_modal.text', defaultMessage: 'You need to be logged in to do that.' },
register: { id: 'account.register', defaultMessage: 'Sign up' },
alreadyHaveAccount: { id: 'unauthorized_modal.footer', defaultMessage: 'Already have an account? {login}.' },
login: { id: 'account.login', defaultMessage: 'Log in' },
})
export default
@injectIntl
class UnauthorizedModal extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
}
render() {
const { intl } = this.props
return (
<ModalLayout title={intl.formatMessage(messages.signup)}>
<div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
<Text className={_s.marginBottom15PX}>
{intl.formatMessage(messages.text)}
</Text>
<Button href='/auth/sign_up' className={[_s.width240PX, _s.marginLeftAuto, _s.marginLeftAuto].join(' ')}>
{intl.formatMessage(messages.register)}
</Button>
</div>
<div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
<Text color='secondary'>
{
intl.formatMessage(messages.login, {
login: (
<Button text href='/auth/sign_in'>
{intl.formatMessage(messages.login)}
</Button>
)
})
}
</Text>
</div>
</ModalLayout>
)
}
}

49
app/javascript/gabsocial/components/modal/unauthorized_modal/unauthorized_modal.js
View File

@ -1,49 +0,0 @@
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import IconButton from '../../icon_button';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
signup: {id: 'unauthorized_modal.title', defaultMessage: 'Sign up for Gab' },
text: { id: 'unauthorized_modal.text', defaultMessage: 'You need to be logged in to do that.' },
register: { id: 'account.register', defaultMessage: 'Sign up' },
alreadyHaveAccount: { id: 'unauthorized_modal.footer', defaultMessage: 'Already have an account? {login}.' },
login: { id: 'account.login', defaultMessage: 'Log in' },
});
export default @injectIntl
class UnauthorizedModal extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
};
onClickClose = () => {
this.props.onClose('UNAUTHORIZED');
};
render () {
const { intl } = this.props;
return (
<div className='modal-root__modal compose-modal unauthorized-modal'>
<div className='compose-modal__header'>
<h3 className='compose-modal__header__title'>{intl.formatMessage(messages.signup)}</h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
</div>
<div className='compose-modal__content'>
<div className='unauthorized-modal__content'>
<span className='unauthorized-modal-content__text'>{intl.formatMessage(messages.text)}</span>
<a href='/auth/sign_up' className='unauthorized-modal-content__button button'>{intl.formatMessage(messages.register)}</a>
</div>
</div>
<div className='unauthorized-modal__footer'>
{intl.formatMessage(messages.login, {
login: <a href='/auth/sign_in'>{intl.formatMessage(messages.login)}</a>
})}
</div>
</div>
);
}
}

41
app/javascript/gabsocial/components/modal/unauthorized_modal/unauthorized_modal.scss
View File

@ -1,41 +0,0 @@
.unauthorized-modal {
width: 440px !important;
@media screen and (max-width:895px) {
@include size(330px, 270px);
}
&__content {
@include size(100%, 150px);
@include flex(center, center, column);
}
&__footer {
border-top: 1px solid #666;
padding: 10px;
@include flex(center, center);
>span {
font-size: 14px;
color: $secondary-text-color;
a {
color: $gab-brand-default !important;
}
}
}
}
.unauthorized-modal-content {
&__text {
display: block;
margin-bottom: 18px;
color: #fff;
font-size: 14px;
}
&__button {
width: 200px;
}
}

1
app/javascript/gabsocial/components/modal_base/index.js
View File

@ -1 +0,0 @@
export { default } from './modal_base';

34
app/javascript/gabsocial/components/modal_base/modal_base.scss
View File

@ -1,34 +0,0 @@
.modal-base {
position: relative;
z-index: 9999;
&--hidden {
display: none;
}
&__overlay {
position: fixed;
background: rgba($base-overlay-background, 0.7);
@include abs-position(0, 0, 0, 0, false);
}
&__container {
position: fixed;
align-content: space-around;
z-index: 9999;
@include size(100%);
@include flex(center, center, column);
@include abs-position(0, auto, auto, 0, false);
@include unselectable;
}
}
// .modal-base__modal {
// pointer-events: auto;
// display: flex;
// z-index: 9999;
// max-height: 100%;
// overflow-y: hidden;
// }

1
app/javascript/gabsocial/components/modal_root/index.js
View File

@ -1 +0,0 @@
export { default } from './modal_root';

70
app/javascript/gabsocial/components/panel/media_gallery_panel.js Normal file
View File

@ -0,0 +1,70 @@
import { defineMessages, injectIntl } from 'react-intl';
import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes';
import AccountContainer from '../../containers/account_container';
import PanelLayout from './panel_layout';
const messages = defineMessages({
dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
show_more: { id: 'who_to_follow.more', defaultMessage: 'Show more' },
});
const mapStateToProps = state => ({
suggestions: state.getIn(['suggestions', 'items']),
});
const mapDispatchToProps = dispatch => {
return {
fetchSuggestions: () => dispatch(fetchSuggestions()),
dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
}
};
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class WhoToFollowPanel extends ImmutablePureComponent {
static propTypes = {
suggestions: ImmutablePropTypes.list.isRequired,
fetchSuggestions: PropTypes.func.isRequired,
dismissSuggestion: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
componentDidMount () {
this.props.fetchSuggestions();
}
render() {
const { intl, /* suggestions, */ dismissSuggestion } = this.props;
// : testing!!! :
const suggestions = [
"1",
]
// if (suggestions.isEmpty()) {
// return null;
// }
return (
<PanelLayout
title={intl.formatMessage(messages.title)}
footerButtonTitle={intl.formatMessage(messages.show_more)}
footerButtonTo='/explore'
>
<div className={_s.default}>
{suggestions && suggestions.map(accountId => (
<AccountContainer
key={accountId}
id={accountId}
actionIcon='times'
actionTitle={intl.formatMessage(messages.dismissSuggestion)}
onActionClick={dismissSuggestion}
/>
))}
</div>
</PanelLayout>
);
};
};

70
app/javascript/gabsocial/components/panel/profile_info_panel.js Normal file
View File

@ -0,0 +1,70 @@
import { defineMessages, injectIntl } from 'react-intl';
import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes';
import AccountContainer from '../../containers/account_container';
import PanelLayout from './panel_layout';
const messages = defineMessages({
dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
title: { id: 'who_to_follow.title', defaultMessage: 'Who to Follow' },
show_more: { id: 'who_to_follow.more', defaultMessage: 'Show more' },
});
const mapStateToProps = state => ({
suggestions: state.getIn(['suggestions', 'items']),
});
const mapDispatchToProps = dispatch => {
return {
fetchSuggestions: () => dispatch(fetchSuggestions()),
dismissSuggestion: account => dispatch(dismissSuggestion(account.get('id'))),
}
};
export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class WhoToFollowPanel extends ImmutablePureComponent {
static propTypes = {
suggestions: ImmutablePropTypes.list.isRequired,
fetchSuggestions: PropTypes.func.isRequired,
dismissSuggestion: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
componentDidMount () {
this.props.fetchSuggestions();
}
render() {
const { intl, /* suggestions, */ dismissSuggestion } = this.props;
// : testing!!! :
const suggestions = [
"1",
]
// if (suggestions.isEmpty()) {
// return null;
// }
return (
<PanelLayout
title={intl.formatMessage(messages.title)}
footerButtonTitle={intl.formatMessage(messages.show_more)}
footerButtonTo='/explore'
>
<div className={_s.default}>
{suggestions && suggestions.map(accountId => (
<AccountContainer
key={accountId}
id={accountId}
actionIcon='times'
actionTitle={intl.formatMessage(messages.dismissSuggestion)}
onActionClick={dismissSuggestion}
/>
))}
</div>
</PanelLayout>
);
};
};

1
app/javascript/gabsocial/components/permalink/index.js
View File

@ -1 +0,0 @@
export { default } from './permalink';

37
app/javascript/gabsocial/components/permalink/permalink.js
View File

@ -1,37 +0,0 @@
import classNames from 'classnames';
export default class Permalink extends PureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = {
className: PropTypes.string,
href: PropTypes.string.isRequired,
children: PropTypes.node,
blank: PropTypes.bool,
button: PropTypes.bool,
};
handleClick = e => {
if (this.context.router && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
e.preventDefault();
this.context.router.history.push(this.props.href);
}
}
render () {
const { href, children, className, blank, ...other } = this.props;
const classes = classNames('permalink', className);
const target = blank ? '_blank' : null;
return (
<a target={target} href={href} onClick={this.handleClick} className={classes} {...other}>
{children}
</a>
);
}
}

9
app/javascript/gabsocial/components/popover/content_warning_popover.js Normal file
View File

@ -0,0 +1,9 @@
export default class Popover extends PureComponent {
render() {
return (
<div>
{ /* */ }
</div>
)
}
}

9
app/javascript/gabsocial/components/popover/date_picker_popover.js Normal file
View File

@ -0,0 +1,9 @@
export default class Popover extends PureComponent {
render() {
return (
<div>
{ /* */ }
</div>
)
}
}

9
app/javascript/gabsocial/components/popover/popover.js Normal file
View File

@ -0,0 +1,9 @@
export default class Popover extends PureComponent {
render() {
return (
<div>
{ /* */ }
</div>
)
}
}

9
app/javascript/gabsocial/components/popover/search_popover.js Normal file
View File

@ -0,0 +1,9 @@
export default class Popover extends PureComponent {
render() {
return (
<div>
{ /* */ }
</div>
)
}
}

9
app/javascript/gabsocial/components/popover/sidebar_more_popover.js Normal file
View File

@ -0,0 +1,9 @@
export default class Popover extends PureComponent {
render() {
return (
<div>
{ /* */ }
</div>
)
}
}

9
app/javascript/gabsocial/components/popover/status_options_popover.js Normal file
View File

@ -0,0 +1,9 @@
export default class Popover extends PureComponent {
render() {
return (
<div>
{ /* */ }
</div>
)
}
}

9
app/javascript/gabsocial/components/popover/status_visibility_popover.js Normal file
View File

@ -0,0 +1,9 @@
export default class Popover extends PureComponent {
render() {
return (
<div>
{ /* */ }
</div>
)
}
}

9
app/javascript/gabsocial/components/popover/user_popover.js Normal file
View File

@ -0,0 +1,9 @@
export default class Popover extends PureComponent {
render() {
return (
<div>
{ /* */ }
</div>
)
}
}

139
app/javascript/gabsocial/components/relative_timestamp/relative_timestamp.js → app/javascript/gabsocial/components/relative_timestamp.js
View File

@ -1,5 +1,4 @@
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl'
import moment from 'moment';
const messages = defineMessages({ const messages = defineMessages({
just_now: { id: 'relative_time.just_now', defaultMessage: 'now' }, just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
@ -12,7 +11,7 @@ const messages = defineMessages({
minutes_remaining: { id: 'time_remaining.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}} left' }, minutes_remaining: { id: 'time_remaining.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}} left' },
hours_remaining: { id: 'time_remaining.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}} left' }, hours_remaining: { id: 'time_remaining.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}} left' },
days_remaining: { id: 'time_remaining.days', defaultMessage: '{number, plural, one {# day} other {# days}} left' }, days_remaining: { id: 'time_remaining.days', defaultMessage: '{number, plural, one {# day} other {# days}} left' },
}); })
const dateFormatOptions = { const dateFormatOptions = {
hour12: false, hour12: false,
@ -21,94 +20,94 @@ const dateFormatOptions = {
day: '2-digit', day: '2-digit',
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
}; }
const shortDateFormatOptions = { const shortDateFormatOptions = {
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
}; }
const SECOND = 1000; const SECOND = 1000
const MINUTE = 1000 * 60; const MINUTE = 1000 * 60
const HOUR = 1000 * 60 * 60; const HOUR = 1000 * 60 * 60
const DAY = 1000 * 60 * 60 * 24; const DAY = 1000 * 60 * 60 * 24
const MAX_DELAY = 2147483647; const MAX_DELAY = 2147483647
const selectUnits = delta => { const selectUnits = delta => {
const absDelta = Math.abs(delta); const absDelta = Math.abs(delta)
if (absDelta < MINUTE) { if (absDelta < MINUTE) {
return 'second'; return 'second'
} else if (absDelta < HOUR) { } else if (absDelta < HOUR) {
return 'minute'; return 'minute'
} else if (absDelta < DAY) { } else if (absDelta < DAY) {
return 'hour'; return 'hour'
} }
return 'day'; return 'day'
}; }
const getUnitDelay = units => { const getUnitDelay = units => {
switch (units) { switch (units) {
case 'second': case 'second':
return SECOND; return SECOND
case 'minute': case 'minute':
return MINUTE; return MINUTE
case 'hour': case 'hour':
return HOUR; return HOUR
case 'day': case 'day':
return DAY; return DAY
default: default:
return MAX_DELAY; return MAX_DELAY
} }
}; }
export const timeAgoString = (intl, date, now, year) => { export const timeAgoString = (intl, date, now, year) => {
const delta = now - date.getTime(); const delta = now - date.getTime()
let relativeTime; let relativeTime
if (delta < 10 * SECOND) { if (delta < 10 * SECOND) {
relativeTime = intl.formatMessage(messages.just_now); relativeTime = intl.formatMessage(messages.just_now)
} else if (delta < 7 * DAY) { } else if (delta < 7 * DAY) {
if (delta < MINUTE) { if (delta < MINUTE) {
relativeTime = intl.formatMessage(messages.seconds, { number: Math.floor(delta / SECOND) }); relativeTime = intl.formatMessage(messages.seconds, { number: Math.floor(delta / SECOND) })
} else if (delta < HOUR) { } else if (delta < HOUR) {
relativeTime = intl.formatMessage(messages.minutes, { number: Math.floor(delta / MINUTE) }); relativeTime = intl.formatMessage(messages.minutes, { number: Math.floor(delta / MINUTE) })
} else if (delta < DAY) { } else if (delta < DAY) {
relativeTime = intl.formatMessage(messages.hours, { number: Math.floor(delta / HOUR) }); relativeTime = intl.formatMessage(messages.hours, { number: Math.floor(delta / HOUR) })
} else { } else {
relativeTime = intl.formatMessage(messages.days, { number: Math.floor(delta / DAY) }); relativeTime = intl.formatMessage(messages.days, { number: Math.floor(delta / DAY) })
} }
} else if (date.getFullYear() === year) { } else if (date.getFullYear() === year) {
relativeTime = intl.formatDate(date, shortDateFormatOptions); relativeTime = intl.formatDate(date, shortDateFormatOptions)
} else { } else {
relativeTime = intl.formatDate(date, { ...shortDateFormatOptions, year: 'numeric' }); relativeTime = intl.formatDate(date, { ...shortDateFormatOptions, year: 'numeric' })
} }
return relativeTime; return relativeTime
}; }
const timeRemainingString = (intl, date, now) => { const timeRemainingString = (intl, date, now) => {
const delta = date.getTime() - now; const delta = date.getTime() - now
let relativeTime; let relativeTime
if (delta < 10 * SECOND) { if (delta < 10 * SECOND) {
relativeTime = intl.formatMessage(messages.moments_remaining); relativeTime = intl.formatMessage(messages.moments_remaining)
} else if (delta < MINUTE) { } else if (delta < MINUTE) {
relativeTime = intl.formatMessage(messages.seconds_remaining, { number: Math.floor(delta / SECOND) }); relativeTime = intl.formatMessage(messages.seconds_remaining, { number: Math.floor(delta / SECOND) })
} else if (delta < HOUR) { } else if (delta < HOUR) {
relativeTime = intl.formatMessage(messages.minutes_remaining, { number: Math.floor(delta / MINUTE) }); relativeTime = intl.formatMessage(messages.minutes_remaining, { number: Math.floor(delta / MINUTE) })
} else if (delta < DAY) { } else if (delta < DAY) {
relativeTime = intl.formatMessage(messages.hours_remaining, { number: Math.floor(delta / HOUR) }); relativeTime = intl.formatMessage(messages.hours_remaining, { number: Math.floor(delta / HOUR) })
} else { } else {
relativeTime = intl.formatMessage(messages.days_remaining, { number: Math.floor(delta / DAY) }); relativeTime = intl.formatMessage(messages.days_remaining, { number: Math.floor(delta / DAY) })
} }
return relativeTime; return relativeTime
}; }
export default @injectIntl export default @injectIntl
class RelativeTimestamp extends Component { class RelativeTimestamp extends Component {
@ -118,68 +117,68 @@ class RelativeTimestamp extends Component {
timestamp: PropTypes.string.isRequired, timestamp: PropTypes.string.isRequired,
year: PropTypes.number.isRequired, year: PropTypes.number.isRequired,
futureDate: PropTypes.bool, futureDate: PropTypes.bool,
}; }
state = { state = {
now: this.props.intl.now(), now: this.props.intl.now(),
}; }
static defaultProps = { static defaultProps = {
year: (new Date()).getFullYear(), year: (new Date()).getFullYear(),
}; }
shouldComponentUpdate (nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {
// As of right now the locale doesn't change without a new page load, // As of right now the locale doesn't change without a new page load,
// but we might as well check in case that ever changes. // but we might as well check in case that ever changes.
return this.props.timestamp !== nextProps.timestamp || return this.props.timestamp !== nextProps.timestamp ||
this.props.intl.locale !== nextProps.intl.locale || this.props.intl.locale !== nextProps.intl.locale ||
this.state.now !== nextState.now; this.state.now !== nextState.now
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.timestamp !== nextProps.timestamp) { if (this.props.timestamp !== nextProps.timestamp) {
this.setState({ now: this.props.intl.now() }); this.setState({ now: this.props.intl.now() })
} }
} }
componentDidMount () { componentDidMount() {
this._scheduleNextUpdate(this.props, this.state); this._scheduleNextUpdate(this.props, this.state)
} }
componentWillUpdate (nextProps, nextState) { componentWillUpdate(nextProps, nextState) {
this._scheduleNextUpdate(nextProps, nextState); this._scheduleNextUpdate(nextProps, nextState)
} }
componentWillUnmount () { componentWillUnmount() {
clearTimeout(this._timer); clearTimeout(this._timer)
} }
_scheduleNextUpdate (props, state) { _scheduleNextUpdate(props, state) {
clearTimeout(this._timer); clearTimeout(this._timer)
const { timestamp } = props; const { timestamp } = props
const delta = (new Date(timestamp)).getTime() - state.now; const delta = (new Date(timestamp)).getTime() - state.now
const unitDelay = getUnitDelay(selectUnits(delta)); const unitDelay = getUnitDelay(selectUnits(delta))
const unitRemainder = Math.abs(delta % unitDelay); const unitRemainder = Math.abs(delta % unitDelay)
const updateInterval = 1000 * 10; const updateInterval = 1000 * 10
const delay = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder); const delay = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder)
this._timer = setTimeout(() => { this._timer = setTimeout(() => {
this.setState({ now: this.props.intl.now() }); this.setState({ now: this.props.intl.now() })
}, delay); }, delay)
} }
render () { render() {
const { timestamp, intl, year, futureDate } = this.props; const { timestamp, intl, year, futureDate } = this.props
const date = new Date(timestamp); const date = new Date(timestamp)
const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now) : timeAgoString(intl, date, this.state.now, year); const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now) : timeAgoString(intl, date, this.state.now, year)
return ( return (
<time dateTime={timestamp} title={intl.formatDate(date, dateFormatOptions)}> <time dateTime={timestamp} title={intl.formatDate(date, dateFormatOptions)}>
{relativeTime} {relativeTime}
</time> </time>
); )
} }
} }

1
app/javascript/gabsocial/components/relative_timestamp/index.js
View File

@ -1 +0,0 @@
export { default } from './relative_timestamp';

20
app/javascript/gabsocial/components/sidebar.js
View File

@ -1,9 +1,9 @@
import { NavLink } from 'react-router-dom'
import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component' import ImmutablePureComponent from 'react-immutable-pure-component'
import { injectIntl, defineMessages } from 'react-intl' import { injectIntl, defineMessages } from 'react-intl'
import Button from './button' import Button from './button'
import { closeSidebar } from '../actions/sidebar' import { closeSidebar } from '../actions/sidebar'
import { openModal } from '../actions/modal'
import { me } from '../initial_state' import { me } from '../initial_state'
import { makeGetAccount } from '../selectors' import { makeGetAccount } from '../selectors'
import SidebarSectionTitle from './sidebar_section_title' import SidebarSectionTitle from './sidebar_section_title'
@ -44,9 +44,13 @@ const mapDispatchToProps = (dispatch) => ({
onClose() { onClose() {
dispatch(closeSidebar()) dispatch(closeSidebar())
}, },
onOpenComposeModal() {
dispatch(openModal('PRO_UPGRADE'))
},
}) })
export default @connect(mapStateToProps, mapDispatchToProps) export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl @injectIntl
class Sidebar extends ImmutablePureComponent { class Sidebar extends ImmutablePureComponent {
@ -55,6 +59,7 @@ class Sidebar extends ImmutablePureComponent {
account: ImmutablePropTypes.map, account: ImmutablePropTypes.map,
sidebarOpen: PropTypes.bool, sidebarOpen: PropTypes.bool,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
onOpenComposeModal: PropTypes.func.isRequired,
} }
state = { state = {
@ -84,6 +89,11 @@ class Sidebar extends ImmutablePureComponent {
}) })
} }
handleOpenComposeModal = () => {
console.log("handleOpenComposeModal")
this.props.onOpenComposeModal()
}
render() { render() {
const { sidebarOpen, intl, account } = this.props const { sidebarOpen, intl, account } = this.props
const { moreOpen } = this.state const { moreOpen } = this.state
@ -114,6 +124,11 @@ class Sidebar extends ImmutablePureComponent {
to: '/notifications', to: '/notifications',
count: 40, count: 40,
}, },
{
title: 'Bookmarks',
icon: 'bookmarks',
to: '/bookmarks',
},
{ {
title: 'Groups', title: 'Groups',
icon: 'group', icon: 'group',
@ -210,6 +225,7 @@ class Sidebar extends ImmutablePureComponent {
<Button <Button
block block
onClick={this.handleOpenComposeModal}
className={[_s.paddingVertical15PX, _s.fontSize15PX, _s.fontWeightBold].join(' ')} className={[_s.paddingVertical15PX, _s.fontSize15PX, _s.fontWeightBold].join(' ')}
> >
Gab Gab

2
app/javascript/gabsocial/components/status_action_bar/status_action_bar.js
View File

@ -5,7 +5,7 @@ import classNames from 'classnames/bind'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { openModal } from '../../actions/modal'; import { openModal } from '../../actions/modal';
import { me, isStaff } from '../../initial_state'; import { me, isStaff } from '../../initial_state';
import DropdownMenuContainer from '../../containers/dropdown_menu_container'; import Dropdown from '../dropdown_menu'
import ComposeFormContainer from '../../features/compose/containers/compose_form_container'; import ComposeFormContainer from '../../features/compose/containers/compose_form_container';
import Icon from '../icon'; import Icon from '../icon';

6
app/javascript/gabsocial/components/status_content/status_content.js
View File

@ -4,7 +4,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import classNames from 'classnames/bind' import classNames from 'classnames/bind'
import { isRtl } from '../../utils/rtl'; import { isRtl } from '../../utils/rtl';
import Permalink from '../permalink/permalink'; import Button from '../button'
import Icon from '../icon'; import Icon from '../icon';
const MAX_HEIGHT = 200; const MAX_HEIGHT = 200;
@ -180,9 +180,9 @@ class StatusContent extends ImmutablePureComponent {
let mentionsPlaceholder = ''; let mentionsPlaceholder = '';
const mentionLinks = status.get('mentions').map(item => ( const mentionLinks = status.get('mentions').map(item => (
<Permalink to={`/${item.get('acct')}`} href={`/${item.get('acct')}`} key={item.get('id')} className='mention'> <Button to={`/${item.get('acct')}`} href={`/${item.get('acct')}`} key={item.get('id')} className='mention'>
@<span>{item.get('username')}</span> @<span>{item.get('username')}</span>
</Permalink> </Button>
)).reduce((aggregate, item) => [...aggregate, item, ' '], []); )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
const toggleText = intl.formatMessage(hidden ? messages.showMore : messages.showLess); const toggleText = intl.formatMessage(hidden ? messages.showMore : messages.showLess);

82
app/javascript/gabsocial/components/upload_area.js Normal file
View File

@ -0,0 +1,82 @@
import { defineMessages, injectIntl } from 'react-intl'
import spring from 'react-motion/lib/spring'
import Motion from '../features/ui/util/optional_motion'
import Text from './text'
const messages = defineMessages({
title: { id: 'upload_area.title', defaultMessage: 'Drag & drop to upload' },
})
export default
@injectIntl
class UploadArea extends PureComponent {
static propTypes = {
active: PropTypes.bool,
onClose: PropTypes.func,
intl: PropTypes.object.isRequired,
}
handleKeyUp = (e) => {
if (!this.props.active) return
const keyCode = e.keyCode
switch(keyCode) {
case 27:
e.preventDefault()
e.stopPropagation()
this.props.onClose()
break
}
}
componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false)
}
componentWillUnmount () {
window.removeEventListener('keyup', this.handleKeyUp)
}
render () {
const { active, intl } = this.props
return (
<Motion
defaultStyle={{
backgroundOpacity: 0,
backgroundScale: 0.95
}}
style={{
backgroundOpacity: spring(active ? 1 : 0, { stiffness: 150, damping: 15 }),
backgroundScale: spring(active ? 1 : 0.95, { stiffness: 200, damping: 3 })
}}
>
{({ backgroundOpacity, backgroundScale }) => (
<div
className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.backgroundColorPrimaryOpaque, _s.width100PC, _s.height100PC, _s.positionAbsolute, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
style={{
visibility: active ? 'visible' : 'hidden',
opacity: backgroundOpacity
}}
>
<div className={[_s.default, _s.width340PX, _s.height260PX, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
<div
className={[_s.default, _s.positionAbsolute, _s.backgroundColorPrimary, _s.height100PC, _s.width100PC, _s.radiusSmall].join(' ')}
style={{
transform: `scale(${backgroundScale})`
}}
/>
<div className={[_s.default, _s.height100PC, _s.width100PC, _s.border2PX, _s.borderColorSecondary, _s.borderDashed, _s.radiusSmall, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<Text size='medium' color='secondary'>
{intl.formatMessage(messages.title)}
</Text>
</div>
</div>
</div>
)}
</Motion>
)
}
}

1
app/javascript/gabsocial/components/upload_area/index.js
View File

@ -1 +0,0 @@
export { default } from './upload_area';

50
app/javascript/gabsocial/components/upload_area/upload_area.js
View File

@ -1,50 +0,0 @@
import { FormattedMessage } from 'react-intl';
import spring from 'react-motion/lib/spring';
import Motion from '../../features/ui/util/optional_motion';
export default class UploadArea extends PureComponent {
static propTypes = {
active: PropTypes.bool,
onClose: PropTypes.func,
};
handleKeyUp = (e) => {
if (!this.props.active) return;
const keyCode = e.keyCode;
switch(keyCode) {
case 27:
e.preventDefault();
e.stopPropagation();
this.props.onClose();
break;
}
}
componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false);
}
componentWillUnmount () {
window.removeEventListener('keyup', this.handleKeyUp);
}
render () {
const { active } = this.props;
return (
<Motion defaultStyle={{ backgroundOpacity: 0, backgroundScale: 0.95 }} style={{ backgroundOpacity: spring(active ? 1 : 0, { stiffness: 150, damping: 15 }), backgroundScale: spring(active ? 1 : 0.95, { stiffness: 200, damping: 3 }) }}>
{({ backgroundOpacity, backgroundScale }) => (
<div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}>
<div className='upload-area__drop'>
<div className='upload-area__background' style={{ transform: `scale(${backgroundScale})` }} />
<div className='upload-area__content'><FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' /></div>
</div>
</div>
)}
</Motion>
);
}
}

42
app/javascript/gabsocial/components/upload_area/upload_area.scss
View File

@ -1,42 +0,0 @@
.upload-area {
background: rgba($base-overlay-background, 0.8);
opacity: 0;
visibility: hidden;
z-index: 9999;
@include flex(center, center);
@include size(100%);
@include abs-position(0, auto, auto, 0);
* {
pointer-events: none;
}
&__drop {
display: flex;
box-sizing: border-box;
position: relative;
padding: 8px;
@include size(320px, 160px);
}
&__background {
z-index: -1;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
@include abs-position(0, 0, 0, 0);
}
&__content {
flex: 1;
color: $secondary-text-color;
border: 2px dashed $ui-base-lighter-color;
border-radius: 4px;
@include flex(center, center);
@include text-sizing(18px, 500);
}
}

27
app/javascript/gabsocial/containers/dropdown_menu_container.js
View File

@ -1,27 +0,0 @@
import { openDropdownMenu, closeDropdownMenu } from '../actions/dropdown_menu';
import { openModal, closeModal } from '../actions/modal';
import { isUserTouching } from '../utils/is_mobile';
import DropdownMenu from '../components/dropdown_menu';
const mapStateToProps = state => ({
isModalOpen: state.get('modal').modalType === 'ACTIONS',
dropdownPlacement: state.getIn(['dropdown_menu', 'placement']),
openDropdownId: state.getIn(['dropdown_menu', 'openId']),
openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']),
});
const mapDispatchToProps = (dispatch, { status, items }) => ({
onOpen(id, onItemClick, dropdownPlacement, keyboard) {
dispatch(isUserTouching() ? openModal('ACTIONS', {
status,
actions: items,
onClick: onItemClick,
}) : openDropdownMenu(id, dropdownPlacement, keyboard));
},
onClose(id) {
dispatch(closeModal());
dispatch(closeDropdownMenu(id));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(DropdownMenu);

2
app/javascript/gabsocial/containers/media_container.js
View File

@ -7,7 +7,7 @@ import Video from '../features/video';
import Card from '../features/status/components/card'; import Card from '../features/status/components/card';
import Poll from '../components/poll'; import Poll from '../components/poll';
import MediaGallery from '../components/media_gallery'; import MediaGallery from '../components/media_gallery';
import ModalRoot from '../components/modal_root'; import ModalRoot from '../components/modal/modal_root';
import { MediaModal } from '../components/modal'; import { MediaModal } from '../components/modal';
const { localeData, messages } = getLocale(); const { localeData, messages } = getLocale();

2
app/javascript/gabsocial/containers/modal_container.js
View File

@ -1,6 +1,6 @@
import { closeModal } from '../actions/modal'; import { closeModal } from '../actions/modal';
import { cancelReplyCompose } from '../actions/compose'; import { cancelReplyCompose } from '../actions/compose';
import ModalRoot from '../components/modal_root'; import ModalRoot from '../components/modal/modal_root';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
type: state.get('modal').modalType, type: state.get('modal').modalType,

28
app/javascript/gabsocial/containers/notifications_container.js
View File

@ -1,28 +1,28 @@
import { injectIntl } from 'react-intl'; import { injectIntl } from 'react-intl'
import { NotificationStack } from 'react-notification'; import { NotificationStack } from 'react-notification'
import { dismissAlert } from '../actions/alerts'; import { dismissAlert } from '../actions/alerts'
import { getAlerts } from '../selectors'; import { getAlerts } from '../selectors'
const mapStateToProps = (state, { intl }) => { const mapStateToProps = (state, { intl }) => {
const notifications = getAlerts(state); const notifications = getAlerts(state)
notifications.forEach(notification => ['title', 'message'].forEach(key => { notifications.forEach(notification => ['title', 'message'].forEach(key => {
const value = notification[key]; const value = notification[key]
if (typeof value === 'object') { if (typeof value === 'object') {
notification[key] = intl.formatMessage(value); notification[key] = intl.formatMessage(value)
} }
})); }))
return { notifications }; return { notifications }
}; }
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
onDismiss: alert => { onDismiss: alert => {
dispatch(dismissAlert(alert)); dispatch(dismissAlert(alert))
}, },
}; }
}; }
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NotificationStack)); export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NotificationStack))

2
app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.js
View File

@ -8,7 +8,7 @@ import Button from '../../../components/button';
import { autoPlayGif, me, isStaff } from '../../../initial_state'; import { autoPlayGif, me, isStaff } from '../../../initial_state';
import Avatar from '../../../components/avatar'; import Avatar from '../../../components/avatar';
import { shortNumberFormat } from '../../../utils/numbers'; import { shortNumberFormat } from '../../../utils/numbers';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container'; import Dropdown from '../../../components/dropdown_menu'
import ProfileInfoPanel from './profile_info_panel/profile_info_panel'; import ProfileInfoPanel from './profile_info_panel/profile_info_panel';
const messages = defineMessages({ const messages = defineMessages({

77
app/javascript/gabsocial/features/community_timeline/community_timeline.js
View File

@ -1,112 +1,111 @@
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl'
import { import {
expandCommunityTimeline, expandCommunityTimeline,
expandPublicTimeline, expandPublicTimeline,
} from '../../actions/timelines'; } from '../../actions/timelines'
import { import {
connectCommunityStream, connectCommunityStream,
connectPublicStream, connectPublicStream,
} from '../../actions/streaming'; } from '../../actions/streaming'
import StatusListContainer from '../../containers/status_list_container';; import StatusListContainer from '../../containers/status_list_container'
// import ColumnSettingsContainer from '.containers/column_settings_container';
import Column from '../../components/column';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column.community', defaultMessage: 'Community timeline' }, empty: { id: 'empty_column.community', defaultMessage: 'The community timeline is empty. Write something publicly to get the ball rolling!' },
}); })
const mapStateToProps = state => { const mapStateToProps = state => {
const allFediverse = state.getIn(['settings', 'community', 'other', 'allFediverse']); const allFediverse = state.getIn(['settings', 'community', 'other', 'allFediverse'])
const onlyMedia = state.getIn(['settings', 'community', 'other', 'onlyMedia']); const onlyMedia = state.getIn(['settings', 'community', 'other', 'onlyMedia'])
const timelineId = allFediverse ? 'public' : 'community'; const timelineId = allFediverse ? 'public' : 'community'
return { return {
timelineId, timelineId,
allFediverse, allFediverse,
onlyMedia, onlyMedia,
hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}`, 'unread']) > 0, // hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}`, 'unread']) > 0,
}; }
}; }
export default @connect(mapStateToProps) export default
@connect(mapStateToProps)
@injectIntl @injectIntl
class CommunityTimeline extends PureComponent { class CommunityTimeline extends PureComponent {
static contextTypes = { static contextTypes = {
router: PropTypes.object, router: PropTypes.object,
}; }
static propTypes = { static propTypes = {
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
hasUnread: PropTypes.bool, // hasUnread: PropTypes.bool,
onlyMedia: PropTypes.bool, onlyMedia: PropTypes.bool,
allFediverse: PropTypes.bool, allFediverse: PropTypes.bool,
timelineId: PropTypes.string, timelineId: PropTypes.string,
}; }
componentDidMount () { componentDidMount () {
const { dispatch, onlyMedia, allFediverse } = this.props; const { dispatch, onlyMedia, allFediverse } = this.props
if (allFediverse) { if (allFediverse) {
dispatch(expandPublicTimeline({ onlyMedia })); dispatch(expandPublicTimeline({ onlyMedia }))
this.disconnect = dispatch(connectPublicStream({ onlyMedia })); this.disconnect = dispatch(connectPublicStream({ onlyMedia }))
} }
else { else {
dispatch(expandCommunityTimeline({ onlyMedia })); dispatch(expandCommunityTimeline({ onlyMedia }))
this.disconnect = dispatch(connectCommunityStream({ onlyMedia })); this.disconnect = dispatch(connectCommunityStream({ onlyMedia }))
} }
} }
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
if (prevProps.onlyMedia !== this.props.onlyMedia || prevProps.allFediverse !== this.props.allFediverse) { if (prevProps.onlyMedia !== this.props.onlyMedia || prevProps.allFediverse !== this.props.allFediverse) {
const { dispatch, onlyMedia, allFediverse } = this.props; const { dispatch, onlyMedia, allFediverse } = this.props
this.disconnect(); this.disconnect()
if (allFediverse) { if (allFediverse) {
dispatch(expandPublicTimeline({ onlyMedia })); dispatch(expandPublicTimeline({ onlyMedia }))
this.disconnect = dispatch(connectPublicStream({ onlyMedia })); this.disconnect = dispatch(connectPublicStream({ onlyMedia }))
} }
else { else {
dispatch(expandCommunityTimeline({ onlyMedia })); dispatch(expandCommunityTimeline({ onlyMedia }))
this.disconnect = dispatch(connectCommunityStream({ onlyMedia })); this.disconnect = dispatch(connectCommunityStream({ onlyMedia }))
} }
} }
} }
componentWillUnmount () { componentWillUnmount () {
if (this.disconnect) { if (this.disconnect) {
this.disconnect(); this.disconnect()
this.disconnect = null; this.disconnect = null
} }
} }
handleLoadMore = maxId => { handleLoadMore = maxId => {
const { dispatch, onlyMedia, allFediverse } = this.props; const { dispatch, onlyMedia, allFediverse } = this.props
if (allFediverse) { if (allFediverse) {
dispatch(expandPublicTimeline({ maxId, onlyMedia })); dispatch(expandPublicTimeline({ maxId, onlyMedia }))
} }
else { else {
dispatch(expandCommunityTimeline({ maxId, onlyMedia })); dispatch(expandCommunityTimeline({ maxId, onlyMedia }))
} }
} }
render () { render () {
const { intl, hasUnread, onlyMedia, timelineId, allFediverse } = this.props; const { intl, onlyMedia, timelineId } = this.props
const emptyMessage = intl.formatMessage(messages.empty)
return ( return (
<Column label={intl.formatMessage(messages.title)}>
<StatusListContainer <StatusListContainer
scrollKey={`${timelineId}_timeline`} scrollKey={`${timelineId}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`} timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
onLoadMore={this.handleLoadMore} onLoadMore={this.handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The community timeline is empty. Write something publicly to get the ball rolling!' />} emptyMessage={emptyMessage}
/> />
</Column> )
);
} }
} }

2
app/javascript/gabsocial/features/compose/components/action_bar/action_bar.js
View File

@ -1,6 +1,6 @@
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import { openModal } from '../../../../actions/modal'; import { openModal } from '../../../../actions/modal';
import DropdownMenuContainer from '../../../../containers/dropdown_menu_container'; import Dropdown from '../../../../components/dropdown_menu'
import { meUsername } from '../../../../initial_state'; import { meUsername } from '../../../../initial_state';
const messages = defineMessages({ const messages = defineMessages({

10
app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.js
View File

@ -3,7 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import ActionBar from '../action_bar'; import ActionBar from '../action_bar';
import Avatar from '../../../../components/avatar'; import Avatar from '../../../../components/avatar';
import Permalink from '../../../../components/permalink'; import Button from '../../../../components/button'
import IconButton from '../../../../components/icon_button'; import IconButton from '../../../../components/icon_button';
import { me } from '../../../../initial_state'; import { me } from '../../../../initial_state';
@ -26,15 +26,15 @@ class NavigationBar extends ImmutablePureComponent {
return ( return (
<div className='navigation-bar'> <div className='navigation-bar'>
<Permalink href={account.get('url')} to={`/${account.get('acct')}`}> <Button href={account.get('url')} to={`/${account.get('acct')}`}>
<span style={{ display: 'none' }}>{account.get('acct')}</span> <span style={{ display: 'none' }}>{account.get('acct')}</span>
<Avatar account={account} size={48} /> <Avatar account={account} size={48} />
</Permalink> </Button>
<div className='navigation-bar__profile'> <div className='navigation-bar__profile'>
<Permalink href={account.get('url')} to={`/${account.get('acct')}`}> <Button href={account.get('url')} to={`/${account.get('acct')}`}>
<strong className='navigation-bar__profile-account'>@{account.get('acct')}</strong> <strong className='navigation-bar__profile-account'>@{account.get('acct')}</strong>
</Permalink> </Button>
<a href='/settings/profile' className='navigation-bar__profile-edit'> <a href='/settings/profile' className='navigation-bar__profile-edit'>
<FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /> <FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' />

6
app/javascript/gabsocial/features/follow_requests/components/account_authorize/account_authorize.js
View File

@ -3,7 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { authorizeFollowRequest, rejectFollowRequest } from '../../../../actions/accounts'; import { authorizeFollowRequest, rejectFollowRequest } from '../../../../actions/accounts';
import { makeGetAccount } from '../../../../selectors'; import { makeGetAccount } from '../../../../selectors';
import Permalink from '../../../../components/permalink'; import Button from '../../../../components/button'
import Avatar from '../../../../components/avatar'; import Avatar from '../../../../components/avatar';
import DisplayName from '../../../../components/display_name'; import DisplayName from '../../../../components/display_name';
import IconButton from '../../../../components/icon_button'; import IconButton from '../../../../components/icon_button';
@ -51,12 +51,12 @@ class AccountAuthorize extends ImmutablePureComponent {
return ( return (
<div className='account-authorize__wrapper'> <div className='account-authorize__wrapper'>
<div className='account-authorize'> <div className='account-authorize'>
<Permalink href={`/${account.get('acct')}`} to={`/${account.get('acct')}`} className='account-authorize__display-name'> <Button href={`/${account.get('acct')}`} to={`/${account.get('acct')}`} className='account-authorize__display-name'>
<div className='account-authorize__avatar'> <div className='account-authorize__avatar'>
<Avatar account={account} size={48} /> <Avatar account={account} size={48} />
</div> </div>
<DisplayName account={account} /> <DisplayName account={account} />
</Permalink> </Button>
<div className='account__header__content' dangerouslySetInnerHTML={content} /> <div className='account__header__content' dangerouslySetInnerHTML={content} />
</div> </div>

2
app/javascript/gabsocial/features/groups/members/index.js
View File

@ -12,7 +12,7 @@ import { FormattedMessage } from 'react-intl';
import AccountContainer from '../../../containers/account_container'; import AccountContainer from '../../../containers/account_container';
import Column from '../../../components/column'; import Column from '../../../components/column';
import ScrollableList from '../../../components/scrollable_list'; import ScrollableList from '../../../components/scrollable_list';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container'; import Dropdown from '../../../components/dropdown_menu'
const mapStateToProps = (state, { params: { id } }) => ({ const mapStateToProps = (state, { params: { id } }) => ({
group: state.getIn(['groups', id]), group: state.getIn(['groups', id]),

4
app/javascript/gabsocial/features/groups/timeline/components/header.js
View File

@ -2,7 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import DropdownMenuContainer from '../../../../containers/dropdown_menu_container'; import Dropdown from '../../../../components/dropdown_menu'
import Button from '../../../../components/button'; import Button from '../../../../components/button';
const messages = defineMessages({ const messages = defineMessages({
@ -24,7 +24,7 @@ class Header extends ImmutablePureComponent {
router: PropTypes.object, router: PropTypes.object,
}; };
getActionButton() { getActionButton() {
const { group, relationships, toggleMembership, intl } = this.props; const { group, relationships, toggleMembership, intl } = this.props;
const toggle = () => toggleMembership(group, relationships); const toggle = () => toggleMembership(group, relationships);

3
app/javascript/gabsocial/features/home_timeline/index.js
View File

@ -11,7 +11,8 @@ const mapStateToProps = state => ({
isPartial: state.getIn(['timelines', 'home', 'isPartial']), isPartial: state.getIn(['timelines', 'home', 'isPartial']),
}) })
export default @connect(mapStateToProps) export default
@connect(mapStateToProps)
@injectIntl @injectIntl
class HomeTimeline extends PureComponent { class HomeTimeline extends PureComponent {

4
app/javascript/gabsocial/features/notifications/components/notification/notification.js
View File

@ -4,7 +4,7 @@ import { HotKeys } from 'react-hotkeys';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import StatusContainer from '../../../../containers/status_container'; import StatusContainer from '../../../../containers/status_container';
import AccountContainer from '../../../../containers/account_container'; import AccountContainer from '../../../../containers/account_container';
import Permalink from '../../../../components/permalink'; import Button from '../../../../components/button'
import Icon from '../../../../components/icon'; import Icon from '../../../../components/icon';
const notificationForScreenReader = (intl, message, timestamp) => { const notificationForScreenReader = (intl, message, timestamp) => {
@ -240,7 +240,7 @@ class Notification extends ImmutablePureComponent {
const { notification } = this.props; const { notification } = this.props;
const account = notification.get('account'); const account = notification.get('account');
const displayNameHtml = { __html: account.get('display_name_html') }; const displayNameHtml = { __html: account.get('display_name_html') };
const link = <bdi><Permalink className='notification__display-name' href={`/${account.get('acct')}`} title={account.get('acct')} to={`/${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>; const link = <bdi><Button className='notification__display-name' href={`/${account.get('acct')}`} title={account.get('acct')} to={`/${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
switch(notification.get('type')) { switch(notification.get('type')) {
// case 'follow': // case 'follow':

2
app/javascript/gabsocial/features/status/components/detailed_status_action_bar/detailed_status_action_bar.js
View File

@ -3,7 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import { openModal } from '../../../../actions/modal'; import { openModal } from '../../../../actions/modal';
import { me, isStaff } from '../../../../initial_state'; import { me, isStaff } from '../../../../initial_state';
import DropdownMenuContainer from '../../../../containers/dropdown_menu_container'; import Dropdown from '../../../../components/dropdown_menu';
import IconButton from '../../../../components/icon_button'; import IconButton from '../../../../components/icon_button';
const messages = defineMessages({ const messages = defineMessages({

167
app/javascript/gabsocial/features/ui/ui.js
View File

@ -1,28 +1,27 @@
'use strict'; 'use strict'
import classNames from 'classnames'; import { HotKeys } from 'react-hotkeys'
import { HotKeys } from 'react-hotkeys'; import { defineMessages, injectIntl } from 'react-intl'
import { defineMessages, injectIntl } from 'react-intl'; import { Switch, Redirect, withRouter } from 'react-router-dom'
import { Switch, Redirect, withRouter } from 'react-router-dom'; import { debounce } from 'lodash'
import { debounce } from 'lodash'; import { uploadCompose, resetCompose } from '../../actions/compose'
import { uploadCompose, resetCompose } from '../../actions/compose'; import { expandHomeTimeline } from '../../actions/timelines'
import { expandHomeTimeline } from '../../actions/timelines';
import { import {
initializeNotifications, initializeNotifications,
expandNotifications, expandNotifications,
} from '../../actions/notifications'; } from '../../actions/notifications'
import { fetchFilters } from '../../actions/filters'; import { fetchFilters } from '../../actions/filters'
import { clearHeight } from '../../actions/height_cache'; import { clearHeight } from '../../actions/height_cache'
import { openModal } from '../../actions/modal'; import { openModal } from '../../actions/modal'
import WrappedRoute from './util/wrapped_route'; import WrappedRoute from './util/wrapped_route'
// import NotificationsContainer from '../../containers/notifications_container'; import NotificationsContainer from '../../containers/notifications_container'
// import ModalContainer from '../../containers/modal_container'; import ModalContainer from '../../containers/modal_container'
// import UploadArea from '../../components/upload_area'; import UploadArea from '../../components/upload_area'
// import TrendsPanel from './components/trends_panel'; // import TrendsPanel from './components/trends_panel'
// import { WhoToFollowPanel } from '../../components/panel'; // import { WhoToFollowPanel } from '../../components/panel'
// import LinkFooter from '../../components/link_footer'; // import LinkFooter from '../../components/link_footer'
import ProfilePage from '../../pages/profile_page' import ProfilePage from '../../pages/profile_page'
// import GroupPage from '../../pages/group_page'; // import GroupPage from '../../pages/group_page'
import GroupsPage from '../../pages/groups_page' import GroupsPage from '../../pages/groups_page'
import SearchPage from '../../pages/search_page' import SearchPage from '../../pages/search_page'
import ErrorPage from '../../pages/error_page' import ErrorPage from '../../pages/error_page'
@ -30,12 +29,13 @@ import HomePage from '../../pages/home_page'
import NotificationsPage from '../../pages/notifications_page' import NotificationsPage from '../../pages/notifications_page'
import ListPage from '../../pages/list_page' import ListPage from '../../pages/list_page'
import ListsPage from '../../pages/lists_page' import ListsPage from '../../pages/lists_page'
// import GroupSidebarPanel from '../groups/sidebar_panel'; import SettingsPage from '../../pages/settings_page'
// import GroupSidebarPanel from '../groups/sidebar_panel'
import { import {
Status, Status,
// GettingStarted, // GettingStarted,
// CommunityTimeline, CommunityTimeline,
AccountTimeline, AccountTimeline,
// AccountGallery, // AccountGallery,
HomeTimeline, HomeTimeline,
@ -63,25 +63,25 @@ import {
// GroupRemovedAccounts, // GroupRemovedAccounts,
// GroupCreate, // GroupCreate,
// GroupEdit, // GroupEdit,
} from './util/async-components'; } from './util/async-components'
import { me, meUsername } from '../../initial_state'; import { me, meUsername } from '../../initial_state'
// Dummy import, to make sure that <Status /> ends up in the application bundle. // Dummy import, to make sure that <Status /> ends up in the application bundle.
// Without this it ends up in ~8 very commonly used bundles. // Without this it ends up in ~8 very commonly used bundles.
import '../../components/status'; import '../../components/status'
import { fetchGroups } from '../../actions/groups'; import { fetchGroups } from '../../actions/groups'
const messages = defineMessages({ const messages = defineMessages({
beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Gab Social.' }, beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Gab Social.' },
publish: { id: 'compose_form.publish', defaultMessage: 'Gab' }, publish: { id: 'compose_form.publish', defaultMessage: 'Gab' },
}); })
const mapStateToProps = state => ({ const mapStateToProps = state => ({
isComposing: state.getIn(['compose', 'is_composing']), isComposing: state.getIn(['compose', 'is_composing']),
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0, hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0, hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null, dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
}); })
const keyMap = { const keyMap = {
help: '?', help: '?',
@ -109,7 +109,7 @@ const keyMap = {
goToRequests: 'g r', goToRequests: 'g r',
toggleHidden: 'x', toggleHidden: 'x',
toggleSensitive: 'h', toggleSensitive: 'h',
}; }
class SwitchingArea extends PureComponent { class SwitchingArea extends PureComponent {
@ -117,7 +117,7 @@ class SwitchingArea extends PureComponent {
children: PropTypes.node, children: PropTypes.node,
location: PropTypes.object, location: PropTypes.object,
onLayoutChange: PropTypes.func.isRequired, onLayoutChange: PropTypes.func.isRequired,
}; }
componentWillMount() { componentWillMount() {
window.addEventListener('resize', this.handleResize, { window.addEventListener('resize', this.handleResize, {
@ -148,7 +148,7 @@ class SwitchingArea extends PureComponent {
<Redirect from='/' to='/home' exact /> <Redirect from='/' to='/home' exact />
<WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} /> <WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
{/*<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />*/} <WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />
<WrappedRoute path='/groups' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'featured' }} /> <WrappedRoute path='/groups' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'featured' }} />
<WrappedRoute path='/groups/browse/member' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'member' }} /> <WrappedRoute path='/groups/browse/member' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'member' }} />
@ -184,10 +184,11 @@ class SwitchingArea extends PureComponent {
<WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} /> <WrappedRoute path='/settings/mutes' exact page={SettingsPage} component={Mutes} content={children} />
<WrappedRoute path='/settings/development' exact page={SettingsPage} component={Mutes} content={children} /> <WrappedRoute path='/settings/development' exact page={SettingsPage} component={Mutes} content={children} />
<WrappedRoute path='/settings/billing' exact page={SettingsPage} component={Mutes} content={children} /> <WrappedRoute path='/settings/billing' exact page={SettingsPage} component={Mutes} content={children} />
*/ } */ }
<Redirect from='/@:username' to='/:username' exact /> <Redirect from='/@:username' to='/:username' exact />
<WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} /> <WrappedRoute path='/:username' publicRoute exact page={ProfilePage} component={AccountTimeline} content={children} />
{ /* { /*
<Redirect from='/@:username/with_replies' to='/:username/with_replies' /> <Redirect from='/@:username/with_replies' to='/:username/with_replies' />
<WrappedRoute path='/:username/with_replies' component={AccountTimeline} page={ProfilePage} content={children} componentParams={{ withReplies: true }} /> <WrappedRoute path='/:username/with_replies' component={AccountTimeline} page={ProfilePage} content={children} componentParams={{ withReplies: true }} />
@ -220,7 +221,7 @@ class SwitchingArea extends PureComponent {
*/} */}
<WrappedRoute page={ErrorPage} component={GenericNotFound} content={children} /> <WrappedRoute page={ErrorPage} component={GenericNotFound} content={children} />
</Switch> </Switch>
); )
} }
} }
@ -295,7 +296,7 @@ class UI extends PureComponent {
e.stopPropagation() e.stopPropagation()
try { try {
e.dataTransfer.dropEffect = 'copy'; e.dataTransfer.dropEffect = 'copy'
} catch (err) { } catch (err) {
// //
} }
@ -320,10 +321,10 @@ class UI extends PureComponent {
} }
handleDragLeave = (e) => { handleDragLeave = (e) => {
e.preventDefault(); e.preventDefault()
e.stopPropagation(); e.stopPropagation()
this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el)); this.dragTargets = this.dragTargets.filter(el => el !== e.target && this.node.contains(el))
if (this.dragTargets.length > 0) return if (this.dragTargets.length > 0) return
@ -348,99 +349,99 @@ class UI extends PureComponent {
handleServiceWorkerPostMessage = ({ data }) => { handleServiceWorkerPostMessage = ({ data }) => {
if (data.type === 'navigate') { if (data.type === 'navigate') {
this.context.router.history.push(data.path); this.context.router.history.push(data.path)
} else { } else {
console.warn('Unknown message type:', data.type); console.warn('Unknown message type:', data.type)
} }
} }
componentWillMount() { componentWillMount() {
window.addEventListener('beforeunload', this.handleBeforeUnload, false); window.addEventListener('beforeunload', this.handleBeforeUnload, false)
document.addEventListener('dragenter', this.handleDragEnter, false); document.addEventListener('dragenter', this.handleDragEnter, false)
document.addEventListener('dragover', this.handleDragOver, false); document.addEventListener('dragover', this.handleDragOver, false)
document.addEventListener('drop', this.handleDrop, false); document.addEventListener('drop', this.handleDrop, false)
document.addEventListener('dragleave', this.handleDragLeave, false); document.addEventListener('dragleave', this.handleDragLeave, false)
document.addEventListener('dragend', this.handleDragEnd, false); document.addEventListener('dragend', this.handleDragEnd, false)
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage); navigator.serviceWorker.addEventListener('message', this.handleServiceWorkerPostMessage)
} }
if (typeof window.Notification !== 'undefined' && Notification.permission === 'default') { if (typeof window.Notification !== 'undefined' && Notification.permission === 'default') {
window.setTimeout(() => Notification.requestPermission(), 120 * 1000); window.setTimeout(() => Notification.requestPermission(), 120 * 1000)
} }
if (me) { if (me) {
this.props.dispatch(expandHomeTimeline()); this.props.dispatch(expandHomeTimeline())
this.props.dispatch(expandNotifications()); this.props.dispatch(expandNotifications())
this.props.dispatch(initializeNotifications()); this.props.dispatch(initializeNotifications())
this.props.dispatch(fetchGroups('member')); this.props.dispatch(fetchGroups('member'))
setTimeout(() => this.props.dispatch(fetchFilters()), 500); setTimeout(() => this.props.dispatch(fetchFilters()), 500)
} }
} }
componentDidMount() { componentDidMount() {
if (!me) return; if (!me) return
this.hotkeys.__mousetrap__.stopCallback = (e, element) => { this.hotkeys.__mousetrap__.stopCallback = (e, element) => {
return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName); return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName)
}; }
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('beforeunload', this.handleBeforeUnload); window.removeEventListener('beforeunload', this.handleBeforeUnload)
document.removeEventListener('dragenter', this.handleDragEnter); document.removeEventListener('dragenter', this.handleDragEnter)
document.removeEventListener('dragover', this.handleDragOver); document.removeEventListener('dragover', this.handleDragOver)
document.removeEventListener('drop', this.handleDrop); document.removeEventListener('drop', this.handleDrop)
document.removeEventListener('dragleave', this.handleDragLeave); document.removeEventListener('dragleave', this.handleDragLeave)
document.removeEventListener('dragend', this.handleDragEnd); document.removeEventListener('dragend', this.handleDragEnd)
} }
setRef = c => { setRef = c => {
this.node = c; this.node = c
} }
handleHotkeyNew = e => { handleHotkeyNew = e => {
e.preventDefault(); e.preventDefault()
const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea'); const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea')
if (element) { if (element) {
element.focus(); element.focus()
} }
} }
handleHotkeySearch = e => { handleHotkeySearch = e => {
e.preventDefault(); e.preventDefault()
const element = this.node.querySelector('.search__input'); const element = this.node.querySelector('.search__input')
if (element) { if (element) {
element.focus(); element.focus()
} }
} }
handleHotkeyForceNew = e => { handleHotkeyForceNew = e => {
this.handleHotkeyNew(e); this.handleHotkeyNew(e)
this.props.dispatch(resetCompose()); this.props.dispatch(resetCompose())
} }
handleHotkeyFocusColumn = e => { handleHotkeyFocusColumn = e => {
const index = (e.key * 1) + 1; // First child is drawer, skip that const index = (e.key * 1) + 1 // First child is drawer, skip that
const column = this.node.querySelector(`.column:nth-child(${index})`); const column = this.node.querySelector(`.column:nth-child(${index})`)
if (!column) return; if (!column) return
const container = column.querySelector('.scrollable'); const container = column.querySelector('.scrollable')
if (container) { if (container) {
const status = container.querySelector('.focusable'); const status = container.querySelector('.focusable')
if (status) { if (status) {
if (container.scrollTop > status.offsetTop) { if (container.scrollTop > status.offsetTop) {
status.scrollIntoView(true); status.scrollIntoView(true)
} }
status.focus(); status.focus()
} }
} }
} }
@ -454,7 +455,7 @@ class UI extends PureComponent {
} }
setHotkeysRef = c => { setHotkeysRef = c => {
this.hotkeys = c; this.hotkeys = c
} }
handleHotkeyToggleHelp = () => { handleHotkeyToggleHelp = () => {
@ -502,8 +503,8 @@ class UI extends PureComponent {
} }
render() { render() {
const { draggingOver } = this.state; const { draggingOver } = this.state
const { children, location, dropdownMenuIsOpen } = this.props; const { children, location, dropdownMenuIsOpen } = this.props
const handlers = me ? { const handlers = me ? {
help: this.handleHotkeyToggleHelp, help: this.handleHotkeyToggleHelp,
@ -521,7 +522,7 @@ class UI extends PureComponent {
goToBlocked: this.handleHotkeyGoToBlocked, goToBlocked: this.handleHotkeyGoToBlocked,
goToMuted: this.handleHotkeyGoToMuted, goToMuted: this.handleHotkeyGoToMuted,
goToRequests: this.handleHotkeyGoToRequests, goToRequests: this.handleHotkeyGoToRequests,
} : {}; } : {}
return ( return (
<HotKeys <HotKeys
@ -544,14 +545,12 @@ class UI extends PureComponent {
{children} {children}
</SwitchingArea> </SwitchingArea>
{ /*
<NotificationsContainer /> <NotificationsContainer />
<ModalContainer /> <ModalContainer />
<UploadArea active={draggingOver} onClose={this.closeUploadModal} /> <UploadArea active={draggingOver} onClose={this.closeUploadModal} />
*/ }
</div> </div>
</HotKeys> </HotKeys>
); )
} }
} }

6
app/javascript/gabsocial/components/layouts/default_layout.js → app/javascript/gabsocial/layouts/default_layout.js
View File

@ -1,7 +1,7 @@
import Sticky from 'react-stickynode' import Sticky from 'react-stickynode'
import Search from '../search' import Search from '../components/search'
import ColumnHeader from '../column_header' import ColumnHeader from '../components/column_header'
import Sidebar from '../sidebar' import Sidebar from '../components/sidebar'
export default class DefaultLayout extends PureComponent { export default class DefaultLayout extends PureComponent {
static propTypes = { static propTypes = {

55
app/javascript/gabsocial/layouts/profile_layout.js Normal file
View File

@ -0,0 +1,55 @@
import Sticky from 'react-stickynode'
import Sidebar from '../components/sidebar'
import Image from '../components/image'
export default class ProfileLayout extends PureComponent {
static propTypes = {
layout: PropTypes.object,
title: PropTypes.string,
showBackBtn: PropTypes.bool,
}
render() {
const { children, layout } = this.props
return (
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundcolorSecondary3].join(' ')}>
<Sidebar />
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
<div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.height350PX, _s.width100PC].join(' ')}>
<Image className={_s.height350PX} src='https://gab.com/media/user/bz-5cf53d08403d4.jpeg' />
</div>
<div className={[_s.default, _s.backgroundColorPrimary].join(' ')}>
</div>
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
<div className={_s.default}>
{children}
</div>
</div>
<div className={[_s.default, _s.width340PX].join(' ')}>
<Sticky top={73} enabled>
<div className={[_s.default, _s.width340PX].join(' ')}>
{layout}
</div>
</Sticky>
</div>
</div>
</div>
</div>
</main>
</div>
)
}
}

6
app/javascript/gabsocial/components/layouts/search_layout.js → app/javascript/gabsocial/layouts/search_layout.js
View File

@ -1,7 +1,7 @@
import Sticky from 'react-stickynode' import Sticky from 'react-stickynode'
import Search from '../search' import Search from '../components/search'
import ColumnHeader from '../column_header' import ColumnHeader from '../components/column_header'
import Sidebar from '../sidebar' import Sidebar from '../components/sidebar'
export default class SearchLayout extends PureComponent { export default class SearchLayout extends PureComponent {
static propTypes = { static propTypes = {

2
app/javascript/gabsocial/pages/group_page.js
View File

@ -5,7 +5,7 @@ import { fetchGroup } from '../actions/groups';
import HeaderContainer from '../features/groups/timeline/containers/header_container'; import HeaderContainer from '../features/groups/timeline/containers/header_container';
import GroupPanel from '../features/groups/timeline/components/panel'; import GroupPanel from '../features/groups/timeline/components/panel';
// import GroupSidebarPanel from '../features/groups/sidebar_panel'; // import GroupSidebarPanel from '../features/groups/sidebar_panel';
import DefaultLayout from '../components/layouts/default_layout'; import DefaultLayout from '../layouts/default_layout';
import { WhoToFollowPanel } from '../components/panel'; import { WhoToFollowPanel } from '../components/panel';
import LinkFooter from '../components/link_footer'; import LinkFooter from '../components/link_footer';

2
app/javascript/gabsocial/pages/groups_page.js
View File

@ -1,7 +1,7 @@
import { Fragment } from 'react' import { Fragment } from 'react'
import LinkFooter from '../components/link_footer' import LinkFooter from '../components/link_footer'
import GroupsPanel from '../components/panel/groups_panel' import GroupsPanel from '../components/panel/groups_panel'
import DefaultLayout from '../components/layouts/default_layout' import DefaultLayout from '../layouts/default_layout'
export default class GroupsPage extends PureComponent { export default class GroupsPage extends PureComponent {

2
app/javascript/gabsocial/pages/home_page.js
View File

@ -6,7 +6,7 @@ import ProgressPanel from '../components/panel/progress_panel'
import UserPanel from '../components/panel/user_panel' import UserPanel from '../components/panel/user_panel'
import TrendsPanel from '../components/panel/trends_panel' import TrendsPanel from '../components/panel/trends_panel'
import HashtagsPanel from '../components/panel/hashtags_panel' import HashtagsPanel from '../components/panel/hashtags_panel'
import DefaultLayout from '../components/layouts/default_layout' import DefaultLayout from '../layouts/default_layout'
import TimelineComposeBlock from '../components/timeline_compose_block' import TimelineComposeBlock from '../components/timeline_compose_block'
import Divider from '../components/divider' import Divider from '../components/divider'

2
app/javascript/gabsocial/pages/list_page.js
View File

@ -2,7 +2,7 @@ import { Fragment } from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component' import ImmutablePureComponent from 'react-immutable-pure-component'
import LinkFooter from '../components/link_footer' import LinkFooter from '../components/link_footer'
import DefaultLayout from '../components/layouts/default_layout' import DefaultLayout from '../layouts/default_layout'
import ListDetailsPanel from '../components/panel/list_details_panel' import ListDetailsPanel from '../components/panel/list_details_panel'
const mapStateToProps = (state, props) => ({ const mapStateToProps = (state, props) => ({

2
app/javascript/gabsocial/pages/lists_page.js
View File

@ -2,7 +2,7 @@ import { Fragment } from 'react'
import LinkFooter from '../components/link_footer' import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel' import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import TrendsPanel from '../components/panel/trends_panel' import TrendsPanel from '../components/panel/trends_panel'
import DefaultLayout from '../components/layouts/default_layout' import DefaultLayout from '../layouts/default_layout'
export default class ListsPage extends PureComponent { export default class ListsPage extends PureComponent {

2
app/javascript/gabsocial/pages/notifications_page.js
View File

@ -2,7 +2,7 @@ import { Fragment } from 'react'
import LinkFooter from '../components/link_footer' import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel' import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import TrendsPanel from '../components/panel/trends_panel' import TrendsPanel from '../components/panel/trends_panel'
import DefaultLayout from '../components/layouts/default_layout' import DefaultLayout from '../layouts/default_layout'
export default class NotificationsPage extends PureComponent { export default class NotificationsPage extends PureComponent {
render() { render() {

57
app/javascript/gabsocial/pages/profile_page.js
View File

@ -1,26 +1,25 @@
import { Fragment } from 'react'; import { Fragment } from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component'
// import HeaderContainer from '../features/account_timeline/containers/header_container'; import LinkFooter from '../components/link_footer'
// import ProfileInfoPanel from '../features/account_timeline/components/profile_info_panel/profile_info_panel'; import ProfileInfoPanel from '../components/panel/profile_info_panel'
// import { WhoToFollowPanel, SignUpPanel } from '../components/panel'; import MediaGalleryPanel from '../components/panel/media_gallery_panel'
// import LinkFooter from '../components/link_footer'; import ProfileLayout from '../layouts/profile_layout'
import ProfileLayout from '../components/layouts/profile_layout';
const mapStateToProps = (state, { params: { username }, withReplies = false }) => { const mapStateToProps = (state, { params: { username }, withReplies = false }) => {
const accounts = state.getIn(['accounts']); const accounts = state.getIn(['accounts'])
const accountFetchError = (state.getIn(['accounts', -1, 'username'], '').toLowerCase() == username.toLowerCase()); const accountFetchError = (state.getIn(['accounts', -1, 'username'], '').toLowerCase() == username.toLowerCase())
let accountId = -1; let accountId = -1
let account = null; let account = null
let accountUsername = username; let accountUsername = username
if (accountFetchError) { if (accountFetchError) {
accountId = null; accountId = null
} }
else { else {
account = accounts.find(acct => username.toLowerCase() == acct.getIn(['acct'], '').toLowerCase()); account = accounts.find(acct => username.toLowerCase() == acct.getIn(['acct'], '').toLowerCase())
accountId = account ? account.getIn(['id'], null) : -1; accountId = account ? account.getIn(['id'], null) : -1
accountUsername = account ? account.getIn(['acct'], '') : ''; accountUsername = account ? account.getIn(['acct'], '') : ''
} }
//Children components fetch information //Children components fetch information
@ -29,10 +28,11 @@ const mapStateToProps = (state, { params: { username }, withReplies = false }) =
account, account,
accountId, accountId,
accountUsername, accountUsername,
}; }
}; }
export default @connect(mapStateToProps) export default
@connect(mapStateToProps)
class ProfilePage extends ImmutablePureComponent { class ProfilePage extends ImmutablePureComponent {
static propTypes = { static propTypes = {
account: ImmutablePropTypes.map, account: ImmutablePropTypes.map,
@ -42,14 +42,23 @@ class ProfilePage extends ImmutablePureComponent {
PropTypes.number, PropTypes.number,
]).isRequired, ]).isRequired,
children: PropTypes.node, children: PropTypes.node,
}; }
render() { render() {
const { accountId, account, accountUsername } = this.props; const { accountId, account, accountUsername } = this.props
return ( return (
<ProfileLayout> <ProfileLayout
{ /*this.props.children */ } account={account}
layout={(
<Fragment>
<ProfileInfoPanel />
<MediaGalleryPanel />
<LinkFooter />
</Fragment>
)}
>
{ /* this.props.children */ }
</ProfileLayout> </ProfileLayout>
) )
} }

2
app/javascript/gabsocial/pages/search_page.js
View File

@ -2,7 +2,7 @@ import { Fragment } from 'react'
import LinkFooter from '../components/link_footer' import LinkFooter from '../components/link_footer'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel' import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import TrendsPanel from '../components/panel/trends_panel' import TrendsPanel from '../components/panel/trends_panel'
import SearchLayout from '../components/layouts/search_layout' import SearchLayout from '../layouts/search_layout'
export default class SearchPage extends PureComponent { export default class SearchPage extends PureComponent {
render() { render() {

12
app/javascript/gabsocial/pages/settings_page.js Normal file
View File

@ -0,0 +1,12 @@
export default class SettingsPage extends PureComponent {
render() {
const { children } = this.props;
return (
<div>
{children}
</div>
)
}
}

6
app/javascript/styles/global.css
View File

@ -115,6 +115,8 @@ body {
.border2PX { border-width: 2px; } .border2PX { border-width: 2px; }
.borderBottom2PX { border-bottom-width: 2px; } .borderBottom2PX { border-bottom-width: 2px; }
.borderDashed { border-style: dashed; }
.marginAuto { margin: auto; } .marginAuto { margin: auto; }
.displayNone { display: none; } .displayNone { display: none; }
@ -136,6 +138,7 @@ body {
.backgroundSubtle2Dark_onHover:hover { background-color: #d9e0e5; } .backgroundSubtle2Dark_onHover:hover { background-color: #d9e0e5; }
.backgroundcolorSecondary3 { background-color: #F6F6F9; } .backgroundcolorSecondary3 { background-color: #F6F6F9; }
.backgroundColorPrimary { background-color: #fff; } .backgroundColorPrimary { background-color: #fff; }
.backgroundColorPrimaryOpaque { background-color: rgba(255,255,255,0.8); }
.backgroundColorBrandLightOpaque { background-color: rgba(54, 233, 145, 0.1); } .backgroundColorBrandLightOpaque { background-color: rgba(54, 233, 145, 0.1); }
.backgroundColorOpaque { background-color: rgba(0,0,0, 0.4); } .backgroundColorOpaque { background-color: rgba(0,0,0, 0.4); }
.backgroundColorBrandLight { background-color: #36e991; } .backgroundColorBrandLight { background-color: #36e991; }
@ -154,8 +157,10 @@ body {
.fillcolorSecondary { fill: #666; } .fillcolorSecondary { fill: #666; }
.bottom0 { bottom: 0; } .bottom0 { bottom: 0; }
.bottomAuto { bottom: auto; }
.left0 { left: 0px; } .left0 { left: 0px; }
.right0 { right: 0px; } .right0 { right: 0px; }
.rightAuto { right: auto; }
.top0 { top: 0px; } .top0 { top: 0px; }
.lineHeight125 { line-height: 1.25em; } .lineHeight125 { line-height: 1.25em; }
@ -253,6 +258,7 @@ body {
.z1 { z-index: 1; } .z1 { z-index: 1; }
.z2 { z-index: 2; } .z2 { z-index: 2; }
.z3 { z-index: 3; } .z3 { z-index: 3; }
.z4 { z-index: 4; }
.marginVertical5PX { .marginVertical5PX {
margin-top: 5px; margin-top: 5px;