diff --git a/airtime_mvc/application/views/scripts/show-builder/index.phtml b/airtime_mvc/application/views/scripts/show-builder/index.phtml index 1060ad562..8142bd68c 100644 --- a/airtime_mvc/application/views/scripts/show-builder/index.phtml +++ b/airtime_mvc/application/views/scripts/show-builder/index.phtml @@ -1,31 +1,9 @@ - -
quotaLimitReached) { ?> class="hidden" > - csrf ?> -
- -
-
+quotaLimitReached) { ?> +csrf ?> + + + +
@@ -50,18 +28,26 @@
-
- render('widgets/lib-table.phtml') ?> +
+
+ + + + + +
+ +
-
+
sb_form; ?>
-
+
dialog ?> diff --git a/airtime_mvc/application/views/scripts/webstream/webstream.phtml b/airtime_mvc/application/views/scripts/webstream/webstream.phtml index 698c955a5..45790bb3b 100644 --- a/airtime_mvc/application/views/scripts/webstream/webstream.phtml +++ b/airtime_mvc/application/views/scripts/webstream/webstream.phtml @@ -21,7 +21,7 @@
-obj)) : ?>\ +obj)) : ?> obj->getLastModified('U'); ?>"/> diff --git a/airtime_mvc/public/css/_showbuilder.css b/airtime_mvc/public/css/_showbuilder.css index 4e5c883f5..9d2daa730 100644 --- a/airtime_mvc/public/css/_showbuilder.css +++ b/airtime_mvc/public/css/_showbuilder.css @@ -1,11 +1,69 @@ +html, body { + /*background: #242424;*/ + background: #111; + overflow: hidden; +} + +div.ColVis_collectionBackground { + background-color: transparent; +} + +.wrapper { + position: absolute; + /* Height of the top panel */ + top: 141px; + bottom: 0; + /*background: #242424;*/ + background: #111; + left: 0; + right: 0; + padding: 10px; + overflow-y: auto; + overflow-x: hidden; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +/* Usability hint */ + +.usability_hint { + flex: 0 100%; + width: 100%; +} + +/* Scroll bars */ + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + background-color: #ff5d1a; + border-radius: 10px; + -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.75); +} + /* Show Builder*/ @media screen and (max-width: 1475px) { - .lib-test, .sb-test, .media-builder-test, #media_type_nav { - height: auto !important; + #library_content, #show_builder, #side_playlist, #media_type_nav { + /*height: auto !important;*/ + max-height: 50% !important; width: 100% !important; } - .media-builder-test { + #side_playlist { margin-top: 0 !important; } #media_type_nav div { @@ -19,18 +77,20 @@ text-align: center; } #media_type_nav .media_type_selector { - margin-top: .25em; + margin-top: 3px; } } @media screen and (max-width: 780px) { - .lib-test .dataTables_filter input[type="text"] { + #library_content .dataTables_filter input[type="text"] { position: relative; - width: calc(100% - 1em) !important; + width: calc(100% - 10px) !important; margin: 0 .5em .5em 0; } .wrapper { - padding: 1em !important; + height: calc(100% - 166px) !important; /* Correct for margins */ + padding: 0 15px 15px !important; + margin-top: 10px; /* This is only necessary if we aren't using a responsive menu! */ } } @@ -45,76 +105,134 @@ color: #efefef; } -.lib-test .dataTables_filter { +/* Library */ + +#library_content { + margin-right: 10px; + overflow: hidden !important; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +#library_content .dataTables_filter { margin: 0; } -.lib-test .dataTables_filter input[type="text"], .lib-test .dataTables_filter select { - margin-top: .5em; +#library_content .dataTables_filter input[type="text"], #library_content .dataTables_filter select { + margin-top: 6px; width: 20%; float: right; height: 26px; } -.lib-test label { +#library_content label { padding: 0; } -.lib-test .dataTables_length { +#library_content .dataTables_length { padding: 5px; } -.lib-test .dataTables_length label { +#library_content .dataTables_length label { color: #555555; } -.lib-test legend, .lib-test span, .lib-test label { +#library_content legend, #library_content span, #library_content label { font-weight: normal; color: #efefef; } -.lib-test { - margin: 2em 2em 2em 0; - overflow: hidden !important; +#library_content .fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-bl.ui-corner-br.ui-helper-clearfix { + position: absolute; + right: 0; + left: 0; + bottom: 0; } -.lib-test .dataTables_scrolling { - /* Subtract Advanced search (32) + header (38) + footer (38) */ - height: calc(100% - 108px); +#library_display_wrapper { + flex: 1 100%; } #library_display_wrapper, #show_builder_table_wrapper { - background-color: #474747; + position: absolute; + top: 36px; + bottom: 4px; + right: 4px; + left: 4px; + /*background-color: #474747;*/ } -.lib-test, .sb-test, .media-builder-test { - height: 70%; - /* 1em for the middle margin, 6 for half the width of the left pane */ - width: calc(50% - 8em); +#library_content, #show_builder, #side_playlist, #media_type_nav { + position: relative; + height: 95%; + + border: 1px solid #202020; + border-top: 1px solid #272727; + border-left: 1px solid #272727; + + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.65); + -moz-box-shadow: inset 0 0 6px rgba(0,0,0,.65); + box-shadow: inset 0 0 6px rgba(0,0,0,.65); + + background-color: #242424; +} + +#library_content, #show_builder, #side_playlist { + /* Account for the left pane */ + flex: 5 auto; min-width: 470px; } -#library_display_wrapper, #show_builder_table_wrapper { - height: 100%; +#library_content .dataTables_scrolling { + position: absolute; + bottom: 38px; + top: 38px; + left: 0; + right: 0; +} + +#filter_options{ + position: absolute; + top: 4px; + left: 4px; + right: 4px; + + flex: 1 100%; } /* Timeline */ -.sb-test { - margin-top: 2em; +#show_builder { + float: right; +} + +.sb-content .dataTables_wrapper { + margin: 0; +} + +.sb-padded { + padding: 0; } #sb_submit { text-decoration: none; - padding: .35em; + padding: 4px; color: #efefef; float: none; } .sb-options-form { - width: 100%; + position: absolute; + top: 4px; + left: 4px; + right: 4px; float: left; - padding-bottom: 5px; } .sb-options-form label { @@ -122,23 +240,27 @@ line-height: 26px; } +.dataTables_scrolling.sb-padded { + position: absolute; + top: 38px; + bottom: 4px; + right: 0; + left: 0; +} + #sb_show_filter { float: right; } #show_builder_table_wrapper { - clear: both; + bottom: 0; } -/* Media builder */ - -.media-builder-test { - color: #efefef; - margin-top: 2em; /* Standardize this somehow */ -} +/* Media editors */ #side_playlist { - width: calc(50% - 8em); + float: right; + color: #efefef; font-size: inherit; overflow: hidden; } @@ -146,13 +268,12 @@ /* Media type selector */ #media_type_nav { - float: left; - margin: 5.2em 0 0 0; + flex: 1 auto; + margin-right: 10px; +} - width: 12em; - - background: none; - padding: 0 2em 0 0; +#media_type_nav div { + padding: 4px; } #new_media_selector { @@ -166,7 +287,7 @@ font-size: 16px; font-weight: 400; width: 100%; - margin: 1em 1em 0 0; + margin: 10px 10px 0 0; -webkit-transition: color 0.2s linear; -moz-transition: color 0.2s linear; @@ -190,6 +311,21 @@ transition: color 0.2s linear; } +/* DataTables */ + +.ColVis_collection.TableTools_collection.ui-buttonset.ui-buttonset-multi { + max-height: 50%; + overflow: auto; +} + +.helper.ui-draggable-dragging { + z-index: 9999; +} + +.datatable tr, .datatable td { + border: none !important; +} + /* Uploads/Dropzone */ #upload_form { @@ -203,7 +339,7 @@ font-family: Roboto, "Open Sans", sans-serif; font-size: 20px; font-weight: 300; - line-height: 1.4rem; + line-height: 14px; - margin-top: 1em; + margin-top: 10px; } diff --git a/airtime_mvc/public/css/bootstrap.css b/airtime_mvc/public/css/bootstrap.css index bfc1753fd..12a4cdbca 100644 --- a/airtime_mvc/public/css/bootstrap.css +++ b/airtime_mvc/public/css/bootstrap.css @@ -2104,7 +2104,6 @@ input[type="submit"].btn.btn-mini { text-decoration: none; color: #ffffff; background-color: #858585; - background-color: #858585; background-image: -moz-linear-gradient(top, #858585, #686868); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#858585), to(#686868)); background-image: -webkit-linear-gradient(top, #858585, #686868); @@ -2118,7 +2117,6 @@ input[type="submit"].btn.btn-mini { color: #ffffff; text-decoration: none; outline: 0; - background-color: #0088cc; background-color: #0081c2; background-image: -moz-linear-gradient(top, #0088cc, #0077b3); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); diff --git a/airtime_mvc/public/css/jquery.contextMenu.css b/airtime_mvc/public/css/jquery.contextMenu.css index 61634b34d..355f35248 100644 --- a/airtime_mvc/public/css/jquery.contextMenu.css +++ b/airtime_mvc/public/css/jquery.contextMenu.css @@ -13,8 +13,8 @@ */ .context-menu-list { - margin:0; - padding:0; + margin:0; + padding:5px 0; min-width: 120px; max-width: 250px; @@ -23,6 +23,11 @@ list-style-type: none; border: 1px solid #333333; + + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + background: #f0f0f0; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); @@ -32,14 +37,14 @@ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); font-family: Arial, Helvetica, sans-serif; - font-size: 11px; + font-size: 14px; } .context-menu-item { padding: 2px 5px; background-color: #f0f0f0; position: relative; - min-height: 18px; + min-height: 18px; -moz-user-select: -moz-none; display: block; width: 100%; @@ -49,7 +54,7 @@ } .context-menu-item.icon { - padding: 2px 2px 2px 28px; + padding: 2px 2px 2px 28px; } .context-menu-separator { @@ -60,6 +65,15 @@ .context-menu-item > label { -moz-user-select: text; + padding: 3px 20px; + line-height: 20px; + color: #333333; +} + +.context-menu-item > span { + padding: 3px 20px; + line-height: 20px; + color: #333333; } .context-menu-item.hover { @@ -92,7 +106,7 @@ http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement .context-menu-item.icon:before {} */ -.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; } +.context-menu-item.icon { min-height: 26px; background-repeat: no-repeat; background-position: 4px 2px; } .context-menu-item.icon-edit { background-image: url(images/icon_edit_cm.png); } .context-menu-item.icon-cut { background-image: url(images/icon_cut_cm.png); } .context-menu-item.icon-copy { background-image: url(images/icon_copy_cm.png); } diff --git a/airtime_mvc/public/js/airtime/library/_library.js b/airtime_mvc/public/js/airtime/library/_library.js index 016699084..b2b4284f0 100644 --- a/airtime_mvc/public/js/airtime/library/_library.js +++ b/airtime_mvc/public/js/airtime/library/_library.js @@ -489,13 +489,6 @@ var AIRTIME = (function(AIRTIME) { } else { $el.hide(); } - - //resize to prevent double scroll bars. - var $fs = $el.parents("fieldset"), - tableHeight = getTableHeight(), - searchHeight = $fs.height(); - - $libContent.find(".dataTables_scrolling").css("max-height", tableHeight - searchHeight); } oTable = $libTable.dataTable( { @@ -733,10 +726,6 @@ var AIRTIME = (function(AIRTIME) { $(".dataTables_filter input").val("").keyup(); $simpleSearch.addClass("sp-invisible"); - - //resize the library table to avoid a double scroll bar. CC-4504 - height = tableHeight - searchHeight; - $libContent.find(".dataTables_scrolling").css("max-height", height); } else { // clear the advanced search fields @@ -758,15 +747,9 @@ var AIRTIME = (function(AIRTIME) { $simpleSearch.removeClass("sp-invisible"); $fs.addClass("closed"); - - //resize the library table to avoid a double scroll bar. CC-4504 - $libContent.find(".dataTables_scrolling").css("max-height", tableHeight); } }); - var tableHeight = getTableHeight(); - $libContent.find(".dataTables_scrolling").css("max-height", tableHeight); - AIRTIME.library.setupLibraryToolbar(oTable); $libTable.find("tbody").on("dblclick", "tr", function(ev) { @@ -821,6 +804,200 @@ var AIRTIME = (function(AIRTIME) { mod.selectItem($(this)); } }); + // begin context menu initialization. + $.contextMenu({ + selector: '#library_display tr', + trigger: "right", + + build: function($el, e) { + var data, screen, items, callback, $tr; + + $tr = $el; + data = $tr.data("aData"); + screen = $tr.data("screen"); + + function processMenuItems(oItems) { + + // define an add to playlist callback. + if (oItems.pl_add !== undefined) { + var aItems = []; + + callback = function() { + aItems.push(new Array(data.id, data.ftype)); + AIRTIME.playlist.fnAddItems(aItems, undefined, 'after'); + }; + + oItems.pl_add.callback = callback; + } + + // define an edit callback. + if (oItems.edit !== undefined) { + + if (data.ftype === "audioclip") { + callback = function() { + $.get(oItems.edit.url, {format: "json"}, function(json){ + buildEditMetadataDialog(json); + }); + }; + } else if (data.ftype === "playlist" || data.ftype === "block") { + callback = function() { + var url = baseUrl+'Playlist/edit'; + AIRTIME.playlist.fnEdit(data.id, data.ftype, url); + AIRTIME.playlist.validatePlaylistElements(); + }; + } else if (data.ftype === "stream") { + callback = function() { + var url = baseUrl+'Webstream/edit'; + AIRTIME.playlist.fnEdit(data.id, data.ftype, url); + } + } else { + throw new Exception($.i18n._("Unknown type: ") + data.ftype); + } + oItems.edit.callback = callback; + } + + // define a play callback. + if (oItems.play !== undefined) { + + if (oItems.play.mime !== undefined) { + if (!isAudioSupported(oItems.play.mime)) { + oItems.play.disabled = true; + } + } + + callback = function() { + if (data.ftype === 'playlist' && data.length !== '0.0'){ + playlistIndex = $(this).parent().attr('id').substring(3); // remove + // the + // pl_ + open_playlist_preview(playlistIndex, 0); + } else if (data.ftype === 'audioclip' || data.ftype === 'stream') { + open_audio_preview(data.ftype, data.id); + } else if (data.ftype === 'block') { + blockIndex = $(this).parent().attr('id').substring(3); // remove + // the + // pl_ + open_block_preview(blockIndex, 0); + } + }; + oItems.play.callback = callback; + } + + // define a delete callback. + if (oItems.del !== undefined) { + + // delete through the playlist controller, will reset + // playlist screen if this is the currently edited + // playlist. + if ((data.ftype === "playlist" || data.ftype === "block") && screen === "playlist") { + callback = function() { + aMedia = []; + aMedia.push({"id": data.id, "type": data.ftype}); + if (confirm($.i18n._('Are you sure you want to delete the selected item?'))) { + AIRTIME.library.fnDeleteItems(aMedia); + } + }; + } + else { + callback = function() { + var media = []; + + if (confirm($.i18n._('Are you sure you want to delete the selected item?'))) { + + media.push({"id": data.id, "type": data.ftype}); + $.post(oItems.del.url, {format: "json", media: media }, function(json){ + var oTable; + + if (json.message) { + alert(json.message); + } + + oTable = $("#library_display").dataTable(); + oTable.fnDeleteRow( $tr[0] ); + }); + } + }; + } + + oItems.del.callback = callback; + } + + // define a download callback. + if (oItems.download !== undefined) { + + callback = function() { + document.location.href = oItems.download.url; + }; + oItems.download.callback = callback; + } + // add callbacks for Soundcloud menu items. + if (oItems.soundcloud !== undefined) { + var soundcloud = oItems.soundcloud.items; + + // define an upload to soundcloud callback. + if (soundcloud.upload !== undefined) { + + callback = function() { + alert($.i18n._("Your track is being uploaded and will " + + "appear on SoundCloud in a couple of minutes")); + $.post(soundcloud.upload.url, function(){}); + }; + soundcloud.upload.callback = callback; + } + + // define an upload to soundcloud callback. + if (soundcloud.remove !== undefined) { + + callback = function() { + alert($.i18n._("Your track is being deleted from SoundCloud")); + $.post(soundcloud.remove.url, function(){}); + }; + soundcloud.remove.callback = callback; + } + + // define a view on soundcloud callback + if (soundcloud.view !== undefined) { + + callback = function() { + window.open(soundcloud.view.url); + }; + soundcloud.view.callback = callback; + } + } + // add callbacks for duplicate menu items. + if (oItems.duplicate !== undefined) { + var url = oItems.duplicate.url; + callback = function() { + $.post(url, {format: "json", id: data.id }, function(json){ + oTable.fnStandingRedraw(); + }); + }; + oItems.duplicate.callback = callback; + } + // remove 'Add to smart block' option if the current + // block is dynamic + if ($('input:radio[name=sp_type]:checked').val() === "1") { + delete oItems.pl_add; + } + items = oItems; + } + + request = $.ajax({ + url: baseUrl+"library/context-menu", + type: "GET", + data: {id : data.id, type: data.ftype, format: "json", "screen": screen}, + dataType: "json", + async: false, + success: function(json){ + processMenuItems(json.items); + } + }); + + return { + items: items + }; + } + }); }; mod.libraryInit = libraryInit; diff --git a/airtime_mvc/public/js/airtime/showbuilder/_main_builder.js b/airtime_mvc/public/js/airtime/showbuilder/_main_builder.js index c81dc1445..93ebbc4a0 100644 --- a/airtime_mvc/public/js/airtime/showbuilder/_main_builder.js +++ b/airtime_mvc/public/js/airtime/showbuilder/_main_builder.js @@ -60,13 +60,13 @@ AIRTIME = (function(AIRTIME) { //set the heights of the main widgets. $builder//.height(widgetHeight) .find(".dataTables_scrolling") - .css("max-height", builderTableHeight) + //.css("max-height", builderTableHeight) .end(); //.width(screenWidth); $lib//.height(widgetHeight) .find(".dataTables_scrolling") - .css("max-height", libTableHeight) + //.css("max-height", libTableHeight) .end(); if ($lib.filter(':visible').length > 0) { @@ -201,8 +201,8 @@ AIRTIME = (function(AIRTIME) { setWidgetSize(); $libWrapper = $lib.find("#library_display_wrapper"); - $builder.find('.dataTables_scrolling').css("max-height", - widgetHeight - 95); + //$builder.find('.dataTables_scrolling').css("max-height", + // widgetHeight - 95); $builder.on("click", "#sb_submit", showSearchSubmit); @@ -265,8 +265,8 @@ AIRTIME = (function(AIRTIME) { if ($fs.hasClass("closed")) { $fs.removeClass("closed"); - $builder.find('.dataTables_scrolling').css( - "max-height", widgetHeight - 150); + //$builder.find('.dataTables_scrolling').css( + // "max-height", widgetHeight - 150); } else { $fs.addClass("closed"); @@ -274,8 +274,8 @@ AIRTIME = (function(AIRTIME) { $fs.find('select').val(0); $fs.find('input[type="checkbox"]').attr("checked", false); - $builder.find('.dataTables_scrolling').css( - "max-height", widgetHeight - 110); + //$builder.find('.dataTables_scrolling').css( + // "max-height", widgetHeight - 110); } });