add button for chat channel settings
This commit is contained in:
parent
26ed411129
commit
7777fb2bb2
|
@ -16,6 +16,7 @@ import { MAX_CHAT_MESSAGES } from '../core/constants';
|
|||
|
||||
import {
|
||||
showUserAreaModal,
|
||||
showChatModal,
|
||||
setChatChannel,
|
||||
fetchChatMessages,
|
||||
setChatInputMessage,
|
||||
|
@ -29,6 +30,7 @@ function escapeRegExp(string) {
|
|||
}
|
||||
|
||||
const Chat = ({
|
||||
showExpand,
|
||||
channels,
|
||||
messages,
|
||||
chatChannel,
|
||||
|
@ -40,11 +42,14 @@ const Chat = ({
|
|||
fetchMessages,
|
||||
fetching,
|
||||
blocked,
|
||||
triggerModal,
|
||||
}) => {
|
||||
const listRef = useRef();
|
||||
const targetRef = useRef();
|
||||
const [selection, setSelection] = useState(null);
|
||||
const [nameRegExp, setNameRegExp] = useState(null);
|
||||
const [blockedIds, setBlockedIds] = useState([]);
|
||||
const [btnSize, setBtnSize] = useState(20);
|
||||
|
||||
const { stayScrolled } = useStayScrolled(listRef, {
|
||||
initialScroll: Infinity,
|
||||
|
@ -77,6 +82,13 @@ const Chat = ({
|
|||
setNameRegExp(regExp);
|
||||
}, [ownName]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
const fontSize = Math.round(targetRef.current.offsetHeight / 10);
|
||||
setBtnSize(Math.min(28, fontSize));
|
||||
}, 330);
|
||||
}, [targetRef]);
|
||||
|
||||
useEffect(() => {
|
||||
const bl = [];
|
||||
for (let i = 0; i < blocked.length; i += 1) {
|
||||
|
@ -112,74 +124,101 @@ const Chat = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'relative', width: '100%', height: '100%' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<ul
|
||||
className="chatarea"
|
||||
ref={listRef}
|
||||
style={{ flexGrow: 1 }}
|
||||
onMouseUp={() => { setSelection(saveSelection); }}
|
||||
role="presentation"
|
||||
>
|
||||
{
|
||||
(!channelMessages.length)
|
||||
&& (
|
||||
<ChatMessage
|
||||
name="info"
|
||||
msgArray={splitChatMessage('Start chatting here', nameRegExp)}
|
||||
country="xx"
|
||||
uid={0}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
channelMessages.map((message) => ((blockedIds.includes(message[3]))
|
||||
? null : (
|
||||
<ChatMessage
|
||||
name={message[0]}
|
||||
msgArray={splitChatMessage(message[1], nameRegExp)}
|
||||
country={message[2]}
|
||||
uid={message[3]}
|
||||
/>
|
||||
)))
|
||||
}
|
||||
</ul>
|
||||
{(ownName) ? (
|
||||
<div classNam="chatinput">
|
||||
<form
|
||||
onSubmit={(e) => handleSubmit(e)}
|
||||
style={{ display: 'flex', flexDirection: 'row' }}
|
||||
>
|
||||
<input
|
||||
style={{ flexGrow: 1, minWidth: 40 }}
|
||||
value={inputMessage}
|
||||
onChange={(e) => setInputMessage(e.target.value)}
|
||||
id="chatmsginput"
|
||||
maxLength="200"
|
||||
type="text"
|
||||
placeholder="Chat here"
|
||||
/>
|
||||
<button
|
||||
style={{ flexGrow: 0 }}
|
||||
type="submit"
|
||||
>
|
||||
‣
|
||||
</button>
|
||||
<ChannelDropDown />
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="modallink"
|
||||
onClick={open}
|
||||
style={{ textAlign: 'center', fontSize: 13 }}
|
||||
<div
|
||||
ref={targetRef}
|
||||
style={{
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="chatlink"
|
||||
style={{
|
||||
fontSize: btnSize,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
>⚙</span>
|
||||
|
||||
{(showExpand) &&
|
||||
<span
|
||||
onClick={triggerModal}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
You must be logged in to chat
|
||||
</div>
|
||||
)}
|
||||
tabIndex={-1}
|
||||
>↷</span>
|
||||
}
|
||||
</div>
|
||||
<ul
|
||||
className="chatarea"
|
||||
ref={listRef}
|
||||
style={{ flexGrow: 1 }}
|
||||
onMouseUp={() => { setSelection(saveSelection); }}
|
||||
role="presentation"
|
||||
>
|
||||
{
|
||||
(!channelMessages.length)
|
||||
&& (
|
||||
<ChatMessage
|
||||
name="info"
|
||||
msgArray={splitChatMessage('Start chatting here', nameRegExp)}
|
||||
country="xx"
|
||||
uid={0}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
channelMessages.map((message) => ((blockedIds.includes(message[3]))
|
||||
? null : (
|
||||
<ChatMessage
|
||||
name={message[0]}
|
||||
msgArray={splitChatMessage(message[1], nameRegExp)}
|
||||
country={message[2]}
|
||||
uid={message[3]}
|
||||
/>
|
||||
)))
|
||||
}
|
||||
</ul>
|
||||
{(ownName) ? (
|
||||
<div classNam="chatinput">
|
||||
<form
|
||||
onSubmit={(e) => handleSubmit(e)}
|
||||
style={{ display: 'flex', flexDirection: 'row' }}
|
||||
>
|
||||
<input
|
||||
style={{ flexGrow: 1, minWidth: 40 }}
|
||||
value={inputMessage}
|
||||
onChange={(e) => setInputMessage(e.target.value)}
|
||||
id="chatmsginput"
|
||||
maxLength="200"
|
||||
type="text"
|
||||
placeholder="Chat here"
|
||||
/>
|
||||
<button
|
||||
style={{ flexGrow: 0 }}
|
||||
type="submit"
|
||||
>
|
||||
‣
|
||||
</button>
|
||||
<ChannelDropDown />
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="modallink"
|
||||
onClick={open}
|
||||
style={{ textAlign: 'center', fontSize: 13 }}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
You must be logged in to chat
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -212,6 +251,9 @@ function mapDispatchToProps(dispatch) {
|
|||
open() {
|
||||
dispatch(showUserAreaModal());
|
||||
},
|
||||
triggerModal() {
|
||||
dispatch(showChatModal(true));
|
||||
},
|
||||
setChannel(channelId) {
|
||||
dispatch(setChatChannel(channelId));
|
||||
},
|
||||
|
|
|
@ -40,13 +40,7 @@ function ChatBox({
|
|||
className={(chatOpen && render) ? 'chatbox show' : 'chatbox'}
|
||||
onTransitionEnd={onTransitionEnd}
|
||||
>
|
||||
<div
|
||||
id="chatlink"
|
||||
onClick={triggerModal}
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
>↷</div>
|
||||
<Chat />
|
||||
<Chat showExpand={true} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
|
|
@ -60,7 +60,7 @@ async function startDm(req: Request, res: Response) {
|
|||
});
|
||||
return;
|
||||
}
|
||||
if (blockDm) {
|
||||
if (targetUser.blockDm) {
|
||||
res.status(401);
|
||||
res.json({
|
||||
errors: ['Target user doesn\'t allo DMs'],
|
||||
|
|
|
@ -102,7 +102,7 @@ tr:nth-child(even) {
|
|||
color: #94ff94;
|
||||
}
|
||||
|
||||
#chatlink {
|
||||
.chatlink {
|
||||
color: #f9edde;
|
||||
}
|
||||
|
||||
|
|
|
@ -99,7 +99,7 @@ tr:nth-child(even) {
|
|||
color: #94ff94;
|
||||
}
|
||||
|
||||
#chatlink {
|
||||
.chatlink {
|
||||
color: #f9edde;
|
||||
}
|
||||
|
||||
|
|
|
@ -473,13 +473,15 @@ tr:nth-child(even) {
|
|||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#chatlink {
|
||||
.chatlink {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
right: 17px;
|
||||
top: 5px;
|
||||
right: 17px;
|
||||
font-weight: bold;
|
||||
color: #4a4a49;
|
||||
transition: font-size 0.2s;
|
||||
}
|
||||
.chatlink > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user