diff --git a/app/theme/client/imports/general/base_old.css b/app/theme/client/imports/general/base_old.css index b48cdd16ebdd..a8d83ff986e0 100644 --- a/app/theme/client/imports/general/base_old.css +++ b/app/theme/client/imports/general/base_old.css @@ -893,134 +893,6 @@ animation: highlight 6s infinite; } -.rc-old .fixed-title { - display: flex; - - height: calc(var(--header-min-height) + 1px); - padding: 0 10px 0 20px; - - border-width: 0 0 1px; - align-items: center; - flex-flow: row nowrap; - flex-shrink: 0; - - &.visible h2 { - overflow: visible; - } - - & h2 { - overflow: hidden; - flex: 1; - - width: 100%; - - white-space: nowrap; - text-overflow: ellipsis; - - font-size: 22px; - font-weight: 500; - line-height: 29px; - - & .icon-at, - & .icon-hash, - & .icon-lock { - margin-right: -7px; - } - - & .icon-star, - & .icon-star-empty { - margin-right: -4px; - } - - & .iframe-toolbar { - white-space: nowrap; - flex-grow: 0; - } - } - - & .submit { - display: flex; - - & .button { - margin-left: 1rem; - - white-space: nowrap; - } - } - - & .animated-hidden { - display: none; - visibility: hidden; - } - - & input[type='text'] { - width: calc(100% - 100px); - margin-top: -4px; - margin-left: -3px; - - vertical-align: top; - - font-size: 20px; - } - - & .icon-pencil { - display: inline-block; - - margin-top: -7px; - - vertical-align: text-top; - - font-size: 16px; - } -} - -.rc-old .announcement { - display: flex; - - overflow: hidden; - - height: 40px; - padding: 0 20px; - - cursor: pointer; - text-align: center; - - color: var(--rc-color-content); - background-color: var(--primary-background-color); - - font-size: 1.2em; - line-height: 40px; - flex-flow: row nowrap; - - &.warning { - background-color: var(--rc-color-alert); - } - - &.error { - background-color: var(--rc-color-alert-message-warning); - } - - & ~ .container-bars { - top: 45px; - } - - a { - text-decoration: underline; - - color: currentColor; - } - - p { - overflow: hidden; - flex: auto; - - width: 0; /* Grow via flex. */ - - white-space: nowrap; - text-overflow: ellipsis; - } -} - .cms-page { display: flex; flex-direction: column; diff --git a/app/ui/client/views/app/room.html b/app/ui/client/views/app/room.html index 5777301d0252..612f0288b3fe 100644 --- a/app/ui/client/views/app/room.html +++ b/app/ui/client/views/app/room.html @@ -5,11 +5,7 @@
{{_ dragAndDropLabel}}
{{#unless embeddedVersion}} - {{#if announcement}} -
-

{{{announcement}}}

-
- {{/if}} + {{> RoomAnnouncement announcement=announcement announcementDetails=announcementDetails }} {{/unless}}
{{#with unreadData}} diff --git a/app/ui/client/views/app/room.js b/app/ui/client/views/app/room.js index c53e781560e9..6f33ad1ddccd 100644 --- a/app/ui/client/views/app/room.js +++ b/app/ui/client/views/app/room.js @@ -18,11 +18,9 @@ import { RoomHistoryManager, RoomManager, readMessage, - modal, Layout, } from '../../../../ui-utils/client'; import { messageContext } from '../../../../ui-utils/client/lib/messageContext'; -import { renderMessageBody } from '../../../../../client/lib/renderMessageBody'; import { messageArgs } from '../../../../ui-utils/client/lib/messageArgs'; import { settings } from '../../../../settings'; import { callbacks } from '../../../../callbacks'; @@ -264,6 +262,14 @@ Template.roomOld.helpers({ return announcement ? Markdown.parse(announcement).replace(/^

|<\/p>$/, '') : undefined; }, + announcementDetails() { + const roomData = Session.get(`roomData${ this._id }`); + if (!roomData) { return false; } + if (roomData.announcementDetails != null && roomData.announcementDetails.callback != null) { + return () => callbacks.run(roomData.announcementDetails.callback, this._id); + } + }, + messageboxData() { const { sendToBottomIfNecessaryDebounced, subscription } = Template.instance(); const { _id: rid } = this; @@ -512,22 +518,6 @@ Meteor.startup(() => { Template.roomOld.events({ ...getCommonRoomEvents(), ...dropzoneEvents, - 'click .announcement'() { - const roomData = Session.get(`roomData${ this._id }`); - if (!roomData) { return false; } - if (roomData.announcementDetails != null && roomData.announcementDetails.callback != null) { - return callbacks.run(roomData.announcementDetails.callback, this._id); - } - - modal.open({ - title: t('Announcement'), - text: renderMessageBody({ msg: roomData.announcement }), - html: true, - showConfirmButton: false, - showCancelButton: true, - cancelButtonText: t('Close'), - }); - }, 'click .toggle-hidden'(e) { const id = e.currentTarget.dataset.message; document.querySelector(`#${ id }`).classList.toggle('message--ignored'); diff --git a/client/components/MarkdownText.js b/client/components/MarkdownText.js index 67a02f21a0c1..eba2d322148a 100644 --- a/client/components/MarkdownText.js +++ b/client/components/MarkdownText.js @@ -12,10 +12,10 @@ const options = { headerIds: false, }; -function MarkdownText({ content, preserveHtml = false, ...props }) { +function MarkdownText({ content, preserveHtml = false, withRichContent = true, ...props }) { const __html = useMemo(() => content && marked(preserveHtml ? content : escapeHTML(content), options), [content, preserveHtml]); - return __html ? : null; + return __html ? : null; } export default MarkdownText; diff --git a/client/components/Message/Attachments/index.tsx b/client/components/Message/Attachments/index.tsx index 8413a02f8441..1587d1ce4d78 100644 --- a/client/components/Message/Attachments/index.tsx +++ b/client/components/Message/Attachments/index.tsx @@ -52,7 +52,7 @@ const isQuoteAttachment = (attachment: AttachmentPropsGeneric): attachment is Qu const isActionAttachment = (attachment: AttachmentPropsGeneric): attachment is ActionAttachmentProps => 'actions' in attachment; -const applyMarkdownIfRequires = (list: AttachmentProps['mrkdwn_in']) => (key: PossibleMarkdownFields, text: string): JSX.Element | string => (list?.includes(key) ? : text); +const applyMarkdownIfRequires = (list: AttachmentProps['mrkdwn_in']) => (key: PossibleMarkdownFields, text: string): JSX.Element | string => (list?.includes(key) ? : text); const Item: FC<{attachment: AttachmentPropsGeneric; file?: FileProp }> = memo(({ attachment, file = null }) => { if (isFileAttachment(attachment)) { @@ -73,7 +73,7 @@ const Item: FC<{attachment: AttachmentPropsGeneric; file?: FileProp }> = memo(({ } {attachment.title && {attachment.title} } {attachment.text && {applyMardownFor('text', attachment.text)}} - {attachment.fields && ({ ...rest, value: })) : attachment.fields} />} + {attachment.fields && ({ ...rest, value: })) : attachment.fields} />} {attachment.image_url && } {/* DEPRECATED */} {isActionAttachment(attachment) && } diff --git a/client/views/room/Announcement/Announcement.js b/client/views/room/Announcement/Announcement.js new file mode 100644 index 000000000000..d647a46ef5ab --- /dev/null +++ b/client/views/room/Announcement/Announcement.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { Box } from '@rocket.chat/fuselage'; +import { css } from '@rocket.chat/css-in-js'; +import colors from '@rocket.chat/fuselage-tokens/colors'; +import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; + +import AnnouncementModal from './AnnouncementModal'; +import { useSetModal } from '../../../contexts/ModalContext'; +import MarkdownText from '../../../components/MarkdownText'; + +export const Announcement = ({ children, onClickOpen }) => { + const clickable = css` + background-color: ${ colors.b200 }; + color: ${ colors.b600 }; + cursor: pointer; + transition: transform 0.2s ease-out; + > * { + flex: auto; + } + &:hover, + &:focus { + background-color: ${ colors.b300 }; + color: ${ colors.b800 }; + }`; + + return {children}; +}; + +export default ({ announcement, announcementDetails }) => { + const setModal = useSetModal(); + const closeModal = useMutableCallback(() => setModal()); + const handleClick = () => { + announcementDetails ? announcementDetails() : setModal({announcement}); + }; + + return announcement ? : false; +}; diff --git a/client/views/room/Announcement/Announcement.stories.js b/client/views/room/Announcement/Announcement.stories.js new file mode 100644 index 000000000000..84e0acad04a7 --- /dev/null +++ b/client/views/room/Announcement/Announcement.stories.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Announcement } from './Announcement'; + +export default { + title: 'components/Announcement', + component: Announcement, +}; + +export const Default = () => + Lorem Ipsum Indolor; diff --git a/client/views/room/Announcement/AnnouncementModal.js b/client/views/room/Announcement/AnnouncementModal.js new file mode 100644 index 000000000000..596d28804a3e --- /dev/null +++ b/client/views/room/Announcement/AnnouncementModal.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { Button, ButtonGroup, Box, Modal } from '@rocket.chat/fuselage'; + +import { useTranslation } from '../../../contexts/TranslationContext'; +import MarkdownText from '../../../components/MarkdownText'; + +export default ({ + onClose, + confirmLabel = 'Close', + children, + ...props +}) => { + const t = useTranslation(); + + return ( + + + {t('Announcement')} + + + + + + + + + + + + ); +}; diff --git a/client/views/room/Announcement/index.js b/client/views/room/Announcement/index.js new file mode 100644 index 000000000000..58dc394c3f87 --- /dev/null +++ b/client/views/room/Announcement/index.js @@ -0,0 +1,3 @@ +import Announcement from './Announcement'; + +export default Announcement; diff --git a/client/views/room/adapters.js b/client/views/room/adapters.js index ac4bafe4faa7..b6543c92c417 100644 --- a/client/views/room/adapters.js +++ b/client/views/room/adapters.js @@ -90,6 +90,10 @@ createTemplateForComponent('channelFilesList', () => import('./contextualBar/Roo renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap }); +createTemplateForComponent('RoomAnnouncement', () => import('./Announcement'), { + renderContainerView: () => HTML.DIV(), // eslint-disable-line new-cap +}); + createTemplateForComponent('PruneMessages', () => import('./contextualBar/PruneMessages'), { renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap });