mirror of
https://github.com/urbit/shrub.git
synced 2024-12-02 21:34:04 +03:00
chat-view: redesign of chat interface
This commit redesigns the front-end of chat-view for Landscape, adding a collapsable sidebar, popout chats, a streamlined join flow, and a general refresh of the Indigo interface.
This commit is contained in:
Matilde Park
parent
e8d34fe0ca
commit
a6b4ed19b3
File diff suppressed because one or more lines are too long
BIN
pkg/arvo/app/chat/img/ChatSwitcherClosed.png
Normal file
BIN
pkg/arvo/app/chat/img/ChatSwitcherClosed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
BIN
pkg/arvo/app/chat/img/ChatSwitcherLink.png
Normal file
BIN
pkg/arvo/app/chat/img/ChatSwitcherLink.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 861 B |
BIN
pkg/arvo/app/chat/img/popout.png
Normal file
BIN
pkg/arvo/app/chat/img/popout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 854 B |
@ -5,8 +5,20 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-touch-fullscreen" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<link rel="stylesheet" href="/~chat/css/index.css" />
|
||||
<link rel="icon" type="image/png" href="/~launch/img/Favicon.png">
|
||||
<link rel="manifest"
|
||||
href='data:application/manifest+json,{
|
||||
"name": "Chat",
|
||||
"short_name": "Chat",
|
||||
"description": "A%20Chat%20application%20for%20your%20Urbit%20ship.",
|
||||
"display": "standalone",
|
||||
"background_color": "%23FFFFFF",
|
||||
"theme_color": "%23000000"}' />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" />
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,3 +1,8 @@
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
|
||||
margin-block-end: unset;
|
||||
margin-block-start: unset;
|
||||
@ -14,25 +19,22 @@ textarea, input, button {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
-webkit-appearance: checkbox;
|
||||
.dropdown::after {
|
||||
content: "⌃";
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000 !important;
|
||||
font-weight: 400 !important;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.body-regular {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.body-large {
|
||||
@ -53,67 +55,6 @@ h2 {
|
||||
|
||||
.label-regular {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.label-small {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.label-small-mono {
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
font-family: "Source Code Pro", monospace;
|
||||
}
|
||||
|
||||
.body-regular-400 {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.plus-font {
|
||||
font-size: 32px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.btn-font {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.fw-normal {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fw-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fs-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.td-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bg-v-light-gray {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.nice-green {
|
||||
color: #2AA779 !important;
|
||||
}
|
||||
|
||||
.bg-nice-green {
|
||||
background: #2ED196;
|
||||
}
|
||||
|
||||
.nice-red {
|
||||
color: #EE5432 !important;
|
||||
}
|
||||
|
||||
.inter {
|
||||
@ -146,6 +87,54 @@ h2 {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
}
|
||||
|
||||
.label-small-mono.list-ship {
|
||||
line-height: 29px;
|
||||
.list-ship {
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
.c-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
|
||||
@media all and (max-width: 34.375em) {
|
||||
.dn-s {
|
||||
display: none;
|
||||
}
|
||||
.flex-basis-full-s {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.h-100-minus-48-s {
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
.h-100-minus-96-s {
|
||||
height: calc(100% - 96px);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 34.375em) and (max-width: 46.875em) {
|
||||
.flex-basis-300-m {
|
||||
flex-basis: 300px;
|
||||
}
|
||||
.h-100-minus-48-m {
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 46.875em) and (max-width: 60em) {
|
||||
.flex-basis-300-l {
|
||||
flex-basis: 300px;
|
||||
}
|
||||
.h-100-minus-48-l {
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 60em) {
|
||||
.flex-basis-300-xl {
|
||||
flex-basis: 300px;
|
||||
}
|
||||
.h-100-minus-48-xl {
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
1
pkg/interface/chat/src/css/indigo-static.css
Normal file
1
pkg/interface/chat/src/css/indigo-static.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,4 +1,4 @@
|
||||
@import "css/tachyons.css";
|
||||
@import "css/indigo-static.css";
|
||||
@import "css/fonts.css";
|
||||
@import "css/spinner.css";
|
||||
@import "css/custom.css";
|
||||
|
||||
@ -164,7 +164,7 @@ class UrbitApi {
|
||||
ship: `~${window.ship}`,
|
||||
recipient: ship,
|
||||
app: 'chat-hook',
|
||||
text: `You have been invited to /${window.ship}${path}`,
|
||||
text: `~${window.ship}${path}`,
|
||||
},
|
||||
uid: uuid()
|
||||
}
|
||||
|
||||
@ -2,6 +2,10 @@ import React, { Component } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { Route, Link } from "react-router-dom";
|
||||
import { store } from "/store";
|
||||
|
||||
|
||||
import { Message } from '/components/lib/message';
|
||||
import { ChatTabBar } from '/components/lib/chat-tabbar';
|
||||
import { ChatInput } from '/components/lib/chat-input';
|
||||
@ -9,213 +13,271 @@ import { deSig } from '/lib/util';
|
||||
|
||||
|
||||
export class ChatScreen extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
station: `/${props.match.params.ship}/${props.match.params.station}`,
|
||||
numPages: 1,
|
||||
scrollLocked: false,
|
||||
};
|
||||
this.state = {
|
||||
station: `/${props.match.params.ship}/${props.match.params.station}`,
|
||||
numPages: 1,
|
||||
scrollLocked: false
|
||||
};
|
||||
|
||||
this.hasAskedForMessages = false;
|
||||
this.onScroll = this.onScroll.bind(this);
|
||||
this.hasAskedForMessages = false;
|
||||
this.onScroll = this.onScroll.bind(this);
|
||||
|
||||
this.updateReadInterval = setInterval(
|
||||
this.updateReadNumber.bind(this),
|
||||
1000
|
||||
);
|
||||
}
|
||||
this.updateReadInterval = setInterval(
|
||||
this.updateReadNumber.bind(this),
|
||||
1000
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.updateReadNumber();
|
||||
}
|
||||
componentDidMount() {
|
||||
this.updateReadNumber();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.updateReadInterval) {
|
||||
clearInterval(this.updateReadInterval);
|
||||
this.updateReadInterval = null;
|
||||
}
|
||||
}
|
||||
componentWillUnmount() {
|
||||
if (this.updateReadInterval) {
|
||||
clearInterval(this.updateReadInterval);
|
||||
this.updateReadInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { props, state } = this;
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { props, state } = this;
|
||||
|
||||
if ((prevProps.match.params.station !== props.match.params.station) ||
|
||||
(prevProps.match.params.ship !== props.match.params.ship)) {
|
||||
this.hasAskedForMessages = false;
|
||||
if (
|
||||
prevProps.match.params.station !== props.match.params.station ||
|
||||
prevProps.match.params.ship !== props.match.params.ship
|
||||
) {
|
||||
this.hasAskedForMessages = false;
|
||||
|
||||
clearInterval(this.updateReadInterval);
|
||||
clearInterval(this.updateReadInterval);
|
||||
|
||||
this.setState({
|
||||
station: `/${props.match.params.ship}/${props.match.params.station}`,
|
||||
scrollLocked: false
|
||||
}, () => {
|
||||
this.scrollToBottom();
|
||||
this.updateReadInterval = setInterval(
|
||||
this.updateReadNumber.bind(this),
|
||||
1000
|
||||
);
|
||||
this.updateReadNumber();
|
||||
});
|
||||
} else if (Object.keys(props.inbox).length === 0) {
|
||||
props.history.push('/~chat');
|
||||
} else if (props.envelopes.length - prevProps.envelopes.length >= 200) {
|
||||
this.hasAskedForMessages = false;
|
||||
}
|
||||
}
|
||||
this.setState(
|
||||
{
|
||||
station: `/${props.match.params.ship}/${props.match.params.station}`,
|
||||
scrollLocked: false
|
||||
},
|
||||
() => {
|
||||
this.scrollToBottom();
|
||||
this.updateReadInterval = setInterval(
|
||||
this.updateReadNumber.bind(this),
|
||||
1000
|
||||
);
|
||||
this.updateReadNumber();
|
||||
}
|
||||
);
|
||||
} else if (Object.keys(props.inbox).length === 0) {
|
||||
props.history.push("/~chat");
|
||||
} else if (
|
||||
props.envelopes.length - prevProps.envelopes.length >=
|
||||
200
|
||||
) {
|
||||
this.hasAskedForMessages = false;
|
||||
}
|
||||
}
|
||||
|
||||
updateReadNumber() {
|
||||
const { props, state } = this;
|
||||
if (props.read < props.length) {
|
||||
props.api.chat.read(state.station);
|
||||
}
|
||||
}
|
||||
updateReadNumber() {
|
||||
const { props, state } = this;
|
||||
if (props.read < props.envelopes.length) {
|
||||
props.api.chat.read(state.station);
|
||||
}
|
||||
}
|
||||
|
||||
askForMessages() {
|
||||
const { props, state } = this;
|
||||
|
||||
if (state.numPages * 100 < props.envelopes.length - 400 ||
|
||||
this.hasAskedForMessages) {
|
||||
return;
|
||||
}
|
||||
askForMessages() {
|
||||
const { props, state } = this;
|
||||
|
||||
if (props.envelopes.length > 0) {
|
||||
let end = props.envelopes[0].number;
|
||||
if (end > 0) {
|
||||
let start = ((end - 400) > 0) ? end - 400 : 0;
|
||||
if (
|
||||
state.numPages * 100 < props.envelopes.length - 400 ||
|
||||
this.hasAskedForMessages
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (start === 0 && end === 1) {
|
||||
return;
|
||||
}
|
||||
if (props.envelopes.length > 0) {
|
||||
let end = props.envelopes[0].number;
|
||||
if (end > 0) {
|
||||
let start = end - 400 > 0 ? end - 400 : 0;
|
||||
|
||||
this.hasAskedForMessages = true;
|
||||
if (start === 0 && end === 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
props.subscription.fetchMessages(start, end - 1, state.station);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.hasAskedForMessages = true;
|
||||
|
||||
scrollToBottom() {
|
||||
if (!this.state.scrollLocked && this.scrollElement) {
|
||||
this.scrollElement.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
props.subscription.fetchMessages(start, end - 1, state.station);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onScroll(e) {
|
||||
if (navigator.userAgent.includes('Safari') &&
|
||||
navigator.userAgent.includes('Chrome')) {
|
||||
// Google Chrome
|
||||
if (e.target.scrollTop === 0) {
|
||||
this.setState({
|
||||
numPages: this.state.numPages + 1,
|
||||
scrollLocked: true
|
||||
}, () => {
|
||||
this.askForMessages();
|
||||
});
|
||||
} else if (
|
||||
(e.target.scrollHeight - Math.round(e.target.scrollTop)) ===
|
||||
(e.target.clientHeight)
|
||||
) {
|
||||
this.setState({
|
||||
numPages: 1,
|
||||
scrollLocked: false
|
||||
});
|
||||
}
|
||||
} else if (navigator.userAgent.includes('Safari')) {
|
||||
// Safari
|
||||
if (e.target.scrollTop === 0) {
|
||||
this.setState({
|
||||
numPages: 1,
|
||||
scrollLocked: false
|
||||
});
|
||||
} else if (
|
||||
(e.target.scrollHeight + Math.round(e.target.scrollTop)) <=
|
||||
(e.target.clientHeight + 10)
|
||||
) {
|
||||
this.setState({
|
||||
numPages: this.state.numPages + 1,
|
||||
scrollLocked: true
|
||||
}, () => {
|
||||
this.askForMessages();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.log('Your browser is not supported.');
|
||||
}
|
||||
}
|
||||
scrollToBottom() {
|
||||
if (!this.state.scrollLocked && this.scrollElement) {
|
||||
this.scrollElement.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
onScroll(e) {
|
||||
if (
|
||||
navigator.userAgent.includes("Safari") &&
|
||||
navigator.userAgent.includes("Chrome")
|
||||
) {
|
||||
// Google Chrome
|
||||
if (e.target.scrollTop === 0) {
|
||||
this.setState(
|
||||
{
|
||||
numPages: this.state.numPages + 1,
|
||||
scrollLocked: true
|
||||
},
|
||||
() => {
|
||||
this.askForMessages();
|
||||
}
|
||||
);
|
||||
} else if (
|
||||
e.target.scrollHeight - Math.round(e.target.scrollTop) ===
|
||||
e.target.clientHeight
|
||||
) {
|
||||
this.setState({
|
||||
numPages: 1,
|
||||
scrollLocked: false
|
||||
});
|
||||
}
|
||||
} else if (navigator.userAgent.includes("Safari")) {
|
||||
// Safari
|
||||
if (e.target.scrollTop === 0) {
|
||||
this.setState({
|
||||
numPages: 1,
|
||||
scrollLocked: false
|
||||
});
|
||||
} else if (
|
||||
e.target.scrollHeight + Math.round(e.target.scrollTop) <=
|
||||
e.target.clientHeight + 10
|
||||
) {
|
||||
this.setState(
|
||||
{
|
||||
numPages: this.state.numPages + 1,
|
||||
scrollLocked: true
|
||||
},
|
||||
() => {
|
||||
this.askForMessages();
|
||||
}
|
||||
);
|
||||
}
|
||||
} else {
|
||||
console.log("Your browser is not supported.");
|
||||
}
|
||||
}
|
||||
|
||||
let messages = props.envelopes.slice(0);
|
||||
|
||||
let lastMsgNum = (messages.length > 0) ?
|
||||
messages.length : 0;
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
|
||||
if (messages.length > 100 * state.numPages) {
|
||||
messages = messages
|
||||
.slice(messages.length - (100 * state.numPages), messages.length);
|
||||
}
|
||||
let messages = props.envelopes.slice(0);
|
||||
|
||||
let pendingMessages =
|
||||
props.pendingMessages.has(state.station)
|
||||
? props.pendingMessages.get(state.station) : [];
|
||||
|
||||
pendingMessages.map(function(value) {
|
||||
return value.pending = true;
|
||||
})
|
||||
|
||||
let reversedMessages = messages.concat(pendingMessages);
|
||||
reversedMessages = reversedMessages.reverse();
|
||||
let lastMsgNum = messages.length > 0 ? messages.length : 0;
|
||||
|
||||
reversedMessages = reversedMessages.map((msg, i) => {
|
||||
// Render sigil if previous message is not by the same sender
|
||||
let aut = ['author'];
|
||||
let renderSigil =
|
||||
_.get(reversedMessages[i + 1], aut) !== _.get(msg, aut, msg.author);
|
||||
let paddingTop = renderSigil;
|
||||
let paddingBot =
|
||||
_.get(reversedMessages[i - 1], aut) !== _.get(msg, aut, msg.author);
|
||||
if (messages.length > 100 * state.numPages) {
|
||||
messages = messages.slice(
|
||||
messages.length - 100 * state.numPages,
|
||||
messages.length
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Message
|
||||
key={msg.uid}
|
||||
msg={msg}
|
||||
renderSigil={renderSigil}
|
||||
paddingTop={paddingTop}
|
||||
paddingBot={paddingBot}
|
||||
pending={!!msg.pending} />
|
||||
);
|
||||
});
|
||||
let pendingMessages = props.pendingMessages.has(state.station)
|
||||
? props.pendingMessages.get(state.station)
|
||||
: [];
|
||||
|
||||
let group = Array.from(props.group.values());
|
||||
|
||||
return (
|
||||
<div key={state.station}
|
||||
className="h-100 w-100 overflow-hidden flex flex-column">
|
||||
<div className='pl3 pt2 bb'>
|
||||
<h2>{state.station.substr(1)}</h2>
|
||||
<ChatTabBar {...props}
|
||||
station={state.station}
|
||||
numPeers={group.length}
|
||||
isOwner={deSig(props.match.params.ship) === window.ship} />
|
||||
</div>
|
||||
<div
|
||||
className="overflow-y-scroll pt3 pb2 flex flex-column-reverse"
|
||||
style={{ height: 'calc(100% - 157px)', resize: 'vertical' }}
|
||||
onScroll={this.onScroll}>
|
||||
<div ref={ el => { this.scrollElement = el; }}></div>
|
||||
{reversedMessages}
|
||||
</div>
|
||||
<ChatInput
|
||||
api={props.api}
|
||||
numMsgs={lastMsgNum}
|
||||
station={state.station}
|
||||
owner={deSig(props.match.params.ship)}
|
||||
permissions={props.permissions}
|
||||
placeholder='Message...' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
pendingMessages.map(function(value) {
|
||||
return (value.pending = true);
|
||||
});
|
||||
|
||||
let reversedMessages = messages.concat(pendingMessages);
|
||||
reversedMessages = reversedMessages.reverse();
|
||||
|
||||
reversedMessages = reversedMessages.map((msg, i) => {
|
||||
// Render sigil if previous message is not by the same sender
|
||||
let aut = ["author"];
|
||||
let renderSigil =
|
||||
_.get(reversedMessages[i + 1], aut) !==
|
||||
_.get(msg, aut, msg.author);
|
||||
let paddingTop = renderSigil;
|
||||
let paddingBot =
|
||||
_.get(reversedMessages[i - 1], aut) !==
|
||||
_.get(msg, aut, msg.author);
|
||||
|
||||
return (
|
||||
<Message
|
||||
key={msg.uid}
|
||||
msg={msg}
|
||||
renderSigil={renderSigil}
|
||||
paddingTop={paddingTop}
|
||||
paddingBot={paddingBot}
|
||||
pending={!!msg.pending}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
let group = Array.from(props.group.values());
|
||||
|
||||
let popoutSwitcher = this.props.popout ? "dn-m dn-l dn-xl" : "dib-m dib-l dib-xl";
|
||||
let isinPopout = this.props.popout ? "popout/" : "";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={state.station}
|
||||
className="h-100 w-100 overflow-hidden flex flex-column">
|
||||
<div className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
|
||||
style={{ height: "1rem" }}>
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</div>
|
||||
<div className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll flex-shrink-0"
|
||||
style={{ height: 48 }}>
|
||||
<a className="pointer flex-shrink-0"
|
||||
onClick={() => {
|
||||
store.setState(previousState => ({
|
||||
sidebarShown: !previousState.sidebarShown
|
||||
}));
|
||||
}}>
|
||||
<img className={`v-btm pr3 dn ` + popoutSwitcher}
|
||||
src={
|
||||
this.props.sidebarShown
|
||||
? "/~chat/img/ChatSwitcherLink.png"
|
||||
: "/~chat/img/ChatSwitcherClosed.png"
|
||||
}
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
</a>
|
||||
<Link to={`/~chat/` + isinPopout + `room` + state.station}>
|
||||
<h2
|
||||
className="mono dib f7 fw4 v-top"
|
||||
style={{ width: "max-content" }}>
|
||||
{state.station.substr(1)}
|
||||
</h2>
|
||||
</Link>
|
||||
<ChatTabBar
|
||||
{...props}
|
||||
station={state.station}
|
||||
numPeers={group.length}
|
||||
isOwner={deSig(props.match.params.ship) === window.ship}
|
||||
popout={this.props.popout}
|
||||
/>
|
||||
</div>
|
||||
<div className="overflow-y-scroll pt3 pb2 flex flex-column-reverse"
|
||||
style={{ height: "100%", resize: "vertical" }}
|
||||
onScroll={this.onScroll}>
|
||||
<div ref={el => {
|
||||
this.scrollElement = el;
|
||||
}}></div>
|
||||
{reversedMessages}
|
||||
</div>
|
||||
<ChatInput
|
||||
api={props.api}
|
||||
numMsgs={lastMsgNum}
|
||||
station={state.station}
|
||||
owner={deSig(props.match.params.ship)}
|
||||
permissions={props.permissions}
|
||||
placeholder="Message..."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { Route, Link } from 'react-router-dom';
|
||||
import urbitOb from 'urbit-ob';
|
||||
|
||||
|
||||
@ -16,6 +17,24 @@ export class JoinScreen extends Component {
|
||||
this.stationChange = this.stationChange.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.autoJoin !== "undefined/undefined") {
|
||||
let station = this.props.autoJoin.split('/');
|
||||
let ship = station[0];
|
||||
station.splice(0, 1);
|
||||
station = '/' + station.join('/');
|
||||
|
||||
if (station.length < 2 || !urbitOb.isValidPatp(ship)) {
|
||||
this.setState({
|
||||
error: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.props.api.chatView.join(ship, station);
|
||||
this.props.history.push('/~chat');
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { props, state } = this;
|
||||
if (state.station in props.inbox) {
|
||||
@ -61,15 +80,15 @@ export class JoinScreen extends Component {
|
||||
render() {
|
||||
const { props } = this;
|
||||
|
||||
let joinClasses = "db label-regular mt4 btn-font pointer underline bn";
|
||||
if (!this.state.station) {
|
||||
joinClasses = joinClasses + ' gray';
|
||||
let joinClasses = "db f9 green2 ba pa2 b--green2";
|
||||
if ((!this.state.station) || (this.state.station === "/")) {
|
||||
joinClasses = 'db f9 gray2 ba pa2 b--gray3';
|
||||
}
|
||||
|
||||
let errElem = (<span />);
|
||||
if (this.state.error) {
|
||||
errElem = (
|
||||
<span className="body-small inter nice-red db">
|
||||
<span className="f9 inter red2 db">
|
||||
Chat must have a valid name.
|
||||
</span>
|
||||
);
|
||||
@ -77,16 +96,17 @@ export class JoinScreen extends Component {
|
||||
|
||||
return (
|
||||
<div className="h-100 w-100 pa3 pt2 overflow-x-hidden flex flex-column">
|
||||
<h2 className="mb3">Join</h2>
|
||||
<div className="w-50">
|
||||
<p className="body-medium mt3 db">Chatroom</p>
|
||||
<p className="body-small db mt2 mb3">
|
||||
Join an existing chatroom.
|
||||
Chatrooms follow the format ~shipname/chat-name.
|
||||
</p>
|
||||
<div
|
||||
className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</div>
|
||||
<h2 className="mb3 f8">Join Existing Chat</h2>
|
||||
<div className="w-100">
|
||||
<p className="f8 lh-copy mt3 db">Enter a <span className="mono">~ship/chat-name</span></p>
|
||||
<p className="f9 gray2 mb4">Chat names use lowercase, hyphens, and slashes.</p>
|
||||
<textarea
|
||||
ref={ e => { this.textarea = e; } }
|
||||
className="body-regular mono fw-normal ba pa2 mb2 db w-100"
|
||||
className="f7 mono ba b--gray3 pa3 mb2 db"
|
||||
placeholder="~zod/chatroom"
|
||||
spellCheck="false"
|
||||
rows={1}
|
||||
@ -99,8 +119,7 @@ export class JoinScreen extends Component {
|
||||
<button
|
||||
onClick={this.onClickJoin.bind(this)}
|
||||
className={joinClasses}
|
||||
style={{ fontSize: '18px' }}
|
||||
>-> Join</button>
|
||||
>Join Chat</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -5,7 +5,6 @@ import Mousetrap from 'mousetrap';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { Sigil } from '/components/lib/icons/sigil';
|
||||
import { IconSend } from '/components/lib/icons/icon-send';
|
||||
|
||||
import { uuid } from '/lib/util';
|
||||
|
||||
@ -155,16 +154,16 @@ export class ChatInput extends Component {
|
||||
|
||||
readOnlyRender() {
|
||||
return (
|
||||
<div className="mt2 pa3 cf flex black bt o-50">
|
||||
<div className="pa3 cf flex black bt b--gray4 o-50">
|
||||
<div className="fl" style={{
|
||||
marginTop: 4,
|
||||
flexBasis: 32,
|
||||
height: 36
|
||||
flexBasis: 24,
|
||||
height: 24
|
||||
}}>
|
||||
<Sigil ship={window.ship} size={32} />
|
||||
<Sigil ship={window.ship} size={24} color="#4330FC" />
|
||||
</div>
|
||||
<div className="fr h-100 flex pa2" style={{ flexGrow: 1, height: 40 }}>
|
||||
<p style={{paddingTop: 3}}>This chat is read only and you cannot post.</p>
|
||||
<div className="fr h-100 flex" style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }}>
|
||||
<p className="pl3">This chat is read only and you cannot post.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -176,27 +175,26 @@ export class ChatInput extends Component {
|
||||
this.bindShortcuts();
|
||||
|
||||
return (
|
||||
<div className="pa3 cf flex black bt b--black-30" style={{ flexGrow: 1 }}>
|
||||
<div className="fl" style={{
|
||||
marginTop: 4,
|
||||
flexBasis: 32,
|
||||
height: 36
|
||||
}}>
|
||||
<Sigil ship={window.ship} size={32} />
|
||||
<div className="pa3 cf flex black bt b--gray4" style={{ flexGrow: 1 }}>
|
||||
<div
|
||||
className="fl"
|
||||
style={{
|
||||
marginTop: 4,
|
||||
flexBasis: 24,
|
||||
height: 24
|
||||
}}
|
||||
>
|
||||
<Sigil ship={window.ship} size={24} color="#4330FC" />
|
||||
</div>
|
||||
<div className="fr h-100 flex" style={{ flexGrow: 1 }}>
|
||||
<textarea
|
||||
className={'ml2 mt2 mr2 bn'}
|
||||
style={{ flexGrow: 1, height: 40, paddingTop: 3, resize: 'none' }}
|
||||
className={"pl3 bn"}
|
||||
style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }}
|
||||
ref={this.textareaRef}
|
||||
placeholder={props.placeholder}
|
||||
value={state.message}
|
||||
onChange={this.messageChange}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<div className="pointer" onClick={this.messageSubmit}>
|
||||
<IconSend />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -8,54 +8,59 @@ export class ChatTabBar extends Component {
|
||||
render() {
|
||||
let props = this.props;
|
||||
|
||||
let bbStream = '',
|
||||
bbMembers = '',
|
||||
bbSettings = '';
|
||||
|
||||
let strColor = '',
|
||||
memColor = '',
|
||||
setColor = '';
|
||||
let memColor = '',
|
||||
setColor = '',
|
||||
popout = '';
|
||||
|
||||
if (props.location.pathname.includes('/settings')) {
|
||||
bbSettings = ' bb';
|
||||
strColor = 'gray';
|
||||
memColor = 'gray';
|
||||
memColor = 'gray3';
|
||||
setColor = 'black';
|
||||
} else if (props.location.pathname.includes('/members')) {
|
||||
bbMembers = ' bb';
|
||||
strColor = 'gray';
|
||||
memColor = 'black';
|
||||
setColor = 'gray';
|
||||
setColor = 'gray3';
|
||||
} else {
|
||||
bbStream = ' bb';
|
||||
strColor = 'black';
|
||||
memColor = 'gray';
|
||||
setColor = 'gray';
|
||||
memColor = 'gray3';
|
||||
setColor = 'gray3';
|
||||
}
|
||||
|
||||
let membersText = props.numPeers === 1
|
||||
? '1 Member' : `${props.numPeers} Members`;
|
||||
(props.location.pathname.includes('/popout'))
|
||||
? popout = "popout/"
|
||||
: popout = "";
|
||||
|
||||
let hidePopoutIcon = (this.props.popout)
|
||||
? "dn-m dn-l dn-xl"
|
||||
: "dib-m dib-l dib-xl";
|
||||
|
||||
|
||||
return (
|
||||
<div className="w-100" style={{ height:28 }}>
|
||||
<div className={"dib h-100" + bbStream} style={{width:'160px'}}>
|
||||
<Link
|
||||
className={'no-underline label-regular v-mid ' + strColor}
|
||||
to={'/~chat/room' + props.station}>Stream</Link>
|
||||
</div>
|
||||
{ !!props.isOwner ? (
|
||||
<div className={"dib h-100" + bbMembers} style={{width:'160px'}}>
|
||||
<div className="dib flex-shrink-0-m flex-grow-1">
|
||||
{!!props.isOwner ? (
|
||||
<div className={"dib f8 pl6"}>
|
||||
<Link
|
||||
className={'no-underline label-regular v-mid ' + memColor}
|
||||
to={'/~chat/members' + props.station}>{membersText}</Link>
|
||||
className={"no-underline v-top " + memColor}
|
||||
to={`/~chat/` + popout + `members` + props.station}>
|
||||
Members
|
||||
</Link>
|
||||
</div>
|
||||
) : <div className="dib" style={{width:0}}></div>
|
||||
}
|
||||
<div className={"dib h-100" + bbSettings} style={{width:'160px'}}>
|
||||
) : (
|
||||
<div className="dib" style={{ width: 0 }}></div>
|
||||
)}
|
||||
<div className={"dib f8 pl6 pr6"}>
|
||||
<Link
|
||||
className={'no-underline label-regular v-mid ' + setColor}
|
||||
to={'/~chat/settings' + props.station}>Settings</Link>
|
||||
className={"no-underline v-top " + setColor}
|
||||
to={`/~chat/` + popout + `settings` + props.station}>
|
||||
Settings
|
||||
</Link>
|
||||
</div>
|
||||
<a href={`/~chat/popout/room` + props.station} target="_blank"
|
||||
className="dib fr">
|
||||
<img
|
||||
className={`v-btm flex-shrink-0 pr2 dn ` + hidePopoutIcon}
|
||||
src="/~chat/img/popout.png"
|
||||
height="16"
|
||||
width="16"
|
||||
style={{ paddingTop: "2px" }}/>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -12,8 +12,12 @@ export class HeaderBar extends Component {
|
||||
</div>
|
||||
: null;
|
||||
|
||||
let popoutHide = (this.props.popout)
|
||||
? "dn dn-m dn-l dn-xl"
|
||||
: "dn db-m db-l db-xl";
|
||||
|
||||
return (
|
||||
<div className="bg-black w-100 justify-between"
|
||||
<div className={`bg-black w-100 justify-between ` + popoutHide}
|
||||
style={{ height: 48, padding: 8}}>
|
||||
<a className="db"
|
||||
style={{ background: '#1A1A1A',
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
export class IconSend extends Component {
|
||||
render() {
|
||||
return (
|
||||
<img src="/~chat/img/Send.png" width={40} height={40} />
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -13,17 +13,13 @@ export class Sigil extends Component {
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
className="bg-black"
|
||||
style={{ flexBasis: 32 }}>
|
||||
{
|
||||
sigil({
|
||||
<div style={{ flexBasis: 32, backgroundColor: props.color }}>
|
||||
{sigil({
|
||||
patp: props.ship,
|
||||
renderer: reactRenderer,
|
||||
size: props.size,
|
||||
colors: ['black', 'white'],
|
||||
})
|
||||
}
|
||||
colors: [props.color, "white"]
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -69,39 +69,40 @@ export class InviteElement extends Component {
|
||||
render() {
|
||||
const { props, state} = this;
|
||||
let errorElem = !!state.error ? (
|
||||
<p className="pt2 nice-red label-regular">Invalid ship name.</p>
|
||||
<p className="pt2 red2 f8">Invalid ship name.</p>
|
||||
) : (
|
||||
<div></div>
|
||||
);
|
||||
|
||||
let successElem = !!state.success ? (
|
||||
<p className="pt2 nice-green label-regular">Success!</p>
|
||||
<p className="pt2 green2 f8">Success!</p>
|
||||
) : (
|
||||
<div></div>
|
||||
);
|
||||
|
||||
let modifyButtonClasses = "label-regular black underline btn-font pointer";
|
||||
if (!state.error) {
|
||||
modifyButtonClasses = modifyButtonClasses + ' black';
|
||||
let modifyButtonClasses = "db f9 ba pa2 b--black pointer";
|
||||
if (state.error) {
|
||||
modifyButtonClasses = modifyButtonClasses + ' gray3';
|
||||
}
|
||||
|
||||
let buttonText = '';
|
||||
if (props.permissions.kind === 'black') {
|
||||
buttonText = '-> Ban';
|
||||
buttonText = 'Ban';
|
||||
} else if (props.permissions.kind === 'white') {
|
||||
buttonText = '-> Invite';
|
||||
buttonText = 'Invite';
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<textarea
|
||||
ref={ e => { this.textarea = e; } }
|
||||
className="w-90 db ba overflow-y-hidden mono gray mb2"
|
||||
className="f7 mono ba b--gray3 pa3 mb4 db w-100"
|
||||
style={{
|
||||
resize: 'none',
|
||||
height: 150
|
||||
height: 50
|
||||
}}
|
||||
spellCheck="false"
|
||||
placeholder="~zod, ~bus"
|
||||
onChange={this.modifyMembersChange.bind(this)}></textarea>
|
||||
<button
|
||||
onClick={this.modifyMembers.bind(this)}
|
||||
|
||||
@ -16,15 +16,15 @@ export class MemberElement extends Component {
|
||||
let actionElem;
|
||||
if (props.ship === props.owner) {
|
||||
actionElem = (
|
||||
<p className="dib w-20 underline black label-small-mono label-regular">
|
||||
<p className="w-20 dib list-ship black f8 c-default">
|
||||
Host
|
||||
</p>
|
||||
);
|
||||
} else if (window.ship !== props.ship && window.ship === props.owner) {
|
||||
actionElem = (
|
||||
<a onClick={this.onRemove.bind(this)}
|
||||
className="w-20 dib list-ship black underline label-small-mono pointer">
|
||||
Remove
|
||||
className="w-20 dib list-ship black f8 pointer">
|
||||
Ban
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
@ -38,9 +38,9 @@ export class MemberElement extends Component {
|
||||
<Sigil ship={props.ship} size={32} />
|
||||
<p
|
||||
className={
|
||||
"w-70 dib v-mid black ml2 nowrap label-small-mono list-ship label-regular"
|
||||
"w-70 mono list-ship dib v-mid black ml2 nowrap f8"
|
||||
}>
|
||||
{props.ship}
|
||||
~{props.ship}
|
||||
</p>
|
||||
{actionElem}
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Sigil } from '/components/lib/icons/sigil';
|
||||
import classnames from 'classnames';
|
||||
import { Route, Link } from 'react-router-dom'
|
||||
import urbitOb from 'urbit-ob';
|
||||
import moment from 'moment';
|
||||
import _ from 'lodash';
|
||||
|
||||
@ -45,7 +47,7 @@ export class Message extends Component {
|
||||
);
|
||||
}
|
||||
return (
|
||||
<a className="body-regular-400 v-top"
|
||||
<a className="f7 lh-copy v-top bb b--black"
|
||||
href={letter.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
@ -54,47 +56,73 @@ export class Message extends Component {
|
||||
);
|
||||
} else if ('me' in letter) {
|
||||
return (
|
||||
<p className='body-regular-400 v-top'>
|
||||
<p className='f7 lh-copy v-top'>
|
||||
{letter.me}
|
||||
</p>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<p className='body-regular-400 v-top'>
|
||||
{letter.text}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
let chatroom = letter.text.match(
|
||||
/(~[a-z]{3,6})(-[a-z]{6})?([/])(([a-z])+([/-])?)+/
|
||||
);
|
||||
if ((chatroom !== null)
|
||||
&& (chatroom[1].length > 2)
|
||||
&& (urbitOb.isValidPatp(chatroom[1]))) {
|
||||
return (
|
||||
<Link
|
||||
className="bb b--black f7 mono lh-copy v-top"
|
||||
to={"/~chat/join/" + chatroom.input}>
|
||||
{letter.text}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<p className='f7 lh-copy v-top'>
|
||||
{letter.text}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { props } = this;
|
||||
let pending = !!props.msg.pending ? ' o-40' : '';
|
||||
let datestamp = moment.unix(props.msg.when / 1000).format('LL');
|
||||
let datestamp = "~" + moment.unix(props.msg.when / 1000).format('YYYY.MM.D');
|
||||
|
||||
let paddingTop = props.paddingTop ? 'pt3' : '';
|
||||
let paddingBot = props.paddingBot ? 'pb2' : 'pb1';
|
||||
let paddingTop = props.paddingTop ? {'paddingTop': '6px'} : '';
|
||||
|
||||
if (props.renderSigil) {
|
||||
let timestamp = moment.unix(props.msg.when / 1000).format('hh:mm a');
|
||||
|
||||
return (
|
||||
<div className={"w-100 pl3 pr3 cf flex " + paddingTop + " " + paddingBot + pending}
|
||||
style={{
|
||||
minHeight: 'min-content'
|
||||
}}>
|
||||
<div className="fl mr2">
|
||||
<Sigil ship={props.msg.author} size={36} />
|
||||
<div
|
||||
className={
|
||||
"w-100 f8 pl3 pt4 pr3 cf flex lh-copy " + " " + pending
|
||||
}
|
||||
style={{
|
||||
minHeight: "min-content"
|
||||
}}>
|
||||
<div className="fl mr3 v-top">
|
||||
<Sigil
|
||||
ship={props.msg.author}
|
||||
size={24}
|
||||
color={((props.msg.author === window.ship)
|
||||
|| (props.msg.author.substr(1) === window.ship))
|
||||
? "#4330FC"
|
||||
: "#000000"}
|
||||
/>
|
||||
</div>
|
||||
<div className="fr clamp-message" style={{ flexGrow: 1, marginTop: -8 }}>
|
||||
<div className="hide-child">
|
||||
<p className="v-top label-small-mono gray dib mr3">
|
||||
<div
|
||||
className="fr clamp-message"
|
||||
style={{ flexGrow: 1, marginTop: -8 }}>
|
||||
<div className="hide-child" style={paddingTop}>
|
||||
<p className="v-mid mono f9 gray dib mr3">
|
||||
{props.msg.author.slice(0, 1) === "~" ? "" : "~"}
|
||||
{props.msg.author}
|
||||
</p>
|
||||
<p className="v-top label-small-mono gray dib">{timestamp}</p>
|
||||
<p className="v-top label-small-mono ml2 gray dib child">
|
||||
{datestamp}
|
||||
</p>
|
||||
<p className="v-mid mono f9 gray dib">{timestamp}</p>
|
||||
<p className="v-mid mono f9 ml2 gray dib child">{datestamp}</p>
|
||||
</div>
|
||||
{this.renderContent()}
|
||||
</div>
|
||||
@ -104,16 +132,17 @@ export class Message extends Component {
|
||||
let timestamp = moment.unix(props.msg.when / 1000).format('hh:mm');
|
||||
|
||||
return (
|
||||
<div className={"w-100 pr3 pb1 cf hide-child flex" + pending}
|
||||
style={{
|
||||
minHeight: 'min-content'
|
||||
}}>
|
||||
<p className="child pl3 pr2 label-small-mono gray dib">{timestamp}</p>
|
||||
<div className="fr clamp-message" style={{ flexGrow: 1 }}>
|
||||
<div
|
||||
className={"w-100 pr3 cf hide-child flex" + pending}
|
||||
style={{
|
||||
minHeight: "min-content"
|
||||
}}>
|
||||
<p className="child pt2 pl2 pr1 mono f9 gray dib">{timestamp}</p>
|
||||
<div className="fr f7 clamp-message" style={{ flexGrow: 1 }}>
|
||||
{this.renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,17 +18,12 @@ export class SidebarInvite extends Component {
|
||||
return (
|
||||
<div className='pa3'>
|
||||
<div className='w-100 v-mid'>
|
||||
<div className="dib mr2 bg-nice-green" style={{
|
||||
borderRadius: 12,
|
||||
width: 12,
|
||||
height: 12
|
||||
}}></div>
|
||||
<p className="dib body-regular fw-normal">
|
||||
<p className="dib f8 mono">
|
||||
{props.invite.text}
|
||||
</p>
|
||||
</div>
|
||||
<a className="dib w-50 pointer btn-font nice-green underline" onClick={this.onAccept.bind(this)}>Accept</a>
|
||||
<a className="dib w-50 tr pointer btn-font nice-red underline" onClick={this.onDecline.bind(this)}>Decline</a>
|
||||
<a className="dib pointer pa2 f9 bg-green2 white mt4" onClick={this.onAccept.bind(this)}>Accept Invite</a>
|
||||
<a className="dib pointer ml4 pa2 f9 bg-black white mt4" onClick={this.onDecline.bind(this)}>Decline</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -50,30 +50,37 @@ export class SidebarItem extends Component {
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
|
||||
let unreadElem = !!props.unread ? (
|
||||
<div
|
||||
className="bg-nice-green dib mr2"
|
||||
style={{ borderRadius: 6, width: 12, height: 12 }}>
|
||||
</div>
|
||||
) : (
|
||||
<div className="dib"></div>
|
||||
);
|
||||
let unreadElem = !!props.unread
|
||||
? "fw7 green2"
|
||||
: "";
|
||||
|
||||
let title = props.title.substr(1);
|
||||
|
||||
let description = this.getLetter(props.description);
|
||||
|
||||
let selectedCss = !!props.selected ? 'bg-light-gray' : 'bg-white pointer';
|
||||
let selectedCss = !!props.selected ? 'bg-gray5' : 'bg-white pointer';
|
||||
|
||||
return (
|
||||
<div className={'pa3 ' + selectedCss} onClick={this.onClick.bind(this)}>
|
||||
<div className='w-100 v-mid'>
|
||||
{unreadElem}
|
||||
<p className="dib body-regular lh-16">{props.title.substr(1)}</p>
|
||||
<div
|
||||
className={"z1 pa3 pt4 pb4 bb b--gray4 " + selectedCss}
|
||||
onClick={this.onClick.bind(this)}>
|
||||
<div className="w-100 v-mid">
|
||||
<p className={"dib mono f8 " + unreadElem }>
|
||||
<span className={(unreadElem === "") ? "gray3" : ""}>
|
||||
{title.substr(0, title.indexOf("/"))}/
|
||||
</span>
|
||||
{title.substr(title.indexOf("/") + 1)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-100">
|
||||
<p className='dib gray label-small-mono mr3 lh-16'>{props.ship}</p>
|
||||
<p className='dib gray label-small-mono lh-16'>{state.timeSinceNewestMessage}</p>
|
||||
<div className="w-100 pt1">
|
||||
<p className="dib mono f9 mr3">
|
||||
{props.ship === "" ? "" : "~"}
|
||||
{props.ship}
|
||||
</p>
|
||||
<p className="dib mono f9 gray3">{state.timeSinceNewestMessage}</p>
|
||||
</div>
|
||||
<p className='label-small gray clamp-3 lh-16 pt1'>{description}</p>
|
||||
<p className="f8 clamp-3 pt2">{description}</p>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { Route, Link } from "react-router-dom";
|
||||
import { store } from "/store";
|
||||
|
||||
import urbitOb from 'urbit-ob';
|
||||
import { deSig } from '/lib/util';
|
||||
import { ChatTabBar } from '/components/lib/chat-tabbar';
|
||||
@ -69,56 +72,86 @@ export class MemberScreen extends Component {
|
||||
);
|
||||
});
|
||||
|
||||
let popoutSwitcher = this.props.popout
|
||||
? "dn-m dn-l dn-xl"
|
||||
: "dib-m dib-l dib-xl";
|
||||
let isinPopout = this.props.popout ? "popout/" : "";
|
||||
|
||||
return (
|
||||
<div className="h-100 w-100 overflow-x-hidden flex flex-column">
|
||||
<div className='pl3 pt2 bb mb3'>
|
||||
<h2>{state.station.substr(1)}</h2>
|
||||
<div className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
|
||||
style={{ height: "1rem" }}>
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</div>
|
||||
<div className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll flex-shrink-0"
|
||||
style={{ height: 48 }}>
|
||||
<a className="pointer"
|
||||
onClick={() => {
|
||||
store.setState(previousState => ({
|
||||
sidebarShown: !previousState.sidebarShown
|
||||
}));
|
||||
}}>
|
||||
<img className={`v-btm pr3 dn ` + popoutSwitcher}
|
||||
src={
|
||||
this.props.sidebarShown
|
||||
? "/~chat/img/ChatSwitcherLink.png"
|
||||
: "/~chat/img/ChatSwitcherClosed.png"
|
||||
}
|
||||
height="16"
|
||||
width="16"/>
|
||||
</a>
|
||||
<Link to={`/~chat/` + isinPopout + `room` + state.station}>
|
||||
<h2
|
||||
className="mono dib f7 fw4 v-top"
|
||||
style={{ width: "max-content" }}>
|
||||
{state.station.substr(1)}
|
||||
</h2>
|
||||
</Link>
|
||||
<ChatTabBar
|
||||
{...props}
|
||||
station={state.station}
|
||||
numPeers={writeGroup.length}
|
||||
isOwner={deSig(props.match.params.ship) === window.ship} />
|
||||
isOwner={deSig(props.match.params.ship) === window.ship}
|
||||
popout={this.props.popout}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-100 cf">
|
||||
<div className="w-50 fl pa2 pr3">
|
||||
<p className="body-regular mb3">Members</p>
|
||||
<p className="label-regular gray mb3">{writeText}</p>
|
||||
<div className="w-100 pl3 mt4 cf pr6">
|
||||
<div className="w-100 w-50-l w-50-xl fl pa2 pr3 pt3 pt0-l pt0-xl">
|
||||
<p className="f8 pb2">Members</p>
|
||||
<p className="f9 gray2 mb3">{writeText}</p>
|
||||
{writeListMembers}
|
||||
</div>
|
||||
<div className="w-50 fr pa2 pl3">
|
||||
<p className="body-regular mb3">Modify Permissions</p>
|
||||
<p className="label-regular gray mb3">
|
||||
{modWriteText}
|
||||
</p>
|
||||
{ window.ship === deSig(props.match.params.ship) ? (
|
||||
<div className="w-100 w-50-l w-50-xl fl pa2 pr3 pt3 pt0-l pt0-xl">
|
||||
<p className="f8 pb2">Modify Permissions</p>
|
||||
<p className="f9 gray2 mb3">{modWriteText}</p>
|
||||
{window.ship === deSig(props.match.params.ship) ? (
|
||||
<InviteElement
|
||||
path={`/chat${state.station}/write`}
|
||||
station={`/${props.match.params.station}`}
|
||||
permissions={props.write}
|
||||
api={props.api} />
|
||||
) : null }
|
||||
api={props.api}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-100 cf mt2">
|
||||
<div className="w-50 fl pa2 pr3">
|
||||
<p className="label-regular gray mb3">{readText}</p>
|
||||
<div className="w-100 pl3 mt4 cf pr6">
|
||||
<div className="w-100 w-50-l w-50-xl fl pa2 pr3 pt3 pt0-l pt0-xl">
|
||||
<p className="f9 gray2 db mb3">{readText}</p>
|
||||
{readListMembers}
|
||||
</div>
|
||||
<div className="w-50 fr pa2 pl3">
|
||||
<p className="label-regular gray mb3">
|
||||
{modReadText}
|
||||
</p>
|
||||
{ window.ship === deSig(props.match.params.ship) ?
|
||||
( <InviteElement
|
||||
path={`/chat${state.station}/read`}
|
||||
station={`/${props.match.params.station}`}
|
||||
permissions={props.read}
|
||||
api={props.api}/>
|
||||
) : null
|
||||
}
|
||||
<div className="w-100 w-50-l w-50-xl fl pa2 pr3 pt3 pt0-l pt0-xl">
|
||||
<p className="f9 gray2 db mb3">{modReadText}</p>
|
||||
{window.ship === deSig(props.match.params.ship) ? (
|
||||
<InviteElement
|
||||
path={`/chat${state.station}/read`}
|
||||
station={`/${props.match.params.station}`}
|
||||
permissions={props.read}
|
||||
api={props.api}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { Route, Link } from 'react-router-dom';
|
||||
import { uuid, isPatTa, deSig } from '/lib/util';
|
||||
import urbitOb from 'urbit-ob';
|
||||
|
||||
|
||||
export class NewScreen extends Component {
|
||||
|
||||
constructor(props) {
|
||||
@ -13,6 +13,7 @@ export class NewScreen extends Component {
|
||||
idName: '',
|
||||
invites: '',
|
||||
security: 'village',
|
||||
securityDescription: 'Invite-only chat. Default membership administration.',
|
||||
idError: false,
|
||||
inviteError: false,
|
||||
allowHistory: true
|
||||
@ -33,6 +34,27 @@ export class NewScreen extends Component {
|
||||
props.history.push('/~chat/room' + station);
|
||||
}
|
||||
}
|
||||
|
||||
if (prevState.security !== this.state.security) {
|
||||
|
||||
let securityText = '';
|
||||
|
||||
switch (this.state.security) {
|
||||
case 'village':
|
||||
securityText = 'Invite-only chat. Default membership administration.';
|
||||
break;
|
||||
case 'channel':
|
||||
securityText = 'Completely public chat. Default membership administration.';
|
||||
break;
|
||||
case 'journal':
|
||||
securityText = 'Similar to a blog. Publicly readable/subscribable, invited members can write to journal.'
|
||||
break;
|
||||
case 'mailbox':
|
||||
securityText = 'Similar to email. Anyone can write to the mailbox, invited members can read messages.'
|
||||
break;
|
||||
}
|
||||
this.setState({ securityDescription: securityText });
|
||||
}
|
||||
}
|
||||
|
||||
idChange(event) {
|
||||
@ -138,15 +160,15 @@ export class NewScreen extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
let createClasses = "db label-regular mt4 btn-font pointer underline bn";
|
||||
let createClasses = "pointer db f9 green2 ba pa2 b--green2";
|
||||
if (!this.state.idName) {
|
||||
createClasses = createClasses + ' gray';
|
||||
createClasses = 'pointer db f9 gray2 ba pa2 b--gray3';
|
||||
}
|
||||
|
||||
let idErrElem = (<span />);
|
||||
if (this.state.idError) {
|
||||
idErrElem = (
|
||||
<span className="body-small inter nice-red db">
|
||||
<span className="f9 inter red2 db">
|
||||
Chat must have a valid name.
|
||||
</span>
|
||||
);
|
||||
@ -155,22 +177,25 @@ export class NewScreen extends Component {
|
||||
let invErrElem = (<span />);
|
||||
if (this.state.inviteError) {
|
||||
invErrElem = (
|
||||
<span className="body-small inter nice-red db">
|
||||
<span className="f9 inter red2 db">
|
||||
Invites must be validly formatted ship names.
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-100 w-100 pa3 pt2 overflow-x-hidden flex flex-column">
|
||||
<h2 className="mb3">Create</h2>
|
||||
<div className="w-50">
|
||||
<p className="body-medium db">Chat Name</p>
|
||||
<p className="body-small db mt2 mb3">
|
||||
Name this chat. Names must be lowercase and only contain letters, numbers, and dashes.
|
||||
<div className="h-100 w-100 w-50-l w-50-xl pa3 pt2 overflow-x-hidden flex flex-column">
|
||||
<div className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</div>
|
||||
<h2 className="mb3 f8">Create New Chat</h2>
|
||||
<div className="w-100">
|
||||
<p className="f8 mt3 lh-copy db">Chat Name</p>
|
||||
<p className="f9 gray2 db mb4">
|
||||
Alphanumeric characters, dashes, and slashes only
|
||||
</p>
|
||||
<textarea
|
||||
className="body-regular fw-normal ba pa2 db w-100"
|
||||
className="f7 ba b--gray3 pa3 db w-100"
|
||||
placeholder="secret-chat"
|
||||
rows={1}
|
||||
style={{
|
||||
@ -178,13 +203,28 @@ export class NewScreen extends Component {
|
||||
}}
|
||||
onChange={this.idChange} />
|
||||
{idErrElem}
|
||||
<p className="body-medium mt3 db">Invites</p>
|
||||
<p className="body-small db mt2 mb3">
|
||||
Invite new participants to this chat.
|
||||
<p className="f8 mt6 lh-copy db">Chat Type</p>
|
||||
<p className="f9 gray2 db mb4">Change the chat's visibility and type</p>
|
||||
<div className="dropdown relative">
|
||||
<select
|
||||
style={{WebkitAppearance: "none"}}
|
||||
className="pa3 f8 bg-white br0 w-100 inter"
|
||||
value={this.state.securityValue}
|
||||
onChange={this.securityChange}>
|
||||
<option value="village">Village</option>
|
||||
<option value="channel">Channel</option>
|
||||
<option value="journal">Journal</option>
|
||||
<option value="mailbox">Mailbox</option>
|
||||
</select>
|
||||
</div>
|
||||
<p className="f9 gray2 db lh-copy pt2 mb4">{this.state.securityDescription}</p>
|
||||
<p className="f8 mt4 lh-copy db">Invites</p>
|
||||
<p className="f9 gray2 db mb4">
|
||||
Invite participants to this chat
|
||||
</p>
|
||||
<textarea
|
||||
ref={ e => { this.textarea = e; } }
|
||||
className="body-regular mono fw-normal ba pa2 mb2 db w-100"
|
||||
ref={e => { this.textarea = e; }}
|
||||
className="f7 mono ba b--gray3 pa3 mb4 db w-100"
|
||||
placeholder="~zod, ~bus"
|
||||
spellCheck="false"
|
||||
style={{
|
||||
@ -193,31 +233,10 @@ export class NewScreen extends Component {
|
||||
}}
|
||||
onChange={this.invChange} />
|
||||
{invErrElem}
|
||||
<select
|
||||
value={this.state.securityValue}
|
||||
onChange={this.securityChange}>
|
||||
<option value="village">Village</option>
|
||||
<option value="channel">Channel</option>
|
||||
<option value="journal">Journal</option>
|
||||
<option value="mailbox">Mailbox</option>
|
||||
</select>
|
||||
<p className="body-medium mt3 db">Chat History</p>
|
||||
<div className="db mt2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.allowHistory}
|
||||
onChange={this.allowHistoryChange.bind(this)}
|
||||
className="dib mr2"
|
||||
/>
|
||||
<p className="body-small db mt2 mb3 dib">
|
||||
Allow participants to download the chat history upon joining.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={this.onClickCreate.bind(this)}
|
||||
className={createClasses}
|
||||
style={{ fontSize: '18px' }}
|
||||
>-> Create</button>
|
||||
>Start Chat</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -65,128 +65,176 @@ export class Root extends Component {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div>
|
||||
<Route exact path="/~chat"
|
||||
render={ (props) => {
|
||||
return (
|
||||
<Skeleton sidebar={renderChannelSidebar(props)}>
|
||||
<div className="h-100 w-100 overflow-x-hidden flex flex-column">
|
||||
<div className="pl3 pr3 pt2 pb3">
|
||||
<h2>Home</h2>
|
||||
<p className="body-regular-400 pt3">
|
||||
<Link to="/~chat/new">Create a new chat</Link> or
|
||||
<Link to="/~chat/join">join an existing one.</Link>
|
||||
</p>
|
||||
<Route
|
||||
exact
|
||||
path="/~chat"
|
||||
render={props => {
|
||||
return (
|
||||
<Skeleton
|
||||
chatHideonMobile={true}
|
||||
sidebarShown={state.sidebarShown}
|
||||
sidebar={renderChannelSidebar(props)}
|
||||
>
|
||||
<div className="h-100 w-100 overflow-x-hidden flex flex-column bg-gray0">
|
||||
<div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
|
||||
<p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
|
||||
Select, create, or join a chat to begin.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Skeleton>
|
||||
);
|
||||
}} />
|
||||
<Route exact path="/~chat/new"
|
||||
render={ (props) => {
|
||||
return (
|
||||
<Skeleton
|
||||
spinner={this.state.spinner}
|
||||
sidebar={renderChannelSidebar(props)}>
|
||||
<NewScreen
|
||||
setSpinner={this.setSpinner}
|
||||
api={api}
|
||||
inbox={state.inbox || {}}
|
||||
{...props}
|
||||
/>
|
||||
</Skeleton>
|
||||
);
|
||||
}} />
|
||||
<Route exact path="/~chat/join"
|
||||
render={ (props) => {
|
||||
return (
|
||||
<Skeleton sidebar={renderChannelSidebar(props)}>
|
||||
<JoinScreen
|
||||
api={api}
|
||||
inbox={state.inbox}
|
||||
{...props}
|
||||
/>
|
||||
</Skeleton>
|
||||
);
|
||||
}} />
|
||||
<Route exact path="/~chat/room/:ship/:station+"
|
||||
render={ (props) => {
|
||||
let station =
|
||||
`/${props.match.params.ship}/${props.match.params.station}`;
|
||||
let mailbox = state.inbox[station] || {
|
||||
config: {
|
||||
read: 0,
|
||||
length: 0
|
||||
},
|
||||
envelopes: []
|
||||
};
|
||||
</Skeleton>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/~chat/new"
|
||||
render={props => {
|
||||
return (
|
||||
<Skeleton
|
||||
sidebarHideOnMobile={true}
|
||||
spinner={this.state.spinner}
|
||||
sidebar={renderChannelSidebar(props)}
|
||||
sidebarShown={state.sidebarShown}
|
||||
>
|
||||
<NewScreen
|
||||
setSpinner={this.setSpinner}
|
||||
api={api}
|
||||
inbox={state.inbox || {}}
|
||||
{...props}
|
||||
/>
|
||||
</Skeleton>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/~chat/join/:ship?/:station?"
|
||||
render={props => {
|
||||
let station =
|
||||
props.match.params.ship
|
||||
+ "/" +
|
||||
props.match.params.station;
|
||||
return (
|
||||
<Skeleton
|
||||
sidebarHideOnMobile={true}
|
||||
sidebar={renderChannelSidebar(props)}
|
||||
sidebarShown={state.sidebarShown}
|
||||
>
|
||||
<JoinScreen api={api} inbox={state.inbox} autoJoin={station} {...props} />
|
||||
</Skeleton>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/~chat/(popout)?/room/:ship/:station+"
|
||||
render={props => {
|
||||
let station = `/${props.match.params.ship}/${props.match.params.station}`;
|
||||
let mailbox = state.inbox[station] || {
|
||||
config: {
|
||||
read: -1,
|
||||
length: 0
|
||||
},
|
||||
envelopes: []
|
||||
};
|
||||
|
||||
let write = state.groups[`/chat${station}/write`] || new Set([]);
|
||||
let write = state.groups[`/chat${station}/write`] || new Set([]);
|
||||
|
||||
return (
|
||||
<Skeleton sidebar={renderChannelSidebar(props) }>
|
||||
<ChatScreen
|
||||
api={api}
|
||||
subscription={subscription}
|
||||
read={mailbox.config.read}
|
||||
length={mailbox.config.length}
|
||||
envelopes={mailbox.envelopes}
|
||||
inbox={state.inbox}
|
||||
group={write}
|
||||
permissions={state.permissions}
|
||||
pendingMessages={state.pendingMessages}
|
||||
{...props}
|
||||
/>
|
||||
</Skeleton>
|
||||
);
|
||||
}} />
|
||||
<Route exact path="/~chat/members/:ship/:station+"
|
||||
render={ (props) => {
|
||||
let station =
|
||||
`/${props.match.params.ship}/${props.match.params.station}`;
|
||||
let read = state.permissions[`/chat${station}/read`] || {
|
||||
kind: '',
|
||||
who: new Set([])
|
||||
};
|
||||
let write = state.permissions[`/chat${station}/write`] || {
|
||||
kind: '',
|
||||
who: new Set([])
|
||||
};
|
||||
let popout = props.match.url.includes("/popout/");
|
||||
|
||||
return (
|
||||
<Skeleton sidebar={renderChannelSidebar(props) }>
|
||||
<MemberScreen
|
||||
{...props}
|
||||
api={api}
|
||||
read={read}
|
||||
write={write}
|
||||
permissions={state.permissions}
|
||||
/>
|
||||
</Skeleton>
|
||||
);
|
||||
}} />
|
||||
<Route exact path="/~chat/settings/:ship/:station+"
|
||||
render={ (props) => {
|
||||
let station =
|
||||
`/${props.match.params.ship}/${props.match.params.station}`;
|
||||
let write = state.groups[`/chat${station}/write`] || new Set([]);
|
||||
return (
|
||||
<Skeleton
|
||||
sidebarHideOnMobile={true}
|
||||
popout={popout}
|
||||
sidebarShown={state.sidebarShown}
|
||||
sidebar={renderChannelSidebar(props)}
|
||||
>
|
||||
<ChatScreen
|
||||
api={api}
|
||||
subscription={subscription}
|
||||
read={mailbox.config.read}
|
||||
envelopes={mailbox.envelopes}
|
||||
inbox={state.inbox}
|
||||
group={write}
|
||||
permissions={state.permissions}
|
||||
pendingMessages={state.pendingMessages}
|
||||
popout={popout}
|
||||
sidebarShown={state.sidebarShown}
|
||||
{...props}
|
||||
/>
|
||||
</Skeleton>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/~chat/(popout)?/members/:ship/:station+"
|
||||
render={props => {
|
||||
let station = `/${props.match.params.ship}/${props.match.params.station}`;
|
||||
let read = state.permissions[`/chat${station}/read`] || {
|
||||
kind: "",
|
||||
who: new Set([])
|
||||
};
|
||||
let write = state.permissions[`/chat${station}/write`] || {
|
||||
kind: "",
|
||||
who: new Set([])
|
||||
};
|
||||
let popout = props.match.url.includes("/popout/");
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
spinner={this.state.spinner}
|
||||
sidebar={renderChannelSidebar(props) }>
|
||||
<SettingsScreen
|
||||
{...props}
|
||||
setSpinner={this.setSpinner}
|
||||
api={api}
|
||||
group={write}
|
||||
inbox={state.inbox}
|
||||
/>
|
||||
</Skeleton>
|
||||
);
|
||||
}} />
|
||||
return (
|
||||
<Skeleton
|
||||
sidebarHideOnMobile={true}
|
||||
sidebarShown={state.sidebarShown}
|
||||
popout={popout}
|
||||
sidebar={renderChannelSidebar(props)}
|
||||
>
|
||||
<MemberScreen
|
||||
{...props}
|
||||
api={api}
|
||||
read={read}
|
||||
write={write}
|
||||
permissions={state.permissions}
|
||||
popout={popout}
|
||||
sidebarShown={state.sidebarShown}
|
||||
/>
|
||||
</Skeleton>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path="/~chat/(popout)?/settings/:ship/:station+"
|
||||
render={props => {
|
||||
let station = `/${props.match.params.ship}/${props.match.params.station}`;
|
||||
let write = state.groups[`/chat${station}/write`] || new Set([]);
|
||||
|
||||
let popout = props.match.url.includes("/popout/");
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
sidebarHideOnMobile={true}
|
||||
spinner={this.state.spinner}
|
||||
popout={popout}
|
||||
sidebarShown={state.sidebarShown}
|
||||
sidebar={renderChannelSidebar(props)}
|
||||
>
|
||||
<SettingsScreen
|
||||
{...props}
|
||||
setSpinner={this.setSpinner}
|
||||
api={api}
|
||||
group={write}
|
||||
inbox={state.inbox}
|
||||
popout={popout}
|
||||
sidebarShown={state.sidebarShown}
|
||||
/>
|
||||
</Skeleton>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { deSig } from '/lib/util';
|
||||
import { Route, Link } from "react-router-dom";
|
||||
import { store } from "/store";
|
||||
|
||||
|
||||
import { ChatTabBar } from '/components/lib/chat-tabbar';
|
||||
|
||||
@ -43,22 +46,25 @@ export class SettingsScreen extends Component {
|
||||
renderDelete() {
|
||||
const { props, state } = this;
|
||||
|
||||
let titleText = "Delete Chat";
|
||||
let descriptionText = "Permanently delete this chat.";
|
||||
let buttonText = "-> Delete";
|
||||
let chatOwner = (deSig(props.match.params.ship) === window.ship);
|
||||
|
||||
if (deSig(props.match.params.ship) !== window.ship) {
|
||||
titleText = "Leave Chat"
|
||||
descriptionText = "You will no longer have access to this chat."
|
||||
buttonText = "-> Leave";
|
||||
}
|
||||
let deleteButtonClasses = (chatOwner) ? 'b--red2 red2 pointer' : 'b--grey3 grey3 c-default';
|
||||
let leaveButtonClasses = (!chatOwner) ? "pointer" : "c-default";
|
||||
|
||||
return (
|
||||
<div className="w-50 fl pl2 mt3">
|
||||
<p className="body-regular">{titleText}</p>
|
||||
<p className="label-regular gray mb3">{descriptionText}</p>
|
||||
<a onClick={this.deleteChat.bind(this)}
|
||||
className="pointer btn-font underline nice-red">{buttonText}</a>
|
||||
<div>
|
||||
<div className={"w-100 fl mt3 " + ((chatOwner) ? 'o-30' : '')}>
|
||||
<p className="f8 mt3 lh-copy db">Leave Chat</p>
|
||||
<p className="f9 gray2 db mb4">Remove this chat from your chat list. You will need to request for access again.</p>
|
||||
<a onClick={(!chatOwner) ? this.deleteChat.bind(this) : null}
|
||||
className={"dib f9 black ba pa2 b--black " + leaveButtonClasses}>Leave this chat</a>
|
||||
</div>
|
||||
<div className={"w-100 fl mt3 " + ((!chatOwner) ? 'o-30' : '')}>
|
||||
<p className="f8 mt3 lh-copy db">Delete Chat</p>
|
||||
<p className="f9 gray2 db mb4">Permenantly delete this chat. (All current members will no longer see this chat)</p>
|
||||
<a onClick={(chatOwner) ? this.deleteChat.bind(this) : null}
|
||||
className={"dib f9 ba pa2 " + deleteButtonClasses}>Delete this chat</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -76,35 +82,112 @@ export class SettingsScreen extends Component {
|
||||
|
||||
return (
|
||||
<div className="h-100 w-100 overflow-x-hidden flex flex-column">
|
||||
<div className='pl3 pt2 bb mb3'>
|
||||
<h2>{state.station.substr(1)}</h2>
|
||||
<div
|
||||
className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
|
||||
style={{ height: "1rem" }}
|
||||
>
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</div>
|
||||
<div
|
||||
className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll flex-shrink-0"
|
||||
style={{ height: 48 }}
|
||||
>
|
||||
<a
|
||||
className="pointer"
|
||||
onClick={() => {
|
||||
store.setState(previousState => ({
|
||||
sidebarShown: !previousState.sidebarShown
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<img
|
||||
className={`v-btm pr3 dn ` + popoutSwitcher}
|
||||
src={
|
||||
this.props.sidebarShown
|
||||
? "/~chat/img/ChatSwitcherLink.png"
|
||||
: "/~chat/img/ChatSwitcherClosed.png"
|
||||
}
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
</a>
|
||||
<Link to={`/~chat/` + isinPopout + `room` + state.station}>
|
||||
<h2
|
||||
className="mono dib f7 fw4 v-top"
|
||||
style={{ width: "max-content" }}
|
||||
>
|
||||
{state.station.substr(1)}
|
||||
</h2>
|
||||
</Link>
|
||||
<ChatTabBar
|
||||
{...props}
|
||||
station={state.station}
|
||||
numPeers={writeGroup.length} />
|
||||
</div>
|
||||
<div className="w-100 cf pa3">
|
||||
<h2>{text}</h2>
|
||||
<div className="w-100 pl3 mt4 cf">
|
||||
<h2 className="f8 pb2">{text}</h2>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let popoutSwitcher = this.props.popout
|
||||
? "dn-m dn-l dn-xl"
|
||||
: "dib-m dib-l dib-xl";
|
||||
let isinPopout = this.props.popout ? "popout/" : "";
|
||||
|
||||
return (
|
||||
<div className="h-100 w-100 overflow-x-hidden flex flex-column">
|
||||
<div className='pl3 pt2 bb mb3'>
|
||||
<h2>{state.station.substr(1)}</h2>
|
||||
<div
|
||||
className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
|
||||
style={{ height: "1rem" }}
|
||||
>
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</div>
|
||||
<div
|
||||
className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll flex-shrink-0"
|
||||
style={{ height: 48 }}
|
||||
>
|
||||
<a
|
||||
className="pointer"
|
||||
onClick={() => {
|
||||
store.setState(previousState => ({
|
||||
sidebarShown: !previousState.sidebarShown
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<img
|
||||
className={`v-btm pr3 dn ` + popoutSwitcher}
|
||||
src={
|
||||
this.props.sidebarShown
|
||||
? "/~chat/img/ChatSwitcherLink.png"
|
||||
: "/~chat/img/ChatSwitcherClosed.png"
|
||||
}
|
||||
height="16"
|
||||
width="16"
|
||||
/>
|
||||
</a>
|
||||
<Link to={`/~chat/` + isinPopout + `room` + state.station}>
|
||||
<h2
|
||||
className="mono dib f7 fw4 v-top"
|
||||
style={{ width: "max-content" }}
|
||||
>
|
||||
{state.station.substr(1)}
|
||||
</h2>
|
||||
</Link>
|
||||
<ChatTabBar
|
||||
{...props}
|
||||
station={state.station}
|
||||
numPeers={writeGroup.length}
|
||||
isOwner={deSig(props.match.params.ship) === window.ship} />
|
||||
isOwner={deSig(props.match.params.ship) === window.ship}
|
||||
popout={this.props.popout}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-100 cf pa3">
|
||||
<h2>Settings</h2>
|
||||
<div className="w-100 pl3 mt4 cf">
|
||||
<h2 className="f8 pb2">Chat Settings</h2>
|
||||
{this.renderDelete()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,10 @@ export class Sidebar extends Component {
|
||||
this.props.history.push('/~chat/new');
|
||||
}
|
||||
|
||||
onClickJoin() {
|
||||
this.props.history.push('/~chat/join')
|
||||
}
|
||||
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
let station = `/${props.match.params.ship}/${props.match.params.station}`;
|
||||
@ -67,20 +71,23 @@ export class Sidebar extends Component {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="h-100 w-100 overflow-x-hidden flex flex-column">
|
||||
<div className="pl3 pr3 pt2 pb3 cf bb b--black-30" style={{height: '88px'}}>
|
||||
<h2 className="dib w-50 gray"><Link to="/~chat">Chat</Link></h2>
|
||||
<a
|
||||
className="dib tr w-50 pointer plus-font"
|
||||
onClick={this.onClickNew.bind(this)}>+</a>
|
||||
</div>
|
||||
<div className="overflow-y-auto" style={{
|
||||
height: 'calc(100vh - 60px - 48px)'
|
||||
}}>
|
||||
<div className="h-100-minus-96-s h-100 w-100 overflow-x-hidden flex flex-column relative z1">
|
||||
<div className="overflow-y-auto h-100">
|
||||
{sidebarInvites}
|
||||
{sidebarItems}
|
||||
</div>
|
||||
<div className="absolute z2 tc w-100 bg-transparent"
|
||||
style={{ bottom: 10 }}>
|
||||
<a className="dib f9 pa3 bt bb bl br tc pointer bg-white"
|
||||
onClick={this.onClickNew.bind(this)}>
|
||||
Create New Chat
|
||||
</a>
|
||||
<a className="dib f9 pa3 bt bb br tl pointer bg-white"
|
||||
onClick={this.onClickJoin.bind(this)}>
|
||||
Join Existing Chat
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,20 +5,53 @@ import { HeaderBar } from '/components/lib/header-bar.js';
|
||||
|
||||
export class Skeleton extends Component {
|
||||
render() {
|
||||
|
||||
let sidebarHide = (!this.props.sidebarShown || this.props.popout)
|
||||
? "dn"
|
||||
: "";
|
||||
|
||||
let sidebarHideOnMobile = this.props.sidebarHideOnMobile
|
||||
? "dn-s"
|
||||
: "";
|
||||
|
||||
let chatHideOnMobile = this.props.chatHideonMobile
|
||||
? "dn-s"
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div className="h-100 w-100 absolute">
|
||||
<HeaderBar spinner={this.props.spinner}/>
|
||||
<div className="cf w-100 absolute flex"
|
||||
style={{
|
||||
height: 'calc(100% - 48px)'
|
||||
}}>
|
||||
<div className="fl h-100 br b--black-30 overflow-x-hidden" style={{ flexBasis: 320 }}>
|
||||
<HeaderBar spinner={this.props.spinner} popout={this.props.popout} />
|
||||
<div className={`cf w-100 absolute flex ` +
|
||||
((this.props.chatHideonMobile)
|
||||
? "h-100 "
|
||||
: "h-100-minus-48-s ") +
|
||||
((this.props.popout)
|
||||
? "h-100"
|
||||
: "h-minus-48-m h-100-minus-48-l h-100-minus-48-xl")}>
|
||||
<div className={
|
||||
`fl h-100 br b--gray4 overflow-x-hidden
|
||||
flex-basis-full-s flex-basis-300-m flex-basis-300-l
|
||||
flex-basis-300-xl ` +
|
||||
sidebarHide + " " +
|
||||
sidebarHideOnMobile
|
||||
}>
|
||||
<div className={
|
||||
chatHideOnMobile === ""
|
||||
? "dn"
|
||||
: "db dn-m dn-l dn-xl w-100 inter pt4 f8"
|
||||
}>
|
||||
<a className="pl3 pb6" href="/">
|
||||
{"⟵ Landscape"}
|
||||
</a>
|
||||
<div className="bb b--gray4 inter f8 pl3 pt6 pb3">All Chats</div>
|
||||
</div>
|
||||
{this.props.sidebar}
|
||||
</div>
|
||||
<div className="h-100 fr" style={{
|
||||
flexGrow: 1,
|
||||
width: 'calc(100% - 320px)'
|
||||
}}>
|
||||
<div className={"h-100 fr " + chatHideOnMobile}
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
width: "calc(100% - 300px)"
|
||||
}}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,6 +13,7 @@ class Store {
|
||||
permissions: {},
|
||||
invites: {},
|
||||
spinner: false,
|
||||
sidebarShown: true,
|
||||
pendingMessages: new Map([])
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user