Page MenuHomePhabricator
Files F3119591

D4051.id12697.diff
No OneTemporary
Actions

D4051.id12697.diff
View Options

diff --git a/web/components/enum-settings-option-info.css b/web/components/enum-settings-option-info.css
--- a/web/components/enum-settings-option-info.css
+++ b/web/components/enum-settings-option-info.css
@@ -2,6 +2,7 @@
display: flex;
align-items: center;
column-gap: 4px;
+ max-width: 160px;
}
div.optionInfoInvalid {
diff --git a/web/modals/threads/settings/thread-settings-privacy-tab.css b/web/modals/threads/settings/thread-settings-privacy-tab.css
--- a/web/modals/threads/settings/thread-settings-privacy-tab.css
+++ b/web/modals/threads/settings/thread-settings-privacy-tab.css
@@ -4,10 +4,8 @@
font-weight: 600;
}
-span.form_enum_description {
- display: flex;
- font-size: var(--xs-font-12);
- color: gray;
+div.enum_container {
+ padding: 12px 0;
}
.save_button {
diff --git a/web/modals/threads/settings/thread-settings-privacy-tab.react.js b/web/modals/threads/settings/thread-settings-privacy-tab.react.js
--- a/web/modals/threads/settings/thread-settings-privacy-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-privacy-tab.react.js
@@ -20,11 +20,27 @@
} from 'lib/utils/action-utils';
import Button from '../../../components/button.react';
+import EnumSettingsOption from '../../../components/enum-settings-option.react';
+import SWMansionIcon from '../../../SWMansionIcon.react';
import { useModalContext } from '../../modal-provider.react';
import css from './thread-settings-privacy-tab.css';
const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes;
+const openStatements = [
+ {
+ statement: threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD],
+ isStatementValid: undefined,
+ },
+];
+
+const secretStatements = [
+ {
+ statement: threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD],
+ isStatementValid: undefined,
+ },
+];
+
type ThreadSettingsPrivacyTabProps = {
+inputDisabled: boolean,
+threadInfo: ThreadInfo,
@@ -52,19 +68,6 @@
[queuedChanges],
);
- const onChangeThreadType = React.useCallback(
- (event: SyntheticEvent<HTMLInputElement>) => {
- const uiValue = assertThreadType(parseInt(event.currentTarget.value, 10));
- setQueuedChanges(prevQueuedChanges =>
- Object.freeze({
- ...prevQueuedChanges,
- type: uiValue !== threadInfo.type ? uiValue : undefined,
- }),
- );
- },
- [setQueuedChanges, threadInfo.type],
- );
-
const changeThreadSettingsAction = React.useCallback(async () => {
try {
const response = await callChangeThreadSettings({
@@ -98,51 +101,59 @@
[changeThreadSettingsAction, dispatchActionPromise],
);
+ const onOpenSelected = React.useCallback(() => {
+ const uiValue = assertThreadType(COMMUNITY_OPEN_SUBTHREAD);
+ setQueuedChanges(prevQueuedChanges =>
+ Object.freeze({
+ ...prevQueuedChanges,
+ type: uiValue !== threadInfo.type ? uiValue : undefined,
+ }),
+ );
+ }, [setQueuedChanges, threadInfo.type]);
+
+ const onSecretSelected = React.useCallback(() => {
+ const uiValue = assertThreadType(COMMUNITY_SECRET_SUBTHREAD);
+ setQueuedChanges(prevQueuedChanges =>
+ Object.freeze({
+ ...prevQueuedChanges,
+ type: uiValue !== threadInfo.type ? uiValue : undefined,
+ }),
+ );
+ }, [setQueuedChanges, threadInfo.type]);
+
+ const globeIcon = React.useMemo(
+ () => <SWMansionIcon icon="globe" size={24} />,
+ [],
+ );
+
+ const lockIcon = React.useMemo(
+ () => <SWMansionIcon icon="lock-on" size={24} />,
+ [],
+ );
+
return (
<form method="POST">
<div className={css.form_title}>Thread type</div>
- <div>
- <input
- type="radio"
- name="edit-thread-type"
- id="edit-thread-open"
- value={COMMUNITY_OPEN_SUBTHREAD}
- checked={
+ <div className={css.enum_container}>
+ <EnumSettingsOption
+ selected={
(queuedChanges.type ?? threadInfo.type) === COMMUNITY_OPEN_SUBTHREAD
}
- onChange={onChangeThreadType}
- disabled={inputDisabled}
+ onSelect={onOpenSelected}
+ icon={globeIcon}
+ title="Open"
+ statements={openStatements}
+ />
+ <EnumSettingsOption
+ selected={
+ (queuedChanges.type ?? threadInfo.type) ===
+ COMMUNITY_SECRET_SUBTHREAD
+ }
+ onSelect={onSecretSelected}
+ icon={lockIcon}
+ title="Secret"
+ statements={secretStatements}
/>
- <div>
- <label htmlFor="edit-thread-open">
- Open
- <span className={css.form_enum_description}>
- {threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD]}
- </span>
- </label>
- </div>
- <div>
- <input
- type="radio"
- name="edit-thread-type"
- id="edit-thread-closed"
- value={COMMUNITY_SECRET_SUBTHREAD}
- checked={
- (queuedChanges.type ?? threadInfo.type) ===
- COMMUNITY_SECRET_SUBTHREAD
- }
- onChange={onChangeThreadType}
- disabled={inputDisabled}
- />
- <div>
- <label htmlFor="edit-thread-closed">
- Secret
- <span className={css.form_enum_description}>
- {threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD]}
- </span>
- </label>
- </div>
- </div>
</div>
<Button

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 2, 2:27 AM (21 h, 57 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2404828
Default Alt Text
D4051.id12697.diff (5 KB)

Event Timeline