From d8ac8cfcac8cfa45b66f7883b642b7ea072fca23 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Tue, 12 Jan 2021 00:13:39 -0300 Subject: [PATCH 1/6] component implementation --- app/ui/client/views/app/room.html | 6 +-- .../views/room/Announcement/Announcement.js | 39 +++++++++++++++++++ .../room/Announcement/Announcement.stories.js | 11 ++++++ .../room/Announcement/AnnouncementModal.js | 31 +++++++++++++++ client/views/room/Announcement/index.js | 3 ++ client/views/room/adapters.js | 4 ++ 6 files changed, 89 insertions(+), 5 deletions(-) create mode 100644 client/views/room/Announcement/Announcement.js create mode 100644 client/views/room/Announcement/Announcement.stories.js create mode 100644 client/views/room/Announcement/AnnouncementModal.js create mode 100644 client/views/room/Announcement/index.js diff --git a/app/ui/client/views/app/room.html b/app/ui/client/views/app/room.html index 5777301d0252..62fad53ef5ca 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}} {{/unless}}
{{#with unreadData}} diff --git a/client/views/room/Announcement/Announcement.js b/client/views/room/Announcement/Announcement.js new file mode 100644 index 000000000000..9acd63e2e9ac --- /dev/null +++ b/client/views/room/Announcement/Announcement.js @@ -0,0 +1,39 @@ +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 { useUserRoom } from '../../../contexts/UserContext'; + +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 ({ rid }) => { + const room = useUserRoom(rid); + const { announcement } = room; + + const setModal = useSetModal(); + const closeModal = useMutableCallback(() => setModal()); + + const handleClick = () => setModal({announcement}); + + return announcement && {announcement}; +}; 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 a9129cb3a9d6..099f7dbad81c 100644 --- a/client/views/room/adapters.js +++ b/client/views/room/adapters.js @@ -89,3 +89,7 @@ createTemplateForComponent('UserInfoWithData', () => import('./contextualBar/Use createTemplateForComponent('channelFilesList', () => import('./contextualBar/RoomFiles/RoomFiles'), { renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap }); + +createTemplateForComponent('RoomAnnouncement', () => import('./Announcement'), { + renderContainerView: () => HTML.DIV(), // eslint-disable-line new-cap +}); From 3b6c54484e81e026bc184ba60f3f032f1b240a10 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Tue, 12 Jan 2021 01:35:36 -0300 Subject: [PATCH 2/6] remove old style --- app/theme/client/imports/general/base_old.css | 128 ------------------ 1 file changed, 128 deletions(-) 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; From 7a7990a6ff7325de5141df76f4b78a9033126000 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Tue, 12 Jan 2021 01:42:18 -0300 Subject: [PATCH 3/6] announcement instance fix --- app/ui/client/views/app/room.html | 2 +- client/views/room/Announcement/Announcement.js | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/app/ui/client/views/app/room.html b/app/ui/client/views/app/room.html index 62fad53ef5ca..38a161a2337f 100644 --- a/app/ui/client/views/app/room.html +++ b/app/ui/client/views/app/room.html @@ -5,7 +5,7 @@
{{_ dragAndDropLabel}}
{{#unless embeddedVersion}} - {{> RoomAnnouncement}} + {{> RoomAnnouncement announcement=announcement }} {{/unless}}
{{#with unreadData}} diff --git a/client/views/room/Announcement/Announcement.js b/client/views/room/Announcement/Announcement.js index 9acd63e2e9ac..fcddf4ddfcb9 100644 --- a/client/views/room/Announcement/Announcement.js +++ b/client/views/room/Announcement/Announcement.js @@ -6,7 +6,6 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import AnnouncementModal from './AnnouncementModal'; import { useSetModal } from '../../../contexts/ModalContext'; -import { useUserRoom } from '../../../contexts/UserContext'; export const Announcement = ({ children, onClickOpen }) => { const clickable = css` @@ -26,13 +25,9 @@ export const Announcement = ({ children, onClickOpen }) => { return {children}; }; -export default ({ rid }) => { - const room = useUserRoom(rid); - const { announcement } = room; - +export default ({ announcement }) => { const setModal = useSetModal(); const closeModal = useMutableCallback(() => setModal()); - const handleClick = () => setModal({announcement}); return announcement && {announcement}; From e7943f488a54a4a4fe5457599d04fd2b2431fdb7 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Fri, 15 Jan 2021 18:55:32 -0300 Subject: [PATCH 4/6] fix announcementDetails --- app/ui/client/views/app/room.html | 2 +- app/ui/client/views/app/room.js | 26 ++++++------------- client/components/MarkdownText.js | 4 +-- .../views/room/Announcement/Announcement.js | 11 +++++--- 4 files changed, 18 insertions(+), 25 deletions(-) diff --git a/app/ui/client/views/app/room.html b/app/ui/client/views/app/room.html index 38a161a2337f..612f0288b3fe 100644 --- a/app/ui/client/views/app/room.html +++ b/app/ui/client/views/app/room.html @@ -5,7 +5,7 @@
{{_ dragAndDropLabel}}
{{#unless embeddedVersion}} - {{> RoomAnnouncement announcement=announcement }} + {{> 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/views/room/Announcement/Announcement.js b/client/views/room/Announcement/Announcement.js index fcddf4ddfcb9..206cd53bcd81 100644 --- a/client/views/room/Announcement/Announcement.js +++ b/client/views/room/Announcement/Announcement.js @@ -6,6 +6,7 @@ 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` @@ -22,13 +23,15 @@ export const Announcement = ({ children, onClickOpen }) => { color: ${ colors.b800 }; }`; - return {children}; + return {children}; }; -export default ({ announcement }) => { +export default ({ announcement, announcementDetails }) => { const setModal = useSetModal(); const closeModal = useMutableCallback(() => setModal()); - const handleClick = () => setModal({announcement}); + const handleClick = () => { + announcementDetails ? announcementDetails() : setModal({announcement}); + }; - return announcement && {announcement}; + return announcement ? : false; }; From 553654ec41c077ec49ab75699f0192ba1d67baed Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Tue, 19 Jan 2021 13:33:13 -0300 Subject: [PATCH 5/6] Fix review --- client/views/room/Announcement/Announcement.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/views/room/Announcement/Announcement.js b/client/views/room/Announcement/Announcement.js index 206cd53bcd81..d647a46ef5ab 100644 --- a/client/views/room/Announcement/Announcement.js +++ b/client/views/room/Announcement/Announcement.js @@ -23,7 +23,7 @@ export const Announcement = ({ children, onClickOpen }) => { color: ${ colors.b800 }; }`; - return {children}; + return {children}; }; export default ({ announcement, announcementDetails }) => { From 4b9392caa9d2b42294158ddad761d693dd0cb0c2 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Tue, 19 Jan 2021 13:49:54 -0300 Subject: [PATCH 6/6] Fix TS --- client/components/Message/Attachments/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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) && }