table resize: fix internal temp storage, store calculated width in displayWidth
This commit is contained in:
parent
d4bd04e7ea
commit
16456b3043
6 changed files with 52 additions and 58 deletions
|
@ -151,7 +151,18 @@ class App.ControllerTable extends App.Controller
|
||||||
# e.g. column: owner
|
# e.g. column: owner
|
||||||
headerFound = true
|
headerFound = true
|
||||||
if @headerWidth[attribute.name]
|
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
|
@headers.push attribute
|
||||||
else
|
else
|
||||||
# e.g. column: owner_id
|
# e.g. column: owner_id
|
||||||
|
@ -159,7 +170,18 @@ class App.ControllerTable extends App.Controller
|
||||||
if attributeName is rowWithoutId
|
if attributeName is rowWithoutId
|
||||||
headerFound = true
|
headerFound = true
|
||||||
if @headerWidth[attribute.name]
|
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
|
@headers.push attribute
|
||||||
|
|
||||||
# add destroy header and col binding
|
# add destroy header and col binding
|
||||||
|
@ -168,6 +190,7 @@ class App.ControllerTable extends App.Controller
|
||||||
name: 'destroy'
|
name: 'destroy'
|
||||||
display: 'Delete'
|
display: 'Delete'
|
||||||
width: '70px'
|
width: '70px'
|
||||||
|
displayWidth: 70
|
||||||
unresizable: true
|
unresizable: true
|
||||||
parentClass: 'js-delete'
|
parentClass: 'js-delete'
|
||||||
icon: 'trash'
|
icon: 'trash'
|
||||||
|
@ -238,7 +261,6 @@ class App.ControllerTable extends App.Controller
|
||||||
groupObjects[group] = [] # release old array
|
groupObjects[group] = [] # release old array
|
||||||
|
|
||||||
# get content
|
# get content
|
||||||
@log 'debug', 'table', 'header', @headers, 'overview', 'objects', @objects
|
|
||||||
table = App.view('generic/table')(
|
table = App.view('generic/table')(
|
||||||
table_id: @table_id
|
table_id: @table_id
|
||||||
header: @headers
|
header: @headers
|
||||||
|
@ -357,7 +379,7 @@ class App.ControllerTable extends App.Controller
|
||||||
item: item
|
item: item
|
||||||
container: @container
|
container: @container
|
||||||
|
|
||||||
adjustHeaderWidths: (headers) ->
|
adjustHeaderWidths: ->
|
||||||
if !@headers
|
if !@headers
|
||||||
return
|
return
|
||||||
|
|
||||||
|
@ -366,54 +388,29 @@ class App.ControllerTable extends App.Controller
|
||||||
if availableWidth is 0
|
if availableWidth is 0
|
||||||
availableWidth = @minTableWidth
|
availableWidth = @minTableWidth
|
||||||
|
|
||||||
widths = @getHeaderWidths headers
|
widths = @getHeaderWidths()
|
||||||
difference = widths - availableWidth
|
shrinkBy = Math.ceil (widths - availableWidth) / @getShrinkableHeadersCount()
|
||||||
|
|
||||||
# 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)
|
|
||||||
|
|
||||||
# make all cols evenly smaller
|
# make all cols evenly smaller
|
||||||
headers = _.map headers, (col) =>
|
@headers = _.map @headers, (col) =>
|
||||||
if !col.unresizable
|
if !col.unresizable
|
||||||
value = parseInt col.width, 10
|
col.displayWidth = Math.max(@minColWidth, col.displayWidth - shrinkBy)
|
||||||
col.width = Math.max(@minColWidth, value - shrinkBy) + 'px'
|
|
||||||
return col
|
return col
|
||||||
|
|
||||||
# give left-over space from rounding to last column to get to 100%
|
# 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)
|
# 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
|
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: ->
|
||||||
|
_.reduce @headers, (memo, col) ->
|
||||||
getShrinkableHeadersCount: (headers) ->
|
|
||||||
_.reduce headers, (memo, col) ->
|
|
||||||
return if col.unresizable then memo else memo+1
|
return if col.unresizable then memo else memo+1
|
||||||
, 0
|
, 0
|
||||||
|
|
||||||
getHeaderWidths: (headers) ->
|
getHeaderWidths: ->
|
||||||
widths = _.reduce headers, (memo, col, i) =>
|
widths = _.reduce @headers, (memo, col, i) ->
|
||||||
if col.width
|
return memo + col.displayWidth
|
||||||
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
|
|
||||||
, 0
|
, 0
|
||||||
|
|
||||||
if @checkbox
|
if @checkbox
|
||||||
|
@ -425,10 +422,10 @@ class App.ControllerTable extends App.Controller
|
||||||
return widths
|
return widths
|
||||||
|
|
||||||
readjustHeaderWidths: =>
|
readjustHeaderWidths: =>
|
||||||
@headers = @adjustHeaderWidths @headers
|
@adjustHeaderWidths()
|
||||||
|
|
||||||
@tableHead.each (i, el) =>
|
@tableHead.each (i, el) =>
|
||||||
el.style.width = @headers[i].width
|
el.style.width = @headers[i].displayWidth + "px"
|
||||||
|
|
||||||
stopPropagation: (event) =>
|
stopPropagation: (event) =>
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
|
@ -463,8 +460,8 @@ class App.ControllerTable extends App.Controller
|
||||||
|
|
||||||
# switch to percentage
|
# switch to percentage
|
||||||
resizeBaseWidth = @resizeTargetLeft.parents('table').width()
|
resizeBaseWidth = @resizeTargetLeft.parents('table').width()
|
||||||
leftWidth = @resizeTargetLeft.outerWidth()
|
leftWidth = @resizeTargetLeft.width()
|
||||||
rightWidth = @resizeTargetRight.outerWidth()
|
rightWidth = @resizeTargetRight.width()
|
||||||
|
|
||||||
leftColumnKey = @resizeTargetLeft.attr('data-column-key')
|
leftColumnKey = @resizeTargetLeft.attr('data-column-key')
|
||||||
rightColumnKey = @resizeTargetRight.attr('data-column-key')
|
rightColumnKey = @resizeTargetRight.attr('data-column-key')
|
||||||
|
@ -475,16 +472,14 @@ class App.ControllerTable extends App.Controller
|
||||||
{ key: rightColumnKey, width: rightWidth }
|
{ key: rightColumnKey, width: rightWidth }
|
||||||
]
|
]
|
||||||
|
|
||||||
@log 'debug', @table_id, 'leftColumnKey', leftColumnKey, leftWidth, 'rightColumnKey', rightColumnKey, rightWidth
|
|
||||||
|
|
||||||
# update store and runtime @headerWidth
|
# update store and runtime @headerWidth
|
||||||
@preferencesStore('headerWidth', leftColumnKey, leftWidth)
|
@preferencesStore('headerWidth', leftColumnKey, leftWidth)
|
||||||
@headerWidth[leftColumnKey] = leftWidth
|
_.find(@headers, (column) -> column.name is leftColumnKey).displayWidth = leftWidth
|
||||||
|
|
||||||
# update store and runtime @headerWidth
|
# update store and runtime @headerWidth
|
||||||
if rightColumnKey
|
if rightColumnKey
|
||||||
@preferencesStore('headerWidth', rightColumnKey, rightWidth)
|
@preferencesStore('headerWidth', rightColumnKey, rightWidth)
|
||||||
@headerWidth[rightColumnKey] = rightWidth
|
_.find(@headers, (column) -> column.name is rightColumnKey).displayWidth = rightWidth
|
||||||
|
|
||||||
sortByColumn: (event) =>
|
sortByColumn: (event) =>
|
||||||
column = $(event.currentTarget).closest('[data-column-key]').attr('data-column-key')
|
column = $(event.currentTarget).closest('[data-column-key]').attr('data-column-key')
|
||||||
|
@ -499,8 +494,6 @@ class App.ControllerTable extends App.Controller
|
||||||
else
|
else
|
||||||
@orderDirection = 'ASC'
|
@orderDirection = 'ASC'
|
||||||
|
|
||||||
@log 'debug', @table_id, 'sortByColumn', @orderBy, 'direction', @orderDirection
|
|
||||||
|
|
||||||
# update store
|
# update store
|
||||||
@preferencesStore('order', 'orderBy', @orderBy)
|
@preferencesStore('order', 'orderBy', @orderBy)
|
||||||
@preferencesStore('order', 'orderDirection', @orderDirection)
|
@preferencesStore('order', 'orderDirection', @orderDirection)
|
||||||
|
@ -513,13 +506,12 @@ class App.ControllerTable extends App.Controller
|
||||||
if !data[type][key]
|
if !data[type][key]
|
||||||
data[type][key] = {}
|
data[type][key] = {}
|
||||||
data[type][key] = value
|
data[type][key] = value
|
||||||
@log 'debug', @table_id, 'preferencesStore', data
|
|
||||||
App.LocalStorage.set(@preferencesStoreKey(), data, @Session.get('id'))
|
App.LocalStorage.set(@preferencesStoreKey(), data, @Session.get('id'))
|
||||||
|
|
||||||
preferencesGet: =>
|
preferencesGet: =>
|
||||||
data = App.LocalStorage.get(@preferencesStoreKey(), @Session.get('id'))
|
data = App.LocalStorage.get(@preferencesStoreKey(), @Session.get('id'))
|
||||||
return {} if !data
|
return {} if !data
|
||||||
@log 'debug', @table_id, 'preferencesGet', data
|
|
||||||
data
|
data
|
||||||
|
|
||||||
preferencesStoreKey: =>
|
preferencesStoreKey: =>
|
||||||
|
|
|
@ -326,6 +326,7 @@ class Table extends App.Controller
|
||||||
display: ''
|
display: ''
|
||||||
translation: false
|
translation: false
|
||||||
width: '28px'
|
width: '28px'
|
||||||
|
displayWidth:28
|
||||||
unresizable: true
|
unresizable: true
|
||||||
headers.unshift(0)
|
headers.unshift(0)
|
||||||
headers[0] = attribute
|
headers[0] = attribute
|
||||||
|
|
|
@ -26,6 +26,7 @@ class App.TicketList extends App.Controller
|
||||||
display: ''
|
display: ''
|
||||||
translation: false
|
translation: false
|
||||||
width: '28px'
|
width: '28px'
|
||||||
|
displayWidth:28
|
||||||
unresizable: true
|
unresizable: true
|
||||||
headers.unshift(0)
|
headers.unshift(0)
|
||||||
headers[0] = attribute
|
headers[0] = attribute
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
<%- @Icon('plus') %>
|
<%- @Icon('plus') %>
|
||||||
</a>
|
</a>
|
||||||
<% if @items: %>
|
<% if @items: %>
|
||||||
<div class="tabs tabs--inline tabs--big u-invisible js-tabsClone">
|
<div class="tabs tabs--inline tabs--big tabs-clone u-invisible js-tabsClone">
|
||||||
<% for item in @items: %>
|
<% for item in @items: %>
|
||||||
<a class="tab js-tabClone<%= ' active' if item.active %>" href="<%= item.target %>">
|
<a class="tab js-tabClone<%= ' active' if item.active %>" href="<%= item.target %>">
|
||||||
<span class="tab-name"><%- @T(item.name) %></span>
|
<span class="tab-name"><%- @T(item.name) %></span>
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
<th style="width: 22px"></th>
|
<th style="width: 22px"></th>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% for item, i in @header: %>
|
<% for item, i in @header: %>
|
||||||
<th class="js-tableHead<%= " #{ item.className }" if item.className %><%= " align-#{ item.align }" if item.align %>" style="width:<%= item.width %>" data-column-key="<%= item.name %>">
|
<th class="js-tableHead<%= " #{ item.className }" if item.className %><%= " align-#{ item.align }" if item.align %>" style="width:<%= item.displayWidth %>px" data-column-key="<%= item.name %>">
|
||||||
<div class="table-column-head<%= ' js-sort' if @table_id %>">
|
<div class="table-column-head<%= ' js-sort' if @table_id %>">
|
||||||
<div class="table-column-title">
|
<div class="table-column-title">
|
||||||
<%- @T( item.display ) %>
|
<%- @T( item.display ) %>
|
||||||
|
|
|
@ -2374,10 +2374,6 @@ footer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.main {
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-header {
|
.overview-header {
|
||||||
|
@ -2397,6 +2393,10 @@ footer {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabs-clone {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown {
|
.dropdown {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
width: 336px;
|
width: 336px;
|
||||||
|
|
Loading…
Reference in a new issue