Progress
This commit is contained in:
mgabdev
153
app/javascript/gabsocial/components/modal/hotkeys_modal.js
Normal file
153
app/javascript/gabsocial/components/modal/hotkeys_modal.js
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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,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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
146
app/javascript/gabsocial/components/modal/modal_base.js
Normal file
146
app/javascript/gabsocial/components/modal/modal_base.js
Normal file
@@ -0,0 +1,146 @@
|
||||
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))
|
||||
},
|
||||
onCancelReplyCompose() {
|
||||
dispatch(cancelReplyCompose())
|
||||
},
|
||||
})
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class ModalBase extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onOpenModal: PropTypes.func.isRequired,
|
||||
onCancelReplyCompose: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
composeId: PropTypes.string,
|
||||
composeText: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
}
|
||||
|
||||
state = {
|
||||
revealed: !!this.props.children,
|
||||
}
|
||||
|
||||
activeElement = this.state.revealed ? document.activeElement : null
|
||||
|
||||
handleKeyUp = (e) => {
|
||||
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
|
||||
&& !!this.props.children) {
|
||||
this.handleOnClose()
|
||||
}
|
||||
}
|
||||
|
||||
handleOnClose = () => {
|
||||
const { onOpenModal, composeText, composeId, onClose, intl, type, onCancelReplyCompose } = this.props
|
||||
|
||||
if (!composeId && composeText && type == 'COMPOSE') {
|
||||
onOpenModal('CONFIRM', {
|
||||
message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this status?' />,
|
||||
confirm: intl.formatMessage(messages.confirm),
|
||||
onConfirm: () => onCancelReplyCompose(),
|
||||
onCancel: () => onOpenModal('COMPOSE'),
|
||||
})
|
||||
} else {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
window.addEventListener('keyup', this.handleKeyUp, false)
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!!nextProps.children && !this.props.children) {
|
||||
this.activeElement = document.activeElement
|
||||
|
||||
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true))
|
||||
} else if (!nextProps.children) {
|
||||
this.setState({ revealed: false })
|
||||
}
|
||||
|
||||
if (!nextProps.children && !!this.props.children) {
|
||||
this.activeElement.focus()
|
||||
this.activeElement = null
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
if (!this.props.children && !!prevProps.children) {
|
||||
this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'))
|
||||
}
|
||||
|
||||
if (this.props.children) {
|
||||
requestAnimationFrame(() => {
|
||||
this.setState({ revealed: true })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('keyup', this.handleKeyUp)
|
||||
}
|
||||
|
||||
getSiblings = () => {
|
||||
return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node)
|
||||
}
|
||||
|
||||
setRef = ref => {
|
||||
this.node = ref
|
||||
}
|
||||
|
||||
render () {
|
||||
const { children } = this.props
|
||||
|
||||
const visible = !!children
|
||||
|
||||
const containerClasses = cx({
|
||||
default: 1,
|
||||
z4: 1,
|
||||
displayNone: !visible,
|
||||
})
|
||||
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
101
app/javascript/gabsocial/components/modal/modal_root.js
Normal file
101
app/javascript/gabsocial/components/modal/modal_root.js
Normal file
@@ -0,0 +1,101 @@
|
||||
import ModalBase from './modal_base'
|
||||
import Bundle from '../../features/ui/util/bundle'
|
||||
import BundleModalError from '../bundle_modal_error'
|
||||
import {
|
||||
ActionsModal,
|
||||
MediaModal,
|
||||
VideoModal,
|
||||
BoostModal,
|
||||
ConfirmationModal,
|
||||
FocalPointModal,
|
||||
HotkeysModal,
|
||||
ComposeModal,
|
||||
UnauthorizedModal,
|
||||
ProUpgradeModal,
|
||||
} from '.'
|
||||
import {
|
||||
MuteModal,
|
||||
ReportModal,
|
||||
EmbedModal,
|
||||
ListEditor,
|
||||
ListAdder,
|
||||
StatusRevisionModal,
|
||||
} from '../../features/ui/util/async-components'
|
||||
import ModalLoading from '../modal_loading'
|
||||
|
||||
const MODAL_COMPONENTS = {
|
||||
'MEDIA': () => Promise.resolve({ default: MediaModal }),
|
||||
'VIDEO': () => Promise.resolve({ default: VideoModal }),
|
||||
'BOOST': () => Promise.resolve({ default: BoostModal }),
|
||||
'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
|
||||
'MUTE': MuteModal,
|
||||
'REPORT': ReportModal,
|
||||
'ACTIONS': () => Promise.resolve({ default: ActionsModal }),
|
||||
'EMBED': EmbedModal,
|
||||
'LIST_EDITOR': ListEditor,
|
||||
'FOCAL_POINT': () => Promise.resolve({ default: FocalPointModal }),
|
||||
'LIST_ADDER': ListAdder,
|
||||
'HOTKEYS': () => Promise.resolve({ default: HotkeysModal }),
|
||||
'STATUS_REVISION': StatusRevisionModal,
|
||||
'COMPOSE': () => Promise.resolve({ default: ComposeModal }),
|
||||
'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }),
|
||||
'PRO_UPGRADE': () => Promise.resolve({ default: ProUpgradeModal }),
|
||||
}
|
||||
|
||||
export default class ModalRoot extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
type: PropTypes.string,
|
||||
props: PropTypes.object,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
getSnapshotBeforeUpdate () {
|
||||
return { visible: !!this.props.type }
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps, prevState, { visible }) {
|
||||
if (visible) {
|
||||
document.body.classList.add('with-modals--active')
|
||||
} else {
|
||||
document.body.classList.remove('with-modals--active')
|
||||
}
|
||||
}
|
||||
|
||||
renderLoading = modalId => () => {
|
||||
return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null
|
||||
}
|
||||
|
||||
renderError = (props) => {
|
||||
return <BundleModalError {...props} onClose={this.onClickClose} />
|
||||
}
|
||||
|
||||
onClickClose = () => {
|
||||
const { onClose, type } = this.props
|
||||
onClose(type)
|
||||
}
|
||||
|
||||
render () {
|
||||
const { type, props } = this.props
|
||||
const visible = !!type
|
||||
|
||||
return (
|
||||
<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>
|
||||
}
|
||||
</ModalBase>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user