Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix resize, add align setting

Browse source
This commit is contained in:
Felix Niklas 2015-10-27 10:57:23 +01:00
parent c233776905
commit aabfef0b2b
6 changed files with 50 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/assets/javascripts/app/controllers/_application_controller_table.coffee
View file

@ -176,7 +176,7 @@ 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.style.width = "#{@headerWidth[attribute.name]}px" attribute.width = "#{@headerWidth[attribute.name]}px"
headers.push attribute headers.push attribute
else else
# e.g. column: owner_id # e.g. column: owner_id
@ -184,7 +184,7 @@ 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.style.width = "#{@headerWidth[attribute.name]}px" attribute.width = "#{@headerWidth[attribute.name]}px"
headers.push attribute headers.push attribute
if @orderDirection && @orderBy if @orderDirection && @orderBy
@ -351,11 +351,11 @@ class App.ControllerTable extends App.Controller
if difference > 0 if difference > 0
# convert percentages to pixels # convert percentages to pixels
headers = _.map headers, (col) => headers = _.map headers, (col) =>
unit = col.style.width.match(/[px|%]+/)[0] unit = col.width.match(/[px|%]+/)[0]
if unit is '%' if unit is '%'
percentage = parseInt col.style.width, 10 percentage = parseInt col.width, 10
col.style.width = percentage / 100 * @el.width() + "px" col.width = percentage / 100 * @el.width() + "px"
return col return col
@ -365,15 +365,15 @@ class App.ControllerTable extends App.Controller
# 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.style.width, 10 value = parseInt col.width, 10
col.style.width = Math.max(@minColWidth, value - shrinkBy) + "px" 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 = @el.width() - @getHeaderWidths headers roundingLeftOver = @el.width() - @getHeaderWidths headers
# 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].style.width = parseInt(headers[headers.length - 1].style.width, 10) + roundingLeftOver + "px" headers[headers.length - 1].width = parseInt(headers[headers.length - 1].width, 10) + roundingLeftOver + "px"
return headers return headers
@ -384,9 +384,9 @@ class App.ControllerTable extends App.Controller
getHeaderWidths: (headers) -> getHeaderWidths: (headers) ->
widths = _.reduce headers, (memo, col, i) => widths = _.reduce headers, (memo, col, i) =>
if col.style && col.style.width if col.style && col.width
value = parseInt col.style.width, 10 value = parseInt col.width, 10
unit = col.style.width.match(/[px|%]+/)[0] unit = col.width.match(/[px|%]+/)[0]
else else
# !!! sets the width to default width if not set # !!! sets the width to default width if not set
headers[i].style = { width: @baseColWidth+'px' } headers[i].style = { width: @baseColWidth+'px' }
@ -423,9 +423,11 @@ class App.ControllerTable extends App.Controller
# use pixels while moving for max precision # use pixels while moving for max precision
difference = event.pageX - @resizeStartX difference = event.pageX - @resizeStartX
if @resizeLeftStartWidth + difference < @minColWidth or if @resizeLeftStartWidth + difference < @minColWidth
@resizeRightStartWidth - difference < @minColWidth difference = - (@resizeLeftStartWidth - @minColWidth)
return
if @resizeRightStartWidth - difference < @minColWidth
difference = @resizeRightStartWidth - @minColWidth
@resizeTargetLeft.width @resizeLeftStartWidth + difference @resizeTargetLeft.width @resizeLeftStartWidth + difference
@resizeTargetRight.width @resizeRightStartWidth - difference @resizeTargetRight.width @resizeRightStartWidth - difference

6
app/assets/javascripts/app/controllers/ticket_overview.coffee
View file

@ -266,10 +266,10 @@ class Table extends App.Controller
@el.find('.bulkAction').removeClass('hide') @el.find('.bulkAction').removeClass('hide')
callbackIconHeader = (headers) -> callbackIconHeader = (headers) ->
attribute = attribute =
name: 'icon' name: 'icon'
display: '' display: ''
translation: false translation: false
style: { width: '28px' } width: '28px'
unresizable: true unresizable: true
headers.unshift(0) headers.unshift(0)
headers[0] = attribute headers[0] = attribute

6
app/assets/javascripts/app/controllers/widget/ticket_list.coffee
View file

@ -22,10 +22,10 @@ class App.TicketList extends App.Controller
callbackIconHeader = (headers) -> callbackIconHeader = (headers) ->
attribute = attribute =
name: 'icon' name: 'icon'
display: '' display: ''
translation: false translation: false
style: { width: '28px' } width: '28px'
unresizable: true unresizable: true
headers.unshift(0) headers.unshift(0)
headers[0] = attribute headers[0] = attribute

30
app/assets/javascripts/app/models/ticket.coffee
View file

@ -3,26 +3,26 @@ class App.Ticket extends App.Model
@extend Spine.Model.Ajax @extend Spine.Model.Ajax
@url: @apiPath + '/tickets' @url: @apiPath + '/tickets'
@configure_attributes = [ @configure_attributes = [
{ name: 'number', display: '#', tag: 'input', type: 'text', limit: 100, null: true, readonly: 1, style: { 'width': '68px' } }, { name: 'number', display: '#', tag: 'input', type: 'text', limit: 100, null: true, readonly: 1, width: '68px' },
{ name: 'title', display: 'Title', tag: 'input', type: 'text', limit: 100, null: false }, { name: 'title', display: 'Title', tag: 'input', type: 'text', limit: 100, null: false },
{ name: 'customer_id', display: 'Customer', tag: 'input', type: 'text', limit: 100, null: false, autocapitalize: false, relation: 'User' }, { name: 'customer_id', display: 'Customer', tag: 'input', type: 'text', limit: 100, null: false, autocapitalize: false, relation: 'User' },
{ name: 'organization_id', display: 'Organization', tag: 'select', relation: 'Organization', readonly: 1 }, { name: 'organization_id', display: 'Organization', tag: 'select', relation: 'Organization', readonly: 1 },
{ name: 'group_id', display: 'Group', tag: 'select', multiple: false, limit: 100, null: false, relation: 'Group', style: { 'width': '10%' }, edit: true }, { name: 'group_id', display: 'Group', tag: 'select', multiple: false, limit: 100, null: false, relation: 'Group', width: '10%', edit: true },
{ name: 'owner_id', display: 'Owner', tag: 'select', multiple: false, limit: 100, null: true, relation: 'User', style: { 'width': '12%' }, edit: true }, { name: 'owner_id', display: 'Owner', tag: 'select', multiple: false, limit: 100, null: true, relation: 'User', width: '12%', edit: true },
{ name: 'state_id', display: 'State', tag: 'select', multiple: false, null: false, relation: 'TicketState', default: 'new', style: { 'width': '12%' }, edit: true, customer: true }, { name: 'state_id', display: 'State', tag: 'select', multiple: false, null: false, relation: 'TicketState', default: 'new', width: '12%', edit: true, customer: true },
{ name: 'pending_time', display: 'Pending Time', tag: 'datetime', null: true, style: { 'width': '130px' } }, { name: 'pending_time', display: 'Pending Time', tag: 'datetime', null: true, width: '130px' },
{ name: 'priority_id', display: 'Priority', tag: 'select', multiple: false, null: false, relation: 'TicketPriority', default: '2 normal', style: { 'width': '12%' }, edit: true, customer: true }, { name: 'priority_id', display: 'Priority', tag: 'select', multiple: false, null: false, relation: 'TicketPriority', default: '2 normal', width: '12%', edit: true, customer: true },
{ name: 'article_count', display: 'Article#', readonly: 1, style: { 'width': '12%' } }, { name: 'article_count', display: 'Article#', readonly: 1, width: '12%' },
{ name: 'escalation_time', display: 'Escalation', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' }, class: 'escalation' }, { name: 'escalation_time', display: 'Escalation', tag: 'datetime', null: true, readonly: 1, width: '130px', class: 'escalation' },
{ name: 'last_contact', display: 'Last contact', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' } }, { name: 'last_contact', display: 'Last contact', tag: 'datetime', null: true, readonly: 1, width: '130px' },
{ name: 'last_contact_agent', display: 'Last contact (Agent)', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' } }, { name: 'last_contact_agent', display: 'Last contact (Agent)', tag: 'datetime', null: true, readonly: 1, width: '130px' },
{ name: 'last_contact_customer', display: 'Last contact (Customer)', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' } }, { name: 'last_contact_customer', display: 'Last contact (Customer)', tag: 'datetime', null: true, readonly: 1, width: '130px' },
{ name: 'first_response', display: 'First response', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' } }, { name: 'first_response', display: 'First response', tag: 'datetime', null: true, readonly: 1, width: '130px' },
{ name: 'close_time', display: 'Close time', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' } }, { name: 'close_time', display: 'Close time', tag: 'datetime', null: true, readonly: 1, width: '130px' },
{ name: 'created_by_id', display: 'Created by', relation: 'User', readonly: 1 }, { name: 'created_by_id', display: 'Created by', relation: 'User', readonly: 1 },
{ name: 'created_at', display: 'Created at', tag: 'datetime', style: { 'width': '130px', 'text-align': 'right' }, readonly: 1 }, { name: 'created_at', display: 'Created at', tag: 'datetime', width: '130px', align: 'right', readonly: 1 },
{ name: 'updated_by_id', display: 'Updated by', relation: 'User', readonly: 1 }, { name: 'updated_by_id', display: 'Updated by', relation: 'User', readonly: 1 },
{ name: 'updated_at', display: 'Updated at', tag: 'datetime', style: { 'width': '130px', 'text-align': 'right' }, readonly: 1 }, { name: 'updated_at', display: 'Updated at', tag: 'datetime', width: '130px', align: 'right', readonly: 1 },
] ]
uiUrl: -> uiUrl: ->

13
app/assets/javascripts/app/views/generic/table.jst.eco
View file

@ -14,12 +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 <th class="<%= " #{ item.className }" if item.className %><%= " align-#{ item.align }" if item.align %>" style="width:<%= item.width %>" data-column-key="<%= item.name %>">
<%= " class='#{ item.className }'" if item.className %>
<% if item.style: %> style="<% for key, value of item.style: %>
<%= key %>: <%= value %>;
<% end %>"<% end %>
data-column-key="<%= item.name %>">
<div <% if @table_id: %>class="table-column-head js-sort"<% end %>> <div <% if @table_id: %>class="table-column-head js-sort"<% end %>>
<div class="table-column-title"> <div class="table-column-title">
<%- @T( item.display ) %> <%- @T( item.display ) %>
@ -30,7 +25,7 @@
<% end %> <% end %>
</div> </div>
</div> </div>
<% if @table_id && !item.unresizable && i < @header.length: %> <% if @table_id && !item.unresizable && i < @header.length - 1: %>
<div class="table-col-resize js-col-resize"></div> <div class="table-col-resize js-col-resize"></div>
<% end %> <% end %>
</th> </th>
@ -56,7 +51,7 @@
<% end %> <% end %>
<% end %> <% end %>
<% position++ %> <% position++ %>
<tr class="item<% if object.active is false: %> is-inactive<% end %>" data-id="<%= object.id %>" data-position="<%= position %>" > <tr class="item<%= ' is-inactive' if object.active is false %>" data-id="<%= object.id %>" data-position="<%= position %>" >
<% if @checkbox: %> <% if @checkbox: %>
<td class="no-padding"> <td class="no-padding">
<label class="checkbox-replacement"> <label class="checkbox-replacement">
@ -90,7 +85,7 @@
<% end %> <% end %>
<% end %> <% end %>
<td <% if item.parentClass: %>class="<%= item.parentClass %>"<% end %> <% if item.title: %>title="<%= item.title %>"<% end %>> <td<%- " class='#{ item.parentClass }'" if item.parentClass %><%- " title='#{ item.title }'" if item.title %><%- " style='text-align:#{ item.align }'" if item.align %>>
<% if item.name is 'icon': %> <% if item.name is 'icon': %>
<%- @Icon('task-state', item.class) %> <%- @Icon('task-state', item.class) %>
<% else: %> <% else: %>

9
app/assets/stylesheets/zammad.scss
View file

@ -707,6 +707,15 @@ table {
margin-left: auto; margin-left: auto;
} }
th.align-right {
.table-column-title {
margin-left: auto;
}
.table-column-sortIcon {
margin-left: 0;
}
}
.table > tbody > tr > td { .table > tbody > tr > td {
padding: 11px 10px 7px; padding: 11px 10px 7px;
border: none; border: none;