From d5091ec7118bc4cdb06afe585f06c29836deff78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexis=20M=C3=A9taireau?= Date: Wed, 12 Nov 2014 18:24:21 +0100 Subject: [PATCH 1/4] Route to the welcome view per default. --- src/css/formbuilder.css | 9 ++++++++- src/js/components/Welcome.js | 26 ++++++++++++++++++++++++++ src/js/formbuilder.js | 8 ++++++-- 3 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 src/js/components/Welcome.js diff --git a/src/css/formbuilder.css b/src/css/formbuilder.css index ae19aec..3d7b226 100644 --- a/src/css/formbuilder.css +++ b/src/css/formbuilder.css @@ -8,6 +8,13 @@ body { background-color: #ededeb; } + .vertical-center { + height: 100%; + width: 100%; + text-align: center; + font: 0/0 a; +} + #field-list { list-style: outside none none; margin: 0px; @@ -154,4 +161,4 @@ ol li { to { transform: rotate(360deg); } -} \ No newline at end of file +} diff --git a/src/js/components/Welcome.js b/src/js/components/Welcome.js new file mode 100644 index 0000000..88cea6f --- /dev/null +++ b/src/js/components/Welcome.js @@ -0,0 +1,26 @@ +/** @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 ( + +

Hey, welcome!

+

This is your new preffered way to create forms

+

+ + ); + } +}); + +module.exports = Welcome; diff --git a/src/js/formbuilder.js b/src/js/formbuilder.js index e4641fd..f83f6be 100644 --- a/src/js/formbuilder.js +++ b/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 = ( - + ); From e86ca5686ed50d59812d6d4d8c93e7a144893396 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexis=20M=C3=A9taireau?= Date: Thu, 13 Nov 2014 19:03:07 +0100 Subject: [PATCH 2/4] Add a very simple landing page. --- src/css/formbuilder.css | 8 +++----- src/js/components/Welcome.js | 39 +++++++++++++++++++++++++++++++----- 2 files changed, 37 insertions(+), 10 deletions(-) diff --git a/src/css/formbuilder.css b/src/css/formbuilder.css index 3d7b226..866e205 100644 --- a/src/css/formbuilder.css +++ b/src/css/formbuilder.css @@ -8,11 +8,9 @@ body { background-color: #ededeb; } - .vertical-center { - height: 100%; - width: 100%; - text-align: center; - font: 0/0 a; +.jumbotron { + margin-top: -20px; + background-color: #fff; } #field-list { diff --git a/src/js/components/Welcome.js b/src/js/components/Welcome.js index 88cea6f..30f852c 100644 --- a/src/js/components/Welcome.js +++ b/src/js/components/Welcome.js @@ -14,11 +14,40 @@ var Welcome = React.createClass({ }, render: function() { return ( - -

Hey, welcome!

-

This is your new preffered way to create forms

-

- +
+ +
+

Hey, welcome!

+

+ This is the daybed formbuilder, a tool to help + you create online forms easily. +

+

+
+ +
+
+
+

Your privacy matters

+

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 ;))

+
+
+

Focused on community

+

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

+

Our main goal is not to host all the forms of the world, but + to provide people with code they can run themselves.

+

Daybed and the formbuilder are released under a BSD license

+
+
+

Account-less

+

You don't need to create an account to create a new form.

+
+
+
+
); } }); From 33a173a99f4f03edd1973d56a8ab16cdf7a6ce7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexis=20M=C3=A9taireau?= Date: Fri, 14 Nov 2014 19:03:11 +0100 Subject: [PATCH 3/4] Make the menu affix. In order to have something that works well when doing the affix, I needed to "hardcode" the fluid grid sized into the CSS. It seems to be the way to go, even if I find it a bit hard to maintain. Maybe using a CSS pre-processor would make things easier to handle here. --- src/css/formbuilder.css | 21 +++++++++++++++++++++ src/js/components/FormEditor/FieldList.js | 6 ++++-- src/js/components/FormEditor/FormHeader.js | 12 ++++++------ src/js/components/FormEditor/index.js | 1 - src/js/components/Welcome.js | 2 +- 5 files changed, 32 insertions(+), 10 deletions(-) diff --git a/src/css/formbuilder.css b/src/css/formbuilder.css index 866e205..a422c58 100644 --- a/src/css/formbuilder.css +++ b/src/css/formbuilder.css @@ -13,6 +13,27 @@ body { 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; diff --git a/src/js/components/FormEditor/FieldList.js b/src/js/components/FormEditor/FieldList.js index 824717e..bbd9c92 100644 --- a/src/js/components/FormEditor/FieldList.js +++ b/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
    + return +
    • Elements
        • { @@ -22,7 +24,7 @@ var FieldList = React.createClass({   {field.name} ); }.bind(this)) - }
    ; + }
; } }); diff --git a/src/js/components/FormEditor/FormHeader.js b/src/js/components/FormEditor/FormHeader.js index afbb441..1b0d7a0 100644 --- a/src/js/components/FormEditor/FormHeader.js +++ b/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 = + userLink =
{this.props.userLink} - ; +
; } if (this.props.reportLink) { - reportLink = + reportLink =
{this.props.reportLink} - ; +
; var filename = "form-" + this.props.metadata.formName + ".txt"; var fileContent = "data:text/plain;base64," + btoa( @@ -57,8 +57,8 @@ var FormHeader = React.createClass({ {saveButtonValue} {downloadButton} -
{userLink}
-
{reportLink}
+ {userLink} + {reportLink} ; } }); diff --git a/src/js/components/FormEditor/index.js b/src/js/components/FormEditor/index.js index 8213a75..cc1a744 100644 --- a/src/js/components/FormEditor/index.js +++ b/src/js/components/FormEditor/index.js @@ -90,7 +90,6 @@ var FormEditor = React.createClass({ return (
- {confirmation}
daybed formbuilder, a tool to help you create online forms easily.

-

+

From 8cd9a1fe0c3fb9417811632a225e6fcbfb9765d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexis=20M=C3=A9taireau?= Date: Fri, 14 Nov 2014 19:42:42 +0100 Subject: [PATCH 4/4] Add a help message for newcomers --- src/js/components/FormEditor/FormContainer.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/js/components/FormEditor/FormContainer.js b/src/js/components/FormEditor/FormContainer.js index c953957..d6124f5 100644 --- a/src/js/components/FormEditor/FormContainer.js +++ b/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 = +

A little help?

+

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. +

+ + } return (
+ { panel }