mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-01 00:55:26 +00:00
transitions styling and better messaging on chat initialization
This commit is contained in:
parent
9a7beea07b
commit
f5862e8f0a
@ -51,11 +51,13 @@
|
|||||||
|
|
||||||
#open-chatbox-label {
|
#open-chatbox-label {
|
||||||
background: $theme-color;
|
background: $theme-color;
|
||||||
padding: 0.75rem 1.5rem;
|
padding: 0.75rem;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
border: 1px solid $theme-color;
|
border: 1px solid $theme-color;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label-icon {
|
.label-icon {
|
||||||
@ -67,6 +69,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: 1px solid $theme-color;
|
border: 1px solid $theme-color;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -131,6 +134,18 @@
|
|||||||
font-family: $theme-font;
|
font-family: $theme-font;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid $theme-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid $theme-color;
|
||||||
|
background-color: $theme-light-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-close {
|
&-close {
|
||||||
@ -145,6 +160,17 @@
|
|||||||
width: 40px;
|
width: 40px;
|
||||||
margin-left: 0.2rem;
|
margin-left: 0.2rem;
|
||||||
color: $dark-color;
|
color: $dark-color;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid $theme-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid $theme-color;
|
||||||
|
background-color: $theme-light-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-body {
|
&-body {
|
||||||
@ -198,9 +224,8 @@
|
|||||||
font-family: $theme-font;
|
font-family: $theme-font;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 60vh;
|
height: calc(40vh + 180px);
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
min-height: 180px;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@ -222,6 +247,7 @@
|
|||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 0.2rem;
|
margin-bottom: 0.2rem;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notices {
|
.notices {
|
||||||
@ -302,6 +328,7 @@
|
|||||||
font-family: $theme-font;
|
font-family: $theme-font;
|
||||||
margin-right: 0.2rem;
|
margin-right: 0.2rem;
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -323,6 +350,7 @@
|
|||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
border: 1px solid $theme-color;
|
border: 1px solid $theme-color;
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.2s ease-in-out;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 1px solid $dark-color;
|
border: 1px solid $dark-color;
|
||||||
@ -336,6 +364,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.highlight-text {
|
||||||
|
color: $theme-color;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 420px){
|
@media screen and (max-width: 420px){
|
||||||
@ -351,6 +383,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#ocrcc-chatbox {
|
#ocrcc-chatbox {
|
||||||
height: 80vh;
|
height: calc(180px + 60vh);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -8,13 +8,36 @@
|
|||||||
background: $dark-background-color;
|
background: $dark-background-color;
|
||||||
color: $light-text-color;
|
color: $light-text-color;
|
||||||
border: 1px solid $white;
|
border: 1px solid $white;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $theme-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background: $dark-theme-color;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget {
|
||||||
|
button {
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $theme-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background: $dark-theme-color;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
#ocrcc-chatbox {
|
#ocrcc-chatbox {
|
||||||
.btn-icon {
|
.btn-icon {
|
||||||
color: $light-text-color;
|
color: $light-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.message-window {
|
.message-window {
|
||||||
background-color: $dark-background-color;
|
background-color: $dark-background-color;
|
||||||
border: 1px solid $white;
|
border: 1px solid $white;
|
||||||
@ -49,9 +72,14 @@
|
|||||||
|
|
||||||
.input-window {
|
.input-window {
|
||||||
input[type="text"] {
|
input[type="text"] {
|
||||||
background-color: $dark-theme-color;
|
background-color: $dark-background-color;
|
||||||
color: $light-text-color;
|
color: $light-text-color;
|
||||||
border: 1px solid $white;
|
border: 1px solid $white;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border: 1px solid $theme-color;
|
||||||
|
background: $dark-theme-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::placeholder {
|
::placeholder {
|
||||||
@ -64,5 +92,9 @@
|
|||||||
border: 1px solid $white;
|
border: 1px solid $white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.highlight-text {
|
||||||
|
color: $light-text-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -25,8 +25,8 @@ const BOT_USERNAME = "@help-bot:rhok.space"
|
|||||||
const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" };
|
const ENCRYPTION_CONFIG = { "algorithm": "m.megolm.v1.aes-sha2" };
|
||||||
const ENCRYPTION_NOTICE = "Messages in this chat are secured with end-to-end encryption."
|
const ENCRYPTION_NOTICE = "Messages in this chat are secured with end-to-end encryption."
|
||||||
const INTRO_MESSAGE = "This chat application does not collect any of your personal data or any data from your use of this service."
|
const INTRO_MESSAGE = "This chat application does not collect any of your personal data or any data from your use of this service."
|
||||||
const AGREEMENT_MESSAGE = "Do you want to continue? Type yes or no."
|
const AGREEMENT_MESSAGE = "👉 Do you want to continue? Type yes or no."
|
||||||
const CONFIRMATION_MESSAGE = "Starting the chat - a facilitator will be with you soon."
|
const CONFIRMATION_MESSAGE = "Waiting for a facilitator to join the chat..."
|
||||||
const EXIT_MESSAGE = "The chat was not started."
|
const EXIT_MESSAGE = "The chat was not started."
|
||||||
const FACILITATOR_ROOM_ID = '!pYVVPyFKacZeKZbWyz:rhok.space'
|
const FACILITATOR_ROOM_ID = '!pYVVPyFKacZeKZbWyz:rhok.space'
|
||||||
const TERMS_URL="https://tosdr.org/"
|
const TERMS_URL="https://tosdr.org/"
|
||||||
@ -59,8 +59,7 @@ const initialState = {
|
|||||||
id: 'agreement-msg-id',
|
id: 'agreement-msg-id',
|
||||||
type: 'm.room.message',
|
type: 'm.room.message',
|
||||||
sender: BOT_USERNAME,
|
sender: BOT_USERNAME,
|
||||||
content: { body: AGREEMENT_MESSAGE },
|
content: { body: AGREEMENT_MESSAGE }, },
|
||||||
},
|
|
||||||
],
|
],
|
||||||
inputValue: "",
|
inputValue: "",
|
||||||
errors: [],
|
errors: [],
|
||||||
@ -76,6 +75,7 @@ class ChatBox extends React.Component {
|
|||||||
const client = matrix.createClient(this.props.matrixServerUrl)
|
const client = matrix.createClient(this.props.matrixServerUrl)
|
||||||
this.state = initialState
|
this.state = initialState
|
||||||
this.chatboxInput = React.createRef();
|
this.chatboxInput = React.createRef();
|
||||||
|
this.messageWindow = React.createRef();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleToggleOpen = () => {
|
handleToggleOpen = () => {
|
||||||
@ -212,8 +212,18 @@ class ChatBox extends React.Component {
|
|||||||
this.state.client.setPowerLevel(data.room_id, BOT_USERNAME, 100)
|
this.state.client.setPowerLevel(data.room_id, BOT_USERNAME, 100)
|
||||||
.then(() => console.log("Set bot power level to 100"))
|
.then(() => console.log("Set bot power level to 100"))
|
||||||
.catch(err => console.log("Error setting bot power level", err))
|
.catch(err => console.log("Error setting bot power level", err))
|
||||||
|
|
||||||
|
const confirmationMsg = {
|
||||||
|
id: 'confirmation-msg-id',
|
||||||
|
type: 'm.room.message',
|
||||||
|
sender: BOT_USERNAME,
|
||||||
|
content: { body: CONFIRMATION_MESSAGE },
|
||||||
|
}
|
||||||
|
const messages = [...this.state.messages]
|
||||||
|
messages.push(confirmationMsg)
|
||||||
this.setState({
|
this.setState({
|
||||||
roomId: data.room_id
|
roomId: data.room_id,
|
||||||
|
messages
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
@ -316,6 +326,10 @@ class ChatBox extends React.Component {
|
|||||||
if (!prevState.opened && this.state.opened) {
|
if (!prevState.opened && this.state.opened) {
|
||||||
this.chatboxInput.current.focus()
|
this.chatboxInput.current.focus()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (prevState.messages.length !== this.state.messages.length) {
|
||||||
|
this.messageWindow.current.scrollTo(0, this.messageWindow.current.scrollHeight)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -344,15 +358,8 @@ class ChatBox extends React.Component {
|
|||||||
content: { body: this.state.inputValue },
|
content: { body: this.state.inputValue },
|
||||||
}
|
}
|
||||||
|
|
||||||
const confirmationMsg = {
|
|
||||||
id: 'confirmation-msg-id',
|
|
||||||
type: 'm.room.message',
|
|
||||||
sender: BOT_USERNAME,
|
|
||||||
content: { body: CONFIRMATION_MESSAGE },
|
|
||||||
}
|
|
||||||
const messages = [...this.state.messages]
|
const messages = [...this.state.messages]
|
||||||
messages.push(fakeUserMsg)
|
messages.push(fakeUserMsg)
|
||||||
messages.push(confirmationMsg)
|
|
||||||
this.setState({ inputValue: "", messages })
|
this.setState({ inputValue: "", messages })
|
||||||
|
|
||||||
return this.initializeChat()
|
return this.initializeChat()
|
||||||
@ -398,7 +405,7 @@ class ChatBox extends React.Component {
|
|||||||
<div id="ocrcc-chatbox" aria-haspopup="dialog">
|
<div id="ocrcc-chatbox" aria-haspopup="dialog">
|
||||||
<Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
|
<Header handleToggleOpen={this.handleToggleOpen} opened={opened} handleExitChat={this.handleExitChat} />
|
||||||
|
|
||||||
<div className="message-window">
|
<div className="message-window" ref={this.messageWindow}>
|
||||||
<div className="messages">
|
<div className="messages">
|
||||||
{
|
{
|
||||||
messages.map((message, index) => {
|
messages.map((message, index) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user