From 34e7c09ab78cb92dbd4ba813d4561e477f554a1a Mon Sep 17 00:00:00 2001 From: drigato Date: Tue, 1 Sep 2015 12:05:08 -0400 Subject: [PATCH 1/2] CC-6118: Playlist crossfade panel needs restyling Started re-styling the playlist fade editor --- .../views/scripts/playlist/playlist.phtml | 8 +++--- airtime_mvc/public/css/playlist_builder.css | 13 ++++++++-- airtime_mvc/public/js/airtime/library/spl.js | 25 +++++++++++-------- 3 files changed, 29 insertions(+), 17 deletions(-) diff --git a/airtime_mvc/application/views/scripts/playlist/playlist.phtml b/airtime_mvc/application/views/scripts/playlist/playlist.phtml index fde02893a..46228f766 100644 --- a/airtime_mvc/application/views/scripts/playlist/playlist.phtml +++ b/airtime_mvc/application/views/scripts/playlist/playlist.phtml @@ -57,11 +57,11 @@ if (isset($this->obj)) { diff --git a/airtime_mvc/public/css/playlist_builder.css b/airtime_mvc/public/css/playlist_builder.css index 49a0777a2..8a31e3579 100644 --- a/airtime_mvc/public/css/playlist_builder.css +++ b/airtime_mvc/public/css/playlist_builder.css @@ -345,7 +345,7 @@ } .edit-error { - color: #b80000; + color: #bd362f; margin: 0; padding-bottom: 0; font-size: 12px; @@ -359,14 +359,23 @@ color: #fff; } +.playlist_main_fade_input { + width: 100px; +} + .crossfade-main { - background: #debc9e; + /*background: #debc9e;*/ border: 1px solid #5b5b5b; padding: 10px 10px 0 10px; margin: 0 1px 16px 0; position: relative; } +.crossfade-main dt { + color: #ffffff !important; + width: 100px; +} + .crossfade-main .edit-error { padding-bottom: 4px; margin: 0; diff --git a/airtime_mvc/public/js/airtime/library/spl.js b/airtime_mvc/public/js/airtime/library/spl.js index 27c0aa743..64c632444 100644 --- a/airtime_mvc/public/js/airtime/library/spl.js +++ b/airtime_mvc/public/js/airtime/library/spl.js @@ -763,15 +763,18 @@ var AIRTIME = (function(AIRTIME){ playlistError(json); } else { - var fadeIn = $pl.find("span.spl_main_fade_in"); + var fadeIn = $pl.find("input.spl_main_fade_in"); var fadeOut = $pl.find("span.spl_main_fade_out"); if (json.fadeIn == null) { fadeIn.parent().prev().hide(); fadeIn.hide(); } else { + console.log(json.fadeIn); + //console.log(fadeIn.val()); fadeIn.parent().prev().show(); fadeIn.show(); - fadeIn.empty().append(json.fadeIn); + fadeIn.val(json.fadeIn); + fadeIn.text(json.fadeIn); } if (json.fadeOut == null) { fadeOut.parent().prev().hide(); @@ -789,41 +792,41 @@ var AIRTIME = (function(AIRTIME){ } }); - $pl.on("blur", "span.spl_main_fade_in", function(event){ + $pl.on("blur", "input.spl_main_fade_in", function(event){ event.stopPropagation(); var url = baseUrl+"playlist/set-playlist-fades", - span = $(this), - fadeIn = $.trim(span.text()), + input = $(this), + fadeIn = $.trim(input.val()), lastMod = mod.getModified(), type = $pl.find('.obj_type').val(); if (!isFadeValid(fadeIn)){ - showError(span, $.i18n._("please put in a time in seconds '00 (.0)'")); + showError(input, $.i18n._("please put in a time in seconds '00 (.0)'")); return; } $.post(url, {format: "json", fadeIn: fadeIn, modified: lastMod, type: type}, function(json){ - hideError(span); + hideError(input); if (json.modified !== undefined) { mod.setModified(json.modified); } }); }); - $pl.on("blur", "span.spl_main_fade_out", function(event){ + $pl.on("blur", "input.spl_main_fade_out", function(event){ event.stopPropagation(); var url = baseUrl+"playlist/set-playlist-fades", - span = $(this), - fadeOut = $.trim(span.text()), + input = $(this), + fadeOut = $.trim(input.text()), lastMod = mod.getModified(), type = $pl.find('.obj_type').val(); if (!isFadeValid(fadeOut)){ - showError(span, $.i18n._("please put in a time in seconds '00 (.0)'")); + showError(input, $.i18n._("please put in a time in seconds '00 (.0)'")); return; } From de322171dfd662d281f1b696e3adfa11b99b052f Mon Sep 17 00:00:00 2001 From: Albert Santoni Date: Fri, 4 Sep 2015 18:35:11 -0400 Subject: [PATCH 2/2] CC-6118: Playlist crossfade panel needs restyling * Fixed it as much as possible. Unfortunately, the milliseconds are dropped by Propel so we should probably restrict the fade time to whole seconds.... --- .../controllers/LocaleController.php | 2 +- .../models/airtime/CcPlaylistcontents.php | 6 ++++- .../views/scripts/playlist/playlist.phtml | 8 +++---- airtime_mvc/public/css/playlist_builder.css | 10 ++++---- airtime_mvc/public/js/airtime/library/spl.js | 23 ++++++++++++------- 5 files changed, 31 insertions(+), 18 deletions(-) diff --git a/airtime_mvc/application/controllers/LocaleController.php b/airtime_mvc/application/controllers/LocaleController.php index 2c539dc74..81cebc183 100644 --- a/airtime_mvc/application/controllers/LocaleController.php +++ b/airtime_mvc/application/controllers/LocaleController.php @@ -122,7 +122,7 @@ class LocaleController extends Zend_Controller_Action //library/spl.js "Open Media Builder" => _("Open Media Builder"), "please put in a time '00:00:00 (.0)'" => _("please put in a time '00:00:00 (.0)'"), - "please put in a time in seconds '00 (.0)'" => _("please put in a time in seconds '00 (.0)'"), + "Please enter a valid time in seconds. Eg. 0.5'" => _("Please enter a valid time in seconds. Eg. 0.5"), "Your browser does not support playing this file type: " => _("Your browser does not support playing this file type: "), "Dynamic block is not previewable" => _("Dynamic block is not previewable"), "Limit to: " => _("Limit to: "), diff --git a/airtime_mvc/application/models/airtime/CcPlaylistcontents.php b/airtime_mvc/application/models/airtime/CcPlaylistcontents.php index e7f6eb97d..b09781de3 100644 --- a/airtime_mvc/application/models/airtime/CcPlaylistcontents.php +++ b/airtime_mvc/application/models/airtime/CcPlaylistcontents.php @@ -69,7 +69,9 @@ class CcPlaylistcontents extends BaseCcPlaylistcontents { } $this->modifiedColumns[] = CcPlaylistcontentsPeer::FADEIN; $this->save(); - + + //FIXME(XXX): Propel silently drops the milliseconds from our fadein time. :( + return $this; } // setDbFadein() @@ -107,6 +109,8 @@ class CcPlaylistcontents extends BaseCcPlaylistcontents { } $this->modifiedColumns[] = CcPlaylistcontentsPeer::FADEOUT; $this->save(); + + //FIXME(XXX): Propel silently drops the milliseconds from our fadeout time. :( return $this; } // setDbFadeout() diff --git a/airtime_mvc/application/views/scripts/playlist/playlist.phtml b/airtime_mvc/application/views/scripts/playlist/playlist.phtml index 46228f766..f27b82dbd 100644 --- a/airtime_mvc/application/views/scripts/playlist/playlist.phtml +++ b/airtime_mvc/application/views/scripts/playlist/playlist.phtml @@ -57,11 +57,11 @@ if (isset($this->obj)) { diff --git a/airtime_mvc/public/css/playlist_builder.css b/airtime_mvc/public/css/playlist_builder.css index 8a31e3579..6ee7b6808 100644 --- a/airtime_mvc/public/css/playlist_builder.css +++ b/airtime_mvc/public/css/playlist_builder.css @@ -334,7 +334,7 @@ .crossfade dl.inline-list dt,.cue-edit dl.inline-list dt,.crossfade-main dl.inline-list dt { - min-width: 90px; + min-width: 80px; } .crossfade dl.inline-list dd,.cue-edit dl.inline-list dd,.crossfade-main dl.inline-list dd @@ -360,7 +360,7 @@ } .playlist_main_fade_input { - width: 100px; + width: 30px; } .crossfade-main { @@ -369,11 +369,13 @@ padding: 10px 10px 0 10px; margin: 0 1px 16px 0; position: relative; + box-sizing: border-box; + border-top: 0px; } .crossfade-main dt { color: #ffffff !important; - width: 100px; + line-height: 24px; } .crossfade-main .edit-error { @@ -382,7 +384,7 @@ } .crossfade-main .edit-error:last-child { - padding-bottom: 2px; + padding-top: 5px; } .crossfade-main .ui-icon-closethick { diff --git a/airtime_mvc/public/js/airtime/library/spl.js b/airtime_mvc/public/js/airtime/library/spl.js index f9ca9f973..2c99aa0ef 100644 --- a/airtime_mvc/public/js/airtime/library/spl.js +++ b/airtime_mvc/public/js/airtime/library/spl.js @@ -24,7 +24,7 @@ var AIRTIME = (function(AIRTIME){ } function isFadeValid(fade) { - var regExpr = new RegExp("^\\d{1}(\\d{1})?([.]\\d{1})?$"); + var regExpr = new RegExp("^[0-9]+(\\.\\d+)?$"); return regExpr.test(fade); } @@ -246,8 +246,10 @@ var AIRTIME = (function(AIRTIME){ type = $pl.find('.obj_type').val(); if (!isFadeValid(fadeIn)){ - showError(span, $.i18n._("please put in a time in seconds '00 (.0)'")); + showError(span, $.i18n._("Please enter a valid time in seconds. Eg. 0.5")); return; + } else { + hideError(span); } $.post(url, @@ -284,8 +286,10 @@ var AIRTIME = (function(AIRTIME){ type = $pl.find('.obj_type').val(); if (!isFadeValid(fadeOut)){ - showError(span, $.i18n._("please put in a time in seconds '00 (.0)'")); + showError(span, $.i18n._("Please enter a valid time in seconds. Eg. 0.5")); return; + } else { + hideError(span); } $.post(url, @@ -808,10 +812,11 @@ var AIRTIME = (function(AIRTIME){ type = $pl.find('.obj_type').val(); if (!isFadeValid(fadeIn)){ - showError(input, $.i18n._("please put in a time in seconds '00 (.0)'")); + showError(input, $.i18n._("Please enter a valid time in seconds. Eg. 0.5")); return; + } else { + hideError(input); } - $.post(url, {format: "json", fadeIn: fadeIn, modified: lastMod, type: type}, function(json){ @@ -827,19 +832,21 @@ var AIRTIME = (function(AIRTIME){ var url = baseUrl+"playlist/set-playlist-fades", input = $(this), - fadeOut = $.trim(input.text()), + fadeOut = $.trim(input.val()), lastMod = mod.getModified(), type = $pl.find('.obj_type').val(); if (!isFadeValid(fadeOut)){ - showError(input, $.i18n._("please put in a time in seconds '00 (.0)'")); + showError(input, $.i18n._("Please enter a valid time in seconds. Eg. 0.5")); return; + } else { + hideError(input); } $.post(url, {format: "json", fadeOut: fadeOut, modified: lastMod, type: type}, function(json){ - hideError(span); + hideError(input); if (json.modified !== undefined) { mod.setModified(json.modified); }