Fixes #3444: Caller Log: Incoming calls move tabs out of Browser context

app/assets/javascripts/app/controllers/cti.coffee

@@ -39,11 +39,9 @@ class App.CTI extends App.Controller
     )
     @controllerBind('menu:render', (data) =>
       return if @switch() isnt true
-      localHtml = ''
-      for item in @ringingCalls()
-        localHtml += App.view('navigation/menu_cti_ringing')(
-          item: item
-        )
+      localHtml = App.view('navigation/menu_cti_ringing')(
+        item: @ringingCalls()
+      )
       $('.js-phoneMenuItem').after(localHtml)
       $('.call-widget').find('.js-newUser').bind('click', (e) =>
         @newUser(e)

app/assets/javascripts/app/views/navigation/menu_cti_ringing.jst.eco

@@ -1,60 +1,64 @@
-<div class="call-widget">
-  <div class="call-widget-header">
-    <%- @Icon('status', "neutral") %>
-    <div class="label"><%- @T('Inbound Call') %></div>
-    <!--
-    <div class="flex-spacer"></div>
-    <div class="btn btn--text js-remove" title="<%- @Ti('Remove') %>"><%- @Icon('diagonal-cross') %></div>
-    -->
-  </div>
-  <div class="horizontal center">
-    <% user = undefined %>
-    <% shown = false %>
-    <% if @item.preferences.from && !_.isEmpty(@item.preferences.from): %>
-      <% for caller_id in @item.preferences.from: %>
-        <% if caller_id.user_id && App.User.exists(caller_id.user_id): %>
-          <% user = App.User.fullLocal(caller_id.user_id) %>
-          <% classes = ['user-popover', 'u-textTruncate'] %>
-          <% classes.push('is-inactive') if !user.active %>
-          <% if shown: %><div class="spacer"></div><% end %>
-          <div class="user-card">
-            <a href="<%- user.uiUrl() %>"><%- user.avatar() %></a>
-            <div class="<%= classes.join(' ') %>" data-id="<%- user.id %>"><% if caller_id.level isnt 'known': %><%- @T('maybe') %>: <% end %><%= user.displayNameLong() %></div>
-            <span class="text-muted"><%= @item.from_pretty %></span>
-          </div>
-          <% shown = true %>
-        <% else if !_.isEmpty(caller_id.comment): %>
+<div class="call-widgets">
+  <% for item in @item: %>
+    <div class="call-widget">
+      <div class="call-widget-header">
+        <%- @Icon('status', "neutral") %>
+        <div class="label"><%- @T('Inbound Call') %></div>
+        <!--
+        <div class="flex-spacer"></div>
+        <div class="btn btn--text js-remove" title="<%- @Ti('Remove') %>"><%- @Icon('diagonal-cross') %></div>
+        -->
+      </div>
+      <div class="horizontal center">
+        <% user = undefined %>
+        <% shown = false %>
+        <% if item.preferences.from && !_.isEmpty(item.preferences.from): %>
+          <% for caller_id in item.preferences.from: %>
+            <% if caller_id.user_id && App.User.exists(caller_id.user_id): %>
+              <% user = App.User.fullLocal(caller_id.user_id) %>
+              <% classes = ['user-popover', 'u-textTruncate'] %>
+              <% classes.push('is-inactive') if !user.active %>
+              <% if shown: %><div class="spacer"></div><% end %>
+              <div class="user-card">
+                <a href="<%- user.uiUrl() %>"><%- user.avatar() %></a>
+                <div class="<%= classes.join(' ') %>" data-id="<%- user.id %>"><% if caller_id.level isnt 'known': %><%- @T('maybe') %>: <% end %><%= user.displayNameLong() %></div>
+                <span class="text-muted"><%= item.from_pretty %></span>
+              </div>
+              <% shown = true %>
+            <% else if !_.isEmpty(caller_id.comment): %>
+              <% shown = true %>
+              <div class="user-card">
+                <%- @unique_avatar(caller_id.comment, caller_id.comment.split(" ").map((name) -> name[0]).join("")) %>
+                <%- @T('maybe') %>: <%= caller_id.comment %><br>
+                <span class="text-muted"><%= item.from_pretty %></span>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+        <% if !shown && !_.isEmpty(item.from_comment): %>
           <% shown = true %>
           <div class="user-card">
-            <%- @unique_avatar(caller_id.comment, caller_id.comment.split(" ").map((name) -> name[0]).join("")) %>
-            <%- @T('maybe') %>: <%= caller_id.comment %><br>
-            <span class="text-muted"><%= @item.from_pretty %></span>
+            <%- @unique_avatar(item.from_comment, item.from_comment.split(" ").map((name) -> name[0]).join("")) %>
+            <%= item.from_comment %><br>
+            <span class="text-muted"><%= item.from_pretty %></span>
           </div>
         <% end %>
-      <% end %>
-    <% end %>
-    <% if !shown && !_.isEmpty(@item.from_comment): %>
-      <% shown = true %>
-      <div class="user-card">
-        <%- @unique_avatar(@item.from_comment, @item.from_comment.split(" ").map((name) -> name[0]).join("")) %>
-        <%= @item.from_comment %><br>
-        <span class="text-muted"><%= @item.from_pretty %></span>
-      </div>
-    <% end %>
-    <% if !shown: %>
-      <div class="user-card">
-        <%- @unique_avatar(@item.from_pretty || @item.from, '??') %>
-      <% if !_.isEmpty(@item.from_pretty): %>
-        <a class="inherit-color" href="<%- App.Utils.phoneify(@item.from_pretty) %>"><%= @item.from_pretty %></a>
-        <% if @item.direction is 'in': %>
-        <div class="btn btn--text btn--create no-padding js-newUser" href="#" data-phone="<%= @item.from_pretty %>"><%- @Icon('plus-small') %> <span><%- @T('New User') %></div>
+        <% if !shown: %>
+          <div class="user-card">
+            <%- @unique_avatar(item.from_pretty || item.from, '??') %>
+          <% if !_.isEmpty(item.from_pretty): %>
+            <a class="inherit-color" href="<%- App.Utils.phoneify(item.from_pretty) %>"><%= item.from_pretty %></a>
+            <% if item.direction is 'in': %>
+            <div class="btn btn--text btn--create no-padding js-newUser" href="#" data-phone="<%= item.from_pretty %>"><%- @Icon('plus-small') %> <span><%- @T('New User') %></div>
+            <% end %>
+          <% else: %>
+            <a class="inherit-color" href="<%- App.Utils.phoneify(item.from) %>"><%= item.from %></a>
+          <% end %>
+          </div>
         <% end %>
-      <% else: %>
-        <a class="inherit-color" href="<%- App.Utils.phoneify(@item.from) %>"><%= @item.from %></a>
-      <% end %>
+        <div class="flex-spacer"></div>
+        <div class="btn btn--small btn--quad btn--create space-left js-newTicket" title="<%- @Ti('New Ticket') %>" data-user-id="<% if user: %><%- user.id %><% end %>"><%- @Icon('plus') %></div>
       </div>
-    <% end %>
-    <div class="flex-spacer"></div>
-    <div class="btn btn--small btn--quad btn--create space-left js-newTicket" title="<%- @Ti('New Ticket') %>" data-user-id="<% if user: %><%- user.id %><% end %>"><%- @Icon('plus') %></div>
-  </div>
-</div>
+    </div>
+  <% end %>
+</div>

app/assets/stylesheets/zammad.scss

@@ -3843,7 +3843,7 @@ footer {
   .bulkAction-firstStep {
     display: flex;
     align-items: center;
-    
+
     @include phone {
       flex-direction: column;
       align-items: flex-end;
@@ -3858,10 +3858,10 @@ footer {
   .bulkAction-secondStep {
     display: flex;
     flex-direction: column;
-    
+
     &-bottom {
       display: flex;
-      
+
       @include phone {
         display: block;
       }
@@ -3870,7 +3870,7 @@ footer {
 
   .bulkAction .btn {
     margin: 0 16px;
-    
+
     @include phone {
       margin: 10px;
     }
@@ -3883,7 +3883,7 @@ footer {
   .bulkAction-controls {
     margin-top: 10px;
     @include bidi-style(margin-left, auto, margin-right, 0);
-    
+
     @include phone {
       margin-top: 0;
       display: flex;
@@ -4154,6 +4154,11 @@ footer {
     }
   }
 
+  .call-widgets {
+    overflow-y: auto;
+    max-height: 30vh;
+  }
+
   .call-widget {
     background: hsl(228,17%,91%);
     padding: 8px 10px;
@@ -5922,10 +5927,10 @@ footer {
 
 .form-inline {
   display: flex;
-  
+
   @include phone {
     flex-wrap: wrap;
-    
+
     .alert {
       flex-basis: 100%;
     }
@@ -5944,7 +5949,7 @@ footer {
     position: relative;
     height: 60px;
     flex: 1 1 auto;
-    
+
     @include phone {
       width: 50%;
       margin-bottom: 0;
@@ -6006,10 +6011,10 @@ footer {
   }
 
   .form-inline .form-group,
-  .form-inline.form-inline--enclosed .form-group {    
+  .form-inline.form-inline--enclosed .form-group {
     @include phone {
       border-bottom: 1px solid #f0f0f0;
-      
+
       &:nth-child(even) {
         border-right-width: 0;
       }
@@ -6075,10 +6080,10 @@ footer {
 
   .bulkAction-secondStep .form-group {
     min-width: 140px;
-        
+
     @include phone {
       min-width: 0;
-      
+
       &.textarea {
         border-bottom-width: 0;
       }