configurable size and position of chatbox

This commit is contained in:
Sharon Kennedy 2020-06-25 21:56:55 -04:00
parent 706791cc38
commit 5ed83271d9
4 changed files with 82 additions and 15 deletions

View File

@ -23,6 +23,8 @@
exitMessage: 'The chat is closed. You may close this window.', exitMessage: 'The chat is closed. You may close this window.',
chatUnavailableMessage: 'The chat service is not available right now. Please try again later.', chatUnavailableMessage: 'The chat service is not available right now. Please try again later.',
anonymousDisplayName: 'Anonymous', anonymousDisplayName: 'Anonymous',
position: 'bottom right',
size: 'large',
} }
EmbeddableChatbox.mount(config); EmbeddableChatbox.mount(config);

View File

@ -26,14 +26,56 @@
} }
} }
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0);
display: inherit;
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes slideOutUp {
from {
transform: translate3d(0, 0, 0);
}
to {
display: none;
visibility: hidden;
transform: translate3d(0, -100%, 0);
}
}
.docked-widget { .docked-widget {
position: fixed; position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999; z-index: 9999;
width: 400px;
max-width: 100vw; max-width: 100vw;
font-size: $base-font-size; font-size: $base-font-size;
&.size-large {
width: 400px;
.dock {
width: 400px;
}
}
&.size-small {
#open-chatbox-label {
display: flex;
align-items: center;
.icon {
margin-left: 0.5em;
font-size: 1.2em;
}
}
}
} }
.dock { .dock {
@ -41,7 +83,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 400px;
max-width: calc(100vw - 10px); max-width: calc(100vw - 10px);
color: $white; color: $white;
font-family: $theme-font; font-family: $theme-font;
@ -53,6 +94,7 @@
background-color: transparent; background-color: transparent;
padding: 5px; padding: 5px;
#open-chatbox-label { #open-chatbox-label {
background: $theme-color; background: $theme-color;
padding: 0.75em; padding: 0.75em;
@ -105,6 +147,10 @@
&-entering { &-entering {
animation-name: slideInUp; animation-name: slideInUp;
&.position-top {
animation-name: slideInDown;
}
} }
&-entered { &-entered {
display: inherit; display: inherit;
@ -112,6 +158,10 @@
} }
&-exiting { &-exiting {
animation-name: slideOutDown; animation-name: slideOutDown;
&.position-top {
animation-name: slideOutUp;
}
} }
&-exited { &-exited {
display: none; display: none;

View File

@ -40,6 +40,8 @@ const DEFAULT_CHAT_UNAVAILABLE_MESSAGE = "The chat service is not available righ
const DEFAULT_CHAT_OFFLINE_MESSAGE = "All of the chat facilitators are currently offline." const DEFAULT_CHAT_OFFLINE_MESSAGE = "All of the chat facilitators are currently offline."
const DEFAULT_WAIT_MESSAGE = "Please be patient, our online facilitators are currently responding to other support requests." const DEFAULT_WAIT_MESSAGE = "Please be patient, our online facilitators are currently responding to other support requests."
const DEFAULT_ENCRYPTION_DISABLED = false const DEFAULT_ENCRYPTION_DISABLED = false
const DEFAULT_POSITION = 'bottom right'
const DEFAULT_SIZE = 'large'
class ChatBox extends React.Component { class ChatBox extends React.Component {
@ -638,14 +640,15 @@ class ChatBox extends React.Component {
const { ready, messages, messagesInFlight, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state; const { ready, messages, messagesInFlight, inputValue, userId, roomId, typingStatus, opened, showDock, emojiSelectorOpen, isMobile, decryptionErrors } = this.state;
const orderedMessages = Object.values(messages).sort((a,b) => a.timestamp - b.timestamp) const orderedMessages = Object.values(messages).sort((a,b) => a.timestamp - b.timestamp)
const inputLabel = 'Send a message...' const inputLabel = 'Send a message...'
const [positionY, positionX] = this.props.position.split(' ')
return ( return (
<div id="safesupport"> <div id="safesupport">
<div className="docked-widget" role="complementary"> <div className={`docked-widget size-${this.props.size}`} role="complementary" style={{ [positionY]: '10px', [positionX]: '10px' }}>
<Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}> <Transition in={opened} timeout={250} onExited={this.handleWidgetExit} onEntered={this.handleWidgetEnter}>
{(status) => { {(status) => {
return ( return (
<div className={`widget widget-${status}`} aria-hidden={!opened}> <div className={`widget widget-${status} position-${positionY}`} aria-hidden={!opened}>
<div id="safesupport-chatbox" aria-haspopup="dialog"> <div id="safesupport-chatbox" aria-haspopup="dialog">
<Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} /> <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
@ -736,7 +739,7 @@ class ChatBox extends React.Component {
)} )}
} }
</Transition> </Transition>
{showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} />} {showDock && !roomId && <Dock handleToggleOpen={this.handleToggleOpen} size={this.props.size} />}
{showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />} {showDock && roomId && <Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />}
</div> </div>
</div> </div>
@ -758,6 +761,8 @@ ChatBox.propTypes = {
waitMessage: PropTypes.string, waitMessage: PropTypes.string,
chatOfflineMessage: PropTypes.string, chatOfflineMessage: PropTypes.string,
isEncryptionDisabled: PropTypes.bool, isEncryptionDisabled: PropTypes.bool,
position: PropTypes.oneOf(['top left', 'top right', 'bottom left', 'bottom right']),
size: PropTypes.oneOf(['small', 'large'])
} }
ChatBox.defaultProps = { ChatBox.defaultProps = {
@ -773,7 +778,9 @@ ChatBox.defaultProps = {
chatUnavailableMessage: DEFAULT_CHAT_UNAVAILABLE_MESSAGE, chatUnavailableMessage: DEFAULT_CHAT_UNAVAILABLE_MESSAGE,
waitMessage: DEFAULT_WAIT_MESSAGE, waitMessage: DEFAULT_WAIT_MESSAGE,
chatOfflineMessage: DEFAULT_CHAT_OFFLINE_MESSAGE, chatOfflineMessage: DEFAULT_CHAT_OFFLINE_MESSAGE,
isEncryptionDisabled: DEFAULT_ENCRYPTION_DISABLED isEncryptionDisabled: DEFAULT_ENCRYPTION_DISABLED,
position: DEFAULT_POSITION,
size: DEFAULT_SIZE,
} }
export default ChatBox; export default ChatBox;

View File

@ -1,8 +1,7 @@
import React from "react" import React, { Fragment } from "react"
import PropTypes from "prop-types" import PropTypes from "prop-types"
const Dock = ({ handleToggleOpen }) => { const Dock = ({ handleToggleOpen, size }) => {
return( return(
<button <button
type="button" type="button"
@ -11,10 +10,19 @@ const Dock = ({ handleToggleOpen }) => {
onKeyPress={handleToggleOpen} onKeyPress={handleToggleOpen}
aria-labelledby="open-chatbox-label" aria-labelledby="open-chatbox-label"
> >
{
size === 'small' ?
<div id="open-chatbox-label">
<span>Chat</span><span className="icon">+</span>
</div>
:
<Fragment>
<div id="open-chatbox-label">Start a new chat</div> <div id="open-chatbox-label">Start a new chat</div>
<div className="label-icon"> <div className="label-icon">
<div className={`btn-icon`} aria-label={`Open support chat window`}>+</div> <div className={`btn-icon`} aria-label={`Open support chat window`}>+</div>
</div> </div>
</Fragment>
}
</button> </button>
) )
} }