From f354bd01fdde046861c11720cced8289b616ff53 Mon Sep 17 00:00:00 2001
From: David Baldwynn <david.baldwin@alumni.ubc.ca>
Date: Thu, 21 Apr 2016 18:25:22 -0400
Subject: [PATCH] added color support to buttons in submit form view

---
 app/models/form.server.model.js               |   8 +-
 public/modules/forms/css/form.css             |   6 +-
 .../modules/forms/views/adminTabs/design.html |  29 ++-
 .../views/directiveViews/field/statement.html |   3 +-
 .../views/directiveViews/field/textarea.html  |   3 +-
 .../views/directiveViews/field/textfield.html |   7 +-
 .../form/submit-form.client.view.html         | 176 ++++++++++--------
 7 files changed, 140 insertions(+), 92 deletions(-)

diff --git a/app/models/form.server.model.js b/app/models/form.server.model.js
index 0cde31ce..cecade11 100644
--- a/app/models/form.server.model.js
+++ b/app/models/form.server.model.js
@@ -138,7 +138,13 @@ var FormSchema = new Schema({
 			buttonColor: {
 				type: String,
 				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,
 		backgroundImage: { type: Schema.Types.Mixed }
diff --git a/public/modules/forms/css/form.css b/public/modules/forms/css/form.css
index 4a64709f..f4859d67 100644
--- a/public/modules/forms/css/form.css
+++ b/public/modules/forms/css/form.css
@@ -21,8 +21,8 @@
     bottom: 0;
 }
 
-section.public-form {
-    margin-top: -70px;
+.container.admin-form {
+    margin-top: 70px;
 }
 
 section.content p.breakwords {
@@ -370,7 +370,7 @@ div.config-form .row.field {
 
 /* Styles for form list view (/forms) */
 section > section.public-form {
-    padding: 0 10% 10%;
+    padding: 0 10% 0 10%;
 
 }
 .form-item {
diff --git a/public/modules/forms/views/adminTabs/design.html b/public/modules/forms/views/adminTabs/design.html
index 2065b46f..899c57fa 100644
--- a/public/modules/forms/views/adminTabs/design.html
+++ b/public/modules/forms/views/adminTabs/design.html
@@ -21,7 +21,7 @@
 
             <div class="row field">
                 <div class="field-title col-sm-3">
-                    <h5>Question Font Color</h5>
+                    <h5>Question Text Color</h5>
                 </div>
 
                 <div class="field-input col-sm-9">
@@ -34,13 +34,36 @@
 
             <div class="row field">
                 <div class="field-title col-sm-3">
-                    <h5>Answer Font Color</h5>
+                    <h5>Answer Text Color</h5>
                 </div>
 
                 <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 }"/>
                 </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>
 
@@ -52,4 +75,4 @@
             <button class="btn btn-default" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i> Cancel</button>
         </div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/public/modules/forms/views/directiveViews/field/statement.html b/public/modules/forms/views/directiveViews/field/statement.html
index a1f3d2b0..b7d94578 100644
--- a/public/modules/forms/views/directiveViews/field/statement.html
+++ b/public/modules/forms/views/directiveViews/field/statement.html
@@ -9,7 +9,8 @@
 	<div class="col-xs-offset-1 col-xs-11">
         	<button class="btn btn-info" 
 			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()">
             		Continue 
         	</button>
diff --git a/public/modules/forms/views/directiveViews/field/textarea.html b/public/modules/forms/views/directiveViews/field/textarea.html
index a4d2ab07..627a9216 100755
--- a/public/modules/forms/views/directiveViews/field/textarea.html
+++ b/public/modules/forms/views/directiveViews/field/textarea.html
@@ -17,7 +17,8 @@
 		
 		<button ng-disabled="!field.fieldValue"
                 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>
         </button>
diff --git a/public/modules/forms/views/directiveViews/field/textfield.html b/public/modules/forms/views/directiveViews/field/textfield.html
index 76245992..9d546604 100755
--- a/public/modules/forms/views/directiveViews/field/textfield.html
+++ b/public/modules/forms/views/directiveViews/field/textfield.html
@@ -9,7 +9,7 @@
     </div>
     <div class="col-xs-12 field-input">
 		<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}}" 
 			placeholder="{{field.placeholder}}"
 			class="text-field-input" 
@@ -25,8 +25,9 @@
     	<div class="btn btn-lg btn-default row-fluid"
 	 	style="padding: 4px; margin-top:8px;">
 			<button ng-disabled="!field.fieldValue" 
-				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}"
+                ng-click="$root.nextField()" 
+				class="btn col-sm-5 col-xs-5">
 				
 				OK <i class="fa fa-check"></i>
 			</button>
diff --git a/public/modules/forms/views/directiveViews/form/submit-form.client.view.html b/public/modules/forms/views/directiveViews/form/submit-form.client.view.html
index a49edfb7..6278a526 100755
--- a/public/modules/forms/views/directiveViews/form/submit-form.client.view.html
+++ b/public/modules/forms/views/directiveViews/form/submit-form.client.view.html
@@ -2,83 +2,87 @@
 
 <!-- Start Page View -->
 <div ng-show="!myform.submitted && myform.startPage.showStart" 
-	class="form-submitted" 
-	style="padding-top: 35vh;">
-    <div class="row">
-        <div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
-            <h1 style="font-weight: 400; font-size: 25px;">
-            	{{myform.startPage.introTitle}}
-            </h1>
-        </div>
-        <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;">
-            	{{myform.startPage.introParagraph}}
-            </p>
-        </div>
-    </div>
+class="form-submitted" 
+style="padding-top: 35vh;">
+<div class="row">
+<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
+<h1 style="font-weight: 400; font-size: 25px;">
+{{myform.startPage.introTitle}}
+</h1>
+</div>
+<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;">
+{{myform.startPage.introParagraph}}
+</p>
+</div>
+</div>
 
-    <div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;">
-        <button ng-click="exitStartPage()" class="btn btn-info" type="button">
-            <span style="font-size: 1.6em; text-decoration: none; color:white!important;">
-                {{myform.startPage.introButtonText}}
-            </span>
-        </button>
-    </div>
-     <div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
-        <p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;">
-            <button class="btn" style="background-color:rgb(156, 226, 235)" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
-                <a href="{{button.url}}" 
-			style="font-size: 1.6em; text-decoration: none;" 
-			ng-style="{'color':button.color}">
-                    {{button.text}}
-                </a>
-            </button>
-        </p>
-    </div>
+<div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;">
+<button ng-click="exitStartPage()" class="btn" type="button"
+ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
+<span style="font-size: 1.6em;">
+{{myform.startPage.introButtonText}}:
+</span>
+</button>
+</div>
+<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
+<p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;">
+<button class="btn" style="background-color:rgb(156, 226, 235)" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
+<a href="{{button.url}}" 
+style="font-size: 1.6em; text-decoration: none;" 
+ng-style="{'color':button.color}">
+{{button.text}}
+</a>
+</button>
+</p>
+</div>
 </div>
 
 <!-- Form Fields View -->
 <div class="form-fields" ng-show="!myform.submitted && !myform.startPage.showStart">
-    <div class="row">
-        <form name="myForm" 
-		du-scroll-container 
-		novalidate 
-		class="submission-form col-sm-12 col-md-offset-1 col-md-10">
-                <div ng-repeat="field in myform.form_fields"  
-				ng-if="!field.deletePreserved" 
-				data-index="{{$index}}" 
-				data-id="{{field._id}}" 
-				du-scrollspy
-				ng-class="{activeField: selected._id == field._id }" 
-				class="row field-directive">
-                    <field-directive field="field" design="myform.design" index="$index">
-                    </field-directive>
-                </div>
-        </form>
-    </div>
+<div class="row">
+<form name="myForm" 
+du-scroll-container 
+novalidate 
+class="submission-form col-sm-12 col-md-offset-1 col-md-10">
+<div ng-repeat="field in myform.form_fields"  
+ng-if="!field.deletePreserved" 
+data-index="{{$index}}" 
+data-id="{{field._id}}" 
+du-scrollspy
+ng-class="{activeField: selected._id == field._id }" 
+class="row field-directive">
+<field-directive field="field" design="myform.design" index="$index">
+</field-directive>
+</div>
+</form>
+</div>
 
-    <div class="row form-actions" id="submit_field" 
-	ng-click="setActiveField('submit_field', myform.form_fields.length)" 
-	ng-class="{activeField: selected._id == 'submit_field' }" 
-	style="border-top: 1px solid #ddd; margin-right: -13% ;margin-left: -13%; padding-bottom: 35vh;">
-        
-	<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>
+<div class="row form-actions" id="submit_field" 
+ng-click="setActiveField('submit_field', myform.form_fields.length)" 
+ng-class="{activeField: selected._id == 'submit_field' }" 
+style="border-top: 1px solid #ddd; margin-right: -13% ;margin-left: -13%; padding-bottom: 50vh;">
 
-    <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="row">
                 <div class="col-sm-5 col-md-6 col-xs-5" ng-show="!myform.submitted">
@@ -86,19 +90,29 @@
                 </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-4 col-md-offset-2 hidden-sm hidden-xs" ng-if="!authentication.isAuthenticated()">
-                        <a href="/#!/forms" class="btn btn-default">Create 
-                        a TellForm</a>
+                        <a href="/#!/forms" class="btn"
+                            ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
+                            Create a TellForm
+                        </a>
                     </div>
                     <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 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"
-				ng-click="nextField()" 
-				ng-disabled="selected.index > myform.form_fields.length-1">
+                        <button class="btn btn-lg" id="focusDownButton"
+				            ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
+                            ng-click="nextField()" 
+				            ng-disabled="selected.index > myform.form_fields.length-1">
                         	<i class="fa fa-chevron-down"></i>
                         </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>
                         </button>
                     </div>
@@ -109,15 +123,17 @@
 </div>
 
 <!-- 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="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!</div>
     </div>
     <div class="row form-actions">
         <p class="text-center col-xs-4 col-xs-offset-4">
-            <button ng-click="reloadForm()" class="btn btn-info" type="button">
-                <a style="color:white; font-size: 1.6em; text-decoration: none;"> Go back to Form</a>
+            <button ng-click="reloadForm()" class="btn" type="button"
+                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>
         </p>
     </div>