CC-6085, CC-6101 - uploader styling
This commit is contained in:
Duncan Sommerville
parent
0ebe7a85e1
commit
acc4ef0054
|
|
@ -19,16 +19,15 @@
|
|||
</form>
|
||||
-->
|
||||
<div id="upload_form" class="lib-content ui-widget ui-widget-content block-shadow padded wide-panel <?php if ($this->quotaLimitReached) { ?> hidden <?php } ?>">
|
||||
<H2>Upload Audio Files</H2>
|
||||
<?php
|
||||
$partitions = Application_Model_Systemstatus::GetDiskInfo();
|
||||
$status = new StdClass;
|
||||
$partitions = $partitions;
|
||||
$disk = $partitions[0];
|
||||
$used = $disk->totalSpace-$disk->totalFreeSpace;
|
||||
$total = $disk->totalSpace;
|
||||
?>
|
||||
<div style="height:100%">
|
||||
<div id="upload_wrapper">
|
||||
<H2>Upload Audio Files</H2>
|
||||
<form action="/rest/media" method="post" id="add-media-dropzone" class="dropzone dz-clickable">
|
||||
<?php echo $this->form->getElement('csrf') ?>
|
||||
<div class="dz-message">
|
||||
|
|
@ -44,15 +43,14 @@
|
|||
<a id="uploadfiles" href="javascript:;">[Upload files]</a>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
<div id="uploads_disk_usage">
|
||||
<div style="padding-bottom: 2px;">Storage</div>
|
||||
<div class="disk_usage_progress_bar" style="width:98%"></div>
|
||||
<div class="disk_usage_percent_in_use" style="width:98%"><?php echo sprintf("%01.1f%% ", $used/$total*100) . _("in use") ?></div>
|
||||
<div class="disk_usage_progress_bar"></div>
|
||||
<div class="disk_usage_percent_in_use"><?php echo sprintf("%01.1f%% ", $used/$total*100) . _("in use") ?></div>
|
||||
<div class="disk_usage_used" style="width:<?php echo sprintf("%01.1f%%", $used/$total*100) ?>;"></div>
|
||||
|
||||
<div style="margin-top: 17px; font-size: 12px;"><?php echo sprintf("%01.1fGB of %01.1fGB", $used/pow(2, 30), $total/pow(2, 30)); ?></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -61,19 +59,17 @@
|
|||
</div>
|
||||
|
||||
<div id="recent_uploads_wrapper" class="lib-content ui-widget ui-widget-content block-shadow wide-panel">
|
||||
|
||||
<div id="recent_uploads" class="outer-datatable-wrapper padded">
|
||||
|
||||
<div id="recent_uploads_filter">
|
||||
<form>
|
||||
<input type="radio" name="upload_status" id="upload_status_all" checked></input><label for="upload_status_all"><?php echo _("All")?></label>
|
||||
<input type="radio" name="upload_status" id="upload_status_failed"></input><label for="upload_status_failed"><?php echo _("Failed")?></label>
|
||||
<input type="radio" name="upload_status" id="upload_status_pending"></input><label for="upload_status_pending"><?php echo _("Pending")?></label>
|
||||
<input type="radio" name="upload_status" id="upload_status_all" checked /><label for="upload_status_all"><?php echo _("All")?></label>
|
||||
<input type="radio" name="upload_status" id="upload_status_failed" /><label for="upload_status_failed"><?php echo _("Failed")?></label>
|
||||
<input type="radio" name="upload_status" id="upload_status_pending" /><label for="upload_status_pending"><?php echo _("Pending")?></label>
|
||||
</form>
|
||||
</div>
|
||||
<H2><?php echo _("Recent Uploads")?></H2>
|
||||
<div class="dataTables_scrolling padded">
|
||||
<table id="recent_uploads_table" class="datatable lib-content ui-widget ui-widget-content block-shadow alpha-block "
|
||||
<div class="dataTables_scrolling">
|
||||
<table id="recent_uploads_table" class="datatable lib-content ui-widget ui-widget-content block-shadow"
|
||||
cellpadding="0" cellspacing="0"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
@CHARSET "UTF-8";
|
||||
|
||||
#recent_uploads > .dataTables_scrolling
|
||||
{
|
||||
top: 41px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
#recent_uploads_wrapper
|
||||
{
|
||||
position: relative;
|
||||
|
|
@ -10,7 +16,8 @@
|
|||
#recent_uploads_table
|
||||
{
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border: 0;
|
||||
/*table-layout: fixed;*/
|
||||
}
|
||||
|
||||
#recent_uploads_table_wrapper
|
||||
|
|
@ -18,6 +25,24 @@
|
|||
position: absolute;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
border: 1px solid #5b5b5b;
|
||||
}
|
||||
|
||||
#recent_uploads_table_wrapper > .fg-toolbar
|
||||
{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
#recent_uploads_table_wrapper > .fg-toolbar:after
|
||||
{
|
||||
content: none;
|
||||
}
|
||||
|
||||
table#recent_uploads_table td
|
||||
|
|
@ -28,7 +53,7 @@ table#recent_uploads_table td
|
|||
#recent_uploads_filter
|
||||
{
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
margin-top: 5px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
#recent_uploads_table_length
|
||||
|
|
@ -262,16 +287,29 @@ table#recent_uploads_table td
|
|||
}
|
||||
}
|
||||
|
||||
#upload_wrapper {
|
||||
height: 100%;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: column;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.dropzone, .dropzone * {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
min-height: 30%;
|
||||
flex: 1 100%;
|
||||
/*min-height: 30%;*/
|
||||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
background: #333;
|
||||
padding: 20px 20px;
|
||||
max-height: 75%;
|
||||
/*max-height: 75%;*/
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -288,7 +326,8 @@ table#recent_uploads_table td
|
|||
}
|
||||
|
||||
.dropzone.dz-started .dz-message {
|
||||
display: none
|
||||
margin-bottom: 16px;
|
||||
/*display: none*/
|
||||
}
|
||||
|
||||
.dropzone.dz-drag-hover {
|
||||
|
|
@ -320,23 +359,25 @@ table#recent_uploads_table td
|
|||
|
||||
.dropzone .dz-preview {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/* display: inline-block; */
|
||||
vertical-align: top;
|
||||
margin: 16px;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview:hover {
|
||||
z-index: 1000
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview:hover .dz-details {
|
||||
opacity: 1
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview.dz-file-preview .dz-image {
|
||||
border-radius: 3px;
|
||||
background: #444;
|
||||
/*background: linear-gradient(to bottom, #eee, #ddd)*/
|
||||
/* background: linear-gradient(to bottom, #eee, #ddd); */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview.dz-file-preview .dz-details {
|
||||
|
|
@ -356,11 +397,14 @@ table#recent_uploads_table td
|
|||
}
|
||||
|
||||
.dropzone .dz-preview .dz-remove {
|
||||
font-size: 14px;
|
||||
/*font-size: 14px;*/
|
||||
text-align: center;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
border: none
|
||||
border: none;
|
||||
color: #efefef;
|
||||
|
||||
float: right;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-remove:hover {
|
||||
|
|
@ -380,7 +424,7 @@ table#recent_uploads_table td
|
|||
font-size: 13px;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 1em 1em;
|
||||
padding: 1em 1em 0;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
/*line-height: 150%*/
|
||||
|
|
@ -397,8 +441,8 @@ table#recent_uploads_table td
|
|||
}
|
||||
|
||||
.dropzone .dz-preview .dz-details .dz-filename:hover span {
|
||||
border: 1px solid rgba(200, 200, 200, 0.8);
|
||||
background-color: rgba(255, 255, 255, 0.8)
|
||||
/*border: 1px solid rgba(200, 200, 200, 0.8);*/
|
||||
/*background-color: rgba(255, 255, 255, 0.8)*/
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
|
||||
|
|
@ -407,11 +451,12 @@ table#recent_uploads_table td
|
|||
}
|
||||
|
||||
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
|
||||
border: 1px solid transparent
|
||||
/*border: 1px solid transparent*/
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
color: #efefef;
|
||||
/*background-color: rgba(255, 255, 255, 0.4);*/
|
||||
padding: 0 0.4em;
|
||||
border-radius: 3px
|
||||
}
|
||||
|
|
@ -463,7 +508,7 @@ table#recent_uploads_table td
|
|||
z-index: 500;
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
top: 33px;
|
||||
left: 50%;
|
||||
margin-left: -27px;
|
||||
margin-top: -27px
|
||||
|
|
@ -471,8 +516,10 @@ table#recent_uploads_table td
|
|||
|
||||
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
|
||||
display: block;
|
||||
width: 54px;
|
||||
height: 54px
|
||||
/*width: 54px;*/
|
||||
/*height: 54px*/
|
||||
width: 27px;
|
||||
height: 27px
|
||||
}
|
||||
|
||||
.dropzone .dz-preview.dz-processing .dz-progress {
|
||||
|
|
@ -545,10 +592,9 @@ table#recent_uploads_table td
|
|||
.dropzone .dz-preview .dz-error-message {
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
display: block;
|
||||
position: relative;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
/* opacity: 0; */
|
||||
-webkit-transition: opacity 0.3s ease;
|
||||
-moz-transition: opacity 0.3s ease;
|
||||
-ms-transition: opacity 0.3s ease;
|
||||
|
|
@ -556,23 +602,29 @@ table#recent_uploads_table td
|
|||
transition: opacity 0.3s ease;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
top: 130px;
|
||||
left: -10px;
|
||||
width: 140px;
|
||||
/* top: 130px; */
|
||||
top: -27px;
|
||||
/*left: -10px;*/
|
||||
left: 33px;
|
||||
/* width: 140px; */
|
||||
background: #be2626;
|
||||
background: linear-gradient(to bottom, #be2626, #a92222);
|
||||
padding: 0.5em 1.2em;
|
||||
color: white
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dropzone .dz-preview .dz-error-message:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 64px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #be2626
|
||||
content: none;
|
||||
/*content: '';*/
|
||||
/*position: absolute;*/
|
||||
/*/!*top: -6px;*!/*/
|
||||
/*top: 10px;*/
|
||||
/*/!*left: 64px;*!/*/
|
||||
/*left: -8px;*/
|
||||
/*width: 0;*/
|
||||
/*height: 0;*/
|
||||
/*border-left: 6px solid transparent;*/
|
||||
/*border-right: 6px solid transparent;*/
|
||||
/*border-bottom: 6px solid #be2626;*/
|
||||
/*transform: rotate(-90deg);*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3746,13 +3746,8 @@ hr {
|
|||
}
|
||||
|
||||
#uploads_disk_usage {
|
||||
position:absolute;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
|
||||
bottom: 8px;
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
|
||||
border-radius: 1px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
|
@ -3760,7 +3755,7 @@ hr {
|
|||
background-color: #242424;
|
||||
border: 1px solid #5b5b5b;
|
||||
color: #ccc;
|
||||
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#disk_usage {
|
||||
|
|
@ -3778,22 +3773,26 @@ hr {
|
|||
}
|
||||
|
||||
.disk_usage_progress_bar {
|
||||
width:118px;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
/* width: 118px; */
|
||||
height: 13px;
|
||||
background: #444444;
|
||||
background: -moz-linear-gradient(top, #464646 0, #3e3e3e 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3e3e3e), color-stop(100%, #464646));
|
||||
margin: 0 auto;
|
||||
/* margin: 0 auto; */
|
||||
z-index: 1;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.disk_usage_percent_in_use {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
z-index: 3;
|
||||
position:absolute;
|
||||
width: 120px;
|
||||
/* width: 120px; */
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
$(document).ready(function () {
|
||||
|
||||
var uploader;
|
||||
var uploadProgress;
|
||||
var self = this;
|
||||
self.uploadFilter = "all";
|
||||
|
||||
|
|
@ -14,21 +14,32 @@ $(document).ready(function() {
|
|||
Object.freeze(self.IMPORT_STATUS_CODES);
|
||||
}
|
||||
|
||||
console.log(acceptedMimeTypes.join());
|
||||
Dropzone.options.addMediaDropzone = {
|
||||
url: '/rest/media',
|
||||
//clickable: false,
|
||||
acceptedFiles: acceptedMimeTypes.join() + ",.flac",
|
||||
addRemoveLinks: true,
|
||||
dictRemoveFile: $.i18n._("Remove"),
|
||||
init: function () {
|
||||
this.on("sending", function (file, xhr, data) {
|
||||
data.append("csrf_token", $("#csrf").val());
|
||||
});
|
||||
|
||||
this.on("addedfile", function (file, xhr, data) {
|
||||
var el = $(file.previewElement);
|
||||
uploadProgress = true;
|
||||
el.find(".dz-remove").prependTo(el.find(".dz-details"));
|
||||
el.find(".dz-error-message").appendTo(el.find(".dz-error-mark"));
|
||||
});
|
||||
|
||||
this.on("success", function (file, xhr, data) {
|
||||
//Refresh the upload table:
|
||||
self.recentUploadsTable.fnDraw(); //Only works because we're using bServerSide
|
||||
//In DataTables 1.10 and greater, we can use .fnAjaxReload()
|
||||
});
|
||||
this.on("complete", function() {
|
||||
uploadProgress = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -126,7 +137,7 @@ $(document).ready(function() {
|
|||
var importStatusCode = data;
|
||||
if (self.IMPORT_STATUS_CODES[importStatusCode]) {
|
||||
statusStr = self.IMPORT_STATUS_CODES[importStatusCode].message;
|
||||
};
|
||||
}
|
||||
|
||||
return statusStr;
|
||||
};
|
||||
|
|
@ -173,24 +184,26 @@ $(document).ready(function() {
|
|||
//"sScrollY": "200px",
|
||||
"bFilter": false,
|
||||
"bSort": false,
|
||||
"sDom": '<"H">frtip<"F"l>',
|
||||
//"sDom": '<"H">frtip<"F"l>',
|
||||
"sDom": 'frt<"F"lip>',
|
||||
"bPaginate": true,
|
||||
"sPaginationType": "full_numbers",
|
||||
"oLanguage": getDatatablesStrings({
|
||||
"sEmptyTable": $.i18n._("No files have been uploaded yet."),
|
||||
"sInfoEmpty": $.i18n._("Showing 0 to 0 of 0 uploads"),
|
||||
"sInfo": $.i18n._("Showing _START_ to _END_ of _TOTAL_ uploads"),
|
||||
"sInfoEmpty": $.i18n._("Showing 0 to 0 of 0 uploads"),
|
||||
"sInfoFiltered": $.i18n._("(filtered from _MAX_ total uploads)"),
|
||||
}),
|
||||
"aoColumns": [
|
||||
{"mData": "artist_name", "sTitle": $.i18n._("Creator")},
|
||||
{"mData": "track_title", "sTitle": $.i18n._("Title")},
|
||||
{ "mData" : "import_status", "sTitle" : $.i18n._("Import Status"),
|
||||
{
|
||||
"mData": "import_status", "sTitle": $.i18n._("Import Status"),
|
||||
"mRender": self.renderImportStatus
|
||||
},
|
||||
{"mData": "utime", "sTitle": $.i18n._("Uploaded")},
|
||||
{ "mData" : "id", "sTitle" : $.i18n._("Actions"),
|
||||
{
|
||||
"mData": "id", "sTitle": $.i18n._("Actions"),
|
||||
"mRender": self.renderFileActions
|
||||
}
|
||||
],
|
||||
|
|
@ -204,8 +217,7 @@ $(document).ready(function() {
|
|||
for (var i = 0; i < json.files.length; i++) {
|
||||
//console.log(file);
|
||||
var file = json.files[i];
|
||||
if (file.import_status == 1)
|
||||
{
|
||||
if (file.import_status == 1) {
|
||||
areAnyFileImportsPending = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -226,21 +238,18 @@ $(document).ready(function() {
|
|||
return recentUploadsTable;
|
||||
};
|
||||
|
||||
self.startRefreshingRecentUploads = function()
|
||||
{
|
||||
self.startRefreshingRecentUploads = function () {
|
||||
if (self.isRecentUploadsRefreshTimerActive()) { //Prevent multiple timers from running
|
||||
return;
|
||||
}
|
||||
self.recentUploadsRefreshTimer = setInterval("self.recentUploadsTable.fnDraw()", 3000);
|
||||
};
|
||||
|
||||
self.isRecentUploadsRefreshTimerActive = function()
|
||||
{
|
||||
self.isRecentUploadsRefreshTimerActive = function () {
|
||||
return (self.recentUploadsRefreshTimer != null);
|
||||
};
|
||||
|
||||
self.stopRefreshingRecentUploads = function()
|
||||
{
|
||||
self.stopRefreshingRecentUploads = function () {
|
||||
clearInterval(self.recentUploadsRefreshTimer);
|
||||
self.recentUploadsRefreshTimer = null;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue