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