Merge pull request #2226 from urbit/mp/os1/chat-create-new

chat: add create group toggle to new.js

pkg/interface/chat/src/css/custom.css

@@ -127,8 +127,8 @@ h2 {
   max-height: 16rem;
 }
 
-/* security checkbox */
-.security::after {
+/* toggler checkbox */
+.toggle::after {
   content: "";
   height: 12px;
   width: 12px;
@@ -139,7 +139,7 @@ h2 {
   border-radius: 100%;
 }
 
-.security.checked::after {
+.toggle.checked::after {
   content: "";
   height: 12px;
   width: 12px;

pkg/interface/chat/src/js/components/new.js

@@ -19,13 +19,15 @@ export class NewScreen extends Component {
       security: 'channel',
       idError: false,
       inviteError: false,
-      allowHistory: true
+      allowHistory: true,
+      createGroup: false
     };
 
     this.idChange = this.idChange.bind(this);
     this.securityChange = this.securityChange.bind(this);
     this.allowHistoryChange = this.allowHistoryChange.bind(this);
     this.setInvite = this.setInvite.bind(this);
+    this.createGroupChange = this.createGroupChange.bind(this);
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -56,6 +58,9 @@ export class NewScreen extends Component {
       this.setState({security: "channel"});
     }
   }
+  createGroupChange(event) {
+    this.setState({createGroup: !!event.target.checked});
+  }
 
   allowHistoryChange(event) {
     this.setState({allowHistory: !!event.target.checked});
@@ -153,11 +158,15 @@ export class NewScreen extends Component {
 
   render() {
     let inviteSwitchClasses =
-      "relative bg-gray4 bg-gray1-d br3 h1 security v-mid z-0";
+      "relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0";
     if (this.state.security === "village") {
-      inviteSwitchClasses = "relative checked bg-green2 br3 h1 security v-mid z-0";
+      inviteSwitchClasses = "relative checked bg-green2 br3 h1 toggle v-mid z-0";
     }
 
+    let createGroupClasses = this.state.createGroup
+      ? "relative checked bg-green2 br3 h1 toggle v-mid z-0"
+      : "relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0";
+
     let createClasses = "pointer db f9 green2 bg-gray0-d ba pv3 ph4 b--green2";
     if (!this.state.idName) {
       createClasses = 'pointer db f9 gray2 ba bg-gray0-d pa2 pv3 ph4 b--gray3';
@@ -172,6 +181,24 @@ export class NewScreen extends Component {
       );
     }
 
+    let createGroupToggle = <div/>
+    if ((this.state.invites.ships.length > 0) && (this.state.invites.groups.length === 0)) {
+      createGroupToggle = (
+        <div className="mv7">
+          <input
+            type="checkbox"
+            style={{ WebkitAppearance: "none", width: 28 }}
+            className={createGroupClasses}
+            onChange={this.createGroupChange}
+          />
+          <span className="dib f9 white-d inter ml3">Create Group</span>
+          <p className="f9 gray2 pt1" style={{ paddingLeft: 40 }}>
+            Participants will share this group across applications
+          </p>
+        </div>
+      );
+    }
+
     return (
       <div
         className={
@@ -209,7 +236,8 @@ export class NewScreen extends Component {
             invites={this.state.invites}
             setInvite={this.setInvite}
           />
-          <div className="pv7">
+          {createGroupToggle}
+          <div className="mv7">
             <input
               type="checkbox"
               style={{ WebkitAppearance: "none", width: 28 }}