SAAS-948 - CSS overhaul for new show builder page

airtime_mvc/application/views/scripts/show-builder/index.phtml

@@ -1,31 +1,9 @@
-<style>
+<!--<form action="/rest/media" method="post" id="upload_form" class="dropzone dz-clickable" --><?php //if ($this->quotaLimitReached) { ?><!-- class="hidden" --><?php //} ?>
-    html, body {
+<!--    --><?php //echo $this->csrf ?>
-        background: #242424;
+<!--    <div class="dz-message">-->
-    }
+<!--        --><?php //echo _("Drop files here or click to upload") ?>
-
+<!--    </div>-->
-    div.ColVis_collectionBackground {
+<!--</form>-->
-        background-color: transparent;
-    }
-
-    .wrapper {
-        position: absolute;
-        background: #242424;
-        left: 0;
-        right: 0;
-        padding: 0 12em;
-        height: calc(100% - 141px); /* Height of top panel + border */
-    }
-
-    .usability_hint {
-        margin-top: 1em;
-    }
-</style>
-<form action="/rest/media" method="post" id="upload_form" class="dropzone dz-clickable" <?php if ($this->quotaLimitReached) { ?> class="hidden" <?php } ?>>
-    <?php echo $this->csrf ?>
-    <div class="dz-message">
-        <?php echo _("Drop files here or click to upload") ?>
-    </div>
-</form>
 
 <div id="media_type_nav">
     <div class="btn-group">
@@ -50,18 +28,26 @@
     <div class="media_type_selector" selection_id="4"><?php echo _("Webstreams") ?></div>
 </div>
 
-<div id="library_content" class="lib-content tabs lib-test">
+<div id="library_content" class="lib-content tabs">
-    <?php echo $this->render('widgets/lib-table.phtml') ?>
+    <fieldset class="toggle closed" id="filter_options">
+        <legend style="cursor: pointer;">
+            <span class="ui-icon ui-icon-triangle-2-n-s"></span>
+            <?php echo _("Advanced Search Options") ?>
+        </legend>
+        <div id="advanced_search" class="advanced_search form-horizontal"></div>
+    </fieldset>
+    <table id="library_display" cellpadding="0" cellspacing="0" class="datatable">
+    </table>
 </div>
 
-<div id="show_builder" class="sb-content sb-test">
+<div id="show_builder" class="sb-content">
     <div class="sb-timerange">
         <?php echo $this->sb_form; ?>
     </div>
     <table id="show_builder_table" cellpadding="0" cellspacing="0" class="datatable"></table>
 </div>
 
-<div id="side_playlist" class="pl-content media-builder-test">
+<div id="side_playlist" class="pl-content">
 </div>
 
 <?php echo $this->dialog ?>

airtime_mvc/application/views/scripts/webstream/webstream.phtml

@@ -21,7 +21,7 @@
 <?php endif; ?>
 </div>
 
-<?php if (isset($this->obj)) : ?>\
+<?php if (isset($this->obj)) : ?>
     <input id="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"/>
     <input id="obj_lastMod" type="hidden" value="<?php echo "1";//$this->obj->getLastModified('U'); ?>"/>
     <input id="obj_type" type="hidden" value="webstream"/>

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 {
+    #library_content, #show_builder, #side_playlist, #media_type_nav {
-        height: auto !important;
+        /*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 {
+#library_content .dataTables_filter input[type="text"], #library_content .dataTables_filter select {
-    margin-top: .5em;
+    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 {
+#library_content .fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-bl.ui-corner-br.ui-helper-clearfix {
-    margin: 2em 2em 2em 0;
+    position: absolute;
-    overflow: hidden !important;
+    right: 0;
+    left: 0;
+    bottom: 0;
 }
 
-.lib-test .dataTables_scrolling {
+#library_display_wrapper {
-    /* Subtract Advanced search (32) + header (38) + footer (38) */
+    flex: 1 100%;
-    height: calc(100% - 108px);
 }
 
 #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 {
+#library_content, #show_builder, #side_playlist, #media_type_nav {
-    height: 70%;
+    position: relative;
-    /* 1em for the middle margin, 6 for half the width of the left pane */
+    height: 95%;
-    width: calc(50% - 8em);
+
+    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 {
+#library_content .dataTables_scrolling {
-    height: 100%;
+    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 {
+#show_builder {
-    margin-top: 2em;
+    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 editors */
-
-.media-builder-test {
-    color: #efefef;
-    margin-top: 2em; /* Standardize this somehow */
-}
 
 #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;
+    flex: 1 auto;
-    margin: 5.2em 0 0 0;
+    margin-right: 10px;
+}
 
-    width: 12em;
+#media_type_nav div {
-
+    padding: 4px;
-    background: none;
-    padding: 0 2em 0 0;
 }
 
 #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;
 }

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));

airtime_mvc/public/css/jquery.contextMenu.css

@@ -14,7 +14,7 @@
 
 .context-menu-list {
     margin:0;
-    padding: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,7 +37,7 @@
             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 {
@@ -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); }

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;

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",
+        //$builder.find('.dataTables_scrolling').css("max-height",
-                widgetHeight - 95);
+        //        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(
+                        //$builder.find('.dataTables_scrolling').css(
-                                "max-height", widgetHeight - 150);
+                        //        "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(
+                        //$builder.find('.dataTables_scrolling').css(
-                                "max-height", widgetHeight - 110);
+                        //        "max-height", widgetHeight - 110);
                     }
                 });