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 {
|
import {
|
||||||
showUserAreaModal,
|
showUserAreaModal,
|
||||||
|
showChatModal,
|
||||||
setChatChannel,
|
setChatChannel,
|
||||||
fetchChatMessages,
|
fetchChatMessages,
|
||||||
setChatInputMessage,
|
setChatInputMessage,
|
||||||
|
@ -29,6 +30,7 @@ function escapeRegExp(string) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Chat = ({
|
const Chat = ({
|
||||||
|
showExpand,
|
||||||
channels,
|
channels,
|
||||||
messages,
|
messages,
|
||||||
chatChannel,
|
chatChannel,
|
||||||
|
@ -40,11 +42,14 @@ const Chat = ({
|
||||||
fetchMessages,
|
fetchMessages,
|
||||||
fetching,
|
fetching,
|
||||||
blocked,
|
blocked,
|
||||||
|
triggerModal,
|
||||||
}) => {
|
}) => {
|
||||||
const listRef = useRef();
|
const listRef = useRef();
|
||||||
|
const targetRef = useRef();
|
||||||
const [selection, setSelection] = useState(null);
|
const [selection, setSelection] = useState(null);
|
||||||
const [nameRegExp, setNameRegExp] = useState(null);
|
const [nameRegExp, setNameRegExp] = useState(null);
|
||||||
const [blockedIds, setBlockedIds] = useState([]);
|
const [blockedIds, setBlockedIds] = useState([]);
|
||||||
|
const [btnSize, setBtnSize] = useState(20);
|
||||||
|
|
||||||
const { stayScrolled } = useStayScrolled(listRef, {
|
const { stayScrolled } = useStayScrolled(listRef, {
|
||||||
initialScroll: Infinity,
|
initialScroll: Infinity,
|
||||||
|
@ -77,6 +82,13 @@ const Chat = ({
|
||||||
setNameRegExp(regExp);
|
setNameRegExp(regExp);
|
||||||
}, [ownName]);
|
}, [ownName]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const fontSize = Math.round(targetRef.current.offsetHeight / 10);
|
||||||
|
setBtnSize(Math.min(28, fontSize));
|
||||||
|
}, 330);
|
||||||
|
}, [targetRef]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const bl = [];
|
const bl = [];
|
||||||
for (let i = 0; i < blocked.length; i += 1) {
|
for (let i = 0; i < blocked.length; i += 1) {
|
||||||
|
@ -112,8 +124,36 @@ const Chat = ({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'relative', width: '100%', height: '100%' }}>
|
<div
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
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={-1}
|
||||||
|
>↷</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
<ul
|
<ul
|
||||||
className="chatarea"
|
className="chatarea"
|
||||||
ref={listRef}
|
ref={listRef}
|
||||||
|
@ -180,7 +220,6 @@ const Chat = ({
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -212,6 +251,9 @@ function mapDispatchToProps(dispatch) {
|
||||||
open() {
|
open() {
|
||||||
dispatch(showUserAreaModal());
|
dispatch(showUserAreaModal());
|
||||||
},
|
},
|
||||||
|
triggerModal() {
|
||||||
|
dispatch(showChatModal(true));
|
||||||
|
},
|
||||||
setChannel(channelId) {
|
setChannel(channelId) {
|
||||||
dispatch(setChatChannel(channelId));
|
dispatch(setChatChannel(channelId));
|
||||||
},
|
},
|
||||||
|
|
|
@ -40,13 +40,7 @@ function ChatBox({
|
||||||
className={(chatOpen && render) ? 'chatbox show' : 'chatbox'}
|
className={(chatOpen && render) ? 'chatbox show' : 'chatbox'}
|
||||||
onTransitionEnd={onTransitionEnd}
|
onTransitionEnd={onTransitionEnd}
|
||||||
>
|
>
|
||||||
<div
|
<Chat showExpand={true} />
|
||||||
id="chatlink"
|
|
||||||
onClick={triggerModal}
|
|
||||||
role="button"
|
|
||||||
tabIndex={-1}
|
|
||||||
>↷</div>
|
|
||||||
<Chat />
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
|
@ -60,7 +60,7 @@ async function startDm(req: Request, res: Response) {
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (blockDm) {
|
if (targetUser.blockDm) {
|
||||||
res.status(401);
|
res.status(401);
|
||||||
res.json({
|
res.json({
|
||||||
errors: ['Target user doesn\'t allo DMs'],
|
errors: ['Target user doesn\'t allo DMs'],
|
||||||
|
|
|
@ -102,7 +102,7 @@ tr:nth-child(even) {
|
||||||
color: #94ff94;
|
color: #94ff94;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatlink {
|
.chatlink {
|
||||||
color: #f9edde;
|
color: #f9edde;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -99,7 +99,7 @@ tr:nth-child(even) {
|
||||||
color: #94ff94;
|
color: #94ff94;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatlink {
|
.chatlink {
|
||||||
color: #f9edde;
|
color: #f9edde;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -473,13 +473,15 @@ tr:nth-child(even) {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
#chatlink {
|
.chatlink {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-weight: bold;
|
|
||||||
font-size: 20px;
|
|
||||||
right: 17px;
|
|
||||||
top: 5px;
|
top: 5px;
|
||||||
|
right: 17px;
|
||||||
|
font-weight: bold;
|
||||||
color: #4a4a49;
|
color: #4a4a49;
|
||||||
|
transition: font-size 0.2s;
|
||||||
|
}
|
||||||
|
.chatlink > span {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user