Page MenuHomePhabricator
Differential D3933

[web] Tweak layout of `ThreadSettingsGeneralTab`
ClosedPublic
Actions

Authored by atul on May 5 2022, 8:09 AM.
Tags
None
Referenced Files
F5106737: D3933.diff
Tue, Apr 1, 9:20 AM
Unknown Object (File)
Mon, Mar 31, 11:48 PM
Unknown Object (File)
Mon, Mar 31, 4:35 PM
Unknown Object (File)
Sun, Mar 30, 11:41 AM
Unknown Object (File)
Wed, Mar 19, 8:59 PM
Unknown Object (File)
Tue, Mar 4, 4:46 AM
Unknown Object (File)
Feb 12 2025, 10:20 PM
Unknown Object (File)
Feb 6 2025, 11:50 PM
View All Files
Subscribers
• abosh
• adrian
• karol

Details

Reviewers
ashoat
tomek
Commits
rCOMM8a3cb15a75dc: [web] Tweak layout of `ThreadSettingsGeneralTab`
Summary

Make some tweaks to ThreadSettingsGeneralTab to space out the form elements a bit and in a more consistent way.

Depends on D3932

Test Plan

Here's how it looks before and after:

Before:

Screen Shot 2022-05-05 at 11.05.34 AM.png (1×712 px, 76 KB)

After:

Screen Shot 2022-05-05 at 11.05.21 AM.png (1×712 px, 74 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

Diff 12298

View Options

web/modals/threads/thread-settings-general-tab.css

Show All 36 Lines const {
threadInfo, threadInfo,
setErrorMessage, setErrorMessage,
} = props; } = props;
const modalContext = useModalContext(); const modalContext = useModalContext();
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callDeleteThread = useServerCall(deleteThread); const callDeleteThread = useServerCall(deleteThread);
const accountPasswordInputRef = React.useRef();
const deleteThreadAction = React.useCallback(async () => { const deleteThreadAction = React.useCallback(async () => {
try { try {
const response = await callDeleteThread(threadInfo.id, accountPassword); const response = await callDeleteThread(threadInfo.id, accountPassword);
modalContext.clearModal(); modalContext.clearModal();
return response; return response;
} catch (e) { } catch (e) {
setErrorMessage( setErrorMessage(
e.message === 'invalid_credentials' ? 'wrong password' : 'unkown error', e.message === 'invalid_credentials' ? 'wrong password' : 'unkown error',
); );
setAccountPassword(''); setAccountPassword('');
// TODO: accountPasswordInput.focus() accountPasswordInputRef.current?.focus();
// (once ref is moved up to functional component)
throw e; throw e;
} }
}, [ }, [
accountPassword, accountPassword,
callDeleteThread, callDeleteThread,
modalContext, modalContext,
setAccountPassword, setAccountPassword,
setErrorMessage, setErrorMessage,
Show All 23 Lines <>
<div className={css.form_title}>Account password</div> <div className={css.form_title}>Account password</div>
<div className={css.form_content}> <div className={css.form_content}>
<input <input
type="password" type="password"
placeholder="Personal account password" placeholder="Personal account password"
value={accountPassword} value={accountPassword}
onChange={onChangeAccountPassword} onChange={onChangeAccountPassword}
disabled={inputDisabled} disabled={inputDisabled}
ref={accountPasswordInputRef}
/> />
</div> </div>
</div> </div>
<Button onClick={onDelete} variant="danger" disabled={inputDisabled}> <Button onClick={onDelete} variant="danger" disabled={inputDisabled}>
Delete Delete
</Button> </Button>
</> </>
); );
} }
export default ThreadSettingsDeleteTab; export default ThreadSettingsDeleteTab;
View Options

web/modals/threads/thread-settings-general-tab.react.js

Show All 36 Lines const {
threadInfo, threadInfo,
setErrorMessage, setErrorMessage,
} = props; } = props;
const modalContext = useModalContext(); const modalContext = useModalContext();
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callDeleteThread = useServerCall(deleteThread); const callDeleteThread = useServerCall(deleteThread);
const accountPasswordInputRef = React.useRef();
const deleteThreadAction = React.useCallback(async () => { const deleteThreadAction = React.useCallback(async () => {
try { try {
const response = await callDeleteThread(threadInfo.id, accountPassword); const response = await callDeleteThread(threadInfo.id, accountPassword);
modalContext.clearModal(); modalContext.clearModal();
return response; return response;
} catch (e) { } catch (e) {
setErrorMessage( setErrorMessage(
e.message === 'invalid_credentials' ? 'wrong password' : 'unkown error', e.message === 'invalid_credentials' ? 'wrong password' : 'unkown error',
); );
setAccountPassword(''); setAccountPassword('');
// TODO: accountPasswordInput.focus() accountPasswordInputRef.current?.focus();
// (once ref is moved up to functional component)
throw e; throw e;
} }
}, [ }, [
accountPassword, accountPassword,
callDeleteThread, callDeleteThread,
modalContext, modalContext,
setAccountPassword, setAccountPassword,
setErrorMessage, setErrorMessage,
Show All 23 Lines <>
<div className={css.form_title}>Account password</div> <div className={css.form_title}>Account password</div>
<div className={css.form_content}> <div className={css.form_content}>
<input <input
type="password" type="password"
placeholder="Personal account password" placeholder="Personal account password"
value={accountPassword} value={accountPassword}
onChange={onChangeAccountPassword} onChange={onChangeAccountPassword}
disabled={inputDisabled} disabled={inputDisabled}
ref={accountPasswordInputRef}
/> />
</div> </div>
</div> </div>
<Button onClick={onDelete} variant="danger" disabled={inputDisabled}> <Button onClick={onDelete} variant="danger" disabled={inputDisabled}>
Delete Delete
</Button> </Button>
</> </>
); );
} }
export default ThreadSettingsDeleteTab; export default ThreadSettingsDeleteTab;
View Options

web/modals/threads/thread-settings-modal.css

Show All 36 Lines const {
threadInfo, threadInfo,
setErrorMessage, setErrorMessage,
} = props; } = props;
const modalContext = useModalContext(); const modalContext = useModalContext();
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callDeleteThread = useServerCall(deleteThread); const callDeleteThread = useServerCall(deleteThread);
const accountPasswordInputRef = React.useRef();
const deleteThreadAction = React.useCallback(async () => { const deleteThreadAction = React.useCallback(async () => {
try { try {
const response = await callDeleteThread(threadInfo.id, accountPassword); const response = await callDeleteThread(threadInfo.id, accountPassword);
modalContext.clearModal(); modalContext.clearModal();
return response; return response;
} catch (e) { } catch (e) {
setErrorMessage( setErrorMessage(
e.message === 'invalid_credentials' ? 'wrong password' : 'unkown error', e.message === 'invalid_credentials' ? 'wrong password' : 'unkown error',
); );
setAccountPassword(''); setAccountPassword('');
// TODO: accountPasswordInput.focus() accountPasswordInputRef.current?.focus();
// (once ref is moved up to functional component)
throw e; throw e;
} }
}, [ }, [
accountPassword, accountPassword,
callDeleteThread, callDeleteThread,
modalContext, modalContext,
setAccountPassword, setAccountPassword,
setErrorMessage, setErrorMessage,
Show All 23 Lines <>
<div className={css.form_title}>Account password</div> <div className={css.form_title}>Account password</div>
<div className={css.form_content}> <div className={css.form_content}>
<input <input
type="password" type="password"
placeholder="Personal account password" placeholder="Personal account password"
value={accountPassword} value={accountPassword}
onChange={onChangeAccountPassword} onChange={onChangeAccountPassword}
disabled={inputDisabled} disabled={inputDisabled}
ref={accountPasswordInputRef}
/> />
</div> </div>
</div> </div>
<Button onClick={onDelete} variant="danger" disabled={inputDisabled}> <Button onClick={onDelete} variant="danger" disabled={inputDisabled}>
Delete Delete
</Button> </Button>
</> </>
); );
} }
export default ThreadSettingsDeleteTab; export default ThreadSettingsDeleteTab;