From 6d883d2fa4599c16c34121939e29944f7be7d6f9 Mon Sep 17 00:00:00 2001 From: Duncan Sommerville 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('') - .append(''+$.i18n._("Show")+'') - .find('span.fc-button:last > a') - .click(function(){ - openAddShowForm(); - removeAddShowButton(); - }); +function makeAddShowButton() { + if($('.add-button').length === 0) { + $('.fc-header-left') + .append('') + .append('' + + '' + + ''); + } } -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(); } } }