Page MenuHomePhabricator
Files F3377933

D3716.diff
No OneTemporary
Actions

D3716.diff
View Options

diff --git a/web/modals/threads/thread-settings-general-tab.css b/web/modals/threads/thread-settings-general-tab.css
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/thread-settings-general-tab.css
@@ -0,0 +1,38 @@
+div.form_title {
+ padding: 6px 6px 0 0;
+ font-size: 14px;
+ font-weight: 600;
+ vertical-align: top;
+ color: var(--fg);
+}
+div.form_content {
+ display: flex;
+ font-family: var(--font-stack);
+ color: var(--fg);
+ margin-top: 4px;
+ margin-bottom: 8px;
+}
+div.form_content input {
+ margin-bottom: 4px;
+}
+div.form_content textarea {
+ padding: 12px;
+ background: var(--modal-bg);
+ color: var(--fg);
+ border: 1px solid var(--border-color);
+ font-size: var(--m-font-16);
+ border-radius: 4px;
+ width: 100%;
+}
+
+div.form_textarea_container {
+ margin-top: 1px;
+}
+
+div.edit_thread_color_container {
+ margin-top: -5px;
+}
+
+div.color_title {
+ margin-top: 4px;
+}
diff --git a/web/modals/threads/thread-settings-general-tab.react.js b/web/modals/threads/thread-settings-general-tab.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/thread-settings-general-tab.react.js
@@ -0,0 +1,76 @@
+// @flow
+
+import * as React from 'react';
+
+import Input from '../input.react.js';
+import ColorSelector from './color-selector.react.js';
+import css from './thread-settings-general-tab.css';
+
+type ThreadSettingsGeneralTabProps = {
+ +threadNameValue: string,
+ +threadNamePlaceholder: string,
+ +threadNameOnChange: (event: SyntheticEvent<HTMLInputElement>) => void,
+ +threadNameDisabled: boolean,
+ +threadNameInputRef: (nameInput: ?HTMLInputElement) => void,
+ +threadDescriptionValue: string,
+ +threadDescriptionOnChange: (
+ event: SyntheticEvent<HTMLTextAreaElement>,
+ ) => void,
+ +threadDescriptionDisabled: boolean,
+ +threadColorCurrentColor: string,
+ +threadColorOnColorSelection: (color: string) => void,
+};
+function ThreadSettingsGeneralTab(
+ props: ThreadSettingsGeneralTabProps,
+): React.Node {
+ const {
+ threadNameValue,
+ threadNamePlaceholder,
+ threadNameOnChange,
+ threadNameDisabled,
+ threadNameInputRef,
+ threadDescriptionValue,
+ threadDescriptionOnChange,
+ threadDescriptionDisabled,
+ threadColorCurrentColor,
+ threadColorOnColorSelection,
+ } = props;
+
+ return (
+ <div>
+ <div>
+ <div className={css.form_title}>Thread name</div>
+ <div className={css.form_content}>
+ <Input
+ type="text"
+ value={threadNameValue}
+ placeholder={threadNamePlaceholder}
+ onChange={threadNameOnChange}
+ disabled={threadNameDisabled}
+ ref={threadNameInputRef}
+ />
+ </div>
+ </div>
+ <div className={css.form_textarea_container}>
+ <div className={css.form_title}>Description</div>
+ <div className={css.form_content}>
+ <textarea
+ value={threadDescriptionValue}
+ placeholder="Thread description"
+ onChange={threadDescriptionOnChange}
+ disabled={threadDescriptionDisabled}
+ />
+ </div>
+ </div>
+ <div className={css.edit_thread_color_container}>
+ <div className={`${css.form_title} ${css.color_title}`}>Color</div>
+ <ColorSelector
+ currentColor={threadColorCurrentColor}
+ onColorSelection={threadColorOnColorSelection}
+ />
+ </div>
+ </div>
+ );
+}
+
+export default ThreadSettingsGeneralTab;
diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -39,9 +39,8 @@
import Button from '../../components/button.react';
import { useModalContext } from '../../modals/modal-provider.react';
import { useSelector } from '../../redux/redux-utils';
-import Input from '../input.react';
import Modal from '../modal.react';
-import ColorSelector from './color-selector.react';
+import ThreadSettingsGeneralTab from './thread-settings-general-tab.react';
import css from './thread-settings-modal.css';
const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes;
@@ -190,39 +189,18 @@
let mainContent = null;
if (this.state.currentTabType === 'general') {
mainContent = (
- <div>
- <div>
- <div className={css.form_title}>Thread name</div>
- <div className={css.form_content}>
- <Input
- type="text"
- value={firstLine(this.possiblyChangedValue('name'))}
- placeholder={this.namePlaceholder()}
- onChange={this.onChangeName}
- disabled={inputDisabled}
- ref={this.nameInputRef}
- />
- </div>
- </div>
- <div className={css.form_textarea_container}>
- <div className={css.form_title}>Description</div>
- <div className={css.form_content}>
- <textarea
- value={this.possiblyChangedValue('description')}
- placeholder="Thread description"
- onChange={this.onChangeDescription}
- disabled={inputDisabled}
- />
- </div>
- </div>
- <div className={css.edit_thread_color_container}>
- <div className={`${css.form_title} ${css.color_title}`}>Color</div>
- <ColorSelector
- currentColor={this.possiblyChangedValue('color')}
- onColorSelection={this.onChangeColor}
- />
- </div>
- </div>
+ <ThreadSettingsGeneralTab
+ threadNameValue={firstLine(this.possiblyChangedValue('name'))}
+ threadNamePlaceholder={this.namePlaceholder()}
+ threadNameOnChange={this.onChangeName}
+ threadNameDisabled={inputDisabled}
+ threadNameInputRef={this.nameInputRef}
+ threadDescriptionValue={this.possiblyChangedValue('description')}
+ threadDescriptionOnChange={this.onChangeDescription}
+ threadDescriptionDisabled={inputDisabled}
+ threadColorCurrentColor={this.possiblyChangedValue('color')}
+ threadColorOnColorSelection={this.onChangeColor}
+ />
);
} else if (this.state.currentTabType === 'privacy') {
mainContent = (

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 28, 8:12 AM (21 h, 36 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2593359
Default Alt Text
D3716.diff (6 KB)

Event Timeline