admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BOD-14 More CSS issues for messaging.

Browse Source
This commit is contained in:
Patrick Fic
2020-03-27 18:27:22 -07:00
parent 644737e1c3
commit d1148974ee
7 changed files with 95 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
View File

@@ -1,8 +1,12 @@
import { ShrinkOutlined } from "@ant-design/icons"; import { ShrinkOutlined } from "@ant-design/icons";
import { Avatar, Badge, Col, List, Row } from "antd"; import { Badge } from "antd";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { openConversation, toggleChatVisible } from "../../redux/messaging/messaging.actions"; import {
openConversation,
toggleChatVisible
} from "../../redux/messaging/messaging.actions";
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
toggleChatVisible: () => dispatch(toggleChatVisible()), toggleChatVisible: () => dispatch(toggleChatVisible()),
@@ -14,40 +18,23 @@ export function ChatConversationListComponent({
conversationList, conversationList,
openConversation openConversation
}) { }) {
return ( return (
<div className='chat-overlay-open'> <div className='chat-overlay-open'>
<Row> <ShrinkOutlined onClick={() => toggleChatVisible()} />
<Col span={12}>Title</Col> {conversationList.map(item => (
<Col span={2} offset={10}> <Badge count={item.messages_aggregate.aggregate.count || 0}>
<ShrinkOutlined onClick={() => toggleChatVisible()} /> <div
</Col> key={item.id}
</Row> style={{ cursor: "pointer", display: "block" }}
<Row> onClick={() =>
<Col span={24}> openConversation({ phone_num: item.phone_num, id: item.id })
<List }>
dataSource={conversationList} <div>
renderItem={item => ( <PhoneNumberFormatter>{item.phone_num}</PhoneNumberFormatter>
<Badge count={item.messages_aggregate.aggregate.count || 0}> </div>
<List.Item </div>
key={item.id} </Badge>
style={{ cursor: "pointer" }} ))}
onClick={() =>
openConversation({ phone_num: item.phone_num, id: item.id })
}>
<List.Item.Meta
avatar={
<Avatar src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png' />
}
title={item.phone_num}
description='Some sort of RO info? '
/>
</List.Item>
</Badge>
)}
/>
</Col>
</Row>
</div> </div>
); );
} }

20
client/src/components/chat-conversation/chat-conversation.closed.component.jsx
View File

@@ -1,4 +1,4 @@
import { Button } from "antd"; import { CloseCircleFilled } from "@ant-design/icons";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { import {
@@ -21,17 +21,13 @@ function ChatConversationClosedComponent({
closeConversation closeConversation
}) { }) {
return ( return (
<div> <div
<div onClick={() => toggleConversationVisible(conversation.id)}> className='chat-conversation-closed'
<PhoneFormatter>{conversation.phone_num}</PhoneFormatter> onClick={() => toggleConversationVisible(conversation.id)}>
</div> <PhoneFormatter>{conversation.phone_num}</PhoneFormatter>
<Button <CloseCircleFilled
type='dashed' onClick={() => closeConversation(conversation.phone_num)}
style={{ alignSelf: "right" }} />
shape='circle-outline'
onClick={() => closeConversation(conversation.phone_num)}>
X
</Button>
</div> </div>
); );
} }

29
client/src/components/chat-conversation/chat-conversation.component.jsx
View File

@@ -2,7 +2,6 @@ import { Badge, Card } from "antd";
import React from "react"; import React from "react";
import ChatConversationClosedComponent from "./chat-conversation.closed.component"; import ChatConversationClosedComponent from "./chat-conversation.closed.component";
import ChatConversationOpenComponent from "./chat-conversation.open.component"; import ChatConversationOpenComponent from "./chat-conversation.open.component";
import "./chat-conversation.styles.scss"; //https://bootsnipp.com/snippets/exR5v
export default function ChatConversationComponent({ export default function ChatConversationComponent({
conversation, conversation,
@@ -11,18 +10,20 @@ export default function ChatConversationComponent({
unreadCount unreadCount
}) { }) {
return ( return (
<Badge count={unreadCount}> <div className='chat-conversation'>
<Card className='chat-overlay' size='small'> <Badge count={unreadCount}>
{conversation.open ? ( <Card size='small'>
<ChatConversationOpenComponent {conversation.open ? (
messages={messages} <ChatConversationOpenComponent
conversation={conversation} messages={messages}
subState={subState} conversation={conversation}
/> subState={subState}
) : ( />
<ChatConversationClosedComponent conversation={conversation} /> ) : (
)} <ChatConversationClosedComponent conversation={conversation} />
</Card> )}
</Badge> </Card>
</Badge>
</div>
); );
} }

21
client/src/components/chat-conversation/chat-conversation.open.component.jsx
View File

@@ -1,13 +1,22 @@
import React from "react"; import React from "react";
import { connect } from "react-redux";
import { toggleConversationVisible } from "../../redux/messaging/messaging.actions";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component";
import ChatSendMessage from "../chat-send-message/chat-send-message.component"; import ChatSendMessage from "../chat-send-message/chat-send-message.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component"; import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component"; import { ShrinkOutlined } from "@ant-design/icons";
export default function ChatConversationOpenComponent({ const mapDispatchToProps = dispatch => ({
toggleConversationVisible: conversation =>
dispatch(toggleConversationVisible(conversation))
});
export function ChatConversationOpenComponent({
conversation, conversation,
messages, messages,
subState subState,
toggleConversationVisible
}) { }) {
const [loading, error] = subState; const [loading, error] = subState;
@@ -15,9 +24,13 @@ export default function ChatConversationOpenComponent({
if (error) return <AlertComponent message={error.message} type='error' />; if (error) return <AlertComponent message={error.message} type='error' />;
return ( return (
<div className='chat-overlay-open'> <div className='chat-conversation-open'>
<ShrinkOutlined
onClick={() => toggleConversationVisible(conversation.id)}
/>
<ChatMessageListComponent messages={messages} /> <ChatMessageListComponent messages={messages} />
<ChatSendMessage conversation={conversation} /> <ChatSendMessage conversation={conversation} />
</div> </div>
); );
} }
export default connect(null, mapDispatchToProps)(ChatConversationOpenComponent);

6
client/src/components/chat-dock/chat-dock.container.jsx
View File

@@ -4,7 +4,8 @@ import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { selectConversations } from "../../redux/messaging/messaging.selectors"; import { selectConversations } from "../../redux/messaging/messaging.selectors";
import ChatConversationContainer from "../chat-conversation/chat-conversation.container"; import ChatConversationContainer from "../chat-conversation/chat-conversation.container";
import ChatMessagesButtoContainer from "../chat-messages-button/chat-messages-button.container"; import ChatMessagesButtonContainer from "../chat-messages-button/chat-messages-button.container";
import "./chat-dock.styles.scss";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
activeConversations: selectConversations activeConversations: selectConversations
@@ -14,8 +15,7 @@ export function ChatOverlayContainer({ activeConversations }) {
return ( return (
<Affix offsetBottom={0}> <Affix offsetBottom={0}>
<div className='chat-dock'> <div className='chat-dock'>
<ChatMessagesButtoContainer /> <ChatMessagesButtonContainer />
{activeConversations {activeConversations
? activeConversations.map(conversation => ( ? activeConversations.map(conversation => (
<ChatConversationContainer <ChatConversationContainer

40
client/src/components/chat-conversation/chat-conversation.styles.scss → client/src/components/chat-dock/chat-dock.styles.scss
View File

@@ -1,29 +1,19 @@
// .chat-overlay-wrapper { .chat-dock {
// width: 95vw; z-index: 5;
// } //overflow-x: scroll;
// .chat-overlay-scroller { // overflow-y: hidden;
// overflow-x: scroll; width: 100%;
// overflow-y: hidden; display: flex;
// vertical-align: bottom; align-items: baseline;
// } }
// .chat-overlay {
// margin: 0px 12px;
// display: inline-block;
// }
// .chat-overlay-open {
// width: 400px;
// height: 33vh;
// display: flex;
// flex-flow: column;
// }
// .chat-overlay-closed {
// display: flex;
// justify-content: space-between;
// vertical-align: middle;
// width: 150px;
// cursor: pointer;
// }
.chat-conversation {
margin: 2em 1em 0em 1em;
}
.chat-conversation-open {
height: 500px;
}
// .chat-messages { // .chat-messages {
// height: 80%; // height: 80%;
// overflow-x: hidden; // overflow-x: hidden;

28
client/src/components/chat-messages-button/chat-messages-button.component.jsx
View File

@@ -23,18 +23,22 @@ export function ChatWindowComponent({
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Badge count={unreadCount}> <div className='chat-conversation'>
<Card size='small'> <Badge count={unreadCount}>
{chatVisible ? ( <Card size='small'>
<ChatConversationListComponent conversationList={conversationList} /> {chatVisible ? (
) : ( <ChatConversationListComponent
<div onClick={() => toggleChatVisible()}> conversationList={conversationList}
<MessageFilled /> />
<strong>{t("messaging.labels.messaging")}</strong> ) : (
</div> <div onClick={() => toggleChatVisible()}>
)} <MessageFilled />
</Card> <strong>{t("messaging.labels.messaging")}</strong>
</Badge> </div>
)}
</Card>
</Badge>
</div>
); );
} }
export default connect( export default connect(