From da6590320b1863a9fe317dd391c7c1a6f309dad9 Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Wed, 15 Jul 2020 17:08:43 +0200
Subject: [PATCH] feat: add placeholder for empty conversations and display
name
---
.../component-chat/src/Messages/Messages.jsx | 12 +++++++++++-
app/components/component-chat/src/Messages/style.js | 8 ++++++++
2 files changed, 19 insertions(+), 1 deletion(-)
diff --git a/app/components/component-chat/src/Messages/Messages.jsx b/app/components/component-chat/src/Messages/Messages.jsx
index 488c8002e4..cc8e3a25b2 100644
--- a/app/components/component-chat/src/Messages/Messages.jsx
+++ b/app/components/component-chat/src/Messages/Messages.jsx
@@ -22,6 +22,7 @@ import {
Bubble,
InnerMessageContainer,
Byline,
+ Placeholder,
} from './style'
const GET_MESSAGES = gql`
@@ -37,6 +38,9 @@ const GET_MESSAGES = gql`
username
profilePicture
online
+ defaultIdentity {
+ name
+ }
}
}
pageInfo {
@@ -59,6 +63,9 @@ const MESSAGES_SUBSCRIPTION = gql`
username
profilePicture
online
+ defaultIdentity {
+ name
+ }
}
}
}
@@ -214,6 +221,9 @@ const Messages = ({ channelId }) => {
Show previous messages
</NextPageButton>
)}
+ {messages && !messages.length && (
+ <Placeholder>No discussion for this manuscript yet. Start by typing a message below.</Placeholder>
+ )}
{messages.map(group => {
const initialMessage = group[0]
if (
@@ -239,7 +249,7 @@ const Messages = ({ channelId }) => {
{index === 0 && <UserAvatar user={message.user} />}
</GutterContainer>
<InnerMessageContainer>
- {index === 0 && <Byline>{message.user.username}</Byline>}
+ {index === 0 && <Byline>{message.user.defaultIdentity.name}</Byline>}
<Bubble>
<MessageRenderer message={message} />
</Bubble>
diff --git a/app/components/component-chat/src/Messages/style.js b/app/components/component-chat/src/Messages/style.js
index 22b2e2dde3..022e90e840 100644
--- a/app/components/component-chat/src/Messages/style.js
+++ b/app/components/component-chat/src/Messages/style.js
@@ -138,3 +138,11 @@ export const EmbedComponent = styled.iframe`
height: 100%;
width: 100%;
`
+
+export const Placeholder = styled.div`
+ display: grid;
+ place-items: center;
+ color: ${th('colorTextPlaceholder')};
+ height: 100%;
+ padding: 4em;
+`
--
GitLab