Improved modal dialog.

2014-09-21 14:06:50 +02:00 · 2014-09-21 14:06:50 +02:00 · 9ee8e5c0c1
commit 9ee8e5c0c1
parent a56da6fbb9
16 changed files with 135 additions and 115 deletions
--- a/app/assets/javascripts/app/controllers/_application_controller.js.coffee
+++ b/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) ->
-    console.log('M', @message)
+  show: ->
+    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
-      @el.find('.modal-body').html content
-    @el.modal(
+    ) )
+    if @el && !@message && !@detail
+      @modalElement.find('.modal-body').html @el
+
+    @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
-    )
-
-    @el.bind('hidden.bs.modal', =>
+    ).on('show.bs.modal', =>
+      @onShow()
+    ).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')
--- a/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee
+++ b/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()
--- a/app/assets/javascripts/app/controllers/_channel/email.js.coffee
+++ b/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
-    @close  = true
-    @cancel = true
-    @show( @form.form )
+
+    @el = @form.form
+    @show()

  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
-    @close  = true
-    @cancel = true
-    @show( @form.form )
+
+    @el = @form.form
+
+    @show()

  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
-    @close  = true
-    @cancel = true
-    @show( @form.form )
+
+    @el = @form.form
+
+    @show()

  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
-    @close  = true
-    @cancel = true
-    @show( @form.form )
+
+    @el = @form.form
+
+    @show()

  onSubmit: (e) =>
    e.preventDefault()
--- a/app/assets/javascripts/app/controllers/agent_ticket_merge.js.coffee
+++ b/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
--- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee
+++ b/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()
--- a/app/assets/javascripts/app/controllers/ticket_customer.js.coffee
+++ b/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
-    @cancel = true
-    @button = true
-    @show( controller.form )
+
+    @el = controller.form
+
+    @show()

  onSubmit: (e) =>
    e.preventDefault()
--- a/app/assets/javascripts/app/controllers/ticket_overview.js.coffee
+++ b/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()
--- a/app/assets/javascripts/app/controllers/user_zoom.js.coffee
+++ b/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) ->
--- a/app/assets/javascripts/app/controllers/widget/link.js.coffee
+++ b/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()
--- a/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
+++ b/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
--- a/app/assets/javascripts/app/lib/app_post/browser.coffee
+++ b/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) ->
--- a/app/assets/javascripts/app/lib/app_post/user_organization_autocompletion.js.coffee
+++ b/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) ->

--- a/app/assets/javascripts/app/lib/app_post/websocket.js.coffee
+++ b/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'
--- a/app/assets/javascripts/app/views/generic/history.jst.eco
+++ b/app/assets/javascripts/app/views/generic/history.jst.eco
@ -1,13 +1,7 @@
-<div class="modal-dialog">
-  <div class="modal-content">
-    <div class="modal-header">
-      <div class="modal-close js-close">
-        <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">
+<div>
+<a href="#" data-type="sortorder" class="<%= @orderClass %>"><%- @T( 'Change order' ) %></a>
+
+<hr>

 <% open = false %>
 <% for item in @items: %>
@ -52,10 +46,4 @@
 <% if open: %>
  </ul>
 <% end %>
-
-    </div>
-
-    <div class="modal-footer">
-    </div>
-  </div>
 </div>
--- a/app/assets/javascripts/app/views/user_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/user_zoom.jst.eco
@ -1,16 +1,19 @@
-<div class="main flex tabsSidebarSpace">
-  <div class="userZoom">
-    <div class="page-header">
-      <h1><%- @T( @head ) %></h1>
+<div class="flex vertical">
+  <div class="flex u-positionOrigin horizontal">
+    <div class="main flex tabsSidebarSpace">
+      <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>
-->
--- a/app/assets/javascripts/app/views/user_zoom/actions.jst.eco
+++ b/app/assets/javascripts/app/views/user_zoom/actions.jst.eco
@ -1,8 +1,6 @@
-<div class="btn-group dropup">
-  <button type="button" class="btn btn-default dropdown-toggle actions" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span>
-  </button>
+<div class="dropdown dropup actions">
+  <button class="btn" data-toggle="dropdown"><%- @T('Action') %> <span class="caret"></span></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>