Improved modal dialog.

app/assets/javascripts/app/controllers/_application_controller.js.coffee

@@ -438,14 +438,6 @@ class App.ControllerContent extends App.Controller
     @navShow()
 
 class App.ControllerModal extends App.Controller
-  className: 'modal fade'
-
-  events:
-    'submit form':      'onSubmit'
-    'click .js-submit': 'onSubmit'
-    'click .js-cancel': 'hide'
-    'click .js-close':  'hide'
-
   constructor: (options = {}) ->
     defaults =
       backdrop: true
@@ -460,38 +452,47 @@ class App.ControllerModal extends App.Controller
 
     super(options)
 
-    @show()
+    if @shown
+      @show()
 
-  show: (content) ->
+  show: ->
-    console.log('M', @message)
+    console.log('M', @message,  @el.length)
     if @button is true
       @button = 'Submit'
-    @html App.view('modal')(
+
+    @modalElement = $( '<div class="modal fade"></div>' )
+    @modalElement.append $( App.view('modal')(
       head:    @head
       message: @message
       detail:  @detail
       close:   @close
       cancel:  @cancel
       button:  @button
-    )
+    ) )
-    if content
+    if @el && !@message && !@detail
-      @el.find('.modal-body').html content
+      @modalElement.find('.modal-body').html @el
-    @el.modal(
+
+    @modalElement.find('form').on('submit', (e) => @onSubmit(e) )
+    @modalElement.find('.js-submit').on('click', (e) => @onSubmit(e) )
+    @modalElement.find('.js-cancel').on('click', (e) => @hide(e)  )
+    @modalElement.find('.js-close').on('click', (e) => @hide(e) )
+
+    @modalElement.modal(
       keyboard: @keyboard
       show:     true
       backdrop: @backdrop
-    )
+    ).on('show.bs.modal', =>
-
+      @onShow()
-    @el.bind('hidden.bs.modal', =>
+    ).on('hidden.bs.modal', =>
       @onHide()
       # remove modal from dom
-      $('.modal').remove();
+      $('.modal').remove()
-    )
+    ).find('.js-close').bind('submit', (e) => @hide(e) )
 
   hide: (e) ->
     if e
       e.preventDefault()
-    @el.modal('hide')
+    @modalElement.modal('hide')
 
   onShow: ->
     console.log('no nothing')

app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee

@@ -7,14 +7,14 @@ class App.ControllerGenericNew extends App.ControllerModal
     @button = true
 
     controller = new App.ControllerForm(
-      el:         @el.find('#object_new')
       model:      App[ @genericObject ]
       params:     @item
       screen:     @screen || 'edit'
       autofocus:  true
     )
+    @el = controller.form
 
-    @show(controller.form)
+    @show()
 
   onSubmit: (e) ->
     e.preventDefault()
@@ -57,14 +57,14 @@ class App.ControllerGenericEdit extends App.ControllerModal
     @button = true
 
     controller = new App.ControllerForm(
-      el:         @el.find('#object_new')
       model:      App[ @genericObject ]
       params:     @item
       screen:     @screen || 'edit'
       autofocus:  true
     )
+    @el = controller.form
 
-    @show(controller.form)
+    @show()
 
   onSubmit: (e) ->
     e.preventDefault()
@@ -192,7 +192,7 @@ class App.ControllerGenericDestroyConfirm extends App.ControllerModal
     @cancel  = true
     @button  = 'Yes'
     @message = 'Sure to delete this object?'
-    @show(@message)
+    @show()
 
   onSubmit: (e) ->
     e.preventDefault()
@@ -354,13 +354,10 @@ class App.ControllerNavSidbar extends App.ControllerContent
       )
 
 class App.GenericHistory extends App.ControllerModal
-  events:
-    'click [data-type=sortorder]': 'sortorder',
-    'click .cancel': 'modalHide',
-    'click .close':  'modalHide',
-
   constructor: ->
     super
+    @head  = 'History'
+    @close = true
 
   render: ( items, orderClass = '' ) ->
 
@@ -392,14 +389,22 @@ class App.GenericHistory extends App.ControllerModal
 
       @historyListCache
     )
+    @el.find('a[data-type="sortorder"]').bind(
+      'click',
+      (e) =>
+        e.preventDefault()
+        @sortorder(e)
+    )
+    if !@isShown
+      @isShown = true
+      @show()
 
-    @hide()
+  onShow: =>
-
     # enable user popups
     @userPopups()
 
     # show frontend times
-    @delay( @frontendTimeUpdate, 300, 'ui-time-update' )
+    @delay( @frontendTimeUpdate, 100, 'ui-time-update' )
 
   sortorder: (e) ->
     e.preventDefault()

app/assets/javascripts/app/controllers/_channel/email.js.coffee

@@ -73,6 +73,12 @@ class App.ChannelEmailFilter extends App.Controller
 class App.ChannelEmailFilterEdit extends App.ControllerModal
   constructor: ->
     super
+
+    @head   = 'Postmaster Filter'
+    @button = true
+    @close  = true
+    @cancel = true
+
     if @object
       @form = new App.ControllerForm(
         model:     App.PostmasterFilter,
@@ -84,11 +90,9 @@ class App.ChannelEmailFilterEdit extends App.ControllerModal
         model:     App.PostmasterFilter,
         autofocus: true,
       )
-    @head   = 'Postmaster Filter'
+
-    @button = true
+    @el = @form.form
-    @close  = true
+    @show()
-    @cancel = true
-    @show( @form.form )
 
   onSubmit: (e) =>
     e.preventDefault()
@@ -158,6 +162,12 @@ class App.ChannelEmailAddress extends App.Controller
 class App.ChannelEmailAddressEdit extends App.ControllerModal
   constructor: ->
     super
+
+    @head   = 'Email-Address'
+    @button = true
+    @close  = true
+    @cancel = true
+
     if @object
       @form = new App.ControllerForm(
         model:     App.EmailAddress
@@ -169,11 +179,10 @@ class App.ChannelEmailAddressEdit extends App.ControllerModal
         model:     App.EmailAddress,
         autofocus: true,
       )
-    @head   = 'Email-Address'
+
-    @button = true
+    @el = @form.form
-    @close  = true
+
-    @cancel = true
+    @show()
-    @show( @form.form )
 
   onSubmit: (e) =>
     e.preventDefault()
@@ -239,6 +248,12 @@ class App.ChannelEmailSignature extends App.Controller
 class App.ChannelEmailSignatureEdit extends App.ControllerModal
   constructor: ->
     super
+
+    @head   = 'Signature'
+    @button = true
+    @close  = true
+    @cancel = true
+
     if @object
       @form = new App.ControllerForm(
         model:     App.Signature
@@ -250,11 +265,10 @@ class App.ChannelEmailSignatureEdit extends App.ControllerModal
         model:     App.Signature
         autofocus: true
       )
-    @head   = 'Signature'
+
-    @button = true
+    @el = @form.form
-    @close  = true
+
-    @cancel = true
+    @show()
-    @show( @form.form )
 
   onSubmit: (e) =>
     e.preventDefault()
@@ -321,6 +335,12 @@ class App.ChannelEmailInbound extends App.Controller
 class App.ChannelEmailInboundEdit extends App.ControllerModal
   constructor: ->
     super
+
+    @head   = 'Email Channel'
+    @button = true
+    @close  = true
+    @cancel = true
+
     if @object
       @form = new App.ControllerForm(
         model:     App.Channel
@@ -332,11 +352,10 @@ class App.ChannelEmailInboundEdit extends App.ControllerModal
         model:     App.Channel
         autofocus: true
       )
-    @head   = 'Email Channel'
+
-    @button = true
+    @el = @form.form
-    @close  = true
+
-    @cancel = true
+    @show()
-    @show( @form.form )
 
   onSubmit: (e) =>
     e.preventDefault()

app/assets/javascripts/app/controllers/agent_ticket_merge.js.coffee

@@ -63,9 +63,9 @@ class App.TicketMerge extends App.ControllerModal
         $(e.target).parents().find('[name="master_ticket_number"]').val( ticket.number )
     )
 
-    @hide()
+    @show()
 
-  submit: (e) =>
+  onSubmit: (e) =>
     e.preventDefault()
 
     # disable form

app/assets/javascripts/app/controllers/layout_ref.js.coffee

@@ -126,12 +126,16 @@ class ModalForm extends App.ControllerModal
     @cancel = true
     @button = true
 
+    @render()
+
+  render: ->
     controller = new App.ControllerForm(
       model: App.User
       autofocus: true
     )
+    @el = controller.form
 
-    @show(controller.form)
+    @show()
 
   onHide: =>
     window.history.back()
@@ -149,9 +153,12 @@ class ModalText extends App.ControllerModal
     super
     @head = '123 some title'
 
-    form = App.view('layout_ref/content')()
+    @render()
 
-    @show(form)
+  render: ->
+    @html App.view('layout_ref/content')()
+
+    @show()
 
   onHide: =>
     window.history.back()

app/assets/javascripts/app/controllers/ticket_customer.js.coffee

@@ -1,6 +1,12 @@
 class App.TicketCustomer extends App.ControllerModal
   constructor: ->
     super
+
+    @head   = 'Change Customer'
+    @close  = true
+    @cancel = true
+    @button = true
+
     configure_attributes = [
       { name: 'customer_id', display: 'Customer', tag: 'user_autocompletion', null: false, placeholder: 'Enter Person or Organisation/Company', minLengt: 2, disableCreateUser: true },
     ]
@@ -10,11 +16,10 @@ class App.TicketCustomer extends App.ControllerModal
         configure_attributes: configure_attributes,
       autofocus: true
     )
-    @head   = 'Change Customer'
+
-    @close  = true
+    @el = controller.form
-    @cancel = true
+
-    @button = true
+    @show()
-    @show( controller.form )
 
   onSubmit: (e) =>
     e.preventDefault()

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

@@ -621,7 +621,8 @@ class App.OverviewSettings extends App.ControllerModal
       model:     { configure_attributes: @configure_attributes_article }
       autofocus: false
     )
-    @show( controller.form )
+    @el = controller.form
+    @show()
 
   onSubmit: (e) =>
     e.preventDefault()

app/assets/javascripts/app/controllers/user_zoom.js.coffee

@@ -221,7 +221,6 @@ class Sidebar extends App.Controller
 class ActionRow extends App.Controller
   events:
     'click [data-type=history]':  'history_dialog'
-    'click [data-type=merge]':    'merge_dialog'
 
   constructor: ->
     super
@@ -234,14 +233,6 @@ class ActionRow extends App.Controller
     e.preventDefault()
     new App.UserHistory( user_id: @user.id )
 
-  merge_dialog: (e) ->
-    e.preventDefault()
-    new App.TicketMerge( ticket: @ticket, task_key: @ui.task_key )
-
-  customer_dialog: (e) ->
-    e.preventDefault()
-    new App.TicketCustomer( ticket: @ticket, ui: @ui )
-
 
 class Router extends App.ControllerPermanent
   constructor: (params) ->

app/assets/javascripts/app/controllers/widget/link.js.coffee

@@ -87,12 +87,12 @@ class App.LinkAdd extends App.ControllerModal
     @button = true
     @cancel = true
 
-    form = App.view('link/add')(
+    @html App.view('link/add')(
       link_object:    @link_object,
       link_object_id: @link_object_id,
       object:         @object,
     )
-    @show( form )
+    @show()
 
   onSubmit: (e) =>
     e.preventDefault()

app/assets/javascripts/app/controllers/widget/online_notification.js.coffee

@@ -36,7 +36,6 @@ class App.OnlineNotificationWidget extends App.Controller
     return false
 
   counterUpdate: (count) =>
-    console.log('counter update', count)
     if !count
       @el.find('.activity-counter').remove()
       return

app/assets/javascripts/app/lib/app_post/browser.coffee

@@ -47,6 +47,7 @@ class App.Browser
       close:    false
       backdrop: false
       keyboard: false
+      shown:    true
     )
 
   @searchString: (data) ->

app/assets/javascripts/app/lib/app_post/user_organization_autocompletion.js.coffee

@@ -208,13 +208,14 @@ class UserNew extends App.ControllerModal
     @button = true
 
     controller = new App.ControllerForm(
-      el:         @el.find('#form-user')
       model:      App.User
       screen:     'edit'
       autofocus:  true
     )
 
-    @show( controller.form )
+    @el = controller.form
+
+    @show()
 
   onSubmit: (e) ->
 

app/assets/javascripts/app/lib/app_post/websocket.js.coffee

@@ -239,10 +239,11 @@ class _webSocketSingleton extends App.Controller
           # show reconnect message
           @error = new App.ControllerModal(
             head:    'Lost network connection!'
-            message: 'Lost network connection to system, trying to reconnect...'
+            message: 'Trying to reconnect...'
             backdrop: false
             keyboard: false
             close:    false
+            shown:    true
           )
         if !@tryToConnect
           App.Delay.set message, 7000, 'websocket-no-connection-try-reconnect-message', 'ws'

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

@@ -1,13 +1,7 @@
-<div class="modal-dialog">
+<div>
-  <div class="modal-content">
+<a href="#" data-type="sortorder" class="<%= @orderClass %>"><%- @T( 'Change order' ) %></a>
-    <div class="modal-header">
+
-      <div class="modal-close js-close">
+<hr>
-        <div class="close icon"></div>
-      </div>
-      <h1 class="modal-title"><%- @T( 'History' ) %></h1>
-      <a href="#" data-type="sortorder" class="<%= @orderClass %>"><%- @T( 'Change order' ) %></a>
-    </div>
-    <div class="modal-body">
 
 <% open = false %>
 <% for item in @items: %>
@@ -52,10 +46,4 @@
 <% if open: %>
   </ul>
 <% end %>
-
-    </div>
-
-    <div class="modal-footer">
-    </div>
-  </div>
 </div>

app/assets/javascripts/app/views/user_zoom.jst.eco

@@ -1,16 +1,19 @@
-<div class="main flex tabsSidebarSpace">
+<div class="flex vertical">
-  <div class="userZoom">
+  <div class="flex u-positionOrigin horizontal">
-    <div class="page-header">
+    <div class="main flex tabsSidebarSpace">
-      <h1><%- @T( @head ) %></h1>
+      <div class="userZoom">
+        <div class="page-header">
+          <h1><%- @T( @head ) %></h1>
+        </div>
+
+        <div class="main-overviews" id="sortable"></div>
+
+      </div>
     </div>
 
-    <div class="main-overviews" id="sortable"></div>
+    <div class="tabsSidebar vertical"></div>
-
   </div>
+  <form class="bottom-form form-inline horizontal" role="form">
+    <div class="action"></div>
+  </form>
 </div>
-
-<div class="tabsSidebar vertical"></div>
-
-<!--
-  <div class="action"></div>
--->

app/assets/javascripts/app/views/user_zoom/actions.jst.eco

@@ -1,8 +1,6 @@
-<div class="btn-group dropup">
+<div class="dropdown dropup actions">
-  <button type="button" class="btn btn-default dropdown-toggle actions" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span>
+  <button class="btn" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span></button>
-  </button>
   <ul class="dropdown-menu">
     <li><a href="#" data-type="history"><%- @T( 'History' ) %></a></li>
-    <li><a href="#" data-type="merge"><%- @T( 'Merge' ) %></a></li>
   </ul>
 </div>