beenull/tellform
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

added color support to buttons in submit form view

Browse source
This commit is contained in:
David Baldwynn 2016-04-21 18:25:22 -04:00
parent a600fb011a
commit f354bd01fd
7 changed files with 140 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/models/form.server.model.js
View file

@ -138,7 +138,13 @@ var FormSchema = new Schema({
buttonColor: { buttonColor: {
type: String, type: String,
match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/] match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/]
}, default: '#fff',
},
buttonTextColor: {
type: String,
match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/],
default: '#333'
},
}, },
font: String, font: String,
backgroundImage: { type: Schema.Types.Mixed } backgroundImage: { type: Schema.Types.Mixed }

6
public/modules/forms/css/form.css
View file

@ -21,8 +21,8 @@
bottom: 0; bottom: 0;
} }
section.public-form { .container.admin-form {
margin-top: -70px; margin-top: 70px;
} }
section.content p.breakwords { section.content p.breakwords {
@ -370,7 +370,7 @@ div.config-form .row.field {
/* Styles for form list view (/forms) */ /* Styles for form list view (/forms) */
section > section.public-form { section > section.public-form {
padding: 0 10% 10%; padding: 0 10% 0 10%;
} }
.form-item { .form-item {

29
public/modules/forms/views/adminTabs/design.html
View file

@ -21,7 +21,7 @@
<div class="row field"> <div class="row field">
<div class="field-title col-sm-3"> <div class="field-title col-sm-3">
<h5>Question Font Color</h5> <h5>Question Text Color</h5>
</div> </div>
<div class="field-input col-sm-9"> <div class="field-input col-sm-9">
@ -34,13 +34,36 @@
<div class="row field"> <div class="row field">
<div class="field-title col-sm-3"> <div class="field-title col-sm-3">
<h5>Answer Font Color</h5> <h5>Answer Text Color</h5>
</div> </div>
<div class="field-input col-sm-9"> <div class="field-input col-sm-9">
<input colorpicker="hex" type="text" ng-model="myform.design.colors.answerColor" ng-style="{ 'background-color': myform.design.colors.answerColor }"/> <input colorpicker="hex" type="text" ng-model="myform.design.colors.answerColor" ng-style="{ 'background-color': myform.design.colors.answerColor }"/>
</div> </div>
</div> </div>
<div class="row field">
<div class="field-title col-sm-3">
<h5>Button Background Color</h5>
</div>
<div class="field-input col-sm-9">
<input colorpicker="hex" type="text"
ng-model="myform.design.colors.buttonColor"
ng-style="{ 'background-color': myform.design.colors.buttonColor }"/>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-3">
<h5>Button Text Color</h5>
</div>
<div class="field-input col-sm-9">
<input colorpicker="hex" type="text"
ng-model="myform.design.colors.buttonTextColor"
ng-style="{ 'background-color': myform.design.colors.buttonTextColor }"/>
</div>
</div>
</div> </div>
</div> </div>
@ -52,4 +75,4 @@
<button class="btn btn-default" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i> Cancel</button> <button class="btn btn-default" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i> Cancel</button>
</div> </div>
</div> </div>
</div> </div>

3
public/modules/forms/views/directiveViews/field/statement.html
View file

@ -9,7 +9,8 @@
<div class="col-xs-offset-1 col-xs-11"> <div class="col-xs-offset-1 col-xs-11">
<button class="btn btn-info" <button class="btn btn-info"
style="font-size: 1.3em;" style="font-size: 1.3em;"
ng-focused="setActiveField(field._id, index, true)" ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
ng-focused="setActiveField(field._id, index, true)"
ng-click="$root.nextField()"> ng-click="$root.nextField()">
Continue Continue
</button> </button>

3
public/modules/forms/views/directiveViews/field/textarea.html
View file

@ -17,7 +17,8 @@
<button ng-disabled="!field.fieldValue" <button ng-disabled="!field.fieldValue"
ng-click="$root.nextField()" ng-click="$root.nextField()"
class="btn btn-primary col-sm-5 col-xs-5"> ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
class="btn col-sm-5 col-xs-5">
OK <i class="fa fa-check"></i> OK <i class="fa fa-check"></i>
</button> </button>

7
public/modules/forms/views/directiveViews/field/textfield.html
View file

@ -9,7 +9,7 @@
</div> </div>
<div class="col-xs-12 field-input"> <div class="col-xs-12 field-input">
<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" <input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
ng-focus="setActiveField(field._id, index, true)" ng-focus="setActiveField(field._id, index, true)"
type="{{field.input_type}}" type="{{field.input_type}}"
placeholder="{{field.placeholder}}" placeholder="{{field.placeholder}}"
class="text-field-input" class="text-field-input"
@ -25,8 +25,9 @@
<div class="btn btn-lg btn-default row-fluid" <div class="btn btn-lg btn-default row-fluid"
style="padding: 4px; margin-top:8px;"> style="padding: 4px; margin-top:8px;">
<button ng-disabled="!field.fieldValue" <button ng-disabled="!field.fieldValue"
ng-click="$root.nextField()" ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
class="btn btn-primary col-sm-5 col-xs-5"> ng-click="$root.nextField()"
class="btn col-sm-5 col-xs-5">
OK <i class="fa fa-check"></i> OK <i class="fa fa-check"></i>
</button> </button>

176
public/modules/forms/views/directiveViews/form/submit-form.client.view.html
View file

@ -2,83 +2,87 @@
<!-- Start Page View --> <!-- Start Page View -->
<div ng-show="!myform.submitted && myform.startPage.showStart" <div ng-show="!myform.submitted && myform.startPage.showStart"
class="form-submitted" class="form-submitted"
style="padding-top: 35vh;"> style="padding-top: 35vh;">
<div class="row"> <div class="row">
<div class="col-xs-12 text-center" style="overflow-wrap: break-word;"> <div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
<h1 style="font-weight: 400; font-size: 25px;"> <h1 style="font-weight: 400; font-size: 25px;">
{{myform.startPage.introTitle}} {{myform.startPage.introTitle}}
</h1> </h1>
</div> </div>
<div class="col-xs-10 col-xs-offset-1 text-center" style="overflow-wrap: break-word;"> <div class="col-xs-10 col-xs-offset-1 text-center" style="overflow-wrap: break-word;">
<p style="color: grey; font-weight: 100; font-size: 16px;"> <p style="color: grey; font-weight: 100; font-size: 16px;">
{{myform.startPage.introParagraph}} {{myform.startPage.introParagraph}}
</p> </p>
</div> </div>
</div> </div>
<div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;"> <div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;">
<button ng-click="exitStartPage()" class="btn btn-info" type="button"> <button ng-click="exitStartPage()" class="btn" type="button"
<span style="font-size: 1.6em; text-decoration: none; color:white!important;"> ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
{{myform.startPage.introButtonText}} <span style="font-size: 1.6em;">
</span> {{myform.startPage.introButtonText}}:
</button> </span>
</div> </button>
<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;"> </div>
<p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;"> <div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
<button class="btn" style="background-color:rgb(156, 226, 235)" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}"> <p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;">
<a href="{{button.url}}" <button class="btn" style="background-color:rgb(156, 226, 235)" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
style="font-size: 1.6em; text-decoration: none;" <a href="{{button.url}}"
ng-style="{'color':button.color}"> style="font-size: 1.6em; text-decoration: none;"
{{button.text}} ng-style="{'color':button.color}">
</a> {{button.text}}
</button> </a>
</p> </button>
</div> </p>
</div>
</div> </div>
<!-- Form Fields View --> <!-- Form Fields View -->
<div class="form-fields" ng-show="!myform.submitted && !myform.startPage.showStart"> <div class="form-fields" ng-show="!myform.submitted && !myform.startPage.showStart">
<div class="row"> <div class="row">
<form name="myForm" <form name="myForm"
du-scroll-container du-scroll-container
novalidate novalidate
class="submission-form col-sm-12 col-md-offset-1 col-md-10"> class="submission-form col-sm-12 col-md-offset-1 col-md-10">
<div ng-repeat="field in myform.form_fields" <div ng-repeat="field in myform.form_fields"
ng-if="!field.deletePreserved" ng-if="!field.deletePreserved"
data-index="{{$index}}" data-index="{{$index}}"
data-id="{{field._id}}" data-id="{{field._id}}"
du-scrollspy du-scrollspy
ng-class="{activeField: selected._id == field._id }" ng-class="{activeField: selected._id == field._id }"
class="row field-directive"> class="row field-directive">
<field-directive field="field" design="myform.design" index="$index"> <field-directive field="field" design="myform.design" index="$index">
</field-directive> </field-directive>
</div> </div>
</form> </form>
</div> </div>
<div class="row form-actions" id="submit_field" <div class="row form-actions" id="submit_field"
ng-click="setActiveField('submit_field', myform.form_fields.length)" ng-click="setActiveField('submit_field', myform.form_fields.length)"
ng-class="{activeField: selected._id == 'submit_field' }" ng-class="{activeField: selected._id == 'submit_field' }"
style="border-top: 1px solid #ddd; margin-right: -13% ;margin-left: -13%; padding-bottom: 35vh;"> style="border-top: 1px solid #ddd; margin-right: -13% ;margin-left: -13%; padding-bottom: 50vh;">
<button ng-focus="setActiveField('submit_field', myform.form_fields.length)"
class="Button btn btn-success col-sm-2"
v-busy="loading" v-busy-label="Please wait" v-pressable
ng-disabled="loading"
ng-click="submitForm()"
style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
Submit
</button>
<div class="col-sm-2" style="font-size: 75%; margin-top:2.5em">
<small>
press ENTER
</small>
</div>
</div>
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom" style="background-color:rgba(242,242,242,0.5); padding-top:15px;"> <button ng-focus="setActiveField('submit_field', myform.form_fields.length)"
class="Button btn"
v-busy="loading" v-busy-label="Please wait" v-pressable
ng-disabled="loading"
ng-click="submitForm()"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
Submit
</button>
<div class="col-sm-2" style="font-size: 75%; margin-top:2.5em">
<small>
press ENTER
</small>
</div>
</div>
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom"
style="padding-top:15px; border-top: 2px grey solid"
ng-style="{'background-color':myform.design.colors.buttonColor, 'border-color':myform.design.colors.buttonTextColor, 'color':myform.design.colors.buttonTextColor}">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-5 col-md-6 col-xs-5" ng-show="!myform.submitted"> <div class="col-sm-5 col-md-6 col-xs-5" ng-show="!myform.submitted">
@ -86,19 +90,29 @@
</div> </div>
<div class="col-md-6 col-md-offset-0 col-sm-offset-2 col-sm-3 col-xs-offset-1 col-xs-6 row"> <div class="col-md-6 col-md-offset-0 col-sm-offset-2 col-sm-3 col-xs-offset-1 col-xs-6 row">
<div class="col-md-4 col-md-offset-2 hidden-sm hidden-xs" ng-if="!authentication.isAuthenticated()"> <div class="col-md-4 col-md-offset-2 hidden-sm hidden-xs" ng-if="!authentication.isAuthenticated()">
<a href="/#!/forms" class="btn btn-default">Create <a href="/#!/forms" class="btn"
a TellForm</a> ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
Create a TellForm
</a>
</div> </div>
<div class="col-md-4 col-md-offset-2 hidden-sm hidden-xs" ng-if="authentication.isAuthenticated()"> <div class="col-md-4 col-md-offset-2 hidden-sm hidden-xs" ng-if="authentication.isAuthenticated()">
<a href="/#!/forms/{{myform._id}}/admin/create" class="btn btn-default">Edit this TellForm</a> <a href="/#!/forms/{{myform._id}}/admin/create"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
class="btn">
Edit this TellForm
</a>
</div> </div>
<div class="col-md-4 col-sm-10 col-md-offset-0 col-sm-offset-2 col-xs-12"> <div class="col-md-4 col-sm-10 col-md-offset-0 col-sm-offset-2 col-xs-12">
<button class="btn btn-info btn-lg" id="focusDownButton" <button class="btn btn-lg" id="focusDownButton"
ng-click="nextField()" ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
ng-disabled="selected.index > myform.form_fields.length-1"> ng-click="nextField()"
ng-disabled="selected.index > myform.form_fields.length-1">
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</button> </button>
<button class="btn btn-info btn-lg" id="focusUpButton" ng-click="prevField()" ng-disabled="selected.index == 0"> <button class="btn btn-info btn-lg" id="focusUpButton"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
ng-click="prevField()"
ng-disabled="selected.index == 0">
<i class="fa fa-chevron-up"></i> <i class="fa fa-chevron-up"></i>
</button> </button>
</div> </div>
@ -109,15 +123,17 @@
</div> </div>
<!-- End Page View --> <!-- End Page View -->
<div ng-if="myform.submitted && !loading" class="form-submitted"> <div ng-if="myform.submitted && !loading" class="form-submitted"
ng-style="{'color':myform.design.colors.buttonTextColor}">
<div class="field row text-center"> <div class="field row text-center">
<div class="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!</div> <div class="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!</div>
</div> </div>
<div class="row form-actions"> <div class="row form-actions">
<p class="text-center col-xs-4 col-xs-offset-4"> <p class="text-center col-xs-4 col-xs-offset-4">
<button ng-click="reloadForm()" class="btn btn-info" type="button"> <button ng-click="reloadForm()" class="btn" type="button"
<a style="color:white; font-size: 1.6em; text-decoration: none;"> Go back to Form</a> ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
<span style="font-size: 1.6em;"> Go back to Form</span>
</button> </button>
</p> </p>
</div> </div>