Merge pull request #387 from cbdr/bugfix/COR-495-Publish-State-Buttons-Fix

COR-495: publish state buttons fix

Author: ElliottAYoung

app/assets/javascripts/forms.js

@@ -1,12 +1,24 @@
 $(function() {
   // If we restore Turbolinks, all of this should be wrapped in turbolinks:load
-  $(".datepicker").datetimepicker({
-    dateFormat: "dd/mm/yy"
+  $(".datepicker").datepicker({
+    dateFormat: "dd/mm/yy",
+    onSelect: function (date) {
+      if ($(".new_publish_state_button").length > 0) {
+        modifyButton();
+      }
+    }
   });
 
-  $(".datepicker").on("focus", function(ev){
+  $(".datepicker").on("focusout", function(ev){
     if ($(this).val() == "") {
       $(this).closest('div').addClass('is-dirty');
     }
-  })
+  });
 });
+
+function modifyButton() {
+  var button = $(".new_publish_state_button");
+
+  button.val("schedule");
+  button.text("Schedule Post");
+}

app/assets/stylesheets/components/form.scss

@@ -11,6 +11,36 @@ form {
   }
 }
 
+.mdl-button--success {
+  background-color: #54a1a1;
+  color: white;
+
+  &:hover {
+    background-color: #54a1a1;
+    color: white;
+  }
+
+  &:active {
+    background-color: #63c0b9;
+    color: white;
+  }
+}
+
+.mdl-button--cb {
+  background-color: none;
+  color: #54a1a1;
+
+  &:hover {
+    background-color: none;
+    color: #54a1a1;
+  }
+
+  &:active {
+    background-color: #dddddd;
+    color: #54a1a1;
+  }
+}
+
 div.bootstrap-tagsinput input {
   width: 100% !important;
 }

app/views/content_items/_form.html.haml

@@ -7,14 +7,15 @@
       - if @content_type.publishable
         - case @content_item.state
         - when 'published'
-          = form.submit "Update #{@content_type.name} Post", class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect'
+          = form.submit "Update #{@content_type.name} Post", class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--success mdl-js-ripple-effect'
+          = form.button 'Save as Draft', value: 'draft', name: 'content_item[state]', class: 'mdl-button mdl-js-button mdl-button--cb mdl-js-ripple-effect', type: 'submit'
         - when 'scheduled'
-          = form.button 'Publish Now', value: 'publish', name: 'content_item[state]', class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect', type: 'submit'
-          = form.button 'Save as Draft', value: 'draft', name: 'content_item[state]', class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect', type: 'submit'
+          = form.button 'Schedule Post', value: 'schedule',  name: 'content_item[state]', class: 'mdl-button mdl-js-button  mdl-button--cb mdl-js-ripple-effect', type: 'submit'
+          = form.button 'Publish Now', value: 'publish', name: 'content_item[state]', class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--success mdl-js-ripple-effect', type: 'submit'
+          = form.button 'Save as Draft', value: 'draft', name: 'content_item[state]', class: 'mdl-button mdl-js-button mdl-button--cb mdl-js-ripple-effect', type: 'submit'
         - else
-          = form.button 'Schedule for Publish', value: 'schedule', name: 'content_item[state]', class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect', type: 'submit'
-          = form.button 'Save as Draft', value: 'draft', name: 'content_item[state]', class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect', type: 'submit'
-          = form.button 'Publish', value: 'publish', name: 'content_item[state]', class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect', type: 'submit'
+          = form.button 'Publish Now', value: 'publish', name: 'content_item[state]', class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--success mdl-js-ripple-effect new_publish_state_button', type: 'submit'
+          = form.button 'Save as Draft', value: 'draft', name: 'content_item[state]', class: 'mdl-button mdl-js-button mdl-button--cb mdl-js-ripple-effect', type: 'submit'
       - else
-        = form.submit 'Submit', class: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect'
-      = link_to 'Cancel', content_type_content_items_path(@content_type), class: 'mdl-button mdl-js-button mdl-js-ripple-effect'
+        = form.submit 'Submit', class: 'mdl-button mdl-js-button  mdl-button--cb mdl-js-ripple-effect'
+      = link_to 'Cancel', content_type_content_items_path(@content_type), class: 'mdl-button mdl-js-button mdl-button--cb mdl-js-ripple-effect'