Ste #46 - Styling changes to success page and saving text and image o…

…n blur
build-canaries · Jan 22, 2015 · 606b8ce · 606b8ce
1 parent b5e6125
commit 606b8ce
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 33 deletions.
diff --git a/resources/public/config.html b/resources/public/config.html
@@ -83,17 +83,22 @@ <h2 class="visuallyhidden">Timing</h2>
 
     <section id="success" class="dashboard-main-section">
         <h2 class="visuallyhidden">Success</h2>
-        <form class="success-text-form">
-            <label for="success-text">Success text</label>
-            <input id="success-text" type="text" name="success-text" value="=(^.^)=">
-            <button id="save-success-text" type="submit">Save</button>
+        <form class="success-form">
+            <div>
+                <label for="success-text" class="success-form-label">Success text</label>
+                <input id="success-text" type="text" name="success-text" value="=(^.^)=">
+                <!--<button id="save-success-text" type="submit">Save</button>-->
+            </div>
+            <div class="success-image-form">
+                <label for="success-image-url">Success image url</label>
+                <input id="success-image-url" type="text" placeholder="This overrides success text" name="success-image">
+                <!--<button id="save-success-image" type="submit">Save</button>-->
+            </div>
+            <div>
+                <img id="success-image" class="hidden config-success-image"/>
+            </div>
+            <button id="save-success-configuration" class="dashboard dashboard-button dashboard-button-secondary" type="submit">Save</button>
         </form>
-        <form class="success-image-form">
-            <label for="success-image-url">Success image url</label>
-            <input id="success-image-url" type="text" placeholder="This overrides success text" name="success-image">
-            <button id="save-success-image" type="submit">Save</button>
-        </form>
-        <img id="success-image" class="hidden config-success-image"/>
     </section><!-- /#timing -->
 </div><!-- /#main -->
 

diff --git a/src/js/config/adminView.js b/src/js/config/adminView.js
@@ -21,11 +21,11 @@ module.exports = function (controller) {
         },
 
         addClickHandlers: function () {
-            $('#save-projects').click(function() { monitorPage(controller) })
             $('#include-all').click(view.projView().includeAll)
             $('#exclude-all').click(view.projView().excludeAll)
-            $('#save-success-text').click(function(e) { e.preventDefault(); saveSuccessText(controller) })
-            $('#save-success-image').click(function(e) { e.preventDefault(); saveAndShowSuccessImage(controller) })
+            $('#save-success-configuration').click(function(e) { e.preventDefault(); saveSuccessConfiguration(controller) })
+            $('#success-text').blur(function () { saveSuccessText(controller) })
+            $('#success-image-url').blur(function () { saveAndShowSuccessImage(controller) })
 
             $("#cctray-url").keypress(function(e) {
                 if(e.which == 13) {
@@ -80,6 +80,11 @@ function saveCctray(postLoadCallback) {
     postLoadCallback()
 }
 
+function saveSuccessConfiguration(controller) {
+    saveSuccessText(controller)
+    saveAndShowSuccessImage(controller)
+}
+
 function saveSuccessText(controller) {
     var text = $('#success-text').val()
     controller.saveSuccessText(text)

diff --git a/src/scss/_config.scss b/src/scss/_config.scss
@@ -49,6 +49,10 @@
   margin-top: 1em;
 }
 
+.success-form-label {
+  margin-right: 40px;
+}
+
 .success-image-form {
   margin-top: 1em;
 }

diff --git a/test/js/config/adminViewTest.js b/test/js/config/adminViewTest.js
@@ -90,22 +90,22 @@ describe('view logic', function () {
     })
 
     describe('success', function () {
+        beforeEach(function () {
+            $('body').append('<form>' +
+            '<input id="success-text" type=text name=success-text/>' +
+            '<input id="success-image-url" type=text name=success-image/>' +
+            '<input id="save-success-configuration" class=button type=button>' +
+            '</form> ' +
+            '<img id="success-image" src="" class="hidden"/>')
+        })
 
         describe('success text', function () {
-            beforeEach(function () {
-                $('body').append('<form>' +
-                   '<input id="success-text" type=text name=success-text/>' +
-                   '<input id="save-projects" class=button type=button>' +
-                   '</form>')
-            })
-
             it('saves', function () {
-                spyOn(window.location, 'replace')
-                view.init()
+                view.addClickHandlers()
                 $('#success-text').val('expected')
                 spyOn(adminController, 'saveSuccessText')
 
-                $('#save-projects').click()
+                $('#save-success-configuration').click()
 
                 expect(adminController.saveSuccessText).toHaveBeenCalledWith('expected')
             })
@@ -121,14 +121,6 @@ describe('view logic', function () {
         })
 
         describe('success image', function () {
-            beforeEach(function () {
-                $('body').append('<form>' +
-                   '<input id="success-image-url" type=text name=success-image/>' +
-                   '<input id="save-success-image" class=button type=button>' +
-                   '</form> ' +
-                   '<img id="success-image" src="" class="hidden"/>')
-            })
-
             it('loads', function () {
                 localStorage.setItem('successImageUrl', 'any old value')
                 var successImageUrl = $('#success-image-url')
@@ -142,12 +134,11 @@ describe('view logic', function () {
             })
 
             it('saves and shows image on the page', function () {
-                spyOn(window.location, 'replace')
                 view.init()
                 $('#success-image-url').val('expected-image-url')
                 spyOn(adminController, 'saveSuccessImageUrl')
 
-                $('#save-success-image').click()
+                $('#save-success-configuration').click()
 
                 var imageSrc = $('#success-image').attr('src');
                 expect(imageSrc).toBe('expected-image-url')