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

Updated Statuses to open in modal dialog when in Gab Deck 

• Updated:
- Statuses to open in modal dialog when in Gab Deck instead of going out of Gab Deck to normal status page
This commit is contained in:
mgabdev 2020-12-22 23:49:51 -05:00
parent 0e860dd563
commit 7142375c0b
8 changed files with 67 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/gabsocial/components/modal/modal_root.js
View File

@ -36,6 +36,7 @@ import {
MODAL_MUTE,
MODAL_PRO_UPGRADE,
MODAL_REPORT,
MODAL_STATUS,
MODAL_STATUS_LIKES,
MODAL_STATUS_REPOSTS,
MODAL_STATUS_REVISIONS,
@ -74,6 +75,7 @@ import {
MuteModal,
ProUpgradeModal,
ReportModal,
StatusModal,
StatusLikesModal,
StatusRepostsModal,
StatusRevisionsModal,
@ -111,6 +113,7 @@ const MODAL_COMPONENTS = {
[MODAL_MUTE]: MuteModal,
[MODAL_PRO_UPGRADE]: ProUpgradeModal,
[MODAL_REPORT]: ReportModal,
[MODAL_STATUS]: StatusModal,
[MODAL_STATUS_LIKES]: StatusLikesModal,
[MODAL_STATUS_REPOSTS]: StatusRepostsModal,
[MODAL_STATUS_REVISIONS]: StatusRevisionsModal,

28
app/javascript/gabsocial/components/modal/status_modal.js Normal file
View File

@ -0,0 +1,28 @@
import React from 'react'
import PropTypes from 'prop-types'
import Block from '../block'
import Status from '../../features/status'
class StatusModal extends React.PureComponent {
render() {
const { statusId } = this.props
return (
<div style={{width: '580px'}} className={[_s.d, _s.modal].join(' ')}>
<Block>
<div className={[_s.d, _s.w100PC, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
<Status id={statusId} />
</div>
</Block>
</div>
)
}
}
StatusModal.propTypes = {
statusId: PropTypes.string,
}
export default StatusModal

7
app/javascript/gabsocial/components/status.js
View File

@ -193,6 +193,11 @@ class Status extends ImmutablePureComponent {
}
}
handleOnOpenStatusModal = (status) => {
if (!status) return
this.props.onOpenStatusModal(status.get('id'))
}
handleExpandedToggle = () => {
this.props.onToggleHidden(this._properStatus())
}
@ -442,6 +447,7 @@ class Status extends ImmutablePureComponent {
status={status}
reduced={isChild}
isCompact={isDeckConnected}
onOpenStatusModal={this.handleOnOpenStatusModal}
/>
<div className={_s.d}>
@ -496,6 +502,7 @@ class Status extends ImmutablePureComponent {
onOpenReposts={this.props.onOpenReposts}
onQuote={this.handleOnQuote}
isCompact={isDeckConnected}
onOpenStatusModal={this.handleOnOpenStatusModal}
/>
}

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

@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { defineMessages, injectIntl } from 'react-intl'
import { NavLink } from 'react-router-dom'
import { me } from '../initial_state'
import Text from './text'
import Button from './button'
import StatusActionBarItem from './status_action_bar_item'
import { CX } from '../constants'
@ -33,6 +33,10 @@ class StatusActionBar extends ImmutablePureComponent {
this.props.onQuote(this.props.status)
}
handleOnOpenStatusModal = () => {
this.props.onOpenStatusModal(this.props.status)
}
openLikesList = () => {
this.props.onOpenLikes(this.props.status)
}
@ -106,6 +110,7 @@ class StatusActionBar extends ImmutablePureComponent {
noUnderline: 1,
underline_onHover: 1,
bgTransparent: 1,
outlineNone: 1,
mr10: 1,
py5: 1,
})
@ -139,16 +144,18 @@ class StatusActionBar extends ImmutablePureComponent {
}
{
replyCount > 0 &&
<NavLink
<Button
noClasses
className={interactionBtnClasses}
to={statusUrl}
to={isCompact ? undefined : statusUrl}
onClick={isCompact ? this.handleOnOpenStatusModal : undefined}
>
<Text color='secondary' size='small'>
{intl.formatMessage(messages.commentsLabel, {
number: replyCount,
})}
</Text>
</NavLink>
</Button>
}
{
repostCount > 0 &&
@ -232,6 +239,7 @@ StatusActionBar.propTypes = {
status: ImmutablePropTypes.map.isRequired,
onOpenLikes: PropTypes.func.isRequired,
onOpenReposts: PropTypes.func.isRequired,
onOpenStatusModal: PropTypes.func.isRequired,
isCompact: PropTypes.bool,
}

11
app/javascript/gabsocial/components/status_header.js
View File

@ -28,6 +28,12 @@ class StatusHeader extends ImmutablePureComponent {
this.props.onOpenStatusRevisionsPopover(this.props.status)
}
handleOnOpenStatusModal = () => {
if (!!this.props.onOpenStatusModal) {
this.props.onOpenStatusModal(this.props.status)
}
}
setStatusOptionsButton = n => {
this.statusOptionsButton = n
}
@ -134,7 +140,8 @@ class StatusHeader extends ImmutablePureComponent {
underlineOnHover
backgroundColor='none'
color='none'
to={statusUrl}
to={isCompact ? undefined : statusUrl}
onClick={isCompact ? this.handleOnOpenStatusModal : undefined}
>
<Text size='small' color='secondary'>
<RelativeTimestamp timestamp={status.get('created_at')} />
@ -238,7 +245,9 @@ StatusHeader.propTypes = {
status: ImmutablePropTypes.map,
onOpenStatusRevisionsPopover: PropTypes.func.isRequired,
onOpenStatusOptionsPopover: PropTypes.func.isRequired,
onOpenStatusModal: PropTypes.func.isRequired,
reduced: PropTypes.bool,
isCompact: PropTypes.bool,
}
export default injectIntl(connect(null, mapDispatchToProps)(StatusHeader))

1
app/javascript/gabsocial/constants.js
View File

@ -76,6 +76,7 @@ export const MODAL_MEDIA = 'MEDIA'
export const MODAL_MUTE = 'MUTE'
export const MODAL_PRO_UPGRADE = 'PRO_UPGRADE'
export const MODAL_REPORT = 'REPORT'
export const MODAL_STATUS = 'MODAL_STATUS'
export const MODAL_STATUS_LIKES = 'STATUS_LIKES'
export const MODAL_STATUS_REPOSTS = 'STATUS_REPOSTS'
export const MODAL_STATUS_REVISIONS = 'STATUS_REVISIONS'

5
app/javascript/gabsocial/containers/status_container.js
View File

@ -32,6 +32,7 @@ import {
import {
MODAL_BOOST,
MODAL_CONFIRM,
MODAL_STATUS,
MODAL_PRO_UPGRADE,
POPOVER_COMMENT_SORTING_OPTIONS,
POPOVER_STATUS_SHARE,
@ -341,6 +342,10 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(openModal(MODAL_PRO_UPGRADE))
},
onOpenStatusModal(statusId) {
dispatch(openModal(MODAL_STATUS, { statusId }))
},
});
export default connect(makeMapStateToProps, mapDispatchToProps)(Status);

1
app/javascript/gabsocial/features/ui/util/async_components.js
View File

@ -139,6 +139,7 @@ export function StatusOptionsPopover() { return import(/* webpackChunkName: "com
export function StatusSharePopover() { return import(/* webpackChunkName: "components/status_share_popover" */'../../../components/popover/status_share_popover') }
export function StatusPromotionPanel() { return import(/* webpackChunkName: "components/status_promotion_panel" */'../../../components/panel/status_promotion_panel') }
export function StatusReposts() { return import(/* webpackChunkName: "features/status_reposts" */'../../status_reposts') }
export function StatusModal() { return import(/* webpackChunkName: "modals/status_modal" */'../../../components/modal/status_modal') }
export function StatusLikesModal() { return import(/* webpackChunkName: "modals/status_likes_modal" */'../../../components/modal/status_likes_modal') }
export function StatusRepostsModal() { return import(/* webpackChunkName: "modals/status_reposts_modal" */'../../../components/modal/status_reposts_modal') }
export function StatusRevisionsModal() { return import(/* webpackChunkName: "modals/status_revisions_modal" */'../../../components/modal/status_revisions_modal') }