Page MenuHomePhabricator
Files F3405073

D7764.id26310.diff
No OneTemporary
Actions

D7764.id26310.diff
View Options

diff --git a/web/sidebar/community-creation/community-creation-modal.css b/web/sidebar/community-creation/community-creation-modal.css
--- a/web/sidebar/community-creation/community-creation-modal.css
+++ b/web/sidebar/community-creation/community-creation-modal.css
@@ -1,7 +1,86 @@
-div.modal_body {
+div.modalBody {
display: flex;
flex-direction: column;
- width: 383px;
- height: 560px;
overflow: hidden;
}
+
+div.ancestryContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 40px;
+ background-color: var(--community-creation-ancestry-bg);
+ margin-top: 20px;
+}
+
+div.ancestryContainer p {
+ color: var(--community-creation-ancestry-text);
+}
+
+div.avatarContainer {
+ display: flex;
+ justify-content: center;
+ padding-top: 20px;
+}
+
+.formContainer {
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+}
+
+div.formTitle {
+ padding-top: 6px;
+ font-size: 14px;
+ font-weight: 600;
+ vertical-align: top;
+ color: var(--fg);
+}
+
+div.formContent {
+ display: flex;
+ font-family: var(--font-stack);
+ color: var(--fg);
+ margin-top: 8px;
+ margin-bottom: 12px;
+}
+
+div.formContent 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%;
+ resize: vertical;
+ min-height: 20px;
+}
+
+div.formNotice {
+ color: var(--community-creation-form-notice);
+ font-size: 10px;
+ text-align: center;
+}
+
+hr {
+ margin: 20px 0;
+ height: 0;
+ border: none;
+ border-top: #ffffff33 solid 1px;
+}
+
+div.optionalSettingsContainer {
+ color: var(--enum-option-icon-color);
+}
+
+div.optionalSettingsLabel {
+ color: var(--compose-subchannel-label-color);
+ padding-bottom: 20px;
+}
+
+div.createCommunityButtonContainer {
+ display: flex;
+ flex-direction: column;
+ margin-top: 20px;
+}
diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -5,18 +5,99 @@
import { useModalContext } from 'lib/components/modal-provider.react.js';
import css from './community-creation-modal.css';
+import CommIcon from '../../CommIcon.react.js';
+import Button from '../../components/button.react.js';
+import EnumSettingsOption from '../../components/enum-settings-option.react.js';
+import UserAvatar from '../../components/user-avatar.react.js';
+import Input from '../../modals/input.react.js';
import Modal from '../../modals/modal.react.js';
+const announcementStatements = [
+ {
+ statement:
+ 'Make it so that only admins can post ' +
+ 'to the root channel of the community',
+ isStatementValid: true,
+ styleStatementBasedOnValidity: false,
+ },
+];
+
function CommunityCreationModal(): React.Node {
const modalContext = useModalContext();
+ const [pendingCommunityName, setPendingCommunityName] =
+ React.useState<string>('');
+
+ const onChangePendingCommunityName = React.useCallback(
+ (event: SyntheticEvent<HTMLInputElement>) =>
+ setPendingCommunityName(event.currentTarget.value),
+ [],
+ );
+
+ const [announcementSetting, setAnnouncementSetting] = React.useState(false);
+ const onAnnouncementSelected = React.useCallback(() => {
+ setAnnouncementSetting(!announcementSetting);
+ }, [announcementSetting]);
+
+ const megaphoneIcon = React.useMemo(
+ () => <CommIcon icon="megaphone" size={24} />,
+ [],
+ );
+
+ const avatarNodeEnabled = false;
+ let avatarNode;
+ if (avatarNodeEnabled) {
+ avatarNode = (
+ <div className={css.avatarContainer}>
+ <UserAvatar userID="256" size="profile" />
+ </div>
+ );
+ }
+
return (
<Modal
name="Create a community"
onClose={modalContext.popModal}
size="small"
>
- <div className={css.modal_body}></div>
+ <div className={css.modalBody}>
+ <div className={css.ancestryContainer}>
+ <p>within</p>
+ </div>
+ {avatarNode}
+ <form method="POST" className={css.formContainer}>
+ <div>
+ <div className={css.formTitle}>Community Name</div>
+ <div className={css.formContent}>
+ <Input
+ type="text"
+ value={pendingCommunityName}
+ placeholder="Community Name"
+ onChange={onChangePendingCommunityName}
+ />
+ </div>
+ </div>
+ <div className={css.formNotice}>
+ You may edit your community&apos;s image and name later.
+ </div>
+ <hr />
+ <div className={css.optionalSettingsContainer}>
+ <div className={css.optionalSettingsLabel}>Optional settings</div>
+ <EnumSettingsOption
+ selected={announcementSetting}
+ onSelect={onAnnouncementSelected}
+ icon={megaphoneIcon}
+ title="Announcement"
+ statements={announcementStatements}
+ iconPosition="top"
+ type="checkbox"
+ />
+ </div>
+ <div className={css.createCommunityButtonContainer}>
+ <Button variant="filled">Create community</Button>
+ </div>
+ </form>
+ </div>
</Modal>
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -89,6 +89,9 @@
--unread-bg: var(--error-primary);
--settings-btn-bg: var(--violet-dark-100);
--community-creation-btn-bg: var(--shades-black-80);
+ --community-creation-ancestry-bg: var(--shades-black-80);
+ --community-creation-ancestry-text: var(--shades-black-60);
+ --community-creation-form-notice: var(--shades-white-60);
--modal-bg: var(--shades-black-90);
--modal-fg: var(--shades-white-60);
--join-bg: var(--shades-black-90);

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 4, 5:47 PM (11 h, 2 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2614552
Default Alt Text
D7764.id26310.diff (5 KB)

Event Timeline