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
Unknown Object (File)
Sat, Apr 19, 3:58 PM
Unknown Object (File)
Fri, Apr 18, 12:10 PM
Unknown Object (File)
Fri, Apr 18, 2:05 AM
Unknown Object (File)
Thu, Apr 17, 1:43 AM
Unknown Object (File)
Tue, Apr 8, 5:59 PM
Unknown Object (File)
Tue, Apr 8, 5:13 PM
Unknown Object (File)
Tue, Apr 8, 4:03 PM
Unknown Object (File)
Tue, Apr 8, 8:48 AM
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
Branch
master
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

Diff 12288

View Options

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

Show First 20 Lines • Show All 144 Lines • ▼ Show 20 Lines render(): React.Node {
if (messageActionButtons) { if (messageActionButtons) {
const actionLinksClassName = classNames({ const actionLinksClassName = classNames({
[css.messageActionActiveArea]: true, [css.messageActionActiveArea]: true,
[css.viewerMessageActionActiveArea]: isViewer, [css.viewerMessageActionActiveArea]: isViewer,
[css.nonViewerMessageActiveArea]: !isViewer, [css.nonViewerMessageActiveArea]: !isViewer,
}); });
messageActionLinks = ( messageActionLinks = (
<div className={actionLinksClassName}> <div className={actionLinksClassName}>{messageActionButtons}</div>
<div className={css.messageActionContainer}>
atulAuthorUnsubmitted
Done
Inline Actions

We push this styling "down" to the actual MessageActionButtons component.

atul: We push this styling "down" to the actual `MessageActionButtons` component.
{messageActionButtons}
</div>
</div>
); );
} }
const viewerActionLinks = isViewer ? messageActionLinks : null; const viewerActionLinks = isViewer ? messageActionLinks : null;
const nonViewerActionLinks = !isViewer ? messageActionLinks : null; const nonViewerActionLinks = !isViewer ? messageActionLinks : null;
let inlineSidebar = null; let inlineSidebar = null;
if (item.threadCreatedFromMessage) { if (item.threadCreatedFromMessage) {
▲ Show 20 Lines • Show All 74 Lines • Show Last 20 Lines
View Options

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

Show First 20 Lines • Show All 144 Lines • ▼ Show 20 Lines render(): React.Node {
if (messageActionButtons) { if (messageActionButtons) {
const actionLinksClassName = classNames({ const actionLinksClassName = classNames({
[css.messageActionActiveArea]: true, [css.messageActionActiveArea]: true,
[css.viewerMessageActionActiveArea]: isViewer, [css.viewerMessageActionActiveArea]: isViewer,
[css.nonViewerMessageActiveArea]: !isViewer, [css.nonViewerMessageActiveArea]: !isViewer,
}); });
messageActionLinks = ( messageActionLinks = (
<div className={actionLinksClassName}> <div className={actionLinksClassName}>{messageActionButtons}</div>
<div className={css.messageActionContainer}>
atulAuthorUnsubmitted
Done
Inline Actions

We push this styling "down" to the actual MessageActionButtons component.

atul: We push this styling "down" to the actual `MessageActionButtons` component.
{messageActionButtons}
</div>
</div>
); );
} }
const viewerActionLinks = isViewer ? messageActionLinks : null; const viewerActionLinks = isViewer ? messageActionLinks : null;
const nonViewerActionLinks = !isViewer ? messageActionLinks : null; const nonViewerActionLinks = !isViewer ? messageActionLinks : null;
let inlineSidebar = null; let inlineSidebar = null;
if (item.threadCreatedFromMessage) { if (item.threadCreatedFromMessage) {
▲ Show 20 Lines • Show All 74 Lines • Show Last 20 Lines
View Options

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

Show First 20 Lines • Show All 144 Lines • ▼ Show 20 Lines render(): React.Node {
if (messageActionButtons) { if (messageActionButtons) {
const actionLinksClassName = classNames({ const actionLinksClassName = classNames({
[css.messageActionActiveArea]: true, [css.messageActionActiveArea]: true,
[css.viewerMessageActionActiveArea]: isViewer, [css.viewerMessageActionActiveArea]: isViewer,
[css.nonViewerMessageActiveArea]: !isViewer, [css.nonViewerMessageActiveArea]: !isViewer,
}); });
messageActionLinks = ( messageActionLinks = (
<div className={actionLinksClassName}> <div className={actionLinksClassName}>{messageActionButtons}</div>
<div className={css.messageActionContainer}>
atulAuthorUnsubmitted
Done
Inline Actions

We push this styling "down" to the actual MessageActionButtons component.

atul: We push this styling "down" to the actual `MessageActionButtons` component.
{messageActionButtons}
</div>
</div>
); );
} }
const viewerActionLinks = isViewer ? messageActionLinks : null; const viewerActionLinks = isViewer ? messageActionLinks : null;
const nonViewerActionLinks = !isViewer ? messageActionLinks : null; const nonViewerActionLinks = !isViewer ? messageActionLinks : null;
let inlineSidebar = null; let inlineSidebar = null;
if (item.threadCreatedFromMessage) { if (item.threadCreatedFromMessage) {
▲ Show 20 Lines • Show All 74 Lines • Show Last 20 Lines