From de45a7f218b6bb4a022009873024ea56838498d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Janis=20Daniel=20Da=CC=88hne?=
<janis.daehne2@student.uni-halle.de>
Date: Fri, 9 Aug 2019 13:31:15 +0200
Subject: [PATCH] - modified 404 chat styling - added auto scroll disable
---
src/components/404internal/Chat404.tsx | 37 +++++++++++++++++++-------
src/components/404internal/style.styl | 17 ++++++++++--
2 files changed, 42 insertions(+), 12 deletions(-)
diff --git a/src/components/404internal/Chat404.tsx b/src/components/404internal/Chat404.tsx
index d8073fba..b9d81a63 100644
--- a/src/components/404internal/Chat404.tsx
+++ b/src/components/404internal/Chat404.tsx
@@ -51,6 +51,8 @@ type ChatMessage = ConversationUserEntered | ConversationMessage
interface State {
// tslint:disable-next-line
readonly currentConversation: ChatMessage[]
+
+ readonly isAutoScrollBotEnabled: boolean
}
const chatWrapperId = 'chat-window-wrapper'
@@ -75,6 +77,7 @@ class Chat404 extends React.Component<Props, State> {
this.state = {
currentConversation: [],
+ isAutoScrollBotEnabled: true,
}
}
@@ -148,7 +151,10 @@ class Chat404 extends React.Component<Props, State> {
} as ChatMessage
- this.scrollToBottom()
+ if (this.state.isAutoScrollBotEnabled) {
+ this.scrollToBottom()
+ }
+
await wait(this.getTypingTimeInMsFromMsg(message.message))
//remove old message and insert new with changed props
@@ -170,7 +176,10 @@ class Chat404 extends React.Component<Props, State> {
} as State
})
- this.scrollToBottom()
+ if (this.state.isAutoScrollBotEnabled) {
+ this.scrollToBottom()
+ }
+
await wait(this.getReadTimeInMsFromMsg(message.message))
}
@@ -192,7 +201,11 @@ class Chat404 extends React.Component<Props, State> {
404
</div>
- <div className="down-button clickable" onClick={() => {
+ <div className={`down-button clickable${this.state.isAutoScrollBotEnabled ? ' is-enabled' : ''}`} onClick={() => {
+ this.setState((prevState, props) => ({
+ ...prevState,
+ isAutoScrollBotEnabled: !prevState.isAutoScrollBotEnabled
+ }))
this.scrollToBottom()
}}>
<Icon name="chevron down"/>
@@ -228,7 +241,9 @@ class Chat404 extends React.Component<Props, State> {
}
if (value.withLoading) {
- return (<div key={key} className="chat-entry foreign-message is-typing">
+ return (<div key={key} className={`chat-entry foreign-message is-typing${value.name === 'Janis'
+ ? ' alternate'
+ : ''}`}>
<div className={`user-name${value.name === 'Janis'
? ' alternate'
: ''}`}>{value.name}</div>
@@ -240,7 +255,9 @@ class Chat404 extends React.Component<Props, State> {
</div>)
}
- return (<div key={key} className="chat-entry foreign-message">
+ return (<div key={key} className={`chat-entry foreign-message${value.name === 'Janis'
+ ? ' alternate'
+ : ''}`}>
<div className={`user-name${value.name === 'Janis'
? ' alternate'
: ''}`}>{value.name}</div>
@@ -272,11 +289,11 @@ const conversion: ReadonlyArray<ChatMessage> = [
kind: 'user-entered',
message: 'Janis hat den Chat betreten'
},
- {
- kind: 'message',
- message: '???',
- withLoading: false
- },
+ // {
+ // kind: 'message',
+ // message: '???',
+ // withLoading: false
+ // },
{
kind: 'message',
name: 'Steffen',
diff --git a/src/components/404internal/style.styl b/src/components/404internal/style.styl
index 2840f850..f31166fd 100644
--- a/src/components/404internal/style.styl
+++ b/src/components/404internal/style.styl
@@ -18,12 +18,20 @@
justify-content: center;
align-items: center;
z-index 2
+ box-shadow: 0 3px 2px -2px #c3c3c3
.icon {
margin 0
}
+
+ &.is-enabled {
+ opacity 1 !important
+ border 1px solid #099eff
+ border-radius 50%
+ }
}
+
.watermark {
pointer-events none
position absolute
@@ -42,6 +50,7 @@
background-clip: text;
color: transparent;
text-shadow: rgba(255, 255, 255, 0.5) 0px 3px 3px;
+ opacity 0.2
}
}
@@ -52,7 +61,7 @@
}
.chat-window {
- width 100%
+ width calc(100% - 3em)
display flex
flex-direction column
padding 1em
@@ -67,7 +76,7 @@
margin-bottom 1em
max-width 90%
padding 0.3em
- box-shadow: 0px 3px 2px -2px #c3c3c3
+ box-shadow: 0 3px 2px -2px #c3c3c3
&.user-entered {
padding: 0.3em 7px;
@@ -89,6 +98,10 @@
}
}
+ &.foreign-message.alternate {
+ align-self flex-end
+ }
+
&.own-message {
background-color rgb(232, 253, 203)
--
GitLab