transitions styling and better messaging on chat initialization

This commit is contained in:
Sharon Kennedy 2020-02-25 17:48:30 -05:00
parent 9a7beea07b
commit f5862e8f0a
3 changed files with 91 additions and 20 deletions

View File

@ -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);
}
}

View File

@ -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;
}
}
}

View File

@ -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) => {