(WIP) Revisit the overall UX

src/css/formbuilder.css

@@ -8,6 +8,32 @@ body {
   background-color: #ededeb;
 }
 
+.jumbotron {
+  margin-top: -20px;
+  background-color: #fff;
+}
+
+#field-list.affix-top {
+  position: static;
+}
+
+@media (min-width: 768px) {
+  #field-list.affix, #field-list.affix-top {
+    width:186px;
+  }
+}
+@media (min-width: 970px) {
+  #field-list.affix, #field-list.affix-top {
+    width:243px;
+  }
+}
+@media (min-width: 1200px) {
+  #field-list.affix, #field-list.affix-top {
+    width:291px;
+  }
+}
+
+
 #field-list {
     list-style: outside none none;
     margin: 0px;
@@ -154,4 +180,4 @@ ol li {
   to {
     transform: rotate(360deg);
   }
-}
+}

src/js/components/FormEditor/FieldList.js

@@ -3,12 +3,14 @@
 "use strict";
 
 var React = require("react");
+var Affix = require("react-bootstrap/Affix");
 
 var FieldList = React.createClass({
 
   render: function() {
 
-    return <ul id="field-list">
+    return <Affix offset={0} id="field-list">
+      <ul>
       <li className="optionTitle">Elements</li>
       <ul id="elements">
       {
@@ -22,7 +24,7 @@ var FieldList = React.createClass({
               &nbsp;&nbsp;{field.name}
             </li>);
         }.bind(this))
-      }</ul></ul>;
+      }</ul></ul></Affix>;
   }
 });
 

src/js/components/FormEditor/FormContainer.js

@@ -11,6 +11,7 @@ var Fields = require("../Fields");
 var Submit = require("../Fields/Submit");
 
 var Sortable = require("react-components/sortable");
+var Alert = require("react-bootstrap/Alert");
 
 var FormContainer = React.createClass({
   mixins: [FluxMixin],
@@ -35,8 +36,18 @@ var FormContainer = React.createClass({
   },
 
   render: function() {
+    var panel;
+    if (this.props.elements.length === 0) {
+      panel = <Alert bsStyle="warning">
+          <h4>A little help?</h4>
+          <p>You're about to create a new form. Click the components on the
+          left to populate your form, and click on them to edit their content.
+          </p>
+        </Alert>
+    }
     return (
         <div id="form-editor-elements">
+          { panel }
           <FormElement key="title"
                        element={{data: {label: this.props.metadata.formName},
                                  id: "title",

src/js/components/FormEditor/FormHeader.js

@@ -17,15 +17,15 @@ var FormHeader = React.createClass({
   render: function() {
     var userLink, reportLink, downloadButton;
     if (this.props.userLink) {
-      userLink = <a href={this.props.userLink} title="Share this URL to display the online form.">
+      userLink = <div><a href={this.props.userLink} title="Share this URL to display the online form.">
           <i className="fa-link fa fa-1x"></i> {this.props.userLink}
-        </a>;
+        </a></div>;
 
     }
     if (this.props.reportLink) {
-      reportLink = <a href={this.props.reportLink} title="Share this URL to display the form answers.">
+      reportLink = <div><a href={this.props.reportLink} title="Share this URL to display the form answers.">
           <i className="fa-link fa fa-1x"></i> {this.props.reportLink}
-        </a>;
+        </a></div>;
 
       var filename = "form-" + this.props.metadata.formName + ".txt";
       var fileContent = "data:text/plain;base64," + btoa(
@@ -57,8 +57,8 @@ var FormHeader = React.createClass({
         {saveButtonValue}
       </button>
       {downloadButton}
-      <div>{userLink}</div>
-      <div>{reportLink}</div>
+      {userLink}
+      {reportLink}
     </header>;
   }
 });

src/js/components/FormEditor/index.js

@@ -90,7 +90,6 @@ var FormEditor = React.createClass({
 
     return (
       <div className="row">
-        {confirmation}
         <div className="col-xs-1 col-sm-1"></div>
         <div className="col-xs-3 col-sm-3 col-lg-2">
           <FieldList fields={Fields}

src/js/components/Welcome.js

@@ -0,0 +1,55 @@
+/** @jsx React.DOM */
+
+"use strict";
+
+var React = require("react");
+var Router = require("react-router");
+var Jumbotron = require("react-bootstrap/Jumbotron");
+var Button = require("react-bootstrap/Button");
+
+var Welcome = React.createClass({
+  mixins: [Router.Navigation,],
+  onClick: function() {
+    this.transitionTo('createForm');
+  },
+  render: function() {
+    return (
+      <div>
+        <Jumbotron>
+          <div className="container">
+          <h1>Hey, welcome!</h1>
+          <p>
+             This is the <strong>daybed formbuilder</strong>, a tool to help
+             you create online forms easily.
+          </p>
+          <p><Button className="btn-primary btn-lg" onClick={this.onClick} bsStyle="primary"><i className="fa fa-check-square-o"></i> Interested? Create a new one!</Button></p>
+          </div>
+        </Jumbotron>
+        <div className="container">
+          <div className="row">
+            <div className="col-md-4">
+              <h2><i className="fa fa-eye-slash"></i> Your privacy matters</h2>
+              <p>With daybed, you're not giving google or any other giants your data.
+              You can host your own servers really easily, or you can trust us to
+              host some of your data (and we aren't evil ;))</p>
+            </div>
+            <div className="col-md-4">
+              <h2><i className="fa fa-users"></i> Focused on community</h2>
+              <p>All the code we write is written in the open and we try to be
+              the most inclusive as we can to welcome your ideas</p>
+              <p>Our main goal is not to host all the forms of the world, but
+              to provide people with code they can run themselves.</p>
+              <p>Daybed and the formbuilder are released under a BSD license</p>
+            </div>
+            <div className="col-md-4">
+              <h2><i className="fa fa-unlock"></i> Account-less</h2>
+              <p>You don't need to create an account to create a new form.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = Welcome;

src/js/formbuilder.js

@@ -14,14 +14,18 @@ var FormBuilderApp = require("./components/FormBuilderApp");
 var FormEditor = require("./components/FormEditor");
 var FormViewer = require("./components/FormViewer");
 var FormReport = require("./components/FormReport");
+var Welcome = require("./components/Welcome");
 
 var backend = new DaybedBackend(document.formbuilder.config);
 
 var routes = (
   <Routes>
     <Route handler={FormBuilderApp}>
-      <Route name="createForm"
+      <Route name="welcome"
              path="/"
+             handler={Welcome} />
+      <Route name="createForm"
+             path="/new"
              handler={FormEditor} flux={flux} backend={backend} />
       <Route name="editForm"
              path="/edit/:formId/:hawkToken"
@@ -33,7 +37,7 @@ var routes = (
              path="/report/:formId"
              handler={FormReport} flux={flux} backend={backend} />
       <Route name="viewForm"
-             path="/show/:formId"
+             path="/:formId/"
              handler={FormViewer} flux={flux} backend={backend} />
     </Route>
   </Routes>);