urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2025-01-05 11:09:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: add firefox-specific chat window

Browse Source
This commit is contained in:
Matilde Park 2020-04-10 16:32:25 -04:00
parent eef6e56dca
commit 3dc6a0bc9a
1 changed files with 100 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
pkg/interface/chat/src/js/components/chat.js
View File

@ -76,9 +76,12 @@ export class ChatScreen extends Component {
props.history.push("/~chat");
} else if (
props.envelopes.length - prevProps.envelopes.length >=
200
40
) {
this.hasAskedForMessages = false;
this.setState({ scrollLocked: false }, () => {
this.scrollToBottom();
})
}
}
@ -123,16 +126,17 @@ export class ChatScreen extends Component {
scrollToBottom() {
if (!this.state.scrollLocked && this.scrollElement) {
this.scrollElement.scrollIntoView({ behavior: "smooth" });
this.scrollElement.scrollIntoView();
}
}
onScroll(e) {
if (
navigator.userAgent.includes("Safari") &&
navigator.userAgent.includes("Chrome")
(navigator.userAgent.includes("Safari") &&
navigator.userAgent.includes("Chrome")) ||
navigator.userAgent.includes("Firefox")
) {
// Google Chrome
// Google Chrome and Firefox
if (e.target.scrollTop === 0) {
this.setState(
{
@ -178,13 +182,14 @@ export class ChatScreen extends Component {
}
}
render() {
chatWindow() {
// Replace with just the "not Firefox" implementation
// when Firefox #1042151 is patched.
const { props, state } = this;
let messages = props.envelopes.slice(0);
let lastMsgNum = messages.length > 0 ? messages.length : 0;
if (messages.length > 100 * state.numPages) {
messages = messages.slice(
messages.length - 100 * state.numPages,
@ -227,6 +232,63 @@ export class ChatScreen extends Component {
);
});
if (navigator.userAgent.includes("Firefox")) {
return (
<div className="overflow-y-scroll h-100" onScroll={this.onScroll}>
<div
className="overflow-y-scroll bg-white bg-gray0-d pt3 pb2 flex flex-column-reverse"
style={{ resize: "vertical" }}
>
<div
ref={el => {
this.scrollElement = el;
}}></div>
{(
!(props.station in props.chatSynced) &&
(reversedMessages.length > 0)
) ? (
<ResubscribeElement
api={props.api}
host={props.match.params.ship}
station={props.station} />
) : (<div />)
}
{reversedMessages}
</div>
</div>
)}
else {
return (
<div
className="overflow-y-scroll bg-white bg-gray0-d pt3 pb2 flex flex-column-reverse"
style={{ height: "100%", resize: "vertical" }}
>
<div
ref={el => {
this.scrollElement = el;
}}></div>
{(
!(props.station in props.chatSynced) &&
(reversedMessages.length > 0)
) ? (
<ResubscribeElement
api={props.api}
host={props.match.params.ship}
station={props.station} />
) : (<div />)
}
{reversedMessages}
</div>
)}
}
render() {
const { props, state } = this;
let messages = props.envelopes.slice(0);
let lastMsgNum = messages.length > 0 ? messages.length : 0;
let group = Array.from(props.permission.who.values());
const isinPopout = props.popout ? "popout/" : "";
@ -278,26 +340,7 @@ export class ChatScreen extends Component {
api={props.api}
/>
</div>
<div
className="overflow-y-scroll bg-white bg-gray0-d pt3 pb2 flex flex-column-reverse"
style={{ height: "100%", resize: "vertical" }}
onScroll={this.onScroll}>
<div
ref={el => {
this.scrollElement = el;
}}></div>
{ (
!(props.station in props.chatSynced) &&
(reversedMessages.length > 0)
) ? (
<ResubscribeElement
api={props.api}
host={props.match.params.ship}
station={props.station} />
) : (<div/>)
}
{reversedMessages}
</div>
{this.chatWindow()}
<ChatInput
api={props.api}
numMsgs={lastMsgNum}