From 33d2fe0900a1660d9b00134483b87ceeed2f5579 Mon Sep 17 00:00:00 2001 From: Duncan Sommerville Date: Tue, 4 Aug 2015 19:56:12 -0400 Subject: [PATCH] SAAS-989 - Move file metadata editor to right-hand showbuilder pane --- airtime_mvc/application/forms/EditAudioMD.php | 29 +++----- airtime_mvc/public/css/_showbuilder.css | 70 +++++++++++++++---- .../public/js/airtime/library/_library.js | 6 +- airtime_mvc/public/js/airtime/library/_spl.js | 66 +++++++++++++---- .../library/events/_library_showbuilder.js | 3 +- 5 files changed, 124 insertions(+), 50 deletions(-) diff --git a/airtime_mvc/application/forms/EditAudioMD.php b/airtime_mvc/application/forms/EditAudioMD.php index 9fc41e314..62c27b018 100644 --- a/airtime_mvc/application/forms/EditAudioMD.php +++ b/airtime_mvc/application/forms/EditAudioMD.php @@ -11,15 +11,13 @@ class Application_Form_EditAudioMD extends Zend_Form // Set the method for the display form to POST $this->setMethod('post'); - $this->addElement('hidden', 'file_id', array( - 'value' => $p_id - )); + $file_id = new Zend_Form_Element_Hidden('file_id'); + $file_id->setValue($p_id); + $file_id->addDecorator('HtmlTag', array('tag' => 'div', 'style' => 'display:none')); + $file_id->removeDecorator('Label'); + $this->addElement($file_id); + // Add title field - /*$this->addElement('text', 'track_title', array( - 'label' => _('Title:'), - 'class' => 'input_text', - 'filters' => array('StringTrim'), - ));*/ $track_title = new Zend_Form_Element_Text('track_title'); $track_title->class = 'input_text'; $track_title->setLabel(_('Title:')) @@ -30,11 +28,6 @@ class Application_Form_EditAudioMD extends Zend_Form $this->addElement($track_title); // Add artist field - /*$this->addElement('text', 'artist_name', array( - 'label' => _('Creator:'), - 'class' => 'input_text', - 'filters' => array('StringTrim'), - ));*/ $artist_name = new Zend_Form_Element_Text('artist_name'); $artist_name->class = 'input_text'; $artist_name->setLabel(_('Creator:')) @@ -51,7 +44,7 @@ class Application_Form_EditAudioMD extends Zend_Form ->setFilters(array('StringTrim')) ->setValidators(array( new Zend_Validate_StringLength(array('max' => 512)) - ));; + )); $this->addElement($album_title); // Add track number field @@ -177,9 +170,9 @@ class Application_Form_EditAudioMD extends Zend_Form // Add the submit button $this->addElement('button', 'editmdsave', array( - 'ignore' => true, - 'class' => 'btn', - 'label' => _('Save'), + 'ignore' => true, + 'class' => 'btn btn-small', + 'label' => _('Save'), 'decorators' => array( 'ViewHelper' ) @@ -188,7 +181,7 @@ class Application_Form_EditAudioMD extends Zend_Form // Add the submit button $this->addElement('button', 'editmdcancel', array( 'ignore' => true, - 'class' => 'btn md-cancel', + 'class' => 'btn btn-small md-cancel', 'label' => _('Cancel'), 'decorators' => array( 'ViewHelper' diff --git a/airtime_mvc/public/css/_showbuilder.css b/airtime_mvc/public/css/_showbuilder.css index e454979c5..fb9de6d33 100644 --- a/airtime_mvc/public/css/_showbuilder.css +++ b/airtime_mvc/public/css/_showbuilder.css @@ -37,23 +37,28 @@ div.ColVis_collectionBackground { /* Scroll bars */ ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 7px; + height: 7px; } ::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); - /*border-radius: 10px;*/ + background: transparent none; +} + +.wrapper::-webkit-scrollbar-track { + background-color: rgba(255, 93, 26, .2); + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.75); } ::-webkit-scrollbar-thumb { background-color: #ff5d1a; - /*border-radius: 10px;*/ - -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.75); + border-radius: 10px; + -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.75); } ::-webkit-scrollbar-corner { - -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.75); + background-color: #000; } /* Show Builder*/ @@ -108,9 +113,6 @@ div.ColVis_collectionBackground { flex: 8 100%; min-height: 50%; } - #side_playlist { - margin-top: 0 !important; - } #media_type_nav { display: -webkit-box; display: -moz-box; @@ -139,8 +141,11 @@ div.ColVis_collectionBackground { @media screen and (max-width: 780px) { .wrapper { - height: 100% !important; /* Correct for margins */ - padding: 0 !important; + /*height: 100% !important; /!* Correct for margins *!/*/ + padding: 4px !important; + } + #media_type_nav { + min-width: 555px; } } @@ -239,7 +244,7 @@ div.ColVis_collectionBackground { #advanced_search { position: absolute; - left: -500px; + left: -420px; padding: 5px; margin-top: -2px; } @@ -368,6 +373,43 @@ div.ColVis_collectionBackground { /* Media editors */ +/* File Metadata Editor */ + +#edit-md-dialog { + width: 100%; + background: none; + border: none; + box-shadow: none; +} + +#edit-md-dialog label { + font-size: 14px; + font-weight: normal; + + color: #efefef; +} + +#side_playlist .zend_form dt { + float: left; + width: 40%; + + text-align: right; + + line-height: 20px; + margin: 0 0 10px; + padding-right: 4px; +} + +#side_playlist .zend_form dd { + float: left; + width: auto; + + font-size: 14px; + margin: 0 0 10px; +} + +/* Playlist/Block/Webstream Editors */ + #side_playlist { margin-top: 34px; width: 100%; /* Override because we're using flexbox */ @@ -394,8 +436,6 @@ div.ColVis_collectionBackground { flex: 1 auto; margin-right: 10px; text-align: center; - - min-width: 555px; } #media_type_nav div { diff --git a/airtime_mvc/public/js/airtime/library/_library.js b/airtime_mvc/public/js/airtime/library/_library.js index 776aac9b0..662d47e4b 100644 --- a/airtime_mvc/public/js/airtime/library/_library.js +++ b/airtime_mvc/public/js/airtime/library/_library.js @@ -508,8 +508,8 @@ var AIRTIME = (function(AIRTIME) { "aoColumns": [ /* ftype */ { "sTitle" : "" , "mDataProp" : "ftype" , "bSearchable" : false , "bVisible" : false } , /* Type */ { "sTitle" : "" , "mDataProp" : "image" , "bSearchable" : false , "sWidth" : "16px" , "sClass" : "library_type" , "iDataSort" : 0 } , - /* Is Scheduled */ { "sTitle" : $.i18n._("Scheduled") , "mDataProp" : "is_scheduled" , "bVisible" : false , "bSearchable" : false , "sWidth" : "90px" , "sClass" : "library_is_scheduled"} , - /* Is Playlist */ { "sTitle" : $.i18n._("Playlist / Block") , "mDataProp" : "is_playlist" , "bSearchable" : false , "sWidth" : "110px" , "sClass" : "library_is_playlist"} , + ///* Is Scheduled */ { "sTitle" : $.i18n._("Scheduled") , "mDataProp" : "is_scheduled" , "bVisible" : false , "bSearchable" : false , "sWidth" : "90px" , "sClass" : "library_is_scheduled"} , + ///* Is Playlist */ { "sTitle" : $.i18n._("Playlist / Block") , "mDataProp" : "is_playlist" , "bSearchable" : false , "sWidth" : "110px" , "sClass" : "library_is_playlist"} , /* Title */ { "sTitle" : $.i18n._("Title") , "mDataProp" : "track_title" , "sClass" : "library_title" , "sWidth" : "170px" } , /* Creator */ { "sTitle" : $.i18n._("Creator") , "mDataProp" : "artist_name" , "sClass" : "library_creator" , "sWidth" : "160px" } , /* Album */ { "sTitle" : $.i18n._("Album") , "mDataProp" : "album_title" , "sClass" : "library_album" , "sWidth" : "150px" } , @@ -1203,6 +1203,8 @@ $(document).ready(function() { oTable.fnStandingRedraw(); } }); + + AIRTIME.playlist.closeTab(); }); $('#editmdcancel').live("click", function() { diff --git a/airtime_mvc/public/js/airtime/library/_spl.js b/airtime_mvc/public/js/airtime/library/_spl.js index f5885ce30..72e335cd3 100644 --- a/airtime_mvc/public/js/airtime/library/_spl.js +++ b/airtime_mvc/public/js/airtime/library/_spl.js @@ -16,7 +16,7 @@ var AIRTIME = (function(AIRTIME){ widgetHeight, resizeTimeout, width, - $plCount = 0, + $tabCount = 0, $openTabs = {}; function isTimeValid(time) { @@ -432,29 +432,63 @@ var AIRTIME = (function(AIRTIME){ $pl.find("#obj_lastMod").val(modified); } - function openPlaylist(json) { - $plCount++; + /* + * Should all be moved to builder.js eventually + */ + function openFileMdEditor(json) { + $tabCount++; var tabId = $openTabs[json.id]; if ($openTabs[json.id] !== undefined) { AIRTIME.showbuilder.switchTab($(".pl-tab-content-" + tabId), $("#pl-tab-" + tabId)); return; } - var wrapper = "
", - t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $plCount), + var wrapper = "
", + t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $tabCount), pane = $(".editor_pane_wrapper:last"), - name = pane.append(json.html).find("#playlist_name_display").text(), - tab = "", + name = pane.append(json.dialog).find("#track_title").val() + $.i18n._(" - Metadata Editor"), + tab = "", tabs = $(".nav.nav-tabs"); if (json.id) { - $openTabs[json.id] = $plCount; + $openTabs[json.id] = $tabCount; } - $(".nav.nav-tabs li").removeClass("active"); tabs.append(tab); - var newTab = $("#pl-tab-" + $plCount); + var newTab = $("#pl-tab-" + $tabCount); + + newTab.on("click", function() { + AIRTIME.showbuilder.switchTab(t, newTab); + }); + pane.find("#editmdcancel").on("click", function() { + closeTab(); + }); + AIRTIME.showbuilder.switchTab(t, newTab); + } + + function openPlaylist(json) { + $tabCount++; + var tabId = $openTabs[json.id]; + if ($openTabs[json.id] !== undefined) { + AIRTIME.showbuilder.switchTab($(".pl-tab-content-" + tabId), $("#pl-tab-" + tabId)); + return; + } + + var wrapper = "
", + t = $("#show_builder").append(wrapper).find(".pl-tab-content-" + $tabCount), + pane = $(".editor_pane_wrapper:last"), + name = pane.append(json.html).find("#playlist_name_display").text(), + tab = "", + tabs = $(".nav.nav-tabs"); + + if (json.id) { + $openTabs[json.id] = $tabCount; + } + + $(".nav.nav-tabs li").removeClass("active"); + tabs.append(tab); + var newTab = $("#pl-tab-" + $tabCount); newTab.on("click", function() { AIRTIME.showbuilder.switchTab(t, newTab); @@ -464,10 +498,6 @@ var AIRTIME = (function(AIRTIME){ AIRTIME.showbuilder.switchTab(t, newTab); AIRTIME.playlist.init(); - //setUpPlaylist(); - //setCueEvents(); - //setFadeEvents(); - // functions in smart_blockbuilder.js setupUI(); appendAddButton(); @@ -492,6 +522,10 @@ var AIRTIME = (function(AIRTIME){ AIRTIME.showbuilder.switchTab($("#show_builder .outer-datatable-wrapper"), $("#timeline-tab")); } + mod.closeTab = function() { + closeTab(); + }; + //Purpose of this function is to iterate over all playlist elements //and verify whether they can be previewed by the browser or not. If not //then the playlist element is greyed out @@ -1073,6 +1107,10 @@ var AIRTIME = (function(AIRTIME){ }); }; + mod.fileMdEdit = function(json) { + openFileMdEditor(json); + }; + mod.fnEdit = function(id, type, url) { //openPlaylistPanel(); stopAudioPreview(); diff --git a/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js b/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js index f2196f811..e9bdb704c 100644 --- a/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js +++ b/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js @@ -307,7 +307,8 @@ var AIRTIME = (function(AIRTIME) { if (data.ftype === "audioclip") { $.get(baseUrl + "library/edit-file-md/id/" + data.id, {format: "json"}, function(json){ - buildEditMetadataDialog(json); + AIRTIME.playlist.fileMdEdit(json); + //buildEditMetadataDialog(json); }); } else if (data.ftype === "playlist" || data.ftype === "block") { AIRTIME.playlist.fnEdit(data.id, data.ftype, baseUrl+'new-playlist/edit');