From 62c07107c1e562494c08dbf258ef9f526d668adb Mon Sep 17 00:00:00 2001 From: Naomi Aro Date: Mon, 5 Mar 2012 14:43:34 +0100 Subject: [PATCH 1/4] CC-3174 : showbuilder dialog improvements, can scroll library, builder independently. --- airtime_mvc/public/css/showbuilder.css | 14 ++++++++++- .../public/js/airtime/schedule/schedule.js | 24 +++++++++++++++---- 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/airtime_mvc/public/css/showbuilder.css b/airtime_mvc/public/css/showbuilder.css index a0a7d8e82..c17319817 100644 --- a/airtime_mvc/public/css/showbuilder.css +++ b/airtime_mvc/public/css/showbuilder.css @@ -47,10 +47,22 @@ tr.cursor-selected-row .marker { .ui-dialog .wrapper { margin: 0; padding: 10px 0 0 0; + overflow: hidden; +} + +.ui-dialog #library_content { + margin: 0 10px 10px 0; + overflow: auto; + min-height: 0; } .ui-dialog #show_builder { - width:45%; + margin: 0 0 10px 0; + overflow: auto; +} + +.ui-dialog .padded { + padding: 8px 10px 8px 8px; } .ui-dialog .ui-buttonset { diff --git a/airtime_mvc/public/js/airtime/schedule/schedule.js b/airtime_mvc/public/js/airtime/schedule/schedule.js index e93be7df3..192a64488 100644 --- a/airtime_mvc/public/js/airtime/schedule/schedule.js +++ b/airtime_mvc/public/js/airtime/schedule/schedule.js @@ -100,15 +100,31 @@ function buildScheduleDialog (json) { var dialog = $(json.dialog), viewport = findViewportDimensions(), - height = viewport.height * 0.96, - width = viewport.width * 0.96, - fnServer = AIRTIME.showbuilder.fnServerData; - + height = Math.floor(viewport.height * 0.96), + width = Math.floor(viewport.width * 0.96), + fnServer = AIRTIME.showbuilder.fnServerData, + //subtract padding in pixels + widgetWidth = width - 50, + libWidth = Math.floor(widgetWidth * 0.5), + builderWidth = Math.floor(widgetWidth * 0.5); + + + + dialog.find("#library_content") + .height(height - 125) + .width(libWidth); + + dialog.find("#show_builder") + .height(height - 125) + .width(builderWidth); + dialog.dialog({ autoOpen: false, title: json.title, width: width, height: height, + resizable: false, + draggable: false, modal: true, close: closeDialog, buttons: {"Ok": function() { From b8ca0ef740534de751e54b1fbf39ff1a75ca7704 Mon Sep 17 00:00:00 2001 From: Naomi Aro Date: Mon, 5 Mar 2012 15:39:18 +0100 Subject: [PATCH 2/4] CC-3174 : showbuidler fixing width of search input so it will work on smaller screens. --- airtime_mvc/public/css/showbuilder.css | 2 +- airtime_mvc/public/css/styles.css | 2 +- .../public/js/airtime/schedule/schedule.js | 20 +++++++++++++------ 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/airtime_mvc/public/css/showbuilder.css b/airtime_mvc/public/css/showbuilder.css index c17319817..3aac1fc05 100644 --- a/airtime_mvc/public/css/showbuilder.css +++ b/airtime_mvc/public/css/showbuilder.css @@ -62,7 +62,7 @@ tr.cursor-selected-row .marker { } .ui-dialog .padded { - padding: 8px 10px 8px 8px; + padding: 5px 10px 5px 8px; } .ui-dialog .ui-buttonset { diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css index 5215c675e..16f737681 100644 --- a/airtime_mvc/public/css/styles.css +++ b/airtime_mvc/public/css/styles.css @@ -623,7 +623,7 @@ dl.inline-list dd { width: 55%; border: 1px solid #5B5B5B; margin-left: -8px; - padding: 4px 3px 4px 25px; + padding: 5px 3px 4px 25px; } .dataTables_length select { background-color: #DDDDDD; diff --git a/airtime_mvc/public/js/airtime/schedule/schedule.js b/airtime_mvc/public/js/airtime/schedule/schedule.js index 192a64488..2b613d307 100644 --- a/airtime_mvc/public/js/airtime/schedule/schedule.js +++ b/airtime_mvc/public/js/airtime/schedule/schedule.js @@ -106,16 +106,17 @@ function buildScheduleDialog (json) { //subtract padding in pixels widgetWidth = width - 50, libWidth = Math.floor(widgetWidth * 0.5), - builderWidth = Math.floor(widgetWidth * 0.5); - - + builderWidth = Math.floor(widgetWidth * 0.5), + libLength, + libType, + libFilter; dialog.find("#library_content") - .height(height - 125) + .height(height - 110) .width(libWidth); dialog.find("#show_builder") - .height(height - 125) + .height(height - 110) .width(builderWidth); dialog.dialog({ @@ -132,7 +133,7 @@ function buildScheduleDialog (json) { $("#schedule_calendar").fullCalendar( 'refetchEvents' ); }} }); - + //set the start end times so the builder datatables knows its time range. fnServer.start = json.start; fnServer.end = json.end; @@ -141,6 +142,13 @@ function buildScheduleDialog (json) { AIRTIME.showbuilder.builderDataTable(); dialog.dialog('open'); + + //calculate dynamically width fo the library search input. + libLength = dialog.find("#library_display_length"); + libType = dialog.find("#library_display_type"); + libFilter = dialog.find("#library_display_filter"); + + libFilter.find("input").width(libFilter.width() - libType.width() - libLength.width() - 80); } function buildContentDialog (json){ From a832a40c757512d82d8ff02638faa8179266e3a6 Mon Sep 17 00:00:00 2001 From: Naomi Aro Date: Mon, 5 Mar 2012 18:14:10 +0100 Subject: [PATCH 3/4] CC-3174 : showbuilder making the library a separate scrollable from playlist --- .../controllers/LibraryController.php | 1 + .../application/layouts/scripts/library.phtml | 2 +- airtime_mvc/public/css/media_library.css | 14 ++++--- airtime_mvc/public/css/playlist_builder.css | 4 +- airtime_mvc/public/css/styles.css | 2 +- .../public/js/airtime/library/library.js | 2 +- .../public/js/airtime/library/main_library.js | 17 +++++++- .../public/js/airtime/utilities/utilities.js | 40 +++++++++++++++++++ 8 files changed, 69 insertions(+), 13 deletions(-) create mode 100644 airtime_mvc/public/js/airtime/utilities/utilities.js diff --git a/airtime_mvc/application/controllers/LibraryController.php b/airtime_mvc/application/controllers/LibraryController.php index 64d411086..9b3a2b35e 100644 --- a/airtime_mvc/application/controllers/LibraryController.php +++ b/airtime_mvc/application/controllers/LibraryController.php @@ -56,6 +56,7 @@ class LibraryController extends Zend_Controller_Action $this->view->headScript()->appendFile($baseUrl.'/js/datatables/plugin/dataTables.TableTools.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headScript()->appendFile($baseUrl.'/js/airtime/buttons/buttons.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); + $this->view->headScript()->appendFile($baseUrl.'/js/airtime/utilities/utilities.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/library.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/main_library.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); diff --git a/airtime_mvc/application/layouts/scripts/library.phtml b/airtime_mvc/application/layouts/scripts/library.phtml index 69c0dc544..d015fee03 100644 --- a/airtime_mvc/application/layouts/scripts/library.phtml +++ b/airtime_mvc/application/layouts/scripts/library.phtml @@ -23,7 +23,7 @@
layout()->library ?>
-
layout()->spl ?>
+
layout()->spl ?>
diff --git a/airtime_mvc/public/css/media_library.css b/airtime_mvc/public/css/media_library.css index 97de2e91c..172c26a0a 100644 --- a/airtime_mvc/public/css/media_library.css +++ b/airtime_mvc/public/css/media_library.css @@ -1,7 +1,7 @@ #library_content { float: left; width: 50%; - min-height: 475px; + overflow: auto; } #library_display { @@ -10,7 +10,7 @@ } #library_display th { - text-align: left; + text-align: left; } #library_content #library_display { @@ -80,7 +80,9 @@ text-align: center; } -.library_sr, -.library_bitrate { - text-align: right; -} +td.library_track, +td.library_sr, +td.library_bitrate { + text-align: right; + padding-right: 1em !important; +} \ No newline at end of file diff --git a/airtime_mvc/public/css/playlist_builder.css b/airtime_mvc/public/css/playlist_builder.css index cef0a7eba..9fdfd6fc4 100644 --- a/airtime_mvc/public/css/playlist_builder.css +++ b/airtime_mvc/public/css/playlist_builder.css @@ -1,9 +1,7 @@ #side_playlist { width: 40%; - min-height: 475px; - padding: 8px; - padding-bottom: 0px; font-size: 16px; + overflow: auto; } #side_playlist, diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css index 16f737681..e9e609c6b 100644 --- a/airtime_mvc/public/css/styles.css +++ b/airtime_mvc/public/css/styles.css @@ -9,7 +9,7 @@ body { padding: 0; } html, body { -height: 100%; + height: 100%; } #login-page { diff --git a/airtime_mvc/public/js/airtime/library/library.js b/airtime_mvc/public/js/airtime/library/library.js index 42aa267ef..27362a10f 100644 --- a/airtime_mvc/public/js/airtime/library/library.js +++ b/airtime_mvc/public/js/airtime/library/library.js @@ -58,7 +58,7 @@ var AIRTIME = (function(AIRTIME){ /* Length */ {"sTitle": "Length", "mDataProp": "length", "sClass": "library_length", "sWidth": "80px"}, /* Upload Time */ {"sTitle": "Uploaded", "mDataProp": "utime", "sClass": "library_upload_time"}, /* Last Modified */ {"sTitle": "Last Modified", "mDataProp": "mtime", "bVisible": false, "sClass": "library_modified_time"}, - /* Track Number */ {"sTitle": "Track", "mDataProp": "track_number", "bSearchable": false, "bVisible": false, "sClass": "library_track"}, + /* Track Number */ {"sTitle": "Track", "mDataProp": "track_number", "bSearchable": false, "bVisible": false, "sClass": "library_track", "sWidth": "65px"}, /* Mood */ {"sTitle": "Mood", "mDataProp": "mood", "bSearchable": false, "bVisible": false, "sClass": "library_mood"}, /* BPM */ {"sTitle": "BPM", "mDataProp": "bpm", "bSearchable": false, "bVisible": false, "sClass": "library_bpm"}, /* Composer */ {"sTitle": "Composer", "mDataProp": "composer", "bSearchable": false, "bVisible": false, "sClass": "library_composer"}, diff --git a/airtime_mvc/public/js/airtime/library/main_library.js b/airtime_mvc/public/js/airtime/library/main_library.js index d50811e7e..0682ee04a 100644 --- a/airtime_mvc/public/js/airtime/library/main_library.js +++ b/airtime_mvc/public/js/airtime/library/main_library.js @@ -1 +1,16 @@ -$(document).ready(AIRTIME.library.libraryInit); \ No newline at end of file +$(document).ready(function() { + var viewport = AIRTIME.utilities.findViewportDimensions(), + lib = $("#library_content"), + pl = $("#side_playlist"), + widgetHeight = viewport.height - 185, + width = Math.floor(viewport.width - 110); + + lib.height(widgetHeight) + .width(Math.floor(width * 0.55)); + + pl.height(widgetHeight) + .width(Math.floor(width * 0.45)); + + AIRTIME.library.libraryInit(); + +}); \ No newline at end of file diff --git a/airtime_mvc/public/js/airtime/utilities/utilities.js b/airtime_mvc/public/js/airtime/utilities/utilities.js new file mode 100644 index 000000000..9c3176051 --- /dev/null +++ b/airtime_mvc/public/js/airtime/utilities/utilities.js @@ -0,0 +1,40 @@ +var AIRTIME = (function(AIRTIME){ + var mod; + + if (AIRTIME.utilities === undefined) { + AIRTIME.utilities = {}; + } + mod = AIRTIME.utilities; + + mod.findViewportDimensions = function() { + var viewportwidth, + viewportheight; + + // the more standards compliant browsers (mozilla/netscape/opera/IE7) use + // window.innerWidth and window.innerHeight + if (typeof window.innerWidth != 'undefined') { + viewportwidth = window.innerWidth, viewportheight = window.innerHeight; + } + // IE6 in standards compliant mode (i.e. with a valid doctype as the first + // line in the document) + else if (typeof document.documentElement != 'undefined' + && typeof document.documentElement.clientWidth != 'undefined' + && document.documentElement.clientWidth != 0) { + viewportwidth = document.documentElement.clientWidth; + viewportheight = document.documentElement.clientHeight; + } + // older versions of IE + else { + viewportwidth = document.getElementsByTagName('body')[0].clientWidth; + viewportheight = document.getElementsByTagName('body')[0].clientHeight; + } + + return { + width: viewportwidth, + height: viewportheight + }; + }; + +return AIRTIME; + +}(AIRTIME || {})); \ No newline at end of file From 6c5f710329ab81acf7d17c5a2c1b445269bb2dd9 Mon Sep 17 00:00:00 2001 From: Naomi Aro Date: Tue, 6 Mar 2012 13:19:20 +0100 Subject: [PATCH 4/4] CC-3174 : showbuilder making each separate widget scrollable (playlist, library, timeline) --- .../controllers/LibraryController.php | 7 +++++- .../models/formatters/TimeFilledFormatter.php | 9 +++++++ airtime_mvc/public/css/showbuilder.css | 1 + airtime_mvc/public/css/styles.css | 4 +-- .../js/airtime/showbuilder/main_builder.js | 25 ++++++++++++++----- 5 files changed, 37 insertions(+), 9 deletions(-) diff --git a/airtime_mvc/application/controllers/LibraryController.php b/airtime_mvc/application/controllers/LibraryController.php index 9b3a2b35e..82d08a0db 100644 --- a/airtime_mvc/application/controllers/LibraryController.php +++ b/airtime_mvc/application/controllers/LibraryController.php @@ -29,9 +29,15 @@ class LibraryController extends Zend_Controller_Action public function indexAction() { + global $CC_CONFIG; + $this->_helper->layout->setLayout('library'); + $request = $this->getRequest(); + $baseUrl = $request->getBaseUrl(); + $this->view->headScript()->appendFile($this->view->baseUrl('/js/airtime/library/events/library_playlistbuilder.js'),'text/javascript'); + $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/main_library.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->_helper->actionStack('library', 'library'); $this->_helper->actionStack('index', 'playlist'); @@ -58,7 +64,6 @@ class LibraryController extends Zend_Controller_Action $this->view->headScript()->appendFile($baseUrl.'/js/airtime/buttons/buttons.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headScript()->appendFile($baseUrl.'/js/airtime/utilities/utilities.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/library.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); - $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/main_library.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); $this->view->headLink()->appendStylesheet($baseUrl.'/css/media_library.css?'.$CC_CONFIG['airtime_version']); $this->view->headLink()->appendStylesheet($baseUrl.'/css/jquery.contextMenu.css?'.$CC_CONFIG['airtime_version']); diff --git a/airtime_mvc/application/models/formatters/TimeFilledFormatter.php b/airtime_mvc/application/models/formatters/TimeFilledFormatter.php index 6a894d194..a1d751eee 100644 --- a/airtime_mvc/application/models/formatters/TimeFilledFormatter.php +++ b/airtime_mvc/application/models/formatters/TimeFilledFormatter.php @@ -19,6 +19,7 @@ class TimeFilledFormatter { { $formatted = ""; $sign = ($this->_seconds < 0) ? "-" : "+"; + $perfect = true; $time = Application_Model_Playlist::secondsToPlaylistTime(abs($this->_seconds)); Logging::log("time is: ".$time); @@ -29,16 +30,24 @@ class TimeFilledFormatter { if (intval($info[0]) > 0) { $info[0] = ltrim($info[0], "0"); $formatted .= " {$info[0]}h"; + $perfect = false; } if (intval($info[1]) > 0) { $info[1] = ltrim($info[1], "0"); $formatted .= " {$info[1]}m"; + $perfect = false; } if (intval($info[2]) > 0) { $sec = round($info[2], 0); $formatted .= " {$sec}s"; + $perfect = false; + } + + //0 over/under lap of content. + if ($perfect === true) { + $formatted = "+ 0s"; } return $formatted; diff --git a/airtime_mvc/public/css/showbuilder.css b/airtime_mvc/public/css/showbuilder.css index 3aac1fc05..4a2a47673 100644 --- a/airtime_mvc/public/css/showbuilder.css +++ b/airtime_mvc/public/css/showbuilder.css @@ -2,6 +2,7 @@ #show_builder { width:95%; + overflow: auto; } #show_builder_table th { diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css index e9e609c6b..31e12329c 100644 --- a/airtime_mvc/public/css/styles.css +++ b/airtime_mvc/public/css/styles.css @@ -366,7 +366,7 @@ select { .wrapper { margin: 0 20px 0 20px; - padding:20px 0 0 0; + padding:10px 0 0 0; } .alpha-block { @@ -577,7 +577,7 @@ dl.inline-list dd { line-height:22px; } .dataTables_filter { - margin:8px 0 0 8px; + margin:0 0 0 8px; } .dataTables_filter .auto-search { width:55%; diff --git a/airtime_mvc/public/js/airtime/showbuilder/main_builder.js b/airtime_mvc/public/js/airtime/showbuilder/main_builder.js index 4a0af1638..827ac6ef9 100644 --- a/airtime_mvc/public/js/airtime/showbuilder/main_builder.js +++ b/airtime_mvc/public/js/airtime/showbuilder/main_builder.js @@ -1,9 +1,21 @@ $(document).ready(function(){ - var oBaseDatePickerSettings, + var viewport = AIRTIME.utilities.findViewportDimensions(), + lib = $("#library_content"), + builder = $("#show_builder"), + widgetHeight = viewport.height - 185, + screenWidth = Math.floor(viewport.width - 110), + oBaseDatePickerSettings, oBaseTimePickerSettings, oRange; + //set the heights of the main widgets. + lib.height(widgetHeight); + + //builder takes all the screen on first load + builder.height(widgetHeight) + .width(screenWidth); + oBaseDatePickerSettings = { dateFormat: 'yy-mm-dd', onSelect: function(sDate, oDatePicker) { @@ -125,17 +137,17 @@ $(document).ready(function(){ if ($button.hasClass("sb-edit")) { $lib.show(); - $lib.width("45%"); - $builder.width("50%"); + $lib.width(Math.floor(screenWidth * 0.5)); + $builder.width(Math.floor(screenWidth * 0.5)); $button.removeClass("sb-edit"); $button.addClass("sb-finish-edit"); $button.val("Close Library"); } - else if($button.hasClass("sb-finish-edit")) { + else if ($button.hasClass("sb-finish-edit")) { $lib.hide(); - $builder.width("95%"); + $builder.width(screenWidth); $button.removeClass("sb-finish-edit"); $button.addClass("sb-edit"); @@ -149,7 +161,8 @@ $(document).ready(function(){ oRange = fnGetScheduleRange(); AIRTIME.showbuilder.fnServerData.start = oRange.start; AIRTIME.showbuilder.fnServerData.end = oRange.end; - + + AIRTIME.library.libraryInit(); AIRTIME.showbuilder.builderDataTable(); setInterval(function(){