Added StatusSharePopover for sharing status

• Added:
- StatusSharePopover for sharing status

app/javascript/gabsocial/components/popover/popover_root.js

@@ -13,6 +13,7 @@ import {
   POPOVER_SIDEBAR_MORE,
   POPOVER_STATUS_OPTIONS,
   POPOVER_STATUS_EXPIRATION_OPTIONS,
+  POPOVER_STATUS_SHARE,
   POPOVER_STATUS_VISIBILITY,
   POPOVER_TIMELINE_INJECTION_OPTIONS,
   POPOVER_USER_INFO,
@@ -32,6 +33,7 @@ import {
   SidebarMorePopover,
   StatusExpirationOptionsPopover,
   StatusOptionsPopover,
+  StatusSharePopover,
   StatusVisibilityPopover,
   TimelineInjectionOptionsPopover,
   UserInfoPopover,
@@ -65,6 +67,7 @@ POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
 POPOVER_COMPONENTS[POPOVER_SIDEBAR_MORE] = SidebarMorePopover
 POPOVER_COMPONENTS[POPOVER_STATUS_OPTIONS] = StatusOptionsPopover
 POPOVER_COMPONENTS[POPOVER_STATUS_EXPIRATION_OPTIONS] = StatusExpirationOptionsPopover
+POPOVER_COMPONENTS[POPOVER_STATUS_SHARE] = StatusSharePopover
 POPOVER_COMPONENTS[POPOVER_STATUS_VISIBILITY] = StatusVisibilityPopover
 POPOVER_COMPONENTS[POPOVER_TIMELINE_INJECTION_OPTIONS] = TimelineInjectionOptionsPopover
 POPOVER_COMPONENTS[POPOVER_USER_INFO] = UserInfoPopover

app/javascript/gabsocial/components/popover/status_share_popover.js

@@ -0,0 +1,99 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { connect } from 'react-redux'
+import { defineMessages, injectIntl } from 'react-intl'
+import { openModal } from '../../actions/modal'
+import { closePopover } from '../../actions/popover'
+import {
+  MODAL_EMBED,
+} from '../../constants'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+class StatusSharePopover extends ImmutablePureComponent {
+
+  handleOnOpenEmbedModal = () => {
+    this.props.onOpenEmbedModal(this.props.status.get('url'))
+    this.props.onClosePopover()
+  }
+
+  handleCopy = () => {
+    const url = this.props.status.get('url')
+    const textarea = document.createElement('textarea')
+
+    textarea.textContent = url
+    textarea.style.position = 'fixed'
+
+    document.body.appendChild(textarea)
+
+    try {
+      textarea.select()
+      document.execCommand('copy')
+    } catch (e) {
+      //
+    }
+
+    document.body.removeChild(textarea)
+    this.handleClosePopover()
+  }
+
+  handleClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const { intl, status } = this.props
+
+    const mailToHref = !status ? undefined : `mailto:?subject=Gab&body=${status.get('url')}`
+
+    return (
+      <PopoverLayout width={240}>
+        <List
+          size='small'
+          scrollKey='profile_options'
+          items={[
+            {
+              title: intl.formatMessage(messages.copy),
+              onClick: this.handleCopy,
+            },
+            {
+              title: intl.formatMessage(messages.email),
+              href: mailToHref,
+            },
+            {
+              title: intl.formatMessage(messages.embed),
+              onClick: this.handleOnOpenEmbedModal,
+            },
+          ]}
+        />
+      </PopoverLayout>
+    )
+  }
+}
+
+const messages = defineMessages({
+  embed: { id: 'status.embed', defaultMessage: 'Embed' },
+  email: { id: 'status.email', defaultMessage: 'Email this gab' },
+  copy: { id: 'status.copy', defaultMessage: 'Copy link to status' },
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onOpenEmbedModal(url) {
+    dispatch(closePopover())
+    dispatch(openModal(MODAL_EMBED, {
+      url,
+    }))
+  },
+  onClosePopover: () => dispatch(closePopover()),
+})
+
+StatusSharePopover.propTypes = {
+  intl: PropTypes.object.isRequired,
+  onOpenEmbedModal: PropTypes.func.isRequired,
+  onClosePopover: PropTypes.func.isRequired,
+  status: ImmutablePropTypes.map.isRequired,
+}
+
+export default injectIntl(connect(null, mapDispatchToProps)(StatusSharePopover))

app/javascript/gabsocial/constants.js

@@ -33,6 +33,7 @@ export const POPOVER_PROFILE_OPTIONS = 'PROFILE_OPTIONS'
 export const POPOVER_SIDEBAR_MORE = 'SIDEBAR_MORE'
 export const POPOVER_STATUS_OPTIONS = 'STATUS_OPTIONS'
 export const POPOVER_STATUS_EXPIRATION_OPTIONS = 'STATUS_EXPIRATION_OPTIONS'
+export const POPOVER_STATUS_SHARE = 'STATUS_SHARE'
 export const POPOVER_STATUS_VISIBILITY = 'STATUS_VISIBILITY'
 export const POPOVER_TIMELINE_INJECTION_OPTIONS = 'TIMELINE_INJECTION_OPTIONS'
 export const POPOVER_USER_INFO = 'USER_INFO'

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

@@ -108,6 +108,7 @@ export function SignUpPanel() { return import(/* webpackChunkName: "components/s
 export function StatusExpirationOptionsPopover() { return import(/* webpackChunkName: "components/status_expiration_options_popover" */'../../../components/popover/status_expiration_options_popover') }
 export function StatusLikes() { return import(/* webpackChunkName: "features/status_likes" */'../../status_likes') }
 export function StatusOptionsPopover() { return import(/* webpackChunkName: "components/status_options_popover" */'../../../components/popover/status_options_popover') }
+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 StatusLikesModal() { return import(/* webpackChunkName: "modals/status_likes_modal" */'../../../components/modal/status_likes_modal') }