Merge pull request #2446 from urbit/mp/os1/mobile-pass

os1: mobile pass

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

@@ -92,11 +92,6 @@ export class MemberScreen extends Component {
           />
         </div>
         <div className="w-100 pl3 mt0 mt4-m mt4-l mt4-xl cf pr6">
-          <div className="w-100 w-50-l w-50-xl fl pa2 pr3 pt3 pt0-l pt0-xl">
-            <p className="f8 pb2">Members</p>
-            <p className="f9 gray2 mb3">{memberText}</p>
-            {members}
-          </div>
           <div className="w-100 w-50-l w-50-xl fl pa2 pr3 pt3 pt0-l pt0-xl">
             <p className="f8 pb2">Modify Permissions</p>
             <p className="f9 gray2 mb3">{modifyText}</p>
@@ -109,6 +104,11 @@ export class MemberScreen extends Component {
               />
             ) : null}
           </div>
+          <div className="w-100 w-50-l w-50-xl fl pa2 pr3 pt3 pt0-l pt0-xl">
+            <p className="f8 pb2">Members</p>
+            <p className="f9 gray2 mb3">{memberText}</p>
+            {members}
+          </div>
         </div>
       </div>
     );

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

@@ -19,7 +19,7 @@ export class NewScreen extends Component {
       idError: false,
       inviteError: false,
       allowHistory: true,
-      createGroup: true
+      createGroup: false
     };
 
     this.titleChange = this.titleChange.bind(this);

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

@@ -127,12 +127,7 @@ export class SettingsScreen extends Component {
             value={this.state.title}
             disabled={!chatOwner}
             onChange={this.changeTitle}
-          />
-          <span className={"f8 absolute pa3 inter " +
-          ((chatOwner) ? "pointer" : "")}
-            style={{ right: 12, top: 1 }}
-            ref="rename"
-            onClick={() => {
+            onBlur={() => {
               if (chatOwner) {
                 props.api.setSpinner(true);
                 props.api.metadataAdd(
@@ -143,13 +138,11 @@ export class SettingsScreen extends Component {
                   association.metadata['date-created'],
                   uxToHex(association.metadata.color)
                 ).then(() => {
-                  this.refs.rename.innerText = "Saved";
                   props.api.setSpinner(false);
                 })
               }
-            }}>
-            Save
-            </span>
+            }}
+          />
           </div>
           <p className="f8 mt3 lh-copy">Change description</p>
           <p className="f9 gray2 db mb4">Change the description of this chat</p>
@@ -161,12 +154,7 @@ export class SettingsScreen extends Component {
               value={this.state.description}
               disabled={!chatOwner}
               onChange={this.changeDescription}
-            />
-            <span className={"f8 absolute pa3 inter " +
-              ((chatOwner) ? "pointer" : "")}
-              style={{ right: 12, top: 1 }}
-              ref="description"
-              onClick={() => {
+              onBlur={() => {
                 if (chatOwner) {
                   props.api.setSpinner(true);
                   props.api.metadataAdd(
@@ -177,13 +165,11 @@ export class SettingsScreen extends Component {
                     association.metadata['date-created'],
                     uxToHex(association.metadata.color)
                   ).then(() => {
-                    this.refs.description.innerText = "Saved";
                     props.api.setSpinner(false);
                   })
                 }
-              }}>
-              Save
-            </span>
+              }}
+            />
           </div>
           <p className="f8 mt3 lh-copy">Change color</p>
           <p className="f9 gray2 db mb4">Give this chat a color when viewing group channels</p>
@@ -195,12 +181,7 @@ export class SettingsScreen extends Component {
               value={this.state.color}
               disabled={!chatOwner}
               onChange={this.changeColor}
-            />
-            <span className={"f8 absolute pa3 inter " +
-              ((chatOwner) ? "pointer" : "")}
-              style={{ right: 12, top: 1 }}
-              ref="color"
-              onClick={() => {
+              onBlur={() => {
                 if ((chatOwner) && (this.state.color.match(/[0-9A-F]{6}/i))) {
                   props.api.setSpinner(true);
                   props.api.metadataAdd(
@@ -211,13 +192,11 @@ export class SettingsScreen extends Component {
                     association.metadata['date-created'],
                     this.state.color
                   ).then(() => {
-                    this.refs.color.innerText = "Saved";
                     props.api.setSpinner(false);
                   })
                 }
-              }}>
-              Save
-            </span>
+              }}
+            />
           </div>
         </div>
       </div>

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

@@ -37,10 +37,9 @@ export class Skeleton extends Component {
         <div className={
             `cf w-100 flex ` +
             popoutBorder +
-            (this.props.chatHideonMobile ? "h-100 " : "h-100-minus-40-s ") +
             (this.props.popout
               ? "h-100"
-              : "h-100-minus-40-m h-100-minus-40-l h-100-minus-40-xl")
+              : "h-100 h-100-minus-40-m h-100-minus-40-l h-100-minus-40-xl")
           }>
           {/* sidebar skeleton, hidden on mobile when in chat panel */}
           <div
@@ -57,7 +56,7 @@ export class Skeleton extends Component {
               <a className="pl3 pb6" href="/">
                 {"⟵ Landscape"}
               </a>
-              <div className="bb b--gray4 white-d inter f8 pl3 pt6 pb3">
+              <div className="bb b--gray4 b--gray1-d white-d inter f8 pl3 pt6 pb3">
                 All Chats
               </div>
             </div>

pkg/interface/groups/src/js/components/lib/contact-card.js

@@ -495,8 +495,8 @@ export class ContactCard extends Component {
         !(props.path.includes('/~/default'))
       ) ? "dib" : "dn";
 
-    let hiddenonMe = (props.path === "/~/default")
-      ? "dn" : "";
+    let meLink = (props.path === "/~/default")
+      ? `/~groups` : `/~groups/detail${props.path}`;
 
     let card = state.edit ? this.renderEditCard() : this.renderCard();
     return (
@@ -507,8 +507,8 @@ export class ContactCard extends Component {
             "bb b--gray4 b--gray2-d "
           }>
           <div className="f9 mv4 mh3 pt1 dib w-100">
-            <Link className={hiddenonMe} to={"/~groups/detail" + props.path}>
-              {"⟵ Channels"}
+            <Link to={meLink}>
+              {"⟵"}
             </Link>
           </div>
           <div className="flex">

pkg/interface/groups/src/js/components/lib/group-detail.js

@@ -151,7 +151,7 @@ export class GroupDetail extends Component {
 
     return (
       <div className="pa4 w-100 h-100 white-d">
-        <div className="f9 w-100">
+        <div className="f8 f9-m f9-l f9-xl w-100">
           <Link to={"/~groups/detail" + props.path}>{"⟵ Channels"}</Link>
         </div>
         <div className={(groupOwner) ? "" : "o-30"}>
@@ -165,26 +165,22 @@ export class GroupDetail extends Component {
               value={this.state.title}
               disabled={!groupOwner}
               onChange={this.changeTitle}
+              onBlur={() => {
+                if (groupOwner) {
+                  props.api.setSpinner(true);
+                  props.api.metadataAdd(
+                    association['app-path'],
+                    association['group-path'],
+                    this.state.title,
+                    association.metadata.description,
+                    association.metadata['date-created'],
+                    uxToHex(association.metadata.color)
+                  ).then(() => {
+                    props.api.setSpinner(false);
+                  })
+                }
+              }}
             />
-            <span className={"f8 absolute pa3 inter " + ((groupOwner) ? "pointer" : "")}
-            style={{right: 12, top: 1}}
-            ref="rename"
-            onClick={() => {
-              if (groupOwner) {
-                props.api.setSpinner(true);
-                props.api.metadataAdd(
-                  association['app-path'],
-                  association['group-path'],
-                  this.state.title,
-                  association.metadata.description,
-                  association.metadata['date-created'],
-                  uxToHex(association.metadata.color)
-                ).then(() => {
-                  this.refs.rename.innerText = "Saved";
-                  props.api.setSpinner(false);
-                })
-              }
-            }}>Save</span>
           </div>
           <p className="f8 mt3 lh-copy">Change description</p>
           <p className="f9 gray2 mb4">Change the description of this group</p>
@@ -196,11 +192,7 @@ export class GroupDetail extends Component {
               value={this.state.description}
               disabled={!groupOwner}
               onChange={this.changeDescription}
-            />
-            <span className={"f8 absolute pa3 inter " + ((groupOwner) ? "pointer" : "")}
-              style={{ right: 12, top: 1 }}
-              ref="description"
-              onClick={() => {
+              onBlur={() => {
                 if (groupOwner) {
                   props.api.setSpinner(true);
                   props.api.metadataAdd(
@@ -211,11 +203,11 @@ export class GroupDetail extends Component {
                     association.metadata['date-created'],
                     uxToHex(association.metadata.color)
                   ).then(() => {
-                    this.refs.description.innerText = "Saved";
                     props.api.setSpinner(false);
                   })
                 }
-              }}>Save</span>
+              }}
+            />
           </div>
         </div>
       </div>

pkg/interface/link/src/js/components/links-list.js

@@ -115,7 +115,7 @@ export class Links extends Component {
           page={props.page}
           resourcePath={props.resourcePath}/>
         </div>
-        <div className="w-100 mt2 flex justify-center overflow-y-scroll ph4 pb4">
+        <div className="w-100 mt6 flex justify-center overflow-y-scroll ph4 pb4">
           <div className="w-100 mw7">
             <div className="flex">
               <LinkSubmit resourcePath={props.resourcePath}/>

pkg/interface/link/src/js/components/member.js

@@ -70,22 +70,11 @@ export class MemberScreen extends Component {
           />
         </div>
         <div className="w-100 pl3 mt0 mt4-m mt4-l mt4-xl cf pr6">
-          <div className="w-100 w-50-l w-50-xl fl pa2 pr3 pt3 pt0-l pt0-xl">
-            <p className="f8 pb2">Members</p>
-            <p className="f9 gray2 mb3">
-              { 'Everyone with permission to use this collection.' +
-                ((isManaged && props.amOwner)
-                  ? ' Removing someone removes them from the group.'
-                  : '')
-              }
-            </p>
-            {members}
-          </div>
-          { !props.amOwner ? null : (
+          {!props.amOwner ? null : (
             <div className="w-100 w-50-l w-50-xl fl pa2 pr3 pt3 pt0-l pt0-xl">
               <p className="f8 pb2">Modify Permissions</p>
               <p className="f9 gray2 mb3">
-                { 'Invite someone to this collection.' +
+                {'Invite someone to this collection.' +
                   (isManaged
                     ? ' Adding someone adds them to the group.'
                     : '')
@@ -99,6 +88,17 @@ export class MemberScreen extends Component {
               />
             </div>
           )}
+          <div className="w-100 w-50-l w-50-xl fl pa2 pr3 pt3 pt0-l pt0-xl">
+            <p className="f8 pb2">Members</p>
+            <p className="f9 gray2 mb3">
+              { 'Everyone with permission to use this collection.' +
+                ((isManaged && props.amOwner)
+                  ? ' Removing someone removes them from the group.'
+                  : '')
+              }
+            </p>
+            {members}
+          </div>
         </div>
       </div>
     );

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

@@ -16,7 +16,7 @@ export class NewScreen extends Component {
       ships: [],
       idError: false,
       inviteError: false,
-      createGroup: true
+      createGroup: false
     };
 
     this.titleChange = this.titleChange.bind(this);

pkg/interface/link/src/js/components/root.js

@@ -55,7 +55,7 @@ export class Root extends Component {
                 rightPanelHide={true}
                 sidebarShown={state.sidebarShown}
                 links={links}>
-                <div className="h-100 w-100 overflow-x-hidden flex flex-column bg-white bg-gray0-d dn db-ns">
+                <div className="h-100 w-100 overflow-x-hidden bg-white bg-gray0-d dn db-ns">
                 <div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
                       <p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
                         Select or create a collection to begin.

pkg/interface/link/src/js/components/settings.js

@@ -125,12 +125,7 @@ export class SettingsScreen extends Component {
             value={this.state.title}
             disabled={!props.amOwner}
             onChange={this.changeTitle}
-          />
-          <span className={"f8 absolute pa3 inter " +
-          ((props.amOwner) ? "pointer" : "")}
-            style={{ right: 12, top: 1 }}
-            ref="rename"
-            onClick={() => {
+            onBlur={() => {
               if (props.amOwner) {
                 api.setSpinner(true);
                 api.metadataAdd(
@@ -142,12 +137,10 @@ export class SettingsScreen extends Component {
                   uxToHex(resource.metadata.color)
                 ).then(() => {
                   api.setSpinner(false);
-                  this.refs.rename.innerText = "Saved";
                 });
               }
-            }}>
-            Save
-            </span>
+            }}
+          />
           </div>
           <p className="f8 mt3 lh-copy">Change description</p>
           <p className="f9 gray2 db mb4">
@@ -161,12 +154,7 @@ export class SettingsScreen extends Component {
               value={this.state.description}
               disabled={!props.amOwner}
               onChange={this.changeDescription}
-            />
-            <span className={"f8 absolute pa3 inter " +
-              ((props.amOwner) ? "pointer" : "")}
-              style={{ right: 12, top: 1 }}
-              ref="description"
-              onClick={() => {
+              onBlur={() => {
                 if (props.amOwner) {
                   api.setSpinner(true);
                   api.metadataAdd(
@@ -178,12 +166,10 @@ export class SettingsScreen extends Component {
                     uxToHex(resource.color)
                   ).then(() => {
                     api.setSpinner(false);
-                    this.refs.description.innerText = "Saved";
                   });
                 }
-              }}>
-              Save
-            </span>
+              }}
+            />
           </div>
           <p className="f8 mt3 lh-copy">Change color</p>
           <p className="f9 gray2 db mb4">Give this collection a color when viewing group channels</p>
@@ -195,12 +181,7 @@ export class SettingsScreen extends Component {
               value={this.state.color}
               disabled={!props.amOwner}
               onChange={this.changeColor}
-            />
-            <span className={"f8 absolute pa3 inter " +
-              ((props.amOwner) ? "pointer" : "")}
-              style={{ right: 12, top: 1 }}
-              ref="color"
-              onClick={() => {
+              onBlur={() => {
                 if (props.amOwner && state.color.match(/[0-9A-F]{6}/i)) {
                   api.setSpinner(true);
                   api.metadataAdd(
@@ -212,12 +193,10 @@ export class SettingsScreen extends Component {
                     state.color
                   ).then(() => {
                     api.setSpinner(false);
-                    this.refs.color.innerText = "Saved";
                   });
                 }
-              }}>
-              Save
-            </span>
+              }}
+            />
           </div>
         </div>
       </div>

pkg/interface/publish/src/js/components/lib/edit-post.js

@@ -114,7 +114,7 @@ export class EditPost extends Component {
           />
         </Link>
         </div>
-        <div className="overflow-container mw6 center">
+        <div className="mw6 center">
         <div className="pl4">
           <div className="gray2">{date}</div>
         </div>

pkg/interface/publish/src/js/components/lib/new-post.js

@@ -99,8 +99,13 @@ export class NewPost extends Component {
     let hiddenOnPopout = (props.popout)
       ? "" : "dib-m dib-l dib-xl";
 
+    let newIndex = props.location.pathname.indexOf("/new");
+    let backHref = props.location.pathname.slice(0, newIndex);
     return (
       <div className="f9 h-100 relative">
+        <div className="w-100 dn-m dn-l dn-xl inter pt4 pb4 f9 pl4">
+          <Link to={backHref}>{"<- Back"}</Link>
+        </div>
         <div className="w-100 tl pv4 flex justify-center">
           <SidebarSwitcher
             sidebarShown={props.sidebarShown}
@@ -123,7 +128,7 @@ export class NewPost extends Component {
             />
           </Link>
         </div>
-        <div className="overflow-container mw6 center">
+        <div className="mw6 center">
           <div className="pa4">
             <input
               autoFocus

pkg/interface/publish/src/js/components/lib/note.js

@@ -190,7 +190,7 @@ export class Note extends Component {
               />
             </Link>
           </div>
-          <div className="w-100 mw6 overflow-container">
+          <div className="w-100 mw6">
             <div className="flex flex-column">
               <div className="f9 mb1"
               style={{overflowWrap: "break-word"}}>{title}</div>

pkg/interface/publish/src/js/components/lib/notebook.js

@@ -192,7 +192,7 @@ export class Notebook extends Component {
           />
         </Link>
         <div
-          className="h-100 pt0 pt8-m pt8-l pt8-xl overflow-container no-scrollbar"
+          className="h-100 pt0 pt8-m pt8-l pt8-xl no-scrollbar"
           onScroll={this.onScroll}
           ref={el => {
             this.scrollElement = el;

pkg/interface/publish/src/js/components/lib/settings.js

@@ -130,32 +130,25 @@ export class Settings extends Component {
               value={this.state.title}
               onChange={this.changeTitle}
               disabled={this.state.disabled}
+              onBlur={() => {
+                this.setState({ disabled: true });
+                window.api.setSpinner(true);
+                window.api
+                  .action("publish", "publish-action", {
+                    "edit-book": {
+                      book: this.props.book,
+                      title: this.state.title,
+                      about: this.props.notebook.about,
+                      coms: this.props.notebook.comments,
+                      group: null
+                    }
+                  })
+                  .then(() => {
+                    this.setState({ disabled: false })
+                    window.api.setSpinner(false);
+                  });
+              }}
             />
-            <span
-              className="f8 absolute pa3 inter pointer"
-              style={{ right: 12, top: 1 }}
-              ref="rename"
-              onClick={() => {
-                  this.setState({disabled: true});
-                  window.api.setSpinner(true);
-                  window.api
-                    .action("publish", "publish-action", {
-                      "edit-book": {
-                        book: this.props.book,
-                        title: this.state.title,
-                        about: this.props.notebook.about,
-                        coms: this.props.notebook.comments,
-                        group: null
-                      }
-                    })
-                    .then(() => {
-                      this.setState({disabled: false})
-                      this.refs.rename.innerText = "Saved";
-                      window.api.setSpinner(false);
-                    });
-              }}>
-              Save
-            </span>
           </div>
           <p className="f9 mt6 lh-copy">Change description</p>
           <p className="f9 gray2 db mb4">Change the description of this notebook</p>
@@ -167,32 +160,25 @@ export class Settings extends Component {
               }
               value={this.state.description}
               onChange={this.changeDescription}
-            />
-            <span
-              className="f8 absolute pa3 inter pointer"
-              style={{ right: 12, top: 1 }}
-              ref="description"
-              onClick={() => {
+              onBlur={() => {
                 this.setState({ disabled: true });
-                  window.api.setSpinner(true);
-                  window.api
-                    .action("publish", "publish-action", {
-                      "edit-book": {
-                        book: this.props.book,
-                        title: this.props.notebook.title,
-                        about: this.state.description,
-                        coms: this.props.notebook.comments,
-                        group: null
-                      }
-                    })
-                    .then(() => {
-                      this.setState({ disabled: false });
-                      this.refs.description.innerText = "Saved";
-                      window.api.setSpinner(false);
-                    });
-              }}>
-              Save
-            </span>
+                window.api.setSpinner(true);
+                window.api
+                  .action("publish", "publish-action", {
+                    "edit-book": {
+                      book: this.props.book,
+                      title: this.props.notebook.title,
+                      about: this.state.description,
+                      coms: this.props.notebook.comments,
+                      group: null
+                    }
+                  })
+                  .then(() => {
+                    this.setState({ disabled: false });
+                    window.api.setSpinner(false);
+                  });
+              }}
+            />
           </div>
           <div className="mv6">
             <input

pkg/interface/publish/src/js/components/skeleton.js

@@ -31,7 +31,7 @@ export class Skeleton extends Component {
             path={props.path}
             invites={props.invites}
             />
-          <div className={"h-100 w-100 relative white-d " + rightPanelHide} style={{
+          <div className={"h-100 w-100 relative white-d overflow-y-scroll " + rightPanelHide} style={{
             flexGrow: 1,
           }}>
             {props.children}