Table: add no-side-padding class

used in priority column to make the column slimmer

app/assets/javascripts/app/controllers/_application_controller_table.coffee

@@ -90,11 +90,11 @@
 
 ###
 class App.ControllerTable extends App.Controller
-  minColWidth: 40
+  minColWidth: 30
   baseColWidth: 130
   minTableWidth: 612
 
-  checkBoxColWidth: 40
+  checkBoxColWidth: 30
   radioColWidth: 22
   sortableColWidth: 36
   destroyColWidth: 70

app/assets/javascripts/app/controllers/ticket_overview.coffee

@@ -1086,12 +1086,15 @@ class Table extends App.Controller
           show:       true
         )
         @navigate ticket.uiUrl()
+
       callbackTicketTitleAdd = (value, object, attribute, attributes) ->
         attribute.title = object.title
         value
+
       callbackLinkToTicket = (value, object, attribute, attributes) ->
         attribute.link = object.uiUrl()
         value
+
       callbackUserPopover = (value, object, attribute, attributes) ->
         return value if !object
         refObjectId = undefined
@@ -1104,6 +1107,7 @@ class Table extends App.Controller
         attribute.data =
           id: refObjectId
         value
+
       callbackOrganizationPopover = (value, object, attribute, attributes) ->
         return value if !object
         return value if !object.organization_id
@@ -1111,6 +1115,7 @@ class Table extends App.Controller
         attribute.data =
           id: object.organization_id
         value
+
       callbackCheckbox = (id, checked, e) =>
         if @shouldShowBulkForm()
           @bulkForm.render()
@@ -1136,6 +1141,7 @@ class Table extends App.Controller
           items.slice(startId+1, endId).find('[name="bulk"]').prop('checked', (-> !@checked))
 
         @lastChecked = e.currentTarget
+
       callbackIconHeader = (headers) ->
         attribute =
           name:         'icon'
@@ -1147,13 +1153,60 @@ class Table extends App.Controller
         headers.unshift(0)
         headers[0] = attribute
         headers
+
       callbackIcon = (value, object, attribute, header) ->
         value = ' '
-        attribute.class  = object.iconClass()
+        attribute.class = object.iconClass()
-        attribute.link   = ''
+        attribute.link  = ''
-        attribute.title  = object.iconTitle()
+        attribute.title = object.iconTitle()
         value
 
+      callbackPriority = (value, object, attribute, header) ->
+        value = ' '
+
+        if object.priority
+          attribute.title = object.priority()
+        else
+          attribute.title = App.i18n.translateInline(App.TicketPriority.findNative(@priority_id)?.displayName())
+        value = object.priorityIcon()
+
+      callbackIconPriorityHeader = (headers) ->
+        attribute =
+          name:         'icon_priority'
+          display:      ''
+          translation:  false
+          width:        '24px'
+          displayWidth: 24
+          unresizable:  true
+        headers.unshift(0)
+        headers[0] = attribute
+        headers
+
+      callbackIconPriority = (value, object, attribute, header) ->
+        value = ' '
+        priority = App.TicketPriority.findNative(object.priority_id)
+        attribute.title = App.i18n.translateInline(priority?.name)
+        value = object.priorityIcon()
+
+      callbackHeader = [ callbackIconHeader ]
+      callbackAttributes =
+        icon:
+          [ callbackIcon ]
+        customer_id:
+          [ callbackUserPopover ]
+        organization_id:
+          [ callbackOrganizationPopover ]
+        owner_id:
+          [ callbackUserPopover ]
+        title:
+          [ callbackLinkToTicket, callbackTicketTitleAdd ]
+        number:
+          [ callbackLinkToTicket, callbackTicketTitleAdd ]
+
+      if App.Config.get('ui_ticket_overview_priority_icon') == true
+        callbackHeader = [ callbackIconHeader, callbackIconPriorityHeader ]
+        callbackAttributes.icon_priority = [ callbackIconPriority ]
+
       tableArguments =
         tableId:        "ticket_overview_#{@overview.id}"
         overview:       @overview.view.s
@@ -1173,20 +1226,8 @@ class Table extends App.Controller
         #  customer_id:
         #    events:
         #      'mouseover': popOver
-        callbackHeader: [ callbackIconHeader ]
+        callbackHeader: callbackHeader
-        callbackAttributes:
+        callbackAttributes: callbackAttributes
-          icon:
-            [ callbackIcon ]
-          customer_id:
-            [ callbackUserPopover ]
-          organization_id:
-            [ callbackOrganizationPopover ]
-          owner_id:
-            [ callbackUserPopover ]
-          title:
-            [ callbackLinkToTicket, callbackTicketTitleAdd ]
-          number:
-            [ callbackLinkToTicket, callbackTicketTitleAdd ]
         bindCheckbox:
           events:
             'click': callbackCheckbox

app/assets/javascripts/app/controllers/widget/ticket_list.coffee

@@ -19,12 +19,15 @@ class App.TicketList extends App.Controller
     openTicket = (id,e) =>
       ticket = App.Ticket.findNative(id)
       @navigate ticket.uiUrl()
+
     callbackTicketTitleAdd = (value, object, attribute, attributes) ->
       attribute.title = object.title
       value
+
     callbackLinkToTicket = (value, object, attribute, attributes) ->
       attribute.link = object.uiUrl()
       value
+
     callbackUserPopover = (value, object, attribute, attributes) ->
       return value if !object
       refObjectId = undefined
@@ -37,6 +40,7 @@ class App.TicketList extends App.Controller
       attribute.data =
         id: refObjectId
       value
+
     callbackOrganizationPopover = (value, object, attribute, attributes) ->
       return value if !object
       return value if !object.organization_id
@@ -64,6 +68,43 @@ class App.TicketList extends App.Controller
       attribute.title  = object.iconTitle()
       value
 
+    callbackIconPriorityHeader = (headers) ->
+      attribute =
+        name:         'icon_priority'
+        display:      ''
+        translation:  false
+        width:        '22px'
+        displayWidth: 22
+        unresizable:  true
+      headers.unshift(0)
+      headers[0] = attribute
+      headers
+
+    callbackIconPriority = (value, object, attribute, header) ->
+      value = ' '
+      priority = App.TicketPriority.findNative(object.priority_id)
+      attribute.title = App.i18n.translateInline(priority?.name)
+      value = object.priorityIcon()
+
+    callbackHeader = [ callbackIconHeader ]
+    callbackAttributes =
+      icon:
+        [ callbackIcon ]
+      customer_id:
+        [ callbackUserPopover ]
+      organization_id:
+        [ callbackOrganizationPopover ]
+      owner_id:
+        [ callbackUserPopover ]
+      title:
+        [ callbackLinkToTicket, callbackTicketTitleAdd ]
+      number:
+        [ callbackLinkToTicket, callbackTicketTitleAdd ]
+
+    if App.Config.get('ui_ticket_overview_priority_icon') == true
+      callbackHeader = [ callbackIconHeader, callbackIconPriorityHeader ]
+      callbackAttributes.icon_priority = [ callbackIconPriority ]
+
     list = []
     for ticket_id in @ticket_ids
       ticketItem = App.Ticket.fullLocal(ticket_id)
@@ -78,20 +119,8 @@ class App.TicketList extends App.Controller
       #bindRow:
       #  events:
       #    'click': openTicket
-      callbackHeader: [ callbackIconHeader ]
+      callbackHeader: callbackHeader
-      callbackAttributes:
+      callbackAttributes: callbackAttributes
-        icon:
-          [ callbackIcon ]
-        customer_id:
-          [ callbackUserPopover ]
-        organization_id:
-          [ callbackOrganizationPopover ]
-        owner_id:
-          [ callbackUserPopover ]
-        title:
-          [ callbackLinkToTicket, callbackTicketTitleAdd ]
-        number:
-          [ callbackLinkToTicket, callbackTicketTitleAdd ]
       radio: @radio
     )
 

app/assets/javascripts/app/models/ticket.coffee

@@ -11,7 +11,7 @@ class App.Ticket extends App.Model
       { 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 till', 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: 'priority_id',              display: 'Priority',     tag: 'select',   multiple: false, null: false, relation: 'TicketPriority', default: '2 normal', width: '54px', edit: true, customer: true },
       { name: 'article_count',            display: 'Article#',     readonly: 1, width: '12%' },
       { name: 'time_unit',                display: 'Accounted Time',          readonly: 1, width: '12%' },
       { name: 'escalation_at',            display: 'Escalation',              tag: 'datetime', null: true, readonly: 1, width: '110px', class: 'escalation' },
@@ -29,6 +29,22 @@ class App.Ticket extends App.Model
   uiUrl: ->
     "#ticket/zoom/#{@id}"
 
+  priorityIcon: ->
+    priority = App.TicketPriority.findNative(@priority_id)
+    return '' if !priority
+    return '' if !priority.ui_icon
+    return '' if !priority.ui_color
+    App.Utils.icon(priority.ui_icon, "u-#{priority.ui_color}-color")
+
+  priorityClass: ->
+    priority = App.TicketPriority.findNative(@priority_id)
+    return '' if !priority
+    return '' if !priority.ui_color
+    "item--#{priority.ui_color}"
+
+  rowClass: ->
+    @priorityClass()
+
   getState: ->
     type = App.TicketState.findNative(@state_id)
     stateType = App.TicketStateType.findNative(type.state_type_id)

app/assets/javascripts/app/views/generic/table.jst.eco

@@ -6,7 +6,7 @@
       <th style="width: 36px" class="table-draggable"></th>
     <% end %>
     <% if @checkbox: %>
-      <th style="width: 40px" class="table-checkbox">
+      <th style="width: 30px" class="table-checkbox">
         <label class="checkbox-replacement">
           <input type="checkbox" value="" name="bulk_all">
           <%- @Icon('checkbox', 'icon-unchecked') %>
@@ -16,7 +16,7 @@
       </th>
     <% end %>
     <% if @radio: %>
-      <th style="width: 40px" class="table-radio"></th>
+      <th style="width: 30px" class="table-radio"></th>
     <% end %>
     <% for header, i in @headers: %>
       <th class="js-tableHead<% if header.className: %> <%= header.className %><% end %><% if header.align: %> align-<%= header.align %><% end %>" style="<% if header.displayWidth: %>width:<%= header.displayWidth %>px<% end %>" data-column-key="<%= header.name %>">

app/assets/javascripts/app/views/generic/table_row.jst.eco

@@ -1,4 +1,4 @@
-<tr class="item<%= ' is-inactive' if @object.active is false %>" data-id="<%= @object.id %>">
+<tr class="item<%= ' is-inactive' if @object.active is false %><%= ' '+ @object.rowClass() if @object.rowClass %>" data-id="<%= @object.id %>">
 <% if @sortable: %>
   <td class="table-draggable"><%- @Icon('draggable') %></td>
 <% end %>

app/assets/stylesheets/bootstrap.css

@@ -4055,10 +4055,7 @@ button.close {
           transform: translate(0, -25%);
 }
 .modal.in .modal-dialog {
-  -webkit-transform: translate(0, 0);
+  transform: none;
-      -ms-transform: translate(0, 0);
-       -o-transform: translate(0, 0);
-          transform: translate(0, 0);
 }
 .modal-open .modal {
   overflow-x: hidden;

app/assets/stylesheets/zammad.scss

@@ -9,6 +9,9 @@ $task-state-pending-color: hsl(206,7%,28%);
 $task-state-open-color: $ok-color;
 $task-state-escalating-color: $superbad-color;
 
+$high-priority-color: hsl(360,71%,60%);
+$low-priority-color: hsl(200,68%,73%);
+
 $minWidth: 1024px;
 $sidebarWidth: 280px;
 $navigationWidth: 260px;
@@ -244,6 +247,14 @@ ol, ul {
   z-index: 1000;
 }
 
+.u-high-priority-color {
+  fill: $high-priority-color;
+}
+
+.u-low-priority-color {
+  fill: $low-priority-color;
+}
+
 .clickCatcher {
   top: 0;
   left: 0;
@@ -1004,10 +1015,16 @@ th.align-right {
 .table > tbody > tr > td {
   padding: 10px 10px 8px;
   border-color: hsl(0,0%,95%);
+  
+  &.no-side-padding {
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+  }
 }
 
-.table-hover > tbody > tr:hover > td,
+.table-hover > tbody > tr:hover,
-.table-hover > tbody > tr.is-hover > td {
+.table-hover > tbody > tr.is-hover {
   background: white;
 }
 
@@ -1057,11 +1074,11 @@ th.align-right {
   }
 }
 
-.table .icon {
+td .icon {
   vertical-align: middle;
 }
 
-.table .icon-draggable {
+td .icon-draggable {
   fill: hsl(240,1%,77%);
 }
 
@@ -1080,6 +1097,32 @@ th.align-right {
   vertical-align: middle;
 }
 
+.item {
+  &--high-priority {
+    a {
+      color: $high-priority-color;
+    }
+  }
+
+  &--low-priority {
+    a {
+      color: $low-priority-color;
+    }
+  }
+}
+
+.checkbox-list {
+  list-style: none;
+  margin-bottom: 15px;
+  padding: 3px 12px;
+  font-size: 14px;
+  line-height: 25px;
+  color: hsl(60,1%,34%);
+  background: white;
+  border: 1px solid hsl(0, 0%, 90%);
+  border-radius: 3px;
+}
+
 .checkbox-replacement,
 .radio-replacement {
   padding: 0;
@@ -3374,11 +3417,6 @@ footer {
       opacity: 1;
     }
 
-.icon-task-state {
-  margin-top: 1px;
-  display: block;
-}
-
 .nav-tab-icon .icon-task-state {
   margin: 0;
 }

db/migrate/20120101000010_create_ticket.rb

@@ -34,6 +34,8 @@ class CreateTicket < ActiveRecord::Migration[4.2]
     create_table :ticket_priorities do |t|
       t.column :name,                 :string, limit: 250, null: false
       t.column :default_create,       :boolean,            null: false, default: false
+      t.column :ui_icon,              :string, limit: 100, null: true
+      t.column :ui_color,             :string, limit: 100, null: true
       t.column :note,                 :string, limit: 250, null: true
       t.column :active,               :boolean,            null: false, default: true
       t.column :updated_by_id,        :integer,            null: false

db/migrate/20190409000001_setting_ticket_overview_priority_icon_and_color.rb

@@ -0,0 +1,44 @@
+class SettingTicketOverviewPriorityIconAndColor < ActiveRecord::Migration[5.1]
+  def change
+    Setting.create_if_not_exists(
+      title:       'Priority Icons in Overviews',
+      name:        'ui_ticket_overview_priority_icon',
+      area:        'UI::TicketOverview::PriorityIcons',
+      description: 'Enables priority icons in ticket overviews.',
+      options:     {
+        form: [
+          {
+            display:   '',
+            null:      true,
+            name:      'ui_ticket_overview_priority_icon',
+            tag:       'boolean',
+            translate: true,
+            options:   {
+              true  => 'yes',
+              false => 'no',
+            },
+          },
+        ],
+      },
+      state:       false,
+      preferences: {
+        prio:       500,
+        permission: ['admin.ui'],
+      },
+      frontend:    true
+    )
+
+    if ActiveRecord::Base.connection.columns('ticket_priorities').map(&:name).exclude?('ui_icon')
+      add_column :ticket_priorities, :ui_icon, :string, limit: 100, null: true
+    end
+    if ActiveRecord::Base.connection.columns('ticket_priorities').map(&:name).exclude?('ui_color')
+      add_column :ticket_priorities, :ui_color, :string, limit: 100, null: true
+    end
+    Ticket::Priority.reset_column_information
+
+    priority = Ticket::Priority.find_by(name: '1 low')
+    priority&.update!(ui_icon: 'low-priority', ui_color: 'low-priority')
+    priority = Ticket::Priority.find_by(name: '3 high')
+    priority&.update!(ui_icon: 'important', ui_color: 'high-priority')
+  end
+end

db/seeds/settings.rb

@@ -953,6 +953,34 @@ Setting.create_if_not_exists(
   frontend:    true
 )
 
+Setting.create_if_not_exists(
+  title:       'Priority Icons in Overviews',
+  name:        'ui_ticket_overview_priority_icon',
+  area:        'UI::TicketOverview::PriorityIcons',
+  description: 'Enables priority icons in ticket overviews.',
+  options:     {
+    form: [
+      {
+        display:   '',
+        null:      true,
+        name:      'ui_ticket_overview_priority_icon',
+        tag:       'boolean',
+        translate: true,
+        options:   {
+          true  => 'yes',
+          false => 'no',
+        },
+      },
+    ],
+  },
+  state:       false,
+  preferences: {
+    prio:       500,
+    permission: ['admin.ui'],
+  },
+  frontend:    true
+)
+
 Setting.create_if_not_exists(
   title:       'New User Accounts',
   name:        'user_create_account',

db/seeds/ticket_priorities.rb

@@ -1,3 +1,3 @@
-Ticket::Priority.create_if_not_exists(id: 1, name: '1 low')
+Ticket::Priority.create_if_not_exists(id: 1, name: '1 low', ui_icon: 'low-priority', ui_color: 'low-priority')
 Ticket::Priority.create_if_not_exists(id: 2, name: '2 normal', default_create: true)
-Ticket::Priority.create_if_not_exists(id: 3, name: '3 high')
+Ticket::Priority.create_if_not_exists(id: 3, name: '3 high', ui_icon: 'important', ui_color: 'high-priority')

public/assets/images/icons.svg

@@ -302,7 +302,7 @@
     <title>
         important
     </title>
-    <path d="M7.999 1a.963.963 0 0 0-.967 1.002l.274 8.447c.018.554.48 1.003 1.031 1.003h.326a1.04 1.04 0 0 0 1.03-1.003l.275-8.447A.96.96 0 0 0 9 1H7.999zM8.5 15.4a1.394 1.394 0 1 0 0-2.787 1.394 1.394 0 0 0 0 2.787z" fill-rule="evenodd"/>
+    <path d="M7.471 1h1.058c.551 0 .989.449.97 1.002l-.28 8.447a1.039 1.039 0 0 1-1.025 1.003h-.388a1.047 1.047 0 0 1-1.026-1.003L6.5 2.002A.964.964 0 0 1 7.472 1zm.534 14.403a1.395 1.395 0 1 1 0-2.79 1.395 1.395 0 0 1 0 2.79z" fill-rule="evenodd"/>
 </symbol><symbol id="icon-in-process" viewBox="0 0 64 64">
     <title>
         in-process

public/assets/images/icons/important.svg

@@ -1,12 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 40.2 (33826) - http://www.bohemiancoding.com/sketch -->
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
     <title>important</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="important" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="important" fill="#50E3C2">
+        <path d="M7.47104725,1 L8.52894658,1 C9.08033812,1 9.51777138,1.44867541 9.49944462,2.00214458 L9.21973243,10.4494683 C9.20141948,11.0025202 8.74211962,11.4516129 8.19388832,11.4516129 L7.8061031,11.4516129 C7.27100131,11.4516129 6.79858586,11.0029375 6.78025923,10.4494683 L6.50054898,2.00214458 C6.48223616,1.44909274 6.91672922,1 7.47104725,1 Z M8.00500011,15.4029032 C7.2345629,15.4029032 6.61000013,14.7783404 6.61000013,14.0079032 C6.61000013,13.237466 7.2345629,12.6129032 8.00500011,12.6129032 C8.77543733,12.6129032 9.4000001,13.237466 9.4000001,14.0079032 C9.4000001,14.7783404 8.77543733,15.4029032 8.00500011,15.4029032 Z" id="Path-321" fill="#50E3C2"></path>
-            <path d="M7.99895659,1 C7.4472481,1 7.01455388,1.44909274 7.0324768,2.00214458 L7.30623174,10.4494683 C7.32416819,11.0029375 7.78652545,11.4516129 8.33717084,11.4516129 L8.66282687,11.4516129 C9.21426237,11.4516129 9.67584315,11.0025202 9.6937662,10.4494683 L9.96752305,2.00214458 C9.98545961,1.44867541 9.55733973,1 9.00104349,1 L7.99895659,1 Z M8.49999914,15.4000001 C9.26963469,15.4000001 9.89354758,14.7760872 9.89354758,14.0064517 C9.89354758,13.2368161 9.26963469,12.6129032 8.49999914,12.6129032 C7.73036359,12.6129032 7.1064507,13.2368161 7.1064507,14.0064517 C7.1064507,14.7760872 7.73036359,15.4000001 8.49999914,15.4000001 Z" id="Path-321"></path>
-        </g>
     </g>
 </svg>