From f4c411db193939a64336b01c414fb3073c753278 Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Tue, 3 Jan 2017 11:29:37 +0100
Subject: [PATCH] Do timestamp update of task on task shown.

---
 .../_application_controller.coffee            |  30 +-
 .../app/lib/app_post/task_manager.coffee      |   5 +
 app/assets/stylesheets/zammad.scss            | 292 +++++++++---------
 3 files changed, 165 insertions(+), 162 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/_application_controller.coffee b/app/assets/javascripts/app/controllers/_application_controller.coffee
index c2d0ce794..e0b036df7 100644
--- a/app/assets/javascripts/app/controllers/_application_controller.coffee
+++ b/app/assets/javascripts/app/controllers/_application_controller.coffee
@@ -259,14 +259,16 @@ class App.Controller extends Spine.Controller
 
   frontendTimeUpdate: =>
     update = =>
-      ui = @
-      $('.humanTimeFromNow').each( ->
-        item = $(@)
-        currentVal = item.text()
-        ui.frontendTimeUpdateItem(item, currentVal)
-      )
+      @frontendTimeUpdateElement($('.humanTimeFromNow'))
     App.Interval.set(update, 61000, 'frontendTimeUpdate', 'ui')
 
+  frontendTimeUpdateElement: (el) =>
+    ui = @
+    el.find('.humanTimeFromNow').each( ->
+      item = $(@)
+      ui.frontendTimeUpdateItem(item, item.text())
+    )
+
   frontendTimeUpdateItem: (item, currentVal) =>
     timestamp = item.data('time')
     time      = @humanTime(timestamp, item.hasClass('escalation'))
@@ -305,13 +307,11 @@ class App.Controller extends Spine.Controller
       content: ->
         ticketId = $(@).data('id')
         ticket   = App.Ticket.fullLocal(ticketId)
-        html = App.view('popover/ticket')(
+        html = $(App.view('popover/ticket')(
           ticket: ticket
-        )
-        html = $(html)
+        ))
         html.find('.humanTimeFromNow').each(->
-          item = $(@)
-          ui.frontendTimeUpdateItem(item)
+          ui.frontendTimeUpdateItem($(@))
         )
         html
     )
@@ -464,13 +464,11 @@ class App.Controller extends Spine.Controller
               tickets.push App.Ticket.fullLocal(ticketId)
 
           # insert data
-          html = App.view('popover/user_ticket_list')(
+          html = $(App.view('popover/user_ticket_list')(
             tickets: tickets
-          )
-          html = $(html )
+          ))
           html.find('.humanTimeFromNow').each( ->
-            item = $(@)
-            ui.frontendTimeUpdateItem(item)
+            ui.frontendTimeUpdateItem($(@))
           )
           html
       )
diff --git a/app/assets/javascripts/app/lib/app_post/task_manager.coffee b/app/assets/javascripts/app/lib/app_post/task_manager.coffee
index 3a8f33a84..9b1716311 100644
--- a/app/assets/javascripts/app/lib/app_post/task_manager.coffee
+++ b/app/assets/javascripts/app/lib/app_post/task_manager.coffee
@@ -290,6 +290,11 @@ class _taskManagerSingleton extends App.Controller
     domKey = @domID(key)
     domStoreItem = @domStore[domKey]
     if !@$("##{domKey}").get(0) && domStoreItem && domStoreItem.el
+
+      # update shown times
+      @frontendTimeUpdateElement(domStoreItem.el)
+
+      # append to dom
       @el.append(domStoreItem.el)
       @$("##{domKey}").removeClass('hide').addClass('active')
 
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index c7bb063e5..1a3807e01 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -1299,7 +1299,7 @@ label,
 fieldset {
   margin: 0 -4px;
   @extend .clearfix;
-  
+
   h2 {
     margin-left: 4px;
     margin-right: 4px;
@@ -1816,7 +1816,7 @@ input.has-error {
     appearance: textfield;
     border-radius: 19px;
     padding: 0 17px 0 42px;
-    
+
     &.is-empty + .empty-search {
       visibility: hidden;
     }
@@ -1831,7 +1831,7 @@ input.has-error {
     height: 41px;
     width: 50px;
     visibility: visible;
-    
+
     .icon {
       position: static;
       opacity: 0.5;
@@ -3092,7 +3092,7 @@ footer {
   .nav-tab-icon .icon.icon-loading {
     animation: rotateplane 1.2s infinite ease-in-out;
     fill: $supergood-color;
-    
+
     /*
       Safari font rendering bugfix while animating
       http://stackoverflow.com/questions/9733011/safari-changing-font-weights-when-unrelated-animations-are-running
@@ -3511,7 +3511,7 @@ footer {
   &.size-50 {
     width: 50px;
     height: 50px;
-      
+
     .icon-crown {
       width: 36px;
       margin-left: -18px;
@@ -3522,7 +3522,7 @@ footer {
   &.size-80 {
     width: 82px;
     height: 82px;
-      
+
     .icon-crown {
       width: 64px;
       margin-left: -32px;
@@ -3541,7 +3541,7 @@ footer {
     text-transform: uppercase;
     text-shadow: 0 1px rgba(0,0,0,.2);
     cursor: default;
-    
+
     &.size-30 {
       font-size: 10px;
       line-height: 32px;
@@ -3810,11 +3810,11 @@ footer {
     position: absolute;
     flex-direction: column;
     @extend .zIndex-5;
-    
+
     &.is-visible {
       display: flex;
     }
-    
+
     &.is-empty .popover-notificationsHeader {
       box-shadow: none;
     }
@@ -3837,7 +3837,7 @@ footer {
         0 2px hsla(240,4%,95%,.2);
       padding-bottom: 14px;
       flex-shrink: 0;
-      
+
       .btn {
         padding-top: 3px;
         padding-bottom: 5px;
@@ -3951,7 +3951,7 @@ footer {
   }
 
   .dashboard .stat-widget {
-    margin: 7px; 
+    margin: 7px;
     background: white;
     border: 1px solid #e5f0f5;
     border-radius: 1px;
@@ -4156,7 +4156,7 @@ footer {
     color: #444a4f;
     flex: 1;
     min-width: 0; /* Firefox wrong content-calculation with word-wrap workaround */
-    
+
     &:hover .activity-text {
       text-decoration: underline;
     }
@@ -4175,7 +4175,7 @@ footer {
     cursor: pointer;
     padding-left: 10px;
     padding-right: 27px;
-    
+
     .activity-remove-icon-holder {
       width: 19px;
       height: 19px;
@@ -4185,7 +4185,7 @@ footer {
       justify-content: center;
       background: hsl(0,0%,80%);
     }
-    
+
     .icon {
       fill: white;
       width: 9px;
@@ -4328,8 +4328,8 @@ footer {
 
 .ticketZoom {
   background: #f8f9fa;
-  /* 
-    force ticket zoom to show scrollbars 
+  /*
+    force ticket zoom to show scrollbars
     because we offset the tabs bar when the os shows scrollbars
   */
   min-height: 101%;
@@ -4487,7 +4487,7 @@ footer {
     border: 1px solid hsl(240,4%,95%);
     box-shadow: 0 0 1px rgba(0,0,0,.06) inset;
     position: relative;
-    
+
     /* email css reset */
     p {
       margin: 0;
@@ -4738,7 +4738,7 @@ footer {
     justify-content: center;
     border-radius: 4px;
     box-shadow: 0 1px 7px rgba(0,8,14,.13);
-    
+
     &.is-hidden {
       display: none;
     }
@@ -4897,7 +4897,7 @@ footer {
       visibility: hidden;
     }
 
-    .recipient-list input::placeholder { 
+    .recipient-list input::placeholder {
       color: #666;
     }
 
@@ -5070,7 +5070,7 @@ footer {
     align-content: stretch;
     position: relative;
     margin: 0 20px;
-    
+
     + hr {
       margin-top: 0;
     }
@@ -5089,12 +5089,12 @@ footer {
     margin-right: 5px;
     display: flex;
     align-items: center;
-    
+
     .dropdown {
       flex: 1;
       position: static;
     }
-    
+
     .dropdown-toggle {
       padding-top: 38px;
       padding-bottom: 24px;
@@ -5108,7 +5108,7 @@ footer {
     display: flex;
     align-items: center;
     justify-content: center;
-    
+
     .icon {
       fill: black;
     }
@@ -5119,7 +5119,7 @@ footer {
   }
 
   .sidebar.bottom-form-shadow {
-    box-shadow: 
+    box-shadow:
       0 -1px rgba(0,0,0,.005) inset,
       0 -2px rgba(0,0,0,.005) inset,
       0 -3px rgba(0,0,0,.005) inset,
@@ -5276,7 +5276,7 @@ footer {
     justify-content: center;
     align-self: stretch;
     @extend .u-clickable;
-    
+
     .icon {
       width: 9px;
       height: 9px;
@@ -5305,7 +5305,7 @@ footer {
   padding: 10px;
   display: flex;
   justify-content: flex-end;
-  
+
   &.is-closed {
     margin-bottom: -60px;
   }
@@ -5330,13 +5330,13 @@ footer {
   display: flex;
   padding: 0;
   height: 100%;
-  
+
   & > .icon {
     position: absolute;
     top: 50%;
     transform: translateY(-50%) translateX(-50%);
   }
-  
+
   & > .box {
     width: calc(50% - 47px);
     margin: 34px;
@@ -5424,7 +5424,7 @@ footer {
     background: hsl(47,100%,93%);
     border-color: hsl(47,100%,75%);
     color: hsl(47,20%,67%);
-    
+
     h1, h2 {
       color: hsl(47,3%,28%);
     }
@@ -5446,7 +5446,7 @@ footer {
     display: flex;
     align-items: center;
     justify-content: center;
-    
+
     progress {
       width: 100%;
     }
@@ -5504,7 +5504,7 @@ footer {
   cursor: default;
 }
 
-  /* 
+  /*
     selector needs to be stronger than .token-input
     in order to override input[type=text]
   */
@@ -5519,7 +5519,7 @@ footer {
     box-shadow: none;
     outline: none;
     flex: 1;
-    
+
     &:focus {
       box-shadow: none;
     }
@@ -5642,7 +5642,7 @@ footer {
   td .list {
     margin-top: -4px;
   }
-  
+
   .switchView {
     visibility: hidden;
     display: block;
@@ -5742,7 +5742,7 @@ footer {
 
   .modal-body {
     padding: 0 23px;
-    
+
     h2:first-child {
       margin-top: 0;
     }
@@ -5751,7 +5751,7 @@ footer {
     .alert.hidden:first-child + p {
       margin-top: 0;
     }
-    
+
     .table > thead > tr > th {
       background: hsl(197,20%,93%);
     }
@@ -5774,7 +5774,7 @@ footer {
 .modal.modal--local {
   display: block;
   padding-left: 40px;
-  
+
   .modal-backdrop {
     background: hsla(210,17%,93%,.55);
     opacity: 1;
@@ -5835,7 +5835,7 @@ footer {
 
   .dropdown-menu.dropdown-menu--light > li {
     color: hsl(202,70%,49%);
-    
+
     &.dropdown-header {
       color: hsl(198,19%,72%);
     }
@@ -5865,7 +5865,7 @@ footer {
     padding: 0 15px;
     cursor: pointer;
     white-space: nowrap;
-    
+
     &:focus {
       outline: none;
     }
@@ -5930,11 +5930,11 @@ footer {
       margin-left: auto;
       justify-content: flex-end;
       opacity: 0;
-      
+
       .icon {
         fill: white;
       }
-      
+
       &.is-selected {
         opacity: 1;
       }
@@ -6033,7 +6033,7 @@ footer {
     @extend .u-clickable;
     padding: 0 10px !important;
     background: hsl(206,7%,28%);
-    
+
     & + li {
       box-shadow: 0 1px rgba(255,255,255,.13) inset;
     }
@@ -6064,12 +6064,12 @@ footer {
     margin: 10px 0;
     display: flex;
     align-items: center;
-    
+
     &:last-child {
       margin-bottom: 0;
     }
   }
-  
+
   .userList-name {
     @extend .u-textTruncate;
     margin-left: 7px;
@@ -6141,11 +6141,11 @@ footer {
   margin-left: -1px;
   background: white;
   position: relative;
-  
+
   &:first-child {
     border-radius: 7px 0 0 7px;
   }
-  
+
   &:last-child {
     border-radius: 0 7px 7px 0;
   }
@@ -6153,7 +6153,7 @@ footer {
   &:only-child {
     border-radius: 7px;
   }
-  
+
   &.active {
     color: white;
     background: hsl(206,7%,28%);
@@ -6257,7 +6257,7 @@ footer {
 .wizard-body {
   flex: 1;
   padding-bottom: 15px;
-  
+
   .form-control {
     min-width: 0;
   }
@@ -6481,7 +6481,7 @@ label + .wizard-buttonList {
   border-top: none;
   border-bottom: none;
   position: relative;
-  
+
   [data-toggle=dropdown] {
     position: relative;
   }
@@ -6618,7 +6618,7 @@ label + .wizard-buttonList {
   padding: 60px;
   overflow: auto;
   flex: 1;
-  
+
   h1 {
     margin: 18px 0 0;
   }
@@ -6639,7 +6639,7 @@ label + .wizard-buttonList {
 
 .profile-section {
   padding: 20px 50px;
-  
+
   &.profile-memberSection {
     margin-bottom: 10px;
   }
@@ -6651,14 +6651,14 @@ label + .wizard-buttonList {
 
 .profile-action {
   margin-right: -20px;
-  
+
   .dropdown-toggle {
     margin-top: -20px;
     margin-right: -30px;
     margin-bottom: 8px;
     padding: 26px 40px 2px;
   }
-  
+
   label {
     margin: 0 8px;
     padding: 0;
@@ -6679,7 +6679,7 @@ label + .wizard-buttonList {
   flex: 1;
   margin: 8px 0 22px;
   color: hsl(209,28%,74%);
-  
+
   .stat-icon {
     margin-bottom: 10px;
   }
@@ -6701,7 +6701,7 @@ label + .wizard-buttonList {
   @extend .profile-detailsEntry;
   display: flex;
   align-items: center;
-  
+
   .avatar {
     margin-right: 10px;
   }
@@ -6729,7 +6729,7 @@ label + .wizard-buttonList {
 
 .profile .frequency.stat-widget {
   height: 230px;
-  
+
   .stat-bars {
     height: 100px;
   }
@@ -6744,7 +6744,7 @@ label + .wizard-buttonList {
   background: hsl(0,0%,87%);
   border-radius: 100%;
   opacity: 0.4;
-  
+
   svg {
     width: 32px;
     height: 32px;
@@ -6801,12 +6801,12 @@ label + .wizard-buttonList {
 
 .empty-space {
   padding: 50px;
-  
+
   svg {
     width: 200px;
     height: auto;
   }
-  
+
   .empty-space-tagline {
     color: hsl(198, 19%, 72%);
     margin-top: 15px;
@@ -6824,11 +6824,11 @@ label + .wizard-buttonList {
   background: hsl(197,20%,93%);
   padding: 7px;
   border: 1px solid hsl(198,19%,86%);
-  
+
   &:first-child {
     border-radius: 4px 4px 0 0;
   }
-  
+
   &:last-child {
     border-radius: 0 0 4px 4px;
   }
@@ -6836,17 +6836,17 @@ label + .wizard-buttonList {
   &:only-child {
     border-radius: 4px;
   }
-  
+
   & + .horizontal-filter {
     border-top: none;
   }
-  
+
   .horizontal-filter-body {
     display: flex;
     align-items: center;
     flex: 1;
   }
-  
+
   .controls,
   input {
     margin-right: 5px;
@@ -6857,11 +6857,11 @@ label + .wizard-buttonList {
     margin-right: 5px;
   }
 
-  select, 
+  select,
   input {
     border-color: hsl(198,19%,86%);
   }
-  
+
   input[type=text] {
     width: auto;
   }
@@ -6897,7 +6897,7 @@ output {
   display: inline-block;
   padding: 10px 12px 8px;
   background: hsl(201,62%,93%);
-  
+
   &[disabled] {
     border-color: hsl(358,53%,56%);
     background: hsl(358,53%,76%);
@@ -6909,7 +6909,7 @@ output {
   width: 50px;
   height: 30px;
   border-radius: 15px;
-  
+
   &.zammad-switch--small {
     width: 40px;
     height: 24px;
@@ -6955,7 +6955,7 @@ output {
     border-radius: inherit;
     left: 1px;
     top: 1px;
-    box-shadow: 
+    box-shadow:
       0 0 0 1px rgba(0,0,0,.05),
       0 1px 3px rgba(0,0,0,.2);
     background: white;
@@ -7003,10 +7003,10 @@ output {
   border-radius: 100%;
   background: white;
   cursor: pointer;
-  
+
   &:hover:not(.is-disabled) {
     border-color: hsl(198,19%,83%);
-    
+
     .icon {
       fill: black;
     }
@@ -7016,11 +7016,11 @@ output {
     cursor: not-allowed;
     opacity: 0.5;
   }
-  
+
   &:not(:last-child) {
     margin-right: 7px;
   }
-  
+
   .icon {
     fill: hsl(0,0%,61%);
   }
@@ -7040,9 +7040,9 @@ output {
 .form-group.day-time {
   padding: 10px 5px 6px;
   margin: 0;
-  
+
   label {
-    text-align: center; 
+    text-align: center;
   }
 
   .form-control {
@@ -7067,7 +7067,7 @@ output {
 
   &.is-invalid {
     border-radius: 3px;
-    box-shadow: 
+    box-shadow:
       0 0 0 2px white,
       0 0 0 4px hsl(0,90%,70%);
   }
@@ -7075,11 +7075,11 @@ output {
   &.settings-list--fixed {
     table-layout: fixed;
   }
-  
+
   &.settings-list--stretch {
     width: 100%;
   }
-  
+
   &:not(:last-child) {
     margin-bottom: 34px;
   }
@@ -7106,13 +7106,13 @@ output {
       height: 40px;
     }
   }
-  
+
   th, td {
     vertical-align: top;
     padding: 10px;
     border: 1px solid hsl(198,18%,86%);
   }
-  
+
   th {
     font-weight: normal;
     text-transform: uppercase;
@@ -7161,7 +7161,7 @@ output {
     color: hsl(199,19%,80%);
     text-decoration: line-through;
   }
-  
+
   & > thead > tr > th:first-child {
     border-top-left-radius: 4px;
   }
@@ -7245,7 +7245,7 @@ output {
   border-right: 1px solid hsl(198,18%,86%);
   border-bottom: 1px solid hsl(198,18%,86%);
   border-radius: 3px 3px 0 0;
-  
+
   &.select-box--vertical .select-value {
     flex-basis: 100%;
   }
@@ -7257,7 +7257,7 @@ output {
   &.select-box--six .select-value {
     flex-basis: calc(100%/6);
   }
-  
+
   .select-box-header {
     @extend label;
     margin: 0;
@@ -7279,30 +7279,30 @@ output {
     justify-content: center;
     min-height: 34px;
     background-clip: content-box;
-    box-shadow: 
+    box-shadow:
       1px 0 hsl(198,18%,86%) inset,
       0 1px hsl(198,18%,86%) inset;
     cursor: pointer;
-    
+
     &.is-selected {
       background-color: $highlight-color;
       box-shadow: none;
       color: white;
     }
   }
-  
+
   &:first-child {
-    margin-left: 0; 
+    margin-left: 0;
   }
-  
+
   &:last-child {
-    margin-right: 0; 
+    margin-right: 0;
   }
 }
 
 .searchableSelect {
   position: relative;
-  
+
   .form-control {
     padding-right: 37px;
   }
@@ -7310,7 +7310,7 @@ output {
   .searchableSelect-main {
     position: relative;
   }
-  
+
   .searchableSelect-shadow {
     display: none;
   }
@@ -7318,7 +7318,7 @@ output {
   .dropdown-menu {
     margin-top: -3px;
   }
-  
+
   &.dropdown li:hover:not(.is-active) {
     background: none;
   }
@@ -7490,7 +7490,7 @@ output {
   position: absolute;
   min-width: 0;
   cursor: default;
-  
+
   .datepicker-switch {
     padding: 12px 0;
     font-weight: bold;
@@ -7500,7 +7500,7 @@ output {
     letter-spacing: 0;
     line-height: 1.5;
     text-transform: none;
-    
+
     &:hover {
       background: hsl(240,10%,14%);
     }
@@ -7520,18 +7520,18 @@ output {
     padding: 12px 9px 0;
     vertical-align: top;
     text-align: center;
-    
+
     .icon {
       margin-top: 4px;
       fill: white;
       opacity: 1;
     }
-    
+
     &:hover {
       background: hsl(240,10%,14%);
     }
   }
-  
+
   .dow {
     text-transform: uppercase;
     font-size: 12px;
@@ -7553,15 +7553,15 @@ output {
     margin: 1%;
     padding: 5px 0;
   }
-  
+
   .day, .month, .year {
     text-align: center;
     font-size: 15px;
-    
+
     &:not(.disabled) {
       cursor: pointer;
     }
-    
+
     &.disabled,
     &.old,
     &.new {
@@ -7586,7 +7586,7 @@ output {
     text-align: center;
     padding: 2px 0 0;
     cursor: pointer;
-    
+
     &.hidden {
       display: none;
     }
@@ -7599,11 +7599,11 @@ output {
   left: 0;
   right: 0;
   @extend .zIndex-10;
-  
+
   .defaultTheme {
     pointer-events: none;
   }
-  
+
   .noty_bar {
     max-width: 500px;
     text-align: center;
@@ -7672,7 +7672,7 @@ output {
   align-items: center;
   justify-content: center;
   height: 133px;
-  
+
   .loading-text {
     margin-left: 10px;
   }
@@ -7684,7 +7684,7 @@ output {
   display: flex;
   flex-direction: column;
   padding: 0 14px;
-  
+
   .page-header {
     margin: 15px 6px 5px;
   }
@@ -7706,7 +7706,7 @@ output {
   color: hsl(0,0%,33%);
   transition: all 500ms;
   transform: scale(0);
-  
+
   &.is-open {
     flex: 1 0 25%;
     transform: scale(1);
@@ -7737,7 +7737,7 @@ output {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-    
+
   .status-badge {
     margin-left: 2px;
     vertical-align: middle;
@@ -7747,7 +7747,7 @@ output {
 
 .chat-status {
   margin-left: 10px;
-  
+
   &[data-status='online'] .icon {
     fill: $supergood-color;
   }
@@ -7772,7 +7772,7 @@ output {
     }
   }
 }
-  
+
 .chat-status-holder {
   position: relative;
 }
@@ -7781,7 +7781,7 @@ output {
 .chat-close {
   cursor: pointer;
   padding: 10px;
-  
+
   .btn {
     min-width: 80px;
     justify-content: center;
@@ -7802,11 +7802,11 @@ output {
   padding: 7px 10px 6px;
   color: hsl(0,0%,60%);
   cursor: pointer;
-  
+
   &.is-hidden {
     display: none;
   }
-  
+
   .icon {
     fill: hsl(210,5%,78%);
     margin-right: 8px;
@@ -7885,7 +7885,7 @@ output {
 
 .chat-loader {
   margin-right: -4px;
-  
+
   .icon {
     width: 12px;
     height: 12px;
@@ -7941,13 +7941,13 @@ output {
   transition: 500ms;
   width: 100%;
 }
-  
+
 .browser-body {
   position: relative;
   overflow: hidden;
   height: 450px;
   width: 100%;
-  
+
   .browser-website {
     position: relative;
     height: 100%;
@@ -7968,16 +7968,16 @@ output {
   display: flex;
   padding: 10px;
   border-bottom: 1px solid hsl(0,0%,90%);
-  
+
   .browser-input {
     position: relative;
     flex: 1;
     margin-right: 10px;
-    
+
     input {
       min-width: 0;
       padding-right: 40px;
-      
+
       &.is-loading + .loading.icon {
         display: block;
       }
@@ -8018,7 +8018,7 @@ output {
       width: 100%;
       height: 100%;
       border-radius: 0 !important;
-      
+
       .zammad-chat-header {
         border-radius: 0 !important;
         box-shadow:
@@ -8031,7 +8031,7 @@ output {
         border-radius: 0 0 5px 5px;
       }
     }
-    
+
     &.no-transition {
       transition: none;
     }
@@ -8046,29 +8046,29 @@ output {
 
     .zammad-chat-agent-status,
     .zammad-chat-header-icon-close,
-    .zammad-chat-agent { 
+    .zammad-chat-agent {
       display: none !important;
     }
 
-    &.is-open {      
+    &.is-open {
       .zammad-chat-agent {
         display: block !important;
       }
-      
+
       .zammad-chat-header-icon-close,
       .zammad-chat-agent-status {
         display: inline-block !important;
       }
-    
+
       .zammad-chat-welcome,
       .zammad-chat-header-icon-open {
         display: none !important;
       }
     }
-    
+
     &.is-fullscreen {
       height: 100%;
-      
+
       .zammad-chat-controls {
         border-radius: 0 0 5px 5px;
       }
@@ -8098,11 +8098,11 @@ output {
   display: flex;
   border: 1px solid hsla(206,100%,3%,0.08);
   border-radius: 3px;
-  
+
   .tab {
     height: 39px;
     padding-top: 11px;
-    
+
     &.is-selected {
       background: linear-gradient(hsla(202,50%,20%,0.1), hsla(202,50%,20%,.03));
     }
@@ -8129,17 +8129,17 @@ output {
   display: flex;
   padding: 0;
   line-height: 22px;
-  
+
   .columnSelect-shadow {
     display: none;
   }
 
-  .columnSelect-column--selected { 
+  .columnSelect-column--selected {
     flex: 1 1 66%;
     overflow: auto;
     padding: 7px;
   }
-  
+
   .columnSelect-column--sidebar {
     flex-basis: 33%;
     flex-shrink: 1;
@@ -8148,7 +8148,7 @@ output {
     display: flex;
     flex-direction: column;
     min-width: 0;
-    
+
     .columnSelect-option:hover {
       background: hsl(198,4%,91%);
     }
@@ -8159,7 +8159,7 @@ output {
     overflow: auto;
     padding: 7px;
   }
-  
+
   .columnSelect-option {
     cursor: pointer;
     user-select: none;
@@ -8168,7 +8168,7 @@ output {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    
+
     &:hover {
       background: hsl(198,4%,96%);
     }
@@ -8182,7 +8182,7 @@ output {
 
 .columnSelect-search {
   position: relative;
-  
+
   .icon {
     fill: hsl(198,4%,85%);
   }
@@ -8322,13 +8322,13 @@ output {
 
 */
 
-.horizontal, 
-.vertical, 
+.horizontal,
+.vertical,
 .centered {
   display: flex;
 }
-.horizontal.hide, 
-.vertical.hide, 
+.horizontal.hide,
+.vertical.hide,
 .centered.hide {
   display: none;
 }
@@ -8381,13 +8381,13 @@ body.fit {
 /*
 
   Firefox minimum content bugfix
-  
+
   https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
 
-  "By default, flex items won’t shrink below their minimum 
-  content size (the length of the longest word or fixed-size element). 
+  "By default, flex items won’t shrink below their minimum
+  content size (the length of the longest word or fixed-size element).
   To change this, set the min-width or min-height property."
-  
+
 */
 .flex-shrink-horizontal {
   min-width: 0;
@@ -8490,11 +8490,11 @@ body.fit {
 }
 
 .space-left {
-  margin-left: 10px; 
+  margin-left: 10px;
 }
 
 .space-right {
-  margin-right: 10px; 
+  margin-right: 10px;
 }
 
 .align-center {
@@ -8503,8 +8503,8 @@ body.fit {
 }
 
 .spacer {
-  width: 10px; 
-  height: 10px; 
+  width: 10px;
+  height: 10px;
 }
 
 .double-spacer {