Fix Add Show button bug and update styling

airtime_mvc/public/css/add-show.css

@@ -156,3 +156,55 @@ label.wrapp-label input[type="checkbox"] {
     display: none;
     height: 28px;
 }
+
+.add-button {
+    cursor: pointer;
+}
+
+.add-button {
+    border: 1px solid #5b5b5b;
+    background-color: #767676;
+    background: -moz-linear-gradient(top, #868686 0, #6e6e6e 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #868686), color-stop(100%, #6e6e6e));
+    color: #ffffff;
+    margin:0;
+    font-size:12px;
+    font-weight:bold;
+    padding:4px 12px 4px 22px;
+    text-decoration:none;
+    /*text-shadow: #000 0px -1px;*/
+    display:block;
+    float:left;
+    position:relative;
+}
+.add-button:hover {
+    border: 1px solid #000000;
+    background-color: #353535;
+    background: -moz-linear-gradient(top, #353535 0, #000000 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #353535), color-stop(100%, #000000));
+    color: #ffffff;
+}
+.add-button span {
+    position:absolute;
+    top:3px;
+    left:3px;
+    height:16px;
+    width:16px;
+    display:block;
+    background:url(redmond/images/ui-icons_ffffff_256x240.png) no-repeat;
+}
+/*.add-button:hover span {*/
+    /*background:url(redmond/images/ui-icons_ff5d1a_256x240.png) no-repeat;*/
+/*}*/
+.add-button span.add-icon {
+    background-position: -32px -129px;
+}
+
+.add-button[disabled] {
+    cursor: auto;
+    color: #e7e7e7;
+    border: 1px solid #a1a1a1;
+    background-color: #b1b1b1;
+    background: -moz-linear-gradient(top, #c7c7c7 0, #c7c7c7 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c7c7c7), color-stop(100%, #c7c7c7));
+}

airtime_mvc/public/css/styles.css

@@ -1901,44 +1901,6 @@ span.errors.sp-errors{
     height:38px;
 }
 
-.add-button, .ui-widget-content a.add-button {
-    border: 1px solid #242424;
-    background-color: #353535;
-    background: -moz-linear-gradient(top, #494949 0, #353535 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #494949), color-stop(100%, #353535));
-    color: #ffffff;
-    margin:0;
-    font-size:12px;
-    font-weight:bold;
-    padding:4px 12px 4px 22px;
-    text-decoration:none;
-    text-shadow: #000 0px -1px;
-    display:block;
-    float:left;
-    position:relative;
-}
-.add-button:hover, .ui-widget-content a.add-button:hover  {
-    border: 1px solid #000000;
-    background-color: #353535;
-    background: -moz-linear-gradient(top, #353535 0, #000000 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #353535), color-stop(100%, #000000));
-    color: #ffffff;
-}
-.add-button span {
-    position:absolute;
-    top:3px;
-    left:3px;
-    height:16px;
-    width:16px;
-    display:block;
-    background:url(redmond/images/ui-icons_ffffff_256x240.png) no-repeat;
-}
-.add-button:hover span {
-    background:url(redmond/images/ui-icons_ff5d1a_256x240.png) no-repeat;
-}
-.add-button span.add-icon {
-    background-position: -32px -128px;
-}
 
 /*---//////////////////// NOW PLAYING COLORS ////////////////////---*/
 .playing-song, .datatable tr.playing-song:hover td {
@@ -1958,7 +1920,6 @@ span.errors.sp-errors{
     color:#FFF;
 }
 
-
 /*---//////////////////// END NOW PLAYING COLORS ////////////////////---*/
 .icon-link, .ui-widget-content a.icon-link {
     color: #646464;

airtime_mvc/public/js/airtime/schedule/add-show.js

@@ -32,23 +32,25 @@ function openAddShowForm() {
 }
 
 function makeAddShowButton() {
+    if($('.add-button').length === 0) {
         $('.fc-header-left')
             .append('<span class="fc-header-space"></span>')
-        .append('<span class="fc-button"><a href="#" class="add-button"><span class="add-icon"></span>'+$.i18n._("Show")+'</a></span>')
+            .append('<span class="fc-button">' +
-        .find('span.fc-button:last > a')
+                        '<button onclick="showForm()" class="add-button">' +
-            .click(function(){
+                            '<span class="add-icon"></span>' + $.i18n._("Create New Show") +
-                openAddShowForm();
+                        '</button>' +
-                removeAddShowButton();
+                    '</span>');
-            });
+    }
 }
 
-function removeAddShowButton(){
+function showForm() {
-    var aTag = $('.fc-header-left')
+    openAddShowForm();
-        .find("span.fc-button:last > a");
+    toggleAddShowButton();
+}
 
-    var span = aTag.parent();
+function toggleAddShowButton(){
-    span.prev().remove();
+    var aTag = $('.add-button');
-    span.remove();
+    aTag.prop('disabled', function(i, v) { return !v; });
 }
 
 //$el is DOM element #add-show-form
@@ -83,7 +85,7 @@ function closeAddShowForm(event) {
         redrawAddShowForm($el, json.form);
     });
 
-    makeAddShowButton();
+    toggleAddShowButton();
 }
 
 //dateText mm-dd-yy
@@ -162,7 +164,7 @@ function beginEditShow(data){
     }
     
     redrawAddShowForm($("#add-show-form"), data.newForm);
-    removeAddShowButton();
+    toggleAddShowButton();
     openAddShowForm();
 }
 
@@ -777,20 +779,20 @@ function setAddShowEvents(form) {
                         .fullCalendar('render');
     
                     $addShowForm.hide();
+                    toggleAddShowButton();
                     $.get(baseUrl+"Schedule/get-form", {format:"json"}, function(json){
                         redrawAddShowForm($addShowForm, json.form);
                     });
-                    makeAddShowButton();
                 } else {
                     redrawAddShowForm($addShowForm, json.newForm);
                     scheduleRefetchEvents(json);
                     $addShowForm.hide();
+                    toggleAddShowButton();
                 }
 
                 /* CC-6062: Resize the window to avoid stretching the last column */
                 windowResize();
                 makeAddShowButton();
-
             }
         });
     });

airtime_mvc/public/js/airtime/schedule/full-calendar-functions.js

@@ -110,6 +110,8 @@ function dayClick(date, allDay, jsEvent, view){
             $("#schedule-show-when").show();
 
             openAddShowForm();
+            makeAddShowButton();
+            toggleAddShowButton();
         }
     }
 }