From 16456b3043de0e76df1d259c9682f75dd5ca16d8 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 10 Nov 2015 14:19:54 +0100 Subject: [PATCH] table resize: fix internal temp storage, store calculated width in displayWidth --- .../_application_controller_table.coffee | 96 +++++++++---------- .../app/controllers/ticket_overview.coffee | 1 + .../app/controllers/widget/ticket_list.coffee | 1 + .../agent_ticket_view/navbar_vertical.jst.eco | 2 +- .../app/views/generic/table.jst.eco | 2 +- app/assets/stylesheets/zammad.scss | 8 +- 6 files changed, 52 insertions(+), 58 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_application_controller_table.coffee b/app/assets/javascripts/app/controllers/_application_controller_table.coffee index f5f7403f0..3daa7ea1d 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_table.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_table.coffee @@ -151,7 +151,18 @@ class App.ControllerTable extends App.Controller # e.g. column: owner headerFound = true if @headerWidth[attribute.name] - attribute.width = "#{@headerWidth[attribute.name]}px" + attribute.displayWidth = @headerWidth[attribute.name] + else if !attribute.width + attribute.displayWidth = @baseColWidth + else + # convert percentages to pixels + value = parseInt attribute.width, 10 + unit = attribute.width.match(/[px|%]+/)[0] + + if unit is '%' + attribute.displayWidth = value / 100 * @el.width() + else + attribute.displayWidth = value @headers.push attribute else # e.g. column: owner_id @@ -159,7 +170,18 @@ class App.ControllerTable extends App.Controller if attributeName is rowWithoutId headerFound = true if @headerWidth[attribute.name] - attribute.width = "#{@headerWidth[attribute.name]}px" + attribute.displayWidth = @headerWidth[attribute.name] + else if !attribute.width + attribute.displayWidth = @baseColWidth + else + # convert percentages to pixels + value = parseInt attribute.width, 10 + unit = attribute.width.match(/[px|%]+/)[0] + + if unit is '%' + attribute.displayWidth = value / 100 * @el.width() + else + attribute.displayWidth = value @headers.push attribute # add destroy header and col binding @@ -168,6 +190,7 @@ class App.ControllerTable extends App.Controller name: 'destroy' display: 'Delete' width: '70px' + displayWidth: 70 unresizable: true parentClass: 'js-delete' icon: 'trash' @@ -238,7 +261,6 @@ class App.ControllerTable extends App.Controller groupObjects[group] = [] # release old array # get content - @log 'debug', 'table', 'header', @headers, 'overview', 'objects', @objects table = App.view('generic/table')( table_id: @table_id header: @headers @@ -357,7 +379,7 @@ class App.ControllerTable extends App.Controller item: item container: @container - adjustHeaderWidths: (headers) -> + adjustHeaderWidths: -> if !@headers return @@ -366,54 +388,29 @@ class App.ControllerTable extends App.Controller if availableWidth is 0 availableWidth = @minTableWidth - widths = @getHeaderWidths headers - difference = widths - availableWidth - - # convert percentages to pixels - headers = _.map headers, (col) => - unit = col.width.match(/[px|%]+/)[0] - - if unit is '%' - percentage = parseInt col.width, 10 - col.width = percentage / 100 * availableWidth + 'px' - - return col - - widths = @getHeaderWidths headers - shrinkBy = Math.ceil (widths - availableWidth) / @getShrinkableHeadersCount(headers) + widths = @getHeaderWidths() + shrinkBy = Math.ceil (widths - availableWidth) / @getShrinkableHeadersCount() # make all cols evenly smaller - headers = _.map headers, (col) => + @headers = _.map @headers, (col) => if !col.unresizable - value = parseInt col.width, 10 - col.width = Math.max(@minColWidth, value - shrinkBy) + 'px' + col.displayWidth = Math.max(@minColWidth, col.displayWidth - shrinkBy) return col # give left-over space from rounding to last column to get to 100% - roundingLeftOver = availableWidth - @getHeaderWidths headers + roundingLeftOver = availableWidth - @getHeaderWidths() # but only if there is something left over (will get negative when there are too many columns for each column to stay in their min width) if roundingLeftOver > 0 - headers[headers.length - 1].width = parseInt(headers[headers.length - 1].width, 10) + roundingLeftOver + 'px' + @headers[@headers.length - 1].displayWidth = @headers[@headers.length - 1].displayWidth + roundingLeftOver - return headers - - getShrinkableHeadersCount: (headers) -> - _.reduce headers, (memo, col) -> + getShrinkableHeadersCount: -> + _.reduce @headers, (memo, col) -> return if col.unresizable then memo else memo+1 , 0 - getHeaderWidths: (headers) -> - widths = _.reduce headers, (memo, col, i) => - if col.width - value = parseInt col.width, 10 - unit = col.width.match(/[px|%]+/)[0] - else - # !!! sets the width to default width if not set - headers[i].width = @baseColWidth + 'px' - value = @baseColWidth - unit = 'px' - - return if unit is 'px' then memo + value else memo + getHeaderWidths: -> + widths = _.reduce @headers, (memo, col, i) -> + return memo + col.displayWidth , 0 if @checkbox @@ -425,10 +422,10 @@ class App.ControllerTable extends App.Controller return widths readjustHeaderWidths: => - @headers = @adjustHeaderWidths @headers + @adjustHeaderWidths() @tableHead.each (i, el) => - el.style.width = @headers[i].width + el.style.width = @headers[i].displayWidth + "px" stopPropagation: (event) => event.stopPropagation() @@ -463,8 +460,8 @@ class App.ControllerTable extends App.Controller # switch to percentage resizeBaseWidth = @resizeTargetLeft.parents('table').width() - leftWidth = @resizeTargetLeft.outerWidth() - rightWidth = @resizeTargetRight.outerWidth() + leftWidth = @resizeTargetLeft.width() + rightWidth = @resizeTargetRight.width() leftColumnKey = @resizeTargetLeft.attr('data-column-key') rightColumnKey = @resizeTargetRight.attr('data-column-key') @@ -475,16 +472,14 @@ class App.ControllerTable extends App.Controller { key: rightColumnKey, width: rightWidth } ] - @log 'debug', @table_id, 'leftColumnKey', leftColumnKey, leftWidth, 'rightColumnKey', rightColumnKey, rightWidth - # update store and runtime @headerWidth @preferencesStore('headerWidth', leftColumnKey, leftWidth) - @headerWidth[leftColumnKey] = leftWidth + _.find(@headers, (column) -> column.name is leftColumnKey).displayWidth = leftWidth # update store and runtime @headerWidth if rightColumnKey @preferencesStore('headerWidth', rightColumnKey, rightWidth) - @headerWidth[rightColumnKey] = rightWidth + _.find(@headers, (column) -> column.name is rightColumnKey).displayWidth = rightWidth sortByColumn: (event) => column = $(event.currentTarget).closest('[data-column-key]').attr('data-column-key') @@ -499,8 +494,6 @@ class App.ControllerTable extends App.Controller else @orderDirection = 'ASC' - @log 'debug', @table_id, 'sortByColumn', @orderBy, 'direction', @orderDirection - # update store @preferencesStore('order', 'orderBy', @orderBy) @preferencesStore('order', 'orderDirection', @orderDirection) @@ -513,13 +506,12 @@ class App.ControllerTable extends App.Controller if !data[type][key] data[type][key] = {} data[type][key] = value - @log 'debug', @table_id, 'preferencesStore', data + App.LocalStorage.set(@preferencesStoreKey(), data, @Session.get('id')) preferencesGet: => data = App.LocalStorage.get(@preferencesStoreKey(), @Session.get('id')) return {} if !data - @log 'debug', @table_id, 'preferencesGet', data data preferencesStoreKey: => diff --git a/app/assets/javascripts/app/controllers/ticket_overview.coffee b/app/assets/javascripts/app/controllers/ticket_overview.coffee index 457832ab6..e5ac9166f 100644 --- a/app/assets/javascripts/app/controllers/ticket_overview.coffee +++ b/app/assets/javascripts/app/controllers/ticket_overview.coffee @@ -326,6 +326,7 @@ class Table extends App.Controller display: '' translation: false width: '28px' + displayWidth:28 unresizable: true headers.unshift(0) headers[0] = attribute diff --git a/app/assets/javascripts/app/controllers/widget/ticket_list.coffee b/app/assets/javascripts/app/controllers/widget/ticket_list.coffee index f2fad3fbe..08c4859b6 100644 --- a/app/assets/javascripts/app/controllers/widget/ticket_list.coffee +++ b/app/assets/javascripts/app/controllers/widget/ticket_list.coffee @@ -26,6 +26,7 @@ class App.TicketList extends App.Controller display: '' translation: false width: '28px' + displayWidth:28 unresizable: true headers.unshift(0) headers[0] = attribute diff --git a/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco b/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco index e8bfa783c..021189917 100644 --- a/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco +++ b/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco @@ -25,7 +25,7 @@ <%- @Icon('plus') %> <% if @items: %> -
+
<% for item in @items: %> <%- @T(item.name) %> diff --git a/app/assets/javascripts/app/views/generic/table.jst.eco b/app/assets/javascripts/app/views/generic/table.jst.eco index 639da1700..49e61db49 100644 --- a/app/assets/javascripts/app/views/generic/table.jst.eco +++ b/app/assets/javascripts/app/views/generic/table.jst.eco @@ -14,7 +14,7 @@ <% end %> <% for item, i in @header: %> - <%= " align-#{ item.align }" if item.align %>" style="width:<%= item.width %>" data-column-key="<%= item.name %>"> + <%= " align-#{ item.align }" if item.align %>" style="width:<%= item.displayWidth %>px" data-column-key="<%= item.name %>">
<%- @T( item.display ) %> diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 089ff7c9b..247c5f7d4 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -2374,10 +2374,6 @@ footer { display: none; } } - .main { - overflow-y: auto; - overflow-x: hidden; - } } .overview-header { @@ -2397,6 +2393,10 @@ footer { position: relative; } + .tabs-clone { + right: 0; + } + .dropdown { min-width: 0; width: 336px;