Add typing outside focus on msg feild (#112)

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-13 14:31:43 +05:30
parent 6d5d40b8e3
commit 5797a1d8e5
6 changed files with 23 additions and 40 deletions

View file

@ -49,7 +49,7 @@
&::before {
position: absolute;
top: 0;
z-index: 99;
content: '';
display: inline-block;
width: 100%;

View file

@ -220,14 +220,6 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
}
deactivateCmd();
}
function executeCmd() {
if (cmd.suggestions.length === 0) return;
fireCmd({
prefix: cmd.prefix,
option: cmd.option,
result: cmd.suggestions[0],
});
}
function listenKeyboard(event) {
const { activeElement } = document;
@ -258,13 +250,11 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
useEffect(() => {
if (cmd !== null) document.body.addEventListener('keydown', listenKeyboard);
viewEvent.on('cmd_process', processCmd);
viewEvent.on('cmd_exe', executeCmd);
asyncSearch.on(asyncSearch.RESULT_SENT, displaySuggestions);
return () => {
if (cmd !== null) document.body.removeEventListener('keydown', listenKeyboard);
viewEvent.removeListener('cmd_process', processCmd);
viewEvent.removeListener('cmd_exe', executeCmd);
asyncSearch.removeListener(asyncSearch.RESULT_SENT, displaySuggestions);
};
}, [cmd]);

View file

@ -243,10 +243,7 @@ function RoomViewInput({
const handleKeyDown = (e) => {
if (e.keyCode === 13 && e.shiftKey === false) {
e.preventDefault();
if (isCmdActivated) {
viewEvent.emit('cmd_exe');
} else sendMessage();
sendMessage();
}
};
@ -298,7 +295,7 @@ function RoomViewInput({
function renderInputs() {
if (!canISend) {
return (
<Text className="room-input__disallowed">You do not have permission to post to this room</Text>
<Text className="room-input__alert">You do not have permission to post to this room</Text>
);
}
return (
@ -312,6 +309,7 @@ function RoomViewInput({
<ScrollView autoHide>
<Text className="room-input__textarea-wrapper">
<TextareaAutosize
id="message-textarea"
ref={textAreaRef}
onChange={handleMsgTyping}
onPaste={handlePaste}
@ -385,9 +383,7 @@ function RoomViewInput({
{ attachment !== null && attachFile() }
<form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
{
roomTimeline.room.isSpaceRoom()
? <Text className="room-input__space" variant="b1">Spaces are yet to be implemented</Text>
: renderInputs()
renderInputs()
}
</form>
</>

View file

@ -1,18 +1,12 @@
.room-input {
padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
display: flex;
min-height: 48px;
min-height: 56px;
&__disallowed {
flex: 1;
text-align: center;
}
&__space {
min-width: 0;
align-self: center;
&__alert {
margin: auto;
padding: 0 var(--sp-tight);
text-align: center;
}
&__input-container {
@ -30,17 +24,6 @@
transform: scale(0.8);
margin: 0 var(--sp-extra-tight);
}
& .btn-cmd-esc {
display: none;
margin: 0 var(--sp-extra-tight);
padding: var(--sp-ultra-tight) var(--sp-extra-tight);
background-color: var(--bg-surface);
border-radius: calc(var(--bo-radius) / 2);
box-shadow: var(--bs-surface-border);
cursor: pointer;
& .text { color: var(--tc-surface-normal); }
}
& .scrollbar {
max-height: 50vh;

View file

@ -54,6 +54,7 @@
&::after {
position: absolute;
top: 0;
z-index: 99;
content: "";
display: inline-block;
width: 100%;

View file

@ -6,11 +6,24 @@ function listenKeyboard(event) {
if (event.ctrlKey) {
// k - for search Modal
if (event.keyCode === 75) {
if (navigation.isRawModalVisible) return;
event.preventDefault();
if (navigation.isRawModalVisible) return;
openSearch();
}
}
if (!event.ctrlKey && !event.altKey) {
if (navigation.isRawModalVisible) return;
if (['input', 'textarea'].includes(document.activeElement.type)) {
return;
}
if (event.keyCode < 48
|| (event.keyCode >= 91 && event.keyCode <= 93)
|| (event.keyCode >= 112 && event.keyCode <= 183)) {
return;
}
const msgTextarea = document.getElementById('message-textarea');
msgTextarea?.focus();
}
}
function initHotkeys() {