SAAS-948 - CSS overhaul for new show builder page

This commit is contained in:
Duncan Sommerville 2015-07-29 20:28:54 -04:00
parent 661a87dfbc
commit 8f5f0eb5fe
7 changed files with 426 additions and 115 deletions

View File

@ -1,31 +1,9 @@
<style>
html, body {
background: #242424;
}
div.ColVis_collectionBackground {
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>
<!--<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">
<?php echo $this->render('widgets/lib-table.phtml') ?>
<div id="library_content" class="lib-content tabs">
<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 ?>

View File

@ -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"/>

View File

@ -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;
}

View File

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

View File

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

View File

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

View File

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