diff --git a/src/react-components/room/ChatSidebar.js b/src/react-components/room/ChatSidebar.js index c7dab949fa..ce0e03436b 100644 --- a/src/react-components/room/ChatSidebar.js +++ b/src/react-components/room/ChatSidebar.js @@ -7,6 +7,7 @@ import { ReactComponent as WandIcon } from "../icons/Wand.svg"; import { ReactComponent as AttachIcon } from "../icons/Attach.svg"; import { ReactComponent as SendIcon } from "../icons/Send.svg"; import { ReactComponent as ReactionIcon } from "../icons/Reaction.svg"; +import { ReactComponent as ShareIcon } from "../icons/Share.svg"; import { IconButton } from "../input/IconButton"; import { TextAreaInput } from "../input/TextAreaInput"; import { Popover } from "../popover/Popover"; @@ -15,6 +16,8 @@ import styles from "./ChatSidebar.scss"; import { formatMessageBody } from "../../utils/chat-message"; import { FormattedMessage, useIntl, defineMessages, FormattedRelativeTime } from "react-intl"; import { permissionMessage } from "./PermissionNotifications"; +import { share } from "../../utils/share"; +import configs from "../../utils/configs"; export function SpawnMessageButton(props) { return ( @@ -377,7 +380,21 @@ MessageBubble.propTypes = { permission: PropTypes.bool }; -function getMessageComponent(message) { +function getMessageComponent(message, intl) { + const onShareClick = async () => { + try { + await share({ + url: message.body?.src, + title: intl.formatMessage( + { id: "photo-message.default-tweet", defaultMessage: "Taken in {shareHashtag}" }, + { shareHashtag: configs.translation("share-hashtag") } + ) + }); + } catch (error) { + console.error(`while sharing (from chat sidebar):`, error); + } + }; + switch (message.type) { case "chat": { const { formattedBody, monospace, emoji } = formatMessageBody(message.body); @@ -391,6 +408,13 @@ function getMessageComponent(message) { return ( ); case "image": @@ -398,6 +422,13 @@ function getMessageComponent(message) { return ( + + + ); case "permission": diff --git a/src/react-components/room/ChatSidebar.scss b/src/react-components/room/ChatSidebar.scss index 2cccdfbc7f..2388de1869 100644 --- a/src/react-components/room/ChatSidebar.scss +++ b/src/react-components/room/ChatSidebar.scss @@ -47,6 +47,9 @@ padding: 10px 16px; max-width: 80%; width: max-content; + display: flex; + flex-direction: row; + justify-content: start; font-size: theme.$font-size-md; overflow-wrap: break-word; line-height: 1.25; @@ -71,6 +74,8 @@ background-color: theme.$chat-bubble-bg-color-sent; color: theme.$chat-bubble-text-color-sent; align-self: flex-end; + flex-direction: row-reverse; + justify-content: end; a { color: theme.$chat-bubble-text-color-sent; @@ -134,6 +139,24 @@ } } +:local(.icon-button) { + width: 48px; + height: 48px; + display: flex; + flex-shrink: 0; + justify-content: center; + align-items: center; + cursor: pointer; + border-radius: 18px; + background-color: transparent; + + &:hover { + @media (pointer: fine) { + color: theme.$primary-color-hover; + } + } +} + :local(.chat-input-warning) { padding-top: theme.$spacing-2xs; }