diff --git a/app/javascript/gabsocial/components/popover/popover_root.js b/app/javascript/gabsocial/components/popover/popover_root.js index 0ca4e02c..bffef7ae 100644 --- a/app/javascript/gabsocial/components/popover/popover_root.js +++ b/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 diff --git a/app/javascript/gabsocial/components/popover/status_share_popover.js b/app/javascript/gabsocial/components/popover/status_share_popover.js new file mode 100644 index 00000000..e8ba3ac0 --- /dev/null +++ b/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 ( + + + + ) + } +} + +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)) diff --git a/app/javascript/gabsocial/constants.js b/app/javascript/gabsocial/constants.js index a3ec490a..ed5d65e3 100644 --- a/app/javascript/gabsocial/constants.js +++ b/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' diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js index 16ea94c0..7088260a 100644 --- a/app/javascript/gabsocial/features/ui/util/async_components.js +++ b/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') }