diff --git a/src/scripts/tutti/00_utils.js b/src/scripts/tutti/00_utils.js index 8dec1e9..1f5451f 100644 --- a/src/scripts/tutti/00_utils.js +++ b/src/scripts/tutti/00_utils.js @@ -145,8 +145,8 @@ $(window).on('load resize', function(){ }); -/* Fix header of items list (like assets or shots */ -function itemsListFixHeader(toClone, toAppend){ +/* Clone children elements, used to fix the header of items_list (like assets or shots) */ +function cloneChildren(toClone, toAppend){ var target = $(toClone); var target_children = target.children(); var clone = target.clone(); @@ -156,3 +156,25 @@ function itemsListFixHeader(toClone, toAppend){ }); $(toAppend).append(clone); } + +/* Scroll fixed headers horizontally, used for the header of items_list (like assets or shots) */ +function scrollHeaderHorizontal(scrollableClassName, fixedContainer, offset){ + var $table_list = $('.item-list'); + + $table_list.scroll(function(e) { + // Scroll of the table scrollableClassName from the left minus offset, inverted (multiplied by -1) + var table_header_offset = ($table_list.scrollLeft() - offset) * - 1 + $(fixedContainer).css('left', table_header_offset); + }); +} + + +// For every column, set the width of the fixed header using the original columns width +function setHeaderCellsWidth(tableHeaderRowOriginal, tableHeaderRowFixed) { + var table_header = $(tableHeaderRowOriginal).children(); + var table_header_fixed = $(tableHeaderRowFixed).children(); + + table_header_fixed.width(function(i,val) { + return table_header.eq(i).width(); + }); +} diff --git a/src/templates/attract/assets/for_project.jade b/src/templates/attract/assets/for_project.jade index 8becb67..758e5c4 100644 --- a/src/templates/attract/assets/for_project.jade +++ b/src/templates/attract/assets/for_project.jade @@ -5,13 +5,13 @@ #col_main .col_header.item-list-header a.item-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }} - | Assets ({{ assets | count }}) + span.item-extra Assets ({{ assets | count }}) a#item-add(href="javascript:asset_create('{{ project.url }}');") + Create Asset .item-list.asset.col-scrollable .table .table-head.is-fixed - .table-head + .table-head.original .table-row .table-cell.asset-status | {# disabled until users can actually upload a thumbnail @@ -142,9 +142,18 @@ script. script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}") script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable-0.20.min.js')}}") script. + // The fixed table header situation, check out 00_utils.js + cloneChildren('.item-list .table-head .table-row', '.item-list .table-head.is-fixed'); + scrollHeaderHorizontal('.item-list', '.item-list .table-head.is-fixed', 50); + // For every column, set the width of the fixed header using the original columns width + setHeaderCellsWidth('.item-list .table-head.original .table-row', '.item-list .table-head.is-fixed .table-row'); + $("#col_main").resizable({ handleSelector: ".col-splitter", - resizeHeight: false + resizeHeight: false, + onDrag: function () { + setHeaderCellsWidth('.item-list .table-head.original .table-row', '.item-list .table-head.is-fixed .table-row'); + } }); // Set height of asset-list and item details so we can scroll inside them @@ -154,6 +163,4 @@ script. $('#item-details').css({'height': window_height}); }); - itemsListFixHeader('.item-list .table-head .table-row', '.item-list .table-head.is-fixed'); - | {% endblock footer_scripts %} diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade index e2271a7..8bd8c63 100644 --- a/src/templates/attract/shots/for_project.jade +++ b/src/templates/attract/shots/for_project.jade @@ -5,7 +5,7 @@ #col_main .col_header.item-list-header a.item-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }} - span(title='In the edit') {{ stats.nr_of_shots }} shots | {{ stats.total_frame_count }} frames + span.item-extra(title='In the edit') {{ stats.nr_of_shots }} shots | {{ stats.total_frame_count }} frames | {# Not allowed for the moment. Shots are added via the Sequencer a#item-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot @@ -14,7 +14,7 @@ .item-list.shot.col-scrollable .table .table-head.is-fixed - .table-head + .table-head.original .table-row .table-cell.item-status .table-cell.item-thumbnail @@ -73,6 +73,7 @@ | {% endfor %} | {% endfor %} + .col-splitter #col_right @@ -88,6 +89,8 @@ script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}") script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable-0.20.min.js')}}") script. + + // Open task or shot on load {% if open_task_id %} $(function() { item_open('{{ open_task_id }}', 'task', false); }); {% endif %} @@ -95,6 +98,8 @@ script. $(function() { item_open('{{ open_shot_id }}', 'shot', false); }); {% endif %} + + // Create tasks $('button.task-add').on('click', function(e){ e.preventDefault(); var parent_id = $(this).attr('data-parent-id'); @@ -103,9 +108,10 @@ script. task_create(parent_id, task_type); }); - var same_cells; /* Collapse columns by clicking on the title */ + var same_cells; + $('.table-head .table-cell span.collapser').on('click', function(e){ e.stopPropagation(); @@ -114,6 +120,9 @@ script. $(same_cells).hide(); /* Add the spacer which we later click to expand */ $('
').insertAfter(same_cells); + + // For every column, set the width of the fixed header using the original columns width + setHeaderCellsWidth('.item-list .table-head.original .table-row', '.item-list .table-head.is-fixed .table-row'); }); $('body').on('click', '.table-cell-spacer', function(){ @@ -140,12 +149,19 @@ script. $('.table-body ' + same_cells).removeClass('highlight'); }); -script. + + // The fixed table header situation, check out 00_utils.js + cloneChildren('.item-list .table-head .table-row', '.item-list .table-head.is-fixed'); + scrollHeaderHorizontal('.item-list', '.item-list .table-head.is-fixed', 50); + // For every column, set the width of the fixed header using the original columns width + setHeaderCellsWidth('.item-list .table-head.original .table-row', '.item-list .table-head.is-fixed .table-row'); + $("#col_main").resizable({ handleSelector: ".col-splitter", - resizeHeight: false + resizeHeight: false, + onDrag: function () { + setHeaderCellsWidth('.item-list .table-head.original .table-row', '.item-list .table-head.is-fixed .table-row'); + } }); - itemsListFixHeader('.item-list .table-head .table-row', '.item-list .table-head.is-fixed'); - | {% endblock footer_scripts %}