From aabfef0b2b44e42febb427d3b8704bfeee1d28a8 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Tue, 27 Oct 2015 10:57:23 +0100 Subject: [PATCH] fix resize, add align setting --- .../_application_controller_table.coffee | 30 ++++++++++--------- .../app/controllers/ticket_overview.coffee | 6 ++-- .../app/controllers/widget/ticket_list.coffee | 6 ++-- .../javascripts/app/models/ticket.coffee | 30 +++++++++---------- .../app/views/generic/table.jst.eco | 13 +++----- app/assets/stylesheets/zammad.scss | 9 ++++++ 6 files changed, 50 insertions(+), 44 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_application_controller_table.coffee b/app/assets/javascripts/app/controllers/_application_controller_table.coffee index 3c73e244d..446400866 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_table.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_table.coffee @@ -176,7 +176,7 @@ class App.ControllerTable extends App.Controller # e.g. column: owner headerFound = true if @headerWidth[attribute.name] - attribute.style.width = "#{@headerWidth[attribute.name]}px" + attribute.width = "#{@headerWidth[attribute.name]}px" headers.push attribute else # e.g. column: owner_id @@ -184,7 +184,7 @@ class App.ControllerTable extends App.Controller if attributeName is rowWithoutId headerFound = true if @headerWidth[attribute.name] - attribute.style.width = "#{@headerWidth[attribute.name]}px" + attribute.width = "#{@headerWidth[attribute.name]}px" headers.push attribute if @orderDirection && @orderBy @@ -351,11 +351,11 @@ class App.ControllerTable extends App.Controller if difference > 0 # convert percentages to pixels headers = _.map headers, (col) => - unit = col.style.width.match(/[px|%]+/)[0] + unit = col.width.match(/[px|%]+/)[0] if unit is '%' - percentage = parseInt col.style.width, 10 - col.style.width = percentage / 100 * @el.width() + "px" + percentage = parseInt col.width, 10 + col.width = percentage / 100 * @el.width() + "px" return col @@ -365,15 +365,15 @@ class App.ControllerTable extends App.Controller # make all cols evenly smaller headers = _.map headers, (col) => if !col.unresizable - value = parseInt col.style.width, 10 - col.style.width = Math.max(@minColWidth, value - shrinkBy) + "px" + value = parseInt col.width, 10 + col.width = Math.max(@minColWidth, value - shrinkBy) + "px" return col # give left-over space from rounding to last column to get to 100% 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) 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 @@ -384,9 +384,9 @@ class App.ControllerTable extends App.Controller getHeaderWidths: (headers) -> widths = _.reduce headers, (memo, col, i) => - if col.style && col.style.width - value = parseInt col.style.width, 10 - unit = col.style.width.match(/[px|%]+/)[0] + if col.style && 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].style = { width: @baseColWidth+'px' } @@ -423,9 +423,11 @@ class App.ControllerTable extends App.Controller # use pixels while moving for max precision difference = event.pageX - @resizeStartX - if @resizeLeftStartWidth + difference < @minColWidth or - @resizeRightStartWidth - difference < @minColWidth - return + if @resizeLeftStartWidth + difference < @minColWidth + difference = - (@resizeLeftStartWidth - @minColWidth) + + if @resizeRightStartWidth - difference < @minColWidth + difference = @resizeRightStartWidth - @minColWidth @resizeTargetLeft.width @resizeLeftStartWidth + difference @resizeTargetRight.width @resizeRightStartWidth - difference diff --git a/app/assets/javascripts/app/controllers/ticket_overview.coffee b/app/assets/javascripts/app/controllers/ticket_overview.coffee index bd189553c..c28498ca1 100644 --- a/app/assets/javascripts/app/controllers/ticket_overview.coffee +++ b/app/assets/javascripts/app/controllers/ticket_overview.coffee @@ -266,10 +266,10 @@ class Table extends App.Controller @el.find('.bulkAction').removeClass('hide') callbackIconHeader = (headers) -> attribute = - name: 'icon' - display: '' + name: 'icon' + display: '' translation: false - style: { width: '28px' } + width: '28px' 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 ba0bb0f0d..f2fad3fbe 100644 --- a/app/assets/javascripts/app/controllers/widget/ticket_list.coffee +++ b/app/assets/javascripts/app/controllers/widget/ticket_list.coffee @@ -22,10 +22,10 @@ class App.TicketList extends App.Controller callbackIconHeader = (headers) -> attribute = - name: 'icon' - display: '' + name: 'icon' + display: '' translation: false - style: { width: '28px' } + width: '28px' unresizable: true headers.unshift(0) headers[0] = attribute diff --git a/app/assets/javascripts/app/models/ticket.coffee b/app/assets/javascripts/app/models/ticket.coffee index 0beaea296..eacf64ebf 100644 --- a/app/assets/javascripts/app/models/ticket.coffee +++ b/app/assets/javascripts/app/models/ticket.coffee @@ -3,26 +3,26 @@ class App.Ticket extends App.Model @extend Spine.Model.Ajax @url: @apiPath + '/tickets' @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: '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: 'group_id', display: 'Group', tag: 'select', multiple: false, limit: 100, null: false, relation: 'Group', style: { '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: 'state_id', display: 'State', tag: 'select', multiple: false, null: false, relation: 'TicketState', default: 'new', style: { 'width': '12%' }, edit: true, customer: true }, - { name: 'pending_time', display: 'Pending Time', tag: 'datetime', null: true, style: { '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: 'article_count', display: 'Article#', readonly: 1, style: { 'width': '12%' } }, - { name: 'escalation_time', display: 'Escalation', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' }, class: 'escalation' }, - { name: 'last_contact', display: 'Last contact', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' } }, - { name: 'last_contact_agent', display: 'Last contact (Agent)', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' } }, - { name: 'last_contact_customer', display: 'Last contact (Customer)', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' } }, - { name: 'first_response', display: 'First response', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' } }, - { name: 'close_time', display: 'Close time', tag: 'datetime', null: true, readonly: 1, style: { 'width': '130px' } }, + { 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', width: '12%', edit: 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, width: '130px' }, + { 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, width: '12%' }, + { 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, 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, 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, width: '130px' }, { 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_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: -> diff --git a/app/assets/javascripts/app/views/generic/table.jst.eco b/app/assets/javascripts/app/views/generic/table.jst.eco index 92d0c8bb6..1255df7d9 100644 --- a/app/assets/javascripts/app/views/generic/table.jst.eco +++ b/app/assets/javascripts/app/views/generic/table.jst.eco @@ -14,12 +14,7 @@ <% end %> <% for item, i in @header: %> - - <% if item.style: %> style="<% for key, value of item.style: %> - <%= key %>: <%= value %>; - <% end %>"<% end %> - data-column-key="<%= item.name %>"> + <%= " align-#{ item.align }" if item.align %>" style="width:<%= item.width %>" data-column-key="<%= item.name %>">
class="table-column-head js-sort"<% end %>>
<%- @T( item.display ) %> @@ -30,7 +25,7 @@ <% end %>
- <% if @table_id && !item.unresizable && i < @header.length: %> + <% if @table_id && !item.unresizable && i < @header.length - 1: %>
<% end %> @@ -56,7 +51,7 @@ <% end %> <% end %> <% position++ %> - + <% if @checkbox: %>