hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fixed #75: added esc btn to disable cmd mode

Browse source
This commit is contained in:
unknown 2021-08-26 15:45:31 +05:30
parent b733b3c59f
commit 4d44562ada
2 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/app/organisms/channel/ChannelViewInput.jsx
View file

@ -45,6 +45,7 @@ function ChannelViewInput({
const uploadInputRef = useRef(null); const uploadInputRef = useRef(null);
const uploadProgressRef = useRef(null); const uploadProgressRef = useRef(null);
const rightOptionsRef = useRef(null); const rightOptionsRef = useRef(null);
const escBtnRef = useRef(null);
const TYPING_TIMEOUT = 5000; const TYPING_TIMEOUT = 5000;
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
@ -99,6 +100,7 @@ function ChannelViewInput({
isCmdActivated = true; isCmdActivated = true;
requestAnimationFrame(() => { requestAnimationFrame(() => {
inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-positive)'; inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-positive)';
escBtnRef.current.style.display = 'block';
}); });
rightOptionsA11Y(false); rightOptionsA11Y(false);
viewEvent.emit('cmd_activate', prefix); viewEvent.emit('cmd_activate', prefix);
@ -107,12 +109,17 @@ function ChannelViewInput({
if (inputBaseRef.current !== null) { if (inputBaseRef.current !== null) {
requestAnimationFrame(() => { requestAnimationFrame(() => {
inputBaseRef.current.style.boxShadow = 'var(--bs-surface-border)'; inputBaseRef.current.style.boxShadow = 'var(--bs-surface-border)';
escBtnRef.current.style.display = 'none';
}); });
rightOptionsA11Y(true); rightOptionsA11Y(true);
} }
isCmdActivated = false; isCmdActivated = false;
cmdCursorPos = null; cmdCursorPos = null;
} }
function deactivateCmdAndEmit() {
deactivateCmd();
viewEvent.emit('cmd_deactivate');
}
function errorCmd() { function errorCmd() {
requestAnimationFrame(() => { requestAnimationFrame(() => {
inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-danger)'; inputBaseRef.current.style.boxShadow = '0 0 0 1px var(--bg-danger)';
@ -186,11 +193,6 @@ function ChannelViewInput({
}, [roomId]); }, [roomId]);
async function sendMessage() { async function sendMessage() {
if (isCmdActivated) {
viewEvent.emit('cmd_exe');
return;
}
const msgBody = textAreaRef.current.value; const msgBody = textAreaRef.current.value;
if (roomsInput.isSending(roomId)) return; if (roomsInput.isSending(roomId)) return;
if (msgBody.trim() === '' && attachment === null) return; if (msgBody.trim() === '' && attachment === null) return;
@ -236,10 +238,7 @@ function ChannelViewInput({
const cmdParts = targetInput.match(CMD_REGEX); const cmdParts = targetInput.match(CMD_REGEX);
if (cmdParts === null) { if (cmdParts === null) {
if (isCmdActivated) { if (isCmdActivated) deactivateCmdAndEmit();
deactivateCmd();
viewEvent.emit('cmd_deactivate');
}
return; return;
} }
const cmdPrefix = cmdParts[1]; const cmdPrefix = cmdParts[1];
@ -249,8 +248,7 @@ function ChannelViewInput({
// skip emoji autofill command if link is suspected. // skip emoji autofill command if link is suspected.
const checkForLink = targetInput.slice(0, cmdParts.index); const checkForLink = targetInput.slice(0, cmdParts.index);
if (checkForLink.match(/(http|https|mailto|matrix|ircs|irc)$/)) { if (checkForLink.match(/(http|https|mailto|matrix|ircs|irc)$/)) {
deactivateCmd(); deactivateCmdAndEmit();
viewEvent.emit('cmd_deactivate');
return; return;
} }
} }
@ -276,7 +274,14 @@ function ChannelViewInput({
function handleKeyDown(e) { function handleKeyDown(e) {
if (e.keyCode === 13 && e.shiftKey === false) { if (e.keyCode === 13 && e.shiftKey === false) {
e.preventDefault(); e.preventDefault();
sendMessage();
if (isCmdActivated) {
viewEvent.emit('cmd_exe');
} else sendMessage();
}
if (e.keyCode === 27 && isCmdActivated) {
deactivateCmdAndEmit();
e.preventDefault();
} }
} }
@ -317,6 +322,7 @@ function ChannelViewInput({
</Text> </Text>
</ScrollView> </ScrollView>
{isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />} {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
<button ref={escBtnRef} tabIndex="-1" onClick={deactivateCmdAndEmit} className="btn-cmd-esc" type="button"><Text variant="b3">ESC</Text></button>
</div> </div>
<div ref={rightOptionsRef} className="channel-input__option-container"> <div ref={rightOptionsRef} className="channel-input__option-container">
<IconButton <IconButton

11
src/app/organisms/channel/ChannelViewInput.scss
View file

@ -25,6 +25,17 @@
transform: scale(0.8); transform: scale(0.8);
margin: 0 var(--sp-extra-tight); margin: 0 var(--sp-extra-tight);
} }
& .btn-cmd-esc {
display: none;
margin: 0 var(--sp-extra-tight);
padding: var(--sp-ultra-tight) var(--sp-tight);
border-radius: calc(var(--bo-radius) / 2);
box-shadow: var(--bs-surface-border);
cursor: pointer;
& .text { color: var(--tc-surface-normal); }
}
& .scrollbar { & .scrollbar {
max-height: 50vh; max-height: 50vh;
flex: 1; flex: 1;