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

app/javascript/gabsocial/components/modal/modal_root.js

@@ -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,

app/javascript/gabsocial/components/modal/status_modal.js

@@ -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

app/javascript/gabsocial/components/status.js

@@ -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}
                     />
                   }
 

app/javascript/gabsocial/components/status_action_bar.js

@@ -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,
 }
 

app/javascript/gabsocial/components/status_header.js

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

app/javascript/gabsocial/constants.js

@@ -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'

app/javascript/gabsocial/containers/status_container.js

@@ -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);

app/javascript/gabsocial/features/ui/util/async_components.js

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