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
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}' },
})
export default @injectIntl
export default
@injectIntl
class Account extends ImmutablePureComponent {
static propTypes = {

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

@@ -14,7 +14,8 @@ const makeMapStateToProps = () => {
return mapStateToProps;
};
export default @connect(makeMapStateToProps)
export default
@connect(makeMapStateToProps)
class AutosuggestAccount extends ImmutablePureComponent {
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' },
});
export default @injectIntl
export default
@injectIntl
class BundleColumnError extends PureComponent {
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 IconButton from '../icon_button';
import IconButton from './icon_button';
const messages = defineMessages({
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' },
});
export default @injectIntl
export default
@injectIntl
class BundleModalError extends PureComponent {
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' },
})
export default @injectIntl
export default
@injectIntl
class ColumnHeader extends PureComponent {
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.' },
})
export default @injectIntl
export default
@injectIntl
class ColumnIndicator extends PureComponent {
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}' },
});
export default @injectIntl
export default
@injectIntl
class Domain extends PureComponent {
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 Overlay from 'react-overlays/lib/Overlay';
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';
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
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 {
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 = {
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 {
static propTypes = {
@@ -14,9 +15,9 @@ export default class FloatingActionButton extends Component {
const { onClick, message } = this.props;
return (
<button onClick={onClick} className='floating-action-button' aria-label={message}>
<ComposeIcon />
</button>
<Button onClick={onClick} className='floating-action-button' aria-label={message}>
<Icon id='compose' />
</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

68
app/javascript/gabsocial/components/layouts/default_layout.js
View File

@@ -1,68 +0,0 @@
import Sticky from 'react-stickynode'
import Search from '../search'
import ColumnHeader from '../column_header'
import Sidebar from '../sidebar'
export default class DefaultLayout extends PureComponent {
static propTypes = {
actions: PropTypes.array,
tabs: PropTypes.array,
layout: PropTypes.object,
title: PropTypes.string,
showBackBtn: PropTypes.bool,
}
render() {
const { children, title, showBackBtn, layout, actions, tabs } = this.props
// const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
// const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
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.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundcolorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader
title={title}
showBackBtn={showBackBtn}
actions={actions}
tabs={tabs}
/>
</div>
<div className={[_s.default, _s.width340PX].join(' ')}>
<Search />
</div>
</div>
</div>
<div className={[_s.default, _s.height53PX].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>
</main>
</div>
)
}
}

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

68
app/javascript/gabsocial/components/layouts/search_layout.js
View File

@@ -1,68 +0,0 @@
import Sticky from 'react-stickynode'
import Search from '../search'
import ColumnHeader from '../column_header'
import Sidebar from '../sidebar'
export default class SearchLayout extends PureComponent {
static propTypes = {
actions: PropTypes.array,
tabs: PropTypes.array,
layout: PropTypes.object,
title: PropTypes.string,
showBackBtn: PropTypes.bool,
}
render() {
const { children, title, showBackBtn, layout, actions, tabs } = this.props
// const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started/);
// const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}></button>;
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.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundcolorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader
title={title}
showBackBtn={showBackBtn}
actions={actions}
tabs={tabs}
/>
</div>
<div className={[_s.default, _s.width340PX].join(' ')}>
<Search />
</div>
</div>
</div>
<div className={[_s.default, _s.height53PX].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>
</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
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' },
})
export default @injectIntl
export default
@injectIntl
class LoadMore extends PureComponent {
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 EmbedModal from './embed_modal/embed_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 MuteModal from './mute_modal/mute_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';
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);
}
}

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

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

@@ -1,40 +1,46 @@
import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../icon_button';
import './modal_layout';
import { defineMessages, injectIntl } from 'react-intl'
import Button from '../button'
import Block from '../block'
import Heading from '../heading'
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
})
export default @injectIntl
export default
@injectIntl
class ModalLayout extends PureComponent {
static propTypes = {
title: PropTypes.string,
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
};
}
render() {
const { title, children, intl, onClose } = this.props;
const { title, children, intl, onClose } = this.props
return (
<div className='modal modal--layout modal--root'>
<div className='modal-header'>
<h3 className='modal-header__title'>{title}</h3>
<IconButton
className='modal-header__close-btn'
title={intl.formatMessage(messages.close)}
icon='times'
onClick={onClose}
size={20}
/>
</div>
<div className='modal__content'>
{children}
</div>
<div className={[_s.width645PX].join(' ')}>
<Block>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.paddingHorizontal15PX].join(' ')}>
<Heading size='h3'>
{title}
</Heading>
<Button
className=''
title={intl.formatMessage(messages.close)}
onClick={onClose}
icon='times'
iconWidth='20px'
iconWidth='20px'
/>
</div>
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
{children}
</div>
</Block>
</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 Bundle from '../../features/ui/util/bundle';
import BundleModalError from '../bundle_modal_error';
import ModalBase from './modal_base'
import Bundle from '../../features/ui/util/bundle'
import BundleModalError from '../bundle_modal_error'
import {
ActionsModal,
MediaModal,
@@ -11,7 +11,8 @@ import {
HotkeysModal,
ComposeModal,
UnauthorizedModal,
} from '../modal';
ProUpgradeModal,
} from '.'
import {
MuteModal,
ReportModal,
@@ -19,8 +20,8 @@ import {
ListEditor,
ListAdder,
StatusRevisionModal,
} from '../../features/ui/util/async-components';
import ModalLoading from '../modal_loading';
} from '../../features/ui/util/async-components'
import ModalLoading from '../modal_loading'
const MODAL_COMPONENTS = {
'MEDIA': () => Promise.resolve({ default: MediaModal }),
@@ -39,7 +40,7 @@ const MODAL_COMPONENTS = {
'COMPOSE': () => Promise.resolve({ default: ComposeModal }),
'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }),
'PRO_UPGRADE': () => Promise.resolve({ default: ProUpgradeModal }),
};
}
export default class ModalRoot extends PureComponent {
@@ -47,46 +48,54 @@ export default class ModalRoot extends PureComponent {
type: PropTypes.string,
props: PropTypes.object,
onClose: PropTypes.func.isRequired,
};
}
getSnapshotBeforeUpdate () {
return { visible: !!this.props.type };
return { visible: !!this.props.type }
}
componentDidUpdate (prevProps, prevState, { visible }) {
if (visible) {
document.body.classList.add('with-modals--active');
document.body.classList.add('with-modals--active')
} else {
document.body.classList.remove('with-modals--active');
document.body.classList.remove('with-modals--active')
}
}
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) => {
return <BundleModalError {...props} onClose={this.onClickClose} />;
return <BundleModalError {...props} onClose={this.onClickClose} />
}
onClickClose = () => {
const { onClose, type } = this.props;
onClose(type);
const { onClose, type } = this.props
onClose(type)
}
render () {
const { type, props } = this.props;
const visible = !!type;
const { type, props } = this.props
const visible = !!type
return (
<Base onClose={this.onClickClose} type={type}>
{visible && (
<Bundle fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => <SpecificComponent {...props} onClose={this.onClickClose} />}
<ModalBase onClose={this.onClickClose} type={type}>
{
visible &&
<Bundle
fetchComponent={MODAL_COMPONENTS[type]}
loading={this.renderLoading(type)}
error={this.renderError}
renderDelay={200}
>
{
(SpecificComponent) => <SpecificComponent {...props} onClose={this.onClickClose} />
}
</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>
)
}
}

149
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 moment from 'moment';
import { injectIntl, defineMessages } from 'react-intl'
const messages = defineMessages({
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' },
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' },
});
})
const dateFormatOptions = {
hour12: false,
@@ -21,94 +20,94 @@ const dateFormatOptions = {
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
};
}
const shortDateFormatOptions = {
month: 'short',
day: 'numeric',
};
}
const SECOND = 1000;
const MINUTE = 1000 * 60;
const HOUR = 1000 * 60 * 60;
const DAY = 1000 * 60 * 60 * 24;
const SECOND = 1000
const MINUTE = 1000 * 60
const HOUR = 1000 * 60 * 60
const DAY = 1000 * 60 * 60 * 24
const MAX_DELAY = 2147483647;
const MAX_DELAY = 2147483647
const selectUnits = delta => {
const absDelta = Math.abs(delta);
const absDelta = Math.abs(delta)
if (absDelta < MINUTE) {
return 'second';
return 'second'
} else if (absDelta < HOUR) {
return 'minute';
return 'minute'
} else if (absDelta < DAY) {
return 'hour';
return 'hour'
}
return 'day';
};
return 'day'
}
const getUnitDelay = units => {
switch (units) {
case 'second':
return SECOND;
case 'minute':
return MINUTE;
case 'hour':
return HOUR;
case 'day':
return DAY;
default:
return MAX_DELAY;
case 'second':
return SECOND
case 'minute':
return MINUTE
case 'hour':
return HOUR
case 'day':
return DAY
default:
return MAX_DELAY
}
};
}
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) {
relativeTime = intl.formatMessage(messages.just_now);
relativeTime = intl.formatMessage(messages.just_now)
} else if (delta < 7 * DAY) {
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) {
relativeTime = intl.formatMessage(messages.minutes, { number: Math.floor(delta / MINUTE) });
relativeTime = intl.formatMessage(messages.minutes, { number: Math.floor(delta / MINUTE) })
} 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 {
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) {
relativeTime = intl.formatDate(date, shortDateFormatOptions);
relativeTime = intl.formatDate(date, shortDateFormatOptions)
} 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 delta = date.getTime() - now;
const delta = date.getTime() - now
let relativeTime;
let relativeTime
if (delta < 10 * SECOND) {
relativeTime = intl.formatMessage(messages.moments_remaining);
relativeTime = intl.formatMessage(messages.moments_remaining)
} 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) {
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) {
relativeTime = intl.formatMessage(messages.hours_remaining, { number: Math.floor(delta / HOUR) });
relativeTime = intl.formatMessage(messages.hours_remaining, { number: Math.floor(delta / HOUR) })
} 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
class RelativeTimestamp extends Component {
@@ -118,68 +117,68 @@ class RelativeTimestamp extends Component {
timestamp: PropTypes.string.isRequired,
year: PropTypes.number.isRequired,
futureDate: PropTypes.bool,
};
}
state = {
now: this.props.intl.now(),
};
}
static defaultProps = {
year: (new Date()).getFullYear(),
};
}
shouldComponentUpdate (nextProps, nextState) {
shouldComponentUpdate(nextProps, nextState) {
// 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.
return this.props.timestamp !== nextProps.timestamp ||
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) {
this.setState({ now: this.props.intl.now() });
this.setState({ now: this.props.intl.now() })
}
}
componentDidMount () {
this._scheduleNextUpdate(this.props, this.state);
componentDidMount() {
this._scheduleNextUpdate(this.props, this.state)
}
componentWillUpdate (nextProps, nextState) {
this._scheduleNextUpdate(nextProps, nextState);
componentWillUpdate(nextProps, nextState) {
this._scheduleNextUpdate(nextProps, nextState)
}
componentWillUnmount () {
clearTimeout(this._timer);
componentWillUnmount() {
clearTimeout(this._timer)
}
_scheduleNextUpdate (props, state) {
clearTimeout(this._timer);
_scheduleNextUpdate(props, state) {
clearTimeout(this._timer)
const { timestamp } = props;
const delta = (new Date(timestamp)).getTime() - state.now;
const unitDelay = getUnitDelay(selectUnits(delta));
const unitRemainder = Math.abs(delta % unitDelay);
const updateInterval = 1000 * 10;
const delay = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
const { timestamp } = props
const delta = (new Date(timestamp)).getTime() - state.now
const unitDelay = getUnitDelay(selectUnits(delta))
const unitRemainder = Math.abs(delta % unitDelay)
const updateInterval = 1000 * 10
const delay = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder)
this._timer = setTimeout(() => {
this.setState({ now: this.props.intl.now() });
}, delay);
this.setState({ now: this.props.intl.now() })
}, delay)
}
render () {
const { timestamp, intl, year, futureDate } = this.props;
render() {
const { timestamp, intl, year, futureDate } = this.props
const date = new Date(timestamp);
const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now) : timeAgoString(intl, date, this.state.now, year);
const date = new Date(timestamp)
const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now) : timeAgoString(intl, date, this.state.now, year)
return (
<time dateTime={timestamp} title={intl.formatDate(date, dateFormatOptions)}>
{relativeTime}
</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 ImmutablePureComponent from 'react-immutable-pure-component'
import { injectIntl, defineMessages } from 'react-intl'
import Button from './button'
import { closeSidebar } from '../actions/sidebar'
import { openModal } from '../actions/modal'
import { me } from '../initial_state'
import { makeGetAccount } from '../selectors'
import SidebarSectionTitle from './sidebar_section_title'
@@ -44,9 +44,13 @@ const mapDispatchToProps = (dispatch) => ({
onClose() {
dispatch(closeSidebar())
},
onOpenComposeModal() {
dispatch(openModal('PRO_UPGRADE'))
},
})
export default @connect(mapStateToProps, mapDispatchToProps)
export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class Sidebar extends ImmutablePureComponent {
@@ -55,6 +59,7 @@ class Sidebar extends ImmutablePureComponent {
account: ImmutablePropTypes.map,
sidebarOpen: PropTypes.bool,
onClose: PropTypes.func.isRequired,
onOpenComposeModal: PropTypes.func.isRequired,
}
state = {
@@ -84,6 +89,11 @@ class Sidebar extends ImmutablePureComponent {
})
}
handleOpenComposeModal = () => {
console.log("handleOpenComposeModal")
this.props.onOpenComposeModal()
}
render() {
const { sidebarOpen, intl, account } = this.props
const { moreOpen } = this.state
@@ -114,6 +124,11 @@ class Sidebar extends ImmutablePureComponent {
to: '/notifications',
count: 40,
},
{
title: 'Bookmarks',
icon: 'bookmarks',
to: '/bookmarks',
},
{
title: 'Groups',
icon: 'group',
@@ -210,6 +225,7 @@ class Sidebar extends ImmutablePureComponent {
<Button
block
onClick={this.handleOpenComposeModal}
className={[_s.paddingVertical15PX, _s.fontSize15PX, _s.fontWeightBold].join(' ')}
>
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 { openModal } from '../../actions/modal';
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 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 classNames from 'classnames/bind'
import { isRtl } from '../../utils/rtl';
import Permalink from '../permalink/permalink';
import Button from '../button'
import Icon from '../icon';
const MAX_HEIGHT = 200;
@@ -180,9 +180,9 @@ class StatusContent extends ImmutablePureComponent {
let mentionsPlaceholder = '';
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>
</Permalink>
</Button>
)).reduce((aggregate, item) => [...aggregate, item, ' '], []);
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);
}
}