From 6d883d2fa4599c16c34121939e29944f7be7d6f9 Mon Sep 17 00:00:00 2001
From: Duncan Sommerville <duncan.sommerville@gmail.com>
Date: Mon, 13 Jul 2015 13:23:24 -0400
Subject: [PATCH] Fix Add Show button bug and update styling
---
airtime_mvc/public/css/add-show.css | 176 ++++++++++++------
airtime_mvc/public/css/styles.css | 39 ----
.../public/js/airtime/schedule/add-show.js | 42 +++--
.../schedule/full-calendar-functions.js | 2 +
4 files changed, 138 insertions(+), 121 deletions(-)
diff --git a/airtime_mvc/public/css/add-show.css b/airtime_mvc/public/css/add-show.css
index 9a0a5a5b4..c9cce1869 100644
--- a/airtime_mvc/public/css/add-show.css
+++ b/airtime_mvc/public/css/add-show.css
@@ -1,21 +1,21 @@
#schedule-add-show,
#fullcalendar_show_display {
- float: left;
+ float: left;
}
#schedule-add-show {
- font-size: 12px;
- /*width: 25%;*/
- width:310px;
+ font-size: 12px;
+ /*width: 25%;*/
+ width: 310px;
}
#schedule-add-show textarea {
- width: 99%;
- height: 80px;
+ width: 99%;
+ height: 80px;
}
#fullcalendar_show_display {
- width: 60%;
+ width: 60%;
}
#schedule-add-show .ui-tabs-panel {
@@ -23,16 +23,16 @@
}
#schedule-add-show fieldset {
- padding:8px;
- margin-bottom:8px;
+ padding: 8px;
+ margin-bottom: 8px;
}
#schedule-add-show dl {
- padding:8px;
- margin-bottom:8px;
- margin:0;
- padding:0;
- width:100%;
+ padding: 8px;
+ margin-bottom: 8px;
+ margin: 0;
+ padding: 0;
+ width: 100%;
}
#schedule-add-show dd {
@@ -52,67 +52,67 @@
margin: 0;
padding: 4px 0;
text-align: left;
- min-width:103px;
- clear:left;
+ min-width: 103px;
+ clear: left;
}
#schedule-add-show dt.big {
- min-width:130px;
+ min-width: 130px;
}
#schedule-add-show dt.block-display, #schedule-add-show dd.block-display {
- display:block;
- float:none;
- margin-left:0;
- padding-left:0;
+ display: block;
+ float: none;
+ margin-left: 0;
+ padding-left: 0;
}
#schedule-add-show dt label {
- padding-right:0;
+ padding-right: 0;
}
.wrapp-label {
- padding:0;
- height:16px;
- display:block;
- line-height:18px;
+ padding: 0;
+ height: 16px;
+ display: block;
+ line-height: 18px;
}
label.wrapp-label input[type="checkbox"] {
- float:left;
- margin:-1px 2px 0 0;
+ float: left;
+ margin: -1px 2px 0 0;
}
#schedule-add-show fieldset:last-child {
- margin-bottom:0;
+ margin-bottom: 0;
}
#schedule-add-show fieldset dd input[type="checkbox"] {
- margin-top:2px;
+ margin-top: 2px;
}
-#add_show_day_check-element.block-display {
- margin-bottom:15px;
- margin-top:7px;
+#add_show_day_check-element.block-display {
+ margin-bottom: 15px;
+ margin-top: 7px;
}
#add_show_day_check-element.block-display label.wrapp-label {
- font-size:12px;
- float:left;
- margin-right:10px;
+ font-size: 12px;
+ float: left;
+ margin-right: 10px;
}
#add_show_name-element .input_text {
- /*width:99%;*/
+ /*width:99%;*/
}
#schedule-add-show-overlap {
- border: 1px solid #c83f3f;
- background: #c6b4b4;
- margin-top:8px;
- padding:8px;
- color:#902d2d;
- display:none;
+ border: 1px solid #c83f3f;
+ background: #c6b4b4;
+ margin-top: 8px;
+ padding: 8px;
+ color: #902d2d;
+ display: none;
}
#add_show_hosts-element {
@@ -121,38 +121,90 @@ label.wrapp-label input[type="checkbox"] {
overflow: auto;
}
-#add_show_start_time, #add_show_end_time {
- width: 54px;
- margin-left:10px;
+#add_show_start_time, #add_show_end_time {
+ width: 54px;
+ margin-left: 10px;
}
-#add_show_end_date_no_repeat, #add_show_start_date {
- width: 89px;
+#add_show_end_date_no_repeat, #add_show_start_date {
+ width: 89px;
}
-#add_show_duration {
- background: #AAAAAA;
- cursor: default;
- width: 65px;
+#add_show_duration {
+ background: #AAAAAA;
+ cursor: default;
+ width: 65px;
}
[id^=add_show_instance_description] {
- display: none;
+ display: none;
}
-#add_show_logo_current,
+#add_show_logo_current,
#add_show_logo_preview {
border: 1px solid #5b5b5b;
- -webkit-box-shadow: 0px 0px 2px 1px rgba(48,48,48,1);
- -moz-box-shadow: 0px 0px 2px 1px rgba(48,48,48,1);
- box-shadow: 0px 0px 2px 1px rgba(48,48,48,1);
- width: 200px;
- height: 200px;
- display: none;
- cursor: default;
+ -webkit-box-shadow: 0px 0px 2px 1px rgba(48, 48, 48, 1);
+ -moz-box-shadow: 0px 0px 2px 1px rgba(48, 48, 48, 1);
+ box-shadow: 0px 0px 2px 1px rgba(48, 48, 48, 1);
+ width: 200px;
+ height: 200px;
+ display: none;
+ cursor: default;
}
#add_show_logo_current_remove {
display: none;
- height: 28px;
+ 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));
+}
\ No newline at end of file
diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css
index d9031f095..fad4eff17 100644
--- a/airtime_mvc/public/css/styles.css
+++ b/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;
diff --git a/airtime_mvc/public/js/airtime/schedule/add-show.js b/airtime_mvc/public/js/airtime/schedule/add-show.js
index a5804dbc5..5c67d1999 100644
--- a/airtime_mvc/public/js/airtime/schedule/add-show.js
+++ b/airtime_mvc/public/js/airtime/schedule/add-show.js
@@ -31,24 +31,26 @@ function openAddShowForm() {
}
}
-function makeAddShowButton(){
- $('.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>')
- .find('span.fc-button:last > a')
- .click(function(){
- openAddShowForm();
- removeAddShowButton();
- });
+function makeAddShowButton() {
+ if($('.add-button').length === 0) {
+ $('.fc-header-left')
+ .append('<span class="fc-header-space"></span>')
+ .append('<span class="fc-button">' +
+ '<button onclick="showForm()" class="add-button">' +
+ '<span class="add-icon"></span>' + $.i18n._("Create New Show") +
+ '</button>' +
+ '</span>');
+ }
}
-function removeAddShowButton(){
- var aTag = $('.fc-header-left')
- .find("span.fc-button:last > a");
+function showForm() {
+ openAddShowForm();
+ toggleAddShowButton();
+}
- var span = aTag.parent();
- span.prev().remove();
- span.remove();
+function toggleAddShowButton(){
+ var aTag = $('.add-button');
+ aTag.prop('disabled', function(i, v) { return !v; });
}
//$el is DOM element #add-show-form
@@ -79,11 +81,11 @@ function closeAddShowForm(event) {
windowResize();
$.get(baseUrl+"Schedule/get-form", {format:"json"}, function(json) {
-
+
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();
-
}
});
});
diff --git a/airtime_mvc/public/js/airtime/schedule/full-calendar-functions.js b/airtime_mvc/public/js/airtime/schedule/full-calendar-functions.js
index f51b7d8fe..a5ccf184d 100644
--- a/airtime_mvc/public/js/airtime/schedule/full-calendar-functions.js
+++ b/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();
}
}
}