forked from Github/ocrcc-chatbox
configurable size and position of chatbox
This commit is contained in:
parent
706791cc38
commit
5ed83271d9
@ -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);
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user