Skip to content

Commit 93654e7

Browse files
obazopazobazopaz
committed
feat(workspace): enhance folder display making the sub levers more visible
1 parent dc1d5c1 commit 93654e7

7 files changed

Lines changed: 150 additions & 117 deletions

File tree

‎front_end/openVRE/public/assets/layouts/layout/css/custom.min.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -556,6 +556,25 @@ input.tt-hint {
556556
cursor: pointer;
557557
}
558558

559+
#workspace .folder-name-line .collapse-folder {
560+
flex-shrink: 0;
561+
margin: 0;
562+
font-size: 18px;
563+
}
564+
565+
#workspace .folder-name-line .fa-stack.collapse-folder {
566+
margin-top: 12px;
567+
height: 9px;
568+
width: 20px;
569+
}
570+
571+
#workspace .folder-name-line .truncate {
572+
float: none;
573+
flex: 0 1 auto;
574+
min-width: 0;
575+
max-width: 280px;
576+
}
577+
559578
.denser {
560579
padding: 2px 4px 2px 4px!important;
561580
}

‎front_end/openVRE/public/assets/pages/scripts/datatables-page.js‎

Lines changed: 100 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,42 @@ function getTreeParentId($row) {
3333
return $row.attr('data-tt-parent-id');
3434
}
3535

36+
function createFolderIconHtml($nameCell) {
37+
if ($nameCell.hasClass('highlighted_folder')) {
38+
return '<span class="fa-stack fa-lg collapse-folder">' +
39+
'<i class="fa fa-folder-open fa-stack-1x font-blue-oleo" style="left: 0px;top: -9px;"></i>' +
40+
'<i class="fa fa-folder-open-o font-green" style="position: absolute;left: 0px;top: -9px;"></i>' +
41+
'</span>';
42+
}
43+
return '<i class="fa fa-folder-open collapse-folder" aria-hidden="true"></i>';
44+
}
45+
46+
function ensureFolderRowPresentation($row) {
47+
var $row = $($row);
48+
var $nameCell = $row.children('td').eq(1);
49+
50+
$row.addClass('folder-row');
51+
$row.css({ 'font-weight': 'bold', color: '#337ab7' });
52+
53+
var $line = $nameCell.children('.folder-name-line').first();
54+
if ($line.length && !$line.children('.collapse-folder').length) {
55+
$line.prepend(createFolderIconHtml($nameCell));
56+
}
57+
}
58+
3659
function setFolderRowIcon($tr, isOpen) {
37-
var $td = $('td:first-child', $tr);
38-
var $icon = $td.find('.collapse-folder');
60+
var $nameCell = $tr.children('td').eq(1);
61+
var $icon = $nameCell.find('.collapse-folder');
3962
if (!$icon.length) {
4063
return;
4164
}
42-
if ($td.hasClass('highlighted_folder')) {
65+
if ($nameCell.hasClass('highlighted_folder')) {
4366
if (isOpen) {
44-
$icon.html('<i class="fa fa-folder-open fa-stack-1x font-blue-oleo" style="left:-5px;top: -9px;"></i>' +
45-
'<i class="fa fa-folder-open-o font-green" style="position: absolute;left: 4px;top: -9px;"></i>');
67+
$icon.html('<i class="fa fa-folder-open fa-stack-1x font-blue-oleo" style="left:0px;top: -9px;"></i>' +
68+
'<i class="fa fa-folder-open-o font-green" style="position: absolute;left: 0px;top: -9px;"></i>');
4669
} else {
47-
$icon.html('<i class="fa fa-folder fa-stack-1x font-blue-oleo" style="left:-5px;top: -9px;"></i>' +
48-
'<i class="fa fa-folder-o font-green" style="position: absolute;left: 4px;top: -9px;"></i>');
70+
$icon.html('<i class="fa fa-folder fa-stack-1x font-blue-oleo" style="left:0px;top: -9px;"></i>' +
71+
'<i class="fa fa-folder-o font-green" style="position: absolute;left: 0px;top: -9px;"></i>');
4972
}
5073
} else {
5174
$icon.removeClass('fa-folder fa-folder-open').addClass(isOpen ? 'fa-folder-open' : 'fa-folder');
@@ -213,15 +236,21 @@ function syncTreeRowIndent() {
213236
var depth = treeDepthFromId(treeId);
214237
var isFolder = $row.find('input.foldercheck').length > 0;
215238
var $fileCell = $row.children('td').eq(1);
216-
var indentPx = filtered ? 0 : depth * 10;
239+
var indentPx = filtered ? 0 : (depth * 30);
217240

218241
$fileCell.css('padding-left', '0px');
242+
$fileCell.find('.folder-name-line').css('padding-left', '10px');
219243
$fileCell.find('.truncate').css('padding-left', '0px');
220244
$fileCell.find('a, span.enabled, span.disabled').css('padding-left', '0px');
221245

222246
if (indentPx > 0) {
223247
if (isFolder) {
224-
$fileCell.find('.truncate').css('padding-left', indentPx + 'px');
248+
var $folderLine = $fileCell.children('.folder-name-line');
249+
if ($folderLine.length) {
250+
$folderLine.css('padding-left', indentPx + 'px');
251+
} else {
252+
$fileCell.css('padding-left', indentPx + 'px');
253+
}
225254
} else {
226255
var $label = $fileCell.find('a, span.enabled, span.disabled').first();
227256
if ($label.length) {
@@ -355,23 +384,6 @@ $(document).ready(function() {
355384
responsive:true,
356385
stateSave: true,
357386
stateLoaded: function (settings, data) {
358-
// Tree view overrides (disabled — restore pagination behaviour):
359-
// data.order = [];
360-
// data.start = 0;
361-
// data.length = -1;
362-
// col1SearchValue = '';
363-
// col2SearchValue = '';
364-
// col3SearchValue = '';
365-
// activeSortCol = null;
366-
// activeSortDir = 'asc';
367-
// for (var c in cols) {
368-
// cols[c] = 'asc';
369-
// }
370-
// if (data.columns) {
371-
// for (var i = 0; i < data.columns.length; i++) {
372-
// data.columns[i].search.search = '';
373-
// }
374-
// }
375387
if(data.columns[1].search.search != '') {
376388
col1SearchValue = (data.columns[1].search.search);
377389
}
@@ -394,22 +406,7 @@ $(document).ready(function() {
394406
}
395407

396408
if($row.find('input.foldercheck').length) {
397-
$(row).css('font-weight', 'bold');
398-
$(row).css('color', '#337ab7');
399-
if($('td:first-child', row).hasClass('highlighted_folder')) {
400-
/*var folderIcon = '<span class="fa-stack fa-lg" style="height: 0;">' +
401-
'<i class="fa fa-folder fa-stack-1x font-blue-oleo" style="left:-5px;top: -9px;"></i>' +
402-
'<i class="fa fa-folder-o font-green" style="position: absolute;left: 5px;top: -9px;"></i>' +
403-
'</span>';*/
404-
var folderIcon = '<span class="fa-stack fa-lg collapse-folder" style="height: 0;">' +
405-
'<i class="fa fa-folder-open fa-stack-1x font-blue-oleo" style="left:-5px;top: -9px;"></i>' +
406-
'<i class="fa fa-folder-open-o font-green" style="position: absolute;left: 4px;top: -9px;"></i>' +
407-
'</span>';
408-
}else{
409-
//var folderIcon = '<i class="fa fa-folder" aria-hidden="true" style="font-size:18px;margin-left:5px;"></i>';
410-
var folderIcon = '<i class="fa fa-folder-open collapse-folder" aria-hidden="true" style="font-size:18px;margin-left:5px;"></i>';
411-
}
412-
$('td:first-child .mt-checkbox', row).after(folderIcon);
409+
ensureFolderRowPresentation($row);
413410

414411
}else {
415412

@@ -555,15 +552,15 @@ $(document).ready(function() {
555552

556553
// BOTONS DE + INFO
557554
expandInfo = function(op){
558-
$(op).parent().find('.extra_info').slideToggle();
559-
$(op).toggleClass('expand_info_up');
555+
$(op).parent().find('.extra_info').slideToggle();
556+
$(op).toggleClass('expand_info_up');
560557
}
561558

562559
// CHECKBOXES
563560
// global
564561
$('#workspace').find('.group-checkable').change(function () {
565-
var checked = $(this).is(":checked");
566-
$('input[type=checkbox]', table.rows().nodes()).prop('checked', checked);
562+
var checked = $(this).is(":checked");
563+
$('input[type=checkbox]', table.rows().nodes()).prop('checked', checked);
567564
});
568565

569566
// folders
@@ -585,24 +582,24 @@ $(document).ready(function() {
585582

586583
// JSON with the data of the files
587584
$(table.rows().nodes()).each(function() {
588-
var $row = $(this);
589-
var jqTds = $('>td', $row);
585+
var $row = $(this);
586+
var jqTds = $('>td', $row);
590587

591-
if ($row.find('input.foldercheck').length) {
592-
allFolders[getTreeRowId($row)] = parseFolderLabel(jqTds[1].innerText);
593-
return;
594-
}
588+
if ($row.find('input.foldercheck').length) {
589+
allFolders[getTreeRowId($row)] = parseFolderLabel(jqTds[1].innerText);
590+
return;
591+
}
595592

596-
var record = fileRecordFromRow($row);
597-
if (!record) return;
593+
var record = fileRecordFromRow($row);
594+
if (!record) return;
598595

599-
if (jqTds[1].innerHTML.indexOf('extra_info') != -1) {
600-
record.metadata = jqTds[1].innerHTML.substring(
601-
jqTds[1].innerHTML.lastIndexOf('<table>') + 7,
602-
jqTds[1].innerHTML.lastIndexOf('</table>')
603-
).replace(/(\n\t|\n|\t)/gm, '');
604-
}
605-
allFiles.push(record);
596+
if (jqTds[1].innerHTML.indexOf('extra_info') != -1) {
597+
record.metadata = jqTds[1].innerHTML.substring(
598+
jqTds[1].innerHTML.lastIndexOf('<table>') + 7,
599+
jqTds[1].innerHTML.lastIndexOf('</table>')
600+
).replace(/(\n\t|\n|\t)/gm, '');
601+
}
602+
allFiles.push(record);
606603
});
607604
//******************************************
608605
// console.log(JSON.stringify(allFiles));
@@ -612,13 +609,13 @@ $(document).ready(function() {
612609
// check if there's at least one file checked
613610
checkIfSomeChecked = function(){
614611
var ch = false
615-
for(i in allFiles){
616-
if(allFiles[i].checked) {
617-
ch = true;
618-
break;
619-
}
620-
}
621-
return ch;
612+
for(i in allFiles){
613+
if(allFiles[i].checked) {
614+
ch = true;
615+
break;
616+
}
617+
}
618+
return ch;
622619
}
623620

624621
// show / hide tools and buttons of the run tools portlet
@@ -636,39 +633,39 @@ $(document).ready(function() {
636633

637634
// add / remove file to the run tools portlet
638635
drawToolsList = function(ch, id, fl, fd, id_or, meta, fileId){
639-
if(ch){
640-
var str_meta = '';
641-
meta = (meta || '').replace(/"/g, "\'");
642-
643-
if(meta != ''){
644-
str_meta = ' <a href="javascript:;" onmouseover="javascript:;" class="popovers" data-trigger="hover" data-container="body" data-content="<table>' + meta + '</table>" data-original-title="Metadata">' +
645-
'<i class="fa fa-info-circle"></i>' +
646-
'</a>';
647-
}
648-
$('#list-files-run-tools').append('<li class="tool-' + id + ' tool-list-item">'+
649-
'<div class="col1">'+
650-
'<div class="cont">'+
651-
'<div class="cont-col1">'+
652-
'<div class="label label-sm label-info">'+
653-
'<i class="fa fa-file"></i>'+
654-
'</div>'+
655-
'</div>'+
656-
'<div class="cont-col2">'+
657-
'<div class="desc">' + (fd ? '<span class="text-info" style="font-weight:bold;">' + fd + ' /</span> ' : '') + fl + str_meta +
658-
'</div>'+
659-
'</div>'+
636+
if(ch){
637+
var str_meta = '';
638+
meta = (meta || '').replace(/"/g, "\'");
639+
640+
if(meta != ''){
641+
str_meta = ' <a href="javascript:;" onmouseover="javascript:;" class="popovers" data-trigger="hover" data-container="body" data-content="<table>' + meta + '</table>" data-original-title="Metadata">' +
642+
'<i class="fa fa-info-circle"></i>' +
643+
'</a>';
644+
}
645+
$('#list-files-run-tools').append('<li class="tool-' + id + ' tool-list-item">'+
646+
'<div class="col1">'+
647+
'<div class="cont">'+
648+
'<div class="cont-col1">'+
649+
'<div class="label label-sm label-info">'+
650+
'<i class="fa fa-file"></i>'+
651+
'</div>'+
652+
'</div>'+
653+
'<div class="cont-col2">'+
654+
'<div class="desc">' + (fd ? '<span class="text-info" style="font-weight:bold;">' + fd + ' /</span> ' : '') + fl + str_meta +
655+
'</div>'+
656+
'</div>'+
657+
'</div>'+
660658
'</div>'+
661-
'</div>'+
662-
'<div class="col2">'+
663-
'<div class="label label-sm label-danger" style="float: right;padding:0">'+
664-
'<a href="javascript:removeFromToolsList(\'tool-' + id + '\', \'' + id_or + '\');" title="Clear file from list" class="btn btn-icon-only red" style="width: 25px;height: 25px;padding-top: 1px;"><i class="fa fa-times-circle"></i></a>'+
659+
'<div class="col2">'+
660+
'<div class="label label-sm label-danger" style="float: right;padding:0">'+
661+
'<a href="javascript:removeFromToolsList(\'tool-' + id + '\', \'' + id_or + '\');" title="Clear file from list" class="btn btn-icon-only red" style="width: 25px;height: 25px;padding-top: 1px;"><i class="fa fa-times-circle"></i></a>'+
662+
'</div>'+
665663
'</div>'+
666-
'</div>'+
667-
'</li>');
668-
$('.popovers').popover({html:true});
669-
}else{
670-
$('.tool-' + id).remove();
671-
}
664+
'</li>');
665+
$('.popovers').popover({html:true});
666+
}else{
667+
$('.tool-' + id).remove();
668+
}
672669

673670
}
674671

@@ -853,8 +850,8 @@ $(document).ready(function() {
853850
var folderAction = "visible";
854851
//open
855852
if($(td).hasClass('highlighted_folder')) {
856-
$(record).html('<i class="fa fa-folder-open fa-stack-1x font-blue-oleo" style="left:-5px;top: -9px;"></i>' +
857-
'<i class="fa fa-folder-open-o font-green" style="position: absolute;left: 4px;top: -9px;"></i>');
853+
$(record).html('<i class="fa fa-folder-open fa-stack-1x font-blue-oleo" style="left: 0px;top: -9px;"></i>' +
854+
'<i class="fa fa-folder-open-o font-green" style="position: absolute;left: 0px;top: -9px;"></i>');
858855
} else {
859856
$(record).removeClass('fa-folder');
860857
$(record).addClass('fa-folder-open');
@@ -864,8 +861,8 @@ $(document).ready(function() {
864861
$(tr).addClass("folder-off");
865862
var folderAction = "hidden";
866863
if($(td).hasClass('highlighted_folder')) {
867-
$(this).html('<i class="fa fa-folder fa-stack-1x font-blue-oleo" style="left:-5px;top: -9px;"></i>' +
868-
'<i class="fa fa-folder-o font-green" style="position: absolute;left: 4px;top: -9px;"></i>');
864+
$(this).html('<i class="fa fa-folder fa-stack-1x font-blue-oleo" style="left: 0px;top: -9px;"></i>' +
865+
'<i class="fa fa-folder-o font-green" style="position: absolute;left: 0px;top: -9px;"></i>');
869866
} else {
870867
$(this).addClass('fa-folder');
871868
$(this).removeClass('fa-folder-open');

‎front_end/openVRE/public/htmlib/TreeTblworkspace/TR_folder.htm‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@
77
</label>
88
</td>
99
<td class="highlighted_folder" data-order="##name_sort_key##">
10-
<span class="truncate" title="##longfilename##">##longfilename## </span>
10+
<div class="folder-name-line">
11+
<span class="truncate" title="##longfilename##">##longfilename## </span>
12+
<a href="javascript:viewFileMeta('##_id##', '##longfilename##', 0);">
13+
<i class="fa fa-info-circle"></i>
14+
</a>
15+
</div>
1116
<!-- span style="font-weight:bold;" search="yes" type="execution" -->
1217
<!--<span class="expand_info" onclick="expandInfo(this)"></span>-->
1318
<div class="extra_info">
@@ -23,8 +28,6 @@
2328

2429
</table>
2530
</div>
26-
<a href="javascript:viewFileMeta('##_id##', '##longfilename##', 0);" style="margin-left:5px;"><i
27-
class="fa fa-info-circle"></i></a>
2831
</td>
2932
<td>&nbsp;</td>
3033
<td>&nbsp;</td>

‎front_end/openVRE/public/htmlib/TreeTblworkspace/TR_folderPending.htm‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@
77
</label>
88
</td>
99
<td data-order="##name_sort_key##">
10-
<span class="truncate" title="##filename##">##filename##</span>
10+
<div class="folder-name-line">
11+
<span class="truncate" title="##filename##">##filename##</span>
12+
<a href="javascript:viewFileMeta('##_id##', '##longfilename##', 0);">
13+
<i class="fa fa-info-circle"></i>
14+
</a>
15+
</div>
1116
<!-- span style="font-weight:bold;" search="yes" type="execution" -->
1217
<!--<span class="expand_info" onclick="expandInfo(this)"></span>-->
1318
<div class="extra_info">
@@ -17,8 +22,6 @@
1722
##analyses##
1823
</table>
1924
</div>
20-
<a href="javascript:viewFileMeta('##_id##', '##longfilename##', 0);" style="margin-left:5px;"><i class="fa fa-info-circle"></i></a>
21-
2225
</td>
2326
<td>&nbsp;</td>
2427
<td>&nbsp;</td>

‎front_end/openVRE/public/htmlib/TreeTblworkspace/TR_folder_empty.htm‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@
77
</label>
88
</td>
99
<td data-order="##name_sort_key##">
10-
<span class="truncate" title="##filename##">##filename##</span>
10+
<div class="folder-name-line">
11+
<span class="truncate" title="##filename##">##filename##</span>
12+
<a href="javascript:viewFileMeta('##_id##', '##longfilename##', 0);">
13+
<i class="fa fa-info-circle"></i>
14+
</a>
15+
</div>
1116
<!-- span style="font-weight:bold;" search="yes" type="execution" -->
1217
<!--<span class="expand_info" onclick="expandInfo(this)"></span>-->
1318
<div class="extra_info">
@@ -23,8 +28,6 @@
2328

2429
</table>
2530
</div>
26-
<a href="javascript:viewFileMeta('##_id##', '##longfilename##', 0);" style="margin-left:5px;"><i
27-
class="fa fa-info-circle"></i></a>
2831
</td>
2932
<td>&nbsp;</td>
3033
<td>&nbsp;</td>

0 commit comments

Comments
 (0)