From a3fdfdeb6867254c5e14c289f848524ed154af48 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Thu, 22 Oct 2015 11:25:44 +0200 Subject: [PATCH] table column resize TODO: - store resized width with the user settings - read in stored widths from user settings - add functionality to disable resizing on certain columns --- .../_application_controller_table.coffee | 36 +++++++++++++++++-- .../app/views/generic/table.jst.eco | 23 +++++++----- app/assets/stylesheets/zammad.scss | 24 ++++++++++++- 3 files changed, 72 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_application_controller_table.coffee b/app/assets/javascripts/app/controllers/_application_controller_table.coffee index 865360e04..46c089192 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_table.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_table.coffee @@ -1,4 +1,5 @@ class App.ControllerTable extends App.Controller + constructor: (params) -> for key, value of params @[key] = value @@ -250,6 +251,9 @@ class App.ControllerTable extends App.Controller ) ) + # enable resize column + table.on 'mousedown', '.js-col-resize', @onColResizeMousedown + # enable checkbox bulk selection if data.checkbox @@ -259,7 +263,7 @@ class App.ControllerTable extends App.Controller ) # bind on full bulk click - table.delegate('input[name="bulk_all"]', 'click', (e) -> + table.delegate('input[name="bulk_all"]', 'change', (e) -> e.stopPropagation() if $(e.target).prop('checked') $(e.target).parents('table').find('[name="bulk"]').each( -> @@ -275,4 +279,32 @@ class App.ControllerTable extends App.Controller ) ) - table + return table + + onColResizeMousedown: (event) => + @resizeTargetLeft = $(event.currentTarget).parents('th') + @resizeTargetRight = @resizeTargetLeft.next() + @resizeStartX = event.pageX + @resizeLeftStartWidth = @resizeTargetLeft.width() + @resizeRightStartWidth = @resizeTargetRight.width() + + $(document).on 'mousemove.resizeCol', @onColResizeMousemove + $(document).one 'mouseup', @onColResizeMouseup + + onColResizeMousemove: (event) => + # use pixels while moving for max precision + difference = event.pageX - @resizeStartX + @resizeTargetLeft.width @resizeLeftStartWidth + difference + @resizeTargetRight.width @resizeRightStartWidth - difference + + onColResizeMouseup: => + $(document).off 'mousemove.resizeCol' + # switch to percentage + resizeBaseWidth = @resizeTargetLeft.parents('table').width() + leftPercentage = (@resizeTargetLeft.outerWidth() / resizeBaseWidth) * 100 + rightPercentage = (@resizeTargetRight.outerWidth() / resizeBaseWidth) * 100 + + @resizeTargetLeft.width leftPercentage + '%' + @resizeTargetRight.width rightPercentage + '%' + + # save table changed widths diff --git a/app/assets/javascripts/app/views/generic/table.jst.eco b/app/assets/javascripts/app/views/generic/table.jst.eco index 18c2f6ed4..2876c704e 100644 --- a/app/assets/javascripts/app/views/generic/table.jst.eco +++ b/app/assets/javascripts/app/views/generic/table.jst.eco @@ -1,4 +1,4 @@ - +
<% if @checkbox: %> @@ -13,15 +13,22 @@ <% if @radio: %> <% end %> -<% for item in @header: %> - class="<%= item.className %>"<% end %><% if item.style: %> style="<%= item.style %>"<% end %>> - <%- @T( item.display ) %> - <% if item.sortOrderIcon: %><%- @Icon(item.sortOrderIcon[0], item.sortOrderIcon[1]) %><% end %> + <% for item, i in @header: %> + <%= " style='#{ item.style }'" if item.style %>> +
+ <%- @T( item.display ) %> + <% if item.sortOrderIcon: %> + <%- @Icon(item.sortOrderIcon[0], item.sortOrderIcon[1]) %> + <% end %> +
+ <% if i < @header.length - 1: %> +
+ <% end %> -<% end %> -<% if @destroy: %> + <% end %> + <% if @destroy: %>
-<% end %> + <% end %> diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index ad5aa6a52..c8f3134d7 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -679,7 +679,7 @@ table { display: table-row; } -.table th:not(.noTruncate), +.table th:not(.noTruncate) .table-column-title, .table td:not(.noTruncate) { @extend .u-textTruncate; } @@ -694,6 +694,9 @@ table { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; + position: relative; + user-select: none; + box-sizing: content-box; } .table > tbody > tr > td { @@ -713,6 +716,25 @@ table { background: rgba(0,8,14,.015); } +.table-col-resize { + position: absolute; + right: 0; + top: 0; + height: 100%; + cursor: col-resize; + padding: 10px; + margin-right: -10px; + z-index: 1; + + &:after { + content: ""; + display: block; + width: 1px; + height: 100%; + background: hsl(210,7%,85%); + } +} + .table > thead:first-child > tr:first-child > th.no-padding, .table > thead > tr > th.no-padding, .table > tbody > tr > td.no-padding {
<%- @T('Delete') %>