wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-04 03:37:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix story message boxes to wrap text properly (#2761)

Browse Source 
Need to set the message content width so that
the text knows how to wrap. Also accounts for
when the icon is present to set width to the
correct value so it doesn't shift past the edge
of the message box container.

CORL-802

Co-authored-by: Kim Gardner <kgardnr@gmail.com>
This commit is contained in:
Nick Funk
2019-12-20 15:25:55 -07:00
committed by Kim Gardner
parent 8c6f12c24d
commit fd1ee39db4
5 changed files with 33 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/tabs/Comments/Stream/MessageBoxContainer.css
+7
View File
@@ -0,0 +1,7 @@
.withIcon {
width: calc(100% - 18px - var(--spacing-3));
}
.withoutIcon {
width: 100%;
}
src/core/client/stream/tabs/Comments/Stream/MessageBoxContainer.tsx
+7 -1
View File
@@ -10,6 +10,8 @@ import {
import { MessageBoxContainer_story as StoryData } from "coral-stream/__generated__/MessageBoxContainer_story.graphql";
import styles from "./MessageBoxContainer.css";
interface Props {
story: StoryData;
className?: string;
@@ -24,7 +26,11 @@ const MessageBoxContainer: FunctionComponent<Props> = ({
{story.settings.messageBox.icon && (
<MessageBoxIcon>{story.settings.messageBox.icon}</MessageBoxIcon>
)}
<MessageBoxContent>
<MessageBoxContent
className={
story.settings.messageBox.icon ? styles.withIcon : styles.withoutIcon
}
>
{story.settings.messageBox.content || ""}
</MessageBoxContent>
</MessageBox>
src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.css
+8
View File
@@ -1,3 +1,11 @@
.preview {
text-transform: uppercase;
}
.withIcon {
width: calc(100% - 18px - var(--spacing-3));
}
.withoutIcon {
width: 100%;
}
src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig.tsx
+7 -1
View File
@@ -95,7 +95,13 @@ const MessageBoxConfig: FunctionComponent<Props> = ({ disabled }) => (
<MessageBoxIcon>{iconInput.value}</MessageBoxIcon>
)}
{/* Using a zero width join character to ensure that the space is used */}
<MessageBoxContent>
<MessageBoxContent
className={
iconInput.value
? styles.withIcon
: styles.withoutIcon
}
>
{contentInput.value || "&nbsp;"}
</MessageBoxContent>
</MessageBox>
src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+4 -4
View File
@@ -74,7 +74,7 @@ exports[`renders message box when commenting disabled 1`] = `
chat
</i>
<div
className="Markdown-root MessageBoxContent-root"
className="Markdown-root MessageBoxContent-root MessageBoxContainer-withIcon"
dangerouslySetInnerHTML={
Object {
"__html": "<p><strong>What do you think</strong>?</p>
@@ -279,7 +279,7 @@ exports[`renders message box when logged in 1`] = `
chat
</i>
<div
className="Markdown-root MessageBoxContent-root"
className="Markdown-root MessageBoxContent-root MessageBoxContainer-withIcon"
dangerouslySetInnerHTML={
Object {
"__html": "<p><strong>What do you think</strong>?</p>
@@ -597,7 +597,7 @@ exports[`renders message box when not logged in 1`] = `
chat
</i>
<div
className="Markdown-root MessageBoxContent-root"
className="Markdown-root MessageBoxContent-root MessageBoxContainer-withIcon"
dangerouslySetInnerHTML={
Object {
"__html": "<p><strong>What do you think</strong>?</p>
@@ -889,7 +889,7 @@ exports[`renders message box when story isClosed 1`] = `
className="MessageBox-root coral coral-createComment-message PostCommentFormClosed-messageBox"
>
<div
className="Markdown-root MessageBoxContent-root"
className="Markdown-root MessageBoxContent-root MessageBoxContainer-withoutIcon"
dangerouslySetInnerHTML={
Object {
"__html": "<p><strong>What do you think</strong>?</p>