Replaced App.ControllerModal by App.ControllerModalNice to support also translation inline feature (ctrl+alt+t) for modal dialog screens.

2015-11-20 02:59:35 +01:00 · 2015-11-20 02:59:35 +01:00 · 8800b6b61a
commit 8800b6b61a
parent 3a649527bc
40 changed files with 589 additions and 646 deletions
--- a/app/assets/javascripts/app/controllers/_application_controller.coffee
+++ b/app/assets/javascripts/app/controllers/_application_controller.coffee
@ -568,55 +568,79 @@ class App.ControllerContent extends App.Controller
    $('#content').removeClass('hide')
    @navShow()

-class App.ControllerModal extends App.Controller
-  elements:
-    '.modal-body': 'body'
+class App.ControllerModalNice extends App.Controller
+  backdrop: true
+  keyboard: true
+  large: false
+  head: '?'
+  container: null
+  buttonClass: 'btn--success'
+  centerButtons: []
+  buttonClose: true
+  buttonCancel: false
+  buttonSubmit: true
+  headPrefix: ''
+  shown: true

  events:
-    'submit form':                        'onSubmit'
-    'click .js-submit:not(.is-disabled)': 'onSubmit'
-    'click .js-cancel':                   'hide'
-    'click .js-close':                    'hide'
+    'submit form':                        'submit'
+    'click .js-submit:not(.is-disabled)': 'submit'
+    'click .js-cancel':                   'cancel'
+    'click .js-close':                    'close'

  className: 'modal fade'

-  constructor: (options = {}) ->
-    defaults =
-      backdrop: true
-      keyboard: true
-      close:    true
-      large:    false
-      head:     '?'
-      buttonClass: 'btn--success'
-      centerButtons: []
-      container: null
-
-    options = _.extend( defaults, options )
-
-    @className += ' modal--large' if options.large
-
-    super(options)
+  constructor: ->
+    @className += ' modal--large' if @large
+    super

+    # rerender view, e. g. on langauge change
+    @bind('ui:rerender', =>
+      @update()
+      'modal'
+    )
    if @shown
-      @show()
+      @render()

-  show: (content) ->
-    if @button is true
-      @button = 'Submit'
+  content: ->
+    'You need to implement a one @content()!'

-    @html App.view('modal')
+  update: =>
+    if @message
+      content = App.i18n.translateContent(@message)
+    else if @contentInline
+      content = @contentInline
+    else
+      content = @content()
+    modal = $(App.view('modal')
      head:          @head
+      headPrefix:    @headPrefix
      message:       @message
      detail:        @detail
-      close:         @close
-      cancel:        @cancel
-      button:        @button
+      buttonClose:   @buttonClose
+      buttonCancel:  @buttonCancel
+      buttonSubmit:  @buttonSubmit
      buttonClass:   @buttonClass
      centerButtons: @centerButtons
-      content:       content
+    )
+    modal.find('.modal-body').html content
+    if !@initRenderingDone
+      @initRenderingDone = true
+      @html modal
+    else
+      @$('.modal-dialog').replaceWith(modal)
+    @post()

-    if @content
-      @body.html @content
+  post: =>
+    # nothing
+
+  render: =>
+    if @buttonSubmit is true
+      @buttonSubmit = 'Submit'
+    if @buttonCancel is true
+      @buttonCancel = 'Cancel & Go Back'
+
+    @update()

    if @container
      @el.addClass('modal--local')
@ -629,52 +653,57 @@ class App.ControllerModal extends App.Controller
    .on
      'show.bs.modal':   @onShow
      'shown.bs.modal':  @onShown
+      'hide.bs.modal':   @onClose
      'hidden.bs.modal': =>
-        @onHide()
+        @onClosed()
        # remove modal from dom
        $('.modal').remove()

-  hide: (e) =>
+  close: (e) =>
    if e
      e.preventDefault()
    @el.modal('hide')

-  onShown: ->
-    console.log('modal shown: do nothing')
-    # do nothing
-
  onShow: ->
-    console.log('modal rendered: do nothing')
    # do nothing

-  onHide: ->
-    console.log('modal removed: do nothing')
+  onShown: ->
    # do nothing

-  onSubmit: (e) =>
+  onClose: ->
+    # do nothing
+
+  onClosed: ->
+    # do nothing
+
+  onSubmit: ->
+    # do nothing
+
+  onCancel: ->
+    # do nothing
+
+  cancel: (e) =>
+    @close(e)
+    @onCancel(e)
+
+  submit: (e) =>
    e.preventDefault()
-    if @onSubmitCallback
-      @onSubmitCallback()
-    @log 'error', 'You need to implement your own "onSubmit" method!'
+    @onSubmit(e)

-class App.ErrorModal extends App.ControllerModal
-  constructor: ->
-    super
-    @show()
+class App.SessionMessage extends App.ControllerModalNice
+  onCancel: (e) =>
+    if @forceReload
+      @reload(e)

-class App.SessionMessage extends App.ControllerModal
-  constructor: ->
-    super
-    @show(@content)
-
-  # reload page on modal hidden
-  onHide: (e) =>
+  onClose: (e) =>
    if @forceReload
      @reload(e)

  onSubmit: (e) =>
    if @forceReload
      @reload(e)
+    else
+      @close()

  reload: (e) ->
    if e
--- a/app/assets/javascripts/app/controllers/_application_controller_generic.coffee
+++ b/app/assets/javascripts/app/controllers/_application_controller_generic.coffee
@ -1,24 +1,20 @@
-class App.ControllerGenericNew extends App.ControllerModal
-  constructor: (params) ->
-    super
-
-    @head   = App.i18n.translateContent( 'New' ) + ': ' + App.i18n.translateContent( @pageData.object )
-    @cancel = true
-    @button = true
+class App.ControllerGenericNew extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  headPrefix: 'New'

+  content: =>
+    @head = @pageData.object
    controller = new App.ControllerForm(
      model:     App[ @genericObject ]
      params:    @item
      screen:    @screen || 'edit'
      autofocus: true
    )
-
-    @content = controller.form
-
-    @show()
+    controller.form

  onSubmit: (e) ->
-    e.preventDefault()
    params = @formParam(e.target)

    object = new App[ @genericObject ]
@ -41,21 +37,22 @@ class App.ControllerGenericNew extends App.ControllerModal
        if ui.callback
          item = App[ ui.genericObject ].fullLocal(@id)
          ui.callback(item)
-        ui.hide()
+        ui.close()

      fail: ->
        ui.log 'errors'
-        ui.hide()
+        ui.close()
    )

-class App.ControllerGenericEdit extends App.ControllerModal
-  constructor: (params) ->
-    super
-    @item = App[ @genericObject ].find( params.id )
+class App.ControllerGenericEdit extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  headPrefix: 'Edit'

-    @head  = App.i18n.translateContent( 'Edit' ) + ': ' + App.i18n.translateContent( @pageData.object )
-    @cancel = true
-    @button = true
+  content: =>
+    @item = App[ @genericObject ].find( @id )
+    @head = @pageData.object

    controller = new App.ControllerForm(
      model:      App[ @genericObject ]
@ -63,12 +60,9 @@ class App.ControllerGenericEdit extends App.ControllerModal
      screen:     @screen || 'edit'
      autofocus:  true
    )
-    @content = controller.form
-
-    @show()
+    controller.form

  onSubmit: (e) ->
-    e.preventDefault()
    params = @formParam(e.target)
    @item.load(params)

@ -89,11 +83,11 @@ class App.ControllerGenericEdit extends App.ControllerModal
        if ui.callback
          item = App[ ui.genericObject ].fullLocal(@id)
          ui.callback(item)
-        ui.hide()
+        ui.close()

      fail: ->
        ui.log 'errors'
-        ui.hide()
+        ui.close()
    )

 class App.ControllerGenericIndex extends App.Controller
@ -214,19 +208,17 @@ class App.ControllerGenericIndex extends App.Controller
      container:   @container
    )

-class App.ControllerGenericDescription extends App.ControllerModal
-  constructor: ->
-    super
-    @head       = 'Description'
-    @cancel     = false
-    @button     = 'Close'
-    description = marked(@description)
+class App.ControllerGenericDescription extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: false
+  buttonSubmit: 'Close'
+  head: 'Description'

-    @show(description)
+  content: =>
+    marked(@description)

-  onSubmit: (e) ->
-    e.preventDefault()
-    @hide()
+  onSubmit: =>
+    @close()

 class App.ControllerModalLoading extends App.Controller
  className: 'modal fade'
@ -270,25 +262,25 @@ class App.ControllerModalLoading extends App.Controller
      return
    App.Delay.set(remove, delay * 1000)

-class App.ControllerGenericDestroyConfirm extends App.ControllerModal
-  constructor: ->
-    super
-    @head    = 'Confirm'
-    @cancel  = true
-    @button  = 'Yes'
-    @message = 'Sure to delete this object?'
-    @show()
+class App.ControllerGenericDestroyConfirm extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: 'yes'
+  buttonClass: 'btn--danger'
+  head: 'Confirm'

-  onSubmit: (e) ->
-    e.preventDefault()
+  content: =>
+    App.i18n.translateContent('Sure to delete this object?')
+
+  onSubmit: =>
    @item.destroy(
      done: =>
        if @callback
          @callback()
-        @hide()
+        @close()
      fail: =>
        @log 'errors'
-        @hide()
+        @close()
    )

 class App.ControllerDrox extends App.Controller
@ -439,40 +431,35 @@ class App.ControllerNavSidbar extends App.ControllerContent
        el: @$('.main')
      )

-class App.GenericHistory extends App.ControllerModal
+class App.GenericHistory extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: false
+  buttonSubmit: false
+  head: 'History'
+  shown: false
+
  constructor: ->
    super
-    @head  = 'History'
-    @close = true
-
-  render: ->
+    @fetch()

+  content: =>
    localItem = @reworkItems(@items)

-    @content = $ App.view('generic/history')(
+    content = $ App.view('generic/history')(
      items: localItem
    )
-
-    @onShow()
-
-    @content.find('a[data-type="sortorder"]').bind(
-      'click',
-      (e) =>
+    content.find('a[data-type="sortorder"]').bind('click', (e) =>
      e.preventDefault()
      @sortorder()
    )
-    if !@isShown
-      @isShown = true
-      @show()
+    content

-  onShow: =>
-    # enable user popups
+  onShown: =>
    @userPopups()

  sortorder: =>
    @items = @items.reverse()
-
-    @render()
+    @update()

  T: (name) ->
    App.i18n.translateInline(name)
--- a/app/assets/javascripts/app/controllers/_channel/email.coffee
+++ b/app/assets/javascripts/app/controllers/_channel/email.coffee
@ -73,15 +73,13 @@ With Filters you can e. g. dispatch new Tickets into certain groups or set a cer
      container: @el.closest('.content')
    )

-class App.ChannelEmailFilterEdit extends App.ControllerModal
-  constructor: ->
-    super
-
-    @head   = 'Postmaster Filter'
-    @button = true
-    @close  = true
-    @cancel = true
+class App.ChannelEmailFilterEdit extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  head: 'Postmaster Filter'

+  content: =>
    if @object
      @form = new App.ControllerForm(
        model:     App.PostmasterFilter,
@ -94,8 +92,7 @@ class App.ChannelEmailFilterEdit extends App.ControllerModal
        autofocus: true,
      )

-    @content = @form.form
-    @show()
+    @form.form

  onSubmit: (e) =>
    e.preventDefault()
@ -122,9 +119,9 @@ class App.ChannelEmailFilterEdit extends App.ControllerModal
    # save object
    object.save(
      done: =>
-        @hide()
+        @close()
      fail: =>
-        @hide()
+        @close()
    )

 class App.ChannelEmailSignature extends App.Controller
@ -172,15 +169,13 @@ Once you have created a signature here, you need also to edit the groups where y
      container: @el.closest('.content')
    )

-class App.ChannelEmailSignatureEdit extends App.ControllerModal
-  constructor: ->
-    super
-
-    @head   = 'Signature'
-    @button = true
-    @close  = true
-    @cancel = true
+class App.ChannelEmailSignatureEdit extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  head: 'Signature'

+  content: =>
    if @object
      @form = new App.ControllerForm(
        model:     App.Signature
@ -193,12 +188,9 @@ class App.ChannelEmailSignatureEdit extends App.ControllerModal
        autofocus: true
      )

-    @content = @form.form
-
-    @show()
+    @form.form

  onSubmit: (e) =>
-    e.preventDefault()

    # get params
    params = @formParam(e.target)
@ -221,9 +213,9 @@ class App.ChannelEmailSignatureEdit extends App.ControllerModal
    # save object
    object.save(
      done: =>
-        @hide()
+        @close()
      fail: =>
-        @hide()
+        @formEnable(e)
    )

 class App.ChannelEmailAccountOverview extends App.Controller
@ -399,15 +391,13 @@ class App.ChannelEmailAccountOverview extends App.Controller
      channelDriver: @channelDriver
    )

-class App.ChannelEmailEdit extends App.ControllerModal
-  constructor: ->
-    super
-
-    @head   = 'Channel'
-    @button = true
-    @close  = true
-    @cancel = true
+class App.ChannelEmailEdit extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  head: 'Channel'

+  content: =>
    configureAttributesBase = [
      { name: 'group_id', display: 'Destination Group', tag: 'select', null: false, relation: 'Group', nulloption: true },
    ]
@ -417,12 +407,9 @@ class App.ChannelEmailEdit extends App.ControllerModal
        className: ''
      params: @item
    )
-
-    @content = @form.form
-    @show()
+    @form.form

  onSubmit: (e) =>
-    e.preventDefault()

    # get params
    params = @formParam(e.target)
@ -448,9 +435,9 @@ class App.ChannelEmailEdit extends App.ControllerModal
      processData: true
      success: (data, status, xhr) =>
        @callback()
-        @hide()
+        @close()
      fail: =>
-        @enable(e)
+        @formEnable(e)
    )

 class App.ChannelEmailAccountWizard extends App.Wizard
--- a/app/assets/javascripts/app/controllers/_channel/form.coffee
+++ b/app/assets/javascripts/app/controllers/_channel/form.coffee
@ -10,7 +10,7 @@ class App.ChannelForm extends App.Controller
    @render()
    @updateParams()
    new App.SettingsArea(
-      el:   @el.find('.js-settings')
+      el:   @$('.js-settings')
      area: 'Form::Base'
    )

@ -21,10 +21,13 @@ class App.ChannelForm extends App.Controller

  updateParams: ->
    quote = (string) ->
-      string.replace('\'', '\\\'')
+      string = string.replace('\'', '\\\'')
+        .replace(/\</g, '&lt;')
+        .replace(/\>/g, '&gt;')
    params = @formParam(@$('.js-params'))
    paramString = ''
    for key, value of params
+      if value != ''
        if paramString != ''
          paramString += ",\n"
        if value == 'true' || value == 'false'
--- a/app/assets/javascripts/app/controllers/_profile/avatar.coffee
+++ b/app/assets/javascripts/app/controllers/_profile/avatar.coffee
@ -146,20 +146,20 @@ class Index extends App.Controller
 App.Config.set( 'Avatar', { prio: 1100, name: 'Avatar', parent: '#profile', target: '#profile/avatar', controller: Index }, 'NavBarProfile' )


-class ImageCropper extends App.ControllerModal
+class ImageCropper extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: 'Save'
+  head: 'Crop Image'
+
  elements:
    '.imageCropper-image': 'image'
    '.imageCropper-holder': 'holder'

-  constructor: (options) ->
-    super
-    @head        = 'Crop Image'
-    @cancel      = true
-    @button      = 'Save'
-    @buttonClass = 'btn--success'
-
-    @show( App.view('profile/imageCropper')() )
+  content: =>
+    App.view('profile/imageCropper')()

+  post: =>
    @size = 256

    orientationTransform =
@ -168,7 +168,7 @@ class ImageCropper extends App.ControllerModal
      6: 90
      8: -90

-    @angle = orientationTransform[ @options.orientation ]
+    @angle = orientationTransform[ @orientation ]

    if @angle == undefined
      @angle = 0
@ -177,9 +177,9 @@ class ImageCropper extends App.ControllerModal
      @isOrientating = true
      image = new Image()
      image.addEventListener 'load', @orientateImage
-      image.src = @options.imageSource
+      image.src = @imageSource
    else
-      @image.attr src: @options.imageSource
+      @image.attr src: @imageSource

  orientateImage: (e) =>
    image  = e.currentTarget
@ -215,14 +215,23 @@ class ImageCropper extends App.ControllerModal
      minContainerHeight: 300
      preview: '.imageCropper-preview'

-  onSubmit: (e) =>
-    e.preventDefault()
-    @options.callback( @image.cropper('getCroppedCanvas').toDataURL() )
+  onSubmit: =>
+    @callback( @image.cropper('getCroppedCanvas').toDataURL() )
    @image.cropper('destroy')
-    @hide()
+    @close()


-class Camera extends App.ControllerModal
+class Camera extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: 'Save'
+  buttonClass: 'btn--success is-disabled'
+  centerButtons: [{
+    className: 'btn--success js-shoot is-disabled',
+    text: 'Shoot'
+  }]
+  head: 'Camera'
+
  elements:
    '.js-shoot':       'shootButton'
    '.js-submit':      'submitButton'
@ -233,23 +242,14 @@ class Camera extends App.ControllerModal
  events:
    'click .js-shoot:not(.is-disabled)': 'onShootClick'

-  constructor: (options) ->
-    super
+  content: =>
+    App.view('profile/camera')()
+
+  post: =>
    @size            = 256
    @photoTaken      = false
    @backgroundColor = 'white'

-    @head          = 'Camera'
-    @cancel        = true
-    @button        = 'Save'
-    @buttonClass   = 'btn--success is-disabled'
-    @centerButtons = [{
-      className: 'btn--success js-shoot is-disabled',
-      text: 'Shoot'
-    }]
-
-    @show( App.view('profile/camera')() )
-
    @ctx = @preview.get(0).getContext('2d')

    requestWebcam = Modernizr.prefixed('getUserMedia', navigator)
@ -312,7 +312,7 @@ class Camera extends App.ControllerModal
      'ConstraintNotSatisfiedError': App.i18n.translateInline('No camera found.')

    alert convertToHumanReadable[error.name]
-    @hide()
+    @close()

  setupPreview: =>
    @video.attr 'height', @size
@ -400,14 +400,13 @@ class Camera extends App.ControllerModal
    # reset video height
    @video.attr height: @size

-  onHide: =>
+  onClose: =>
    @stream.stop() if @stream
    @hidden = true

-  onSubmit: (e) =>
-    e.preventDefault()
+  onSubmit: =>
    # send picture to the callback
    console.log @cache.get(0).toDataURL()
    window.file = @cache.get(0).toDataURL()
-    @options.callback @cache.get(0).toDataURL()
-    @hide()
+    @callback @cache.get(0).toDataURL()
+    @close()
--- a/app/assets/javascripts/app/controllers/agent_ticket_merge.coffee
+++ b/app/assets/javascripts/app/controllers/agent_ticket_merge.coffee
@ -1,73 +1,64 @@
-class App.TicketMerge extends App.ControllerModal
+class App.TicketMerge extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  head: 'Merge'
+  shown: false
+
  constructor: ->
    super
-    @head = 'Merge'
-    @button = true
-    @cancel = true
    @fetch()

  fetch: ->
-
-    # merge tickets
    @ajax(
      id:    'ticket_related'
      type:  'GET'
-      url:   @apiPath + '/ticket_related/' + @ticket.id
-      processData: true,
+      url:   "#{@apiPath}/ticket_related/#{@ticket.id}"
+      processData: true
      success: (data, status, xhr) =>
-
        App.Collection.loadAssets(data.assets)
-
        @ticket_ids_by_customer    = data.ticket_ids_by_customer
        @ticket_ids_recent_viewed  = data.ticket_ids_recent_viewed
        @render()
    )

-  render: ->
-
-    @content = $( App.view('agent_ticket_merge')() )
+  content: =>
+    content = $( App.view('agent_ticket_merge')() )

    new App.TicketList(
-      el:         @content.find('#ticket-merge-customer-tickets')
+      el:         content.find('#ticket-merge-customer-tickets')
      ticket_ids: @ticket_ids_by_customer
      radio:      true
    )

    new App.TicketList(
-      el:         @content.find('#ticket-merge-recent-tickets'),
+      el:         content.find('#ticket-merge-recent-tickets')
      ticket_ids: @ticket_ids_recent_viewed
      radio:      true
    )

-    @content.delegate('[name="master_ticket_number"]', 'focus', (e) ->
+    content.delegate('[name="master_ticket_number"]', 'focus', (e) ->
      $(e.target).parents().find('[name="radio"]').prop('checked', false)
    )

-    @content.delegate('[name="radio"]', 'click', (e) ->
+    content.delegate('[name="radio"]', 'click', (e) ->
      if $(e.target).prop('checked')
        ticket_id = $(e.target).val()
        ticket    = App.Ticket.fullLocal(ticket_id)
        $(e.target).parents().find('[name="master_ticket_number"]').val(ticket.number)
    )

-    @show()
+    content

  onSubmit: (e) =>
-    e.preventDefault()
-
-    # disable form
    @formDisable(e)
-
    params = @formParam(e.target)

    # merge tickets
    @ajax(
-      id:    'ticket_merge',
-      type:  'GET',
-      url:   @apiPath +  '/ticket_merge/' + @ticket.id + '/' + params['master_ticket_number'],
-      data:  {
-#        view: @view
-      }
+      id:    'ticket_merge'
+      type:  'GET'
+      url:   "#{@apiPath}/ticket_merge/#{@ticket.id}/#{params['master_ticket_number']}"
      processData: true,
      success: (data, status, xhr) =>

@ -78,7 +69,7 @@ class App.TicketMerge extends App.ControllerModal
          App.Collection.load( type: 'Ticket', data: [data.slave_ticket] )

          # hide dialog
-          @hide()
+          @close()

          # view ticket
          @log 'notice', 'nav...', App.Ticket.find( data.master_ticket['id'] )
@ -105,4 +96,3 @@ class App.TicketMerge extends App.ControllerModal
      error: =>
        @formEnable(e)
    )
-
--- a/app/assets/javascripts/app/controllers/layout_ref.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.coffee
@ -413,23 +413,15 @@ class ContentSidebarRightSidebarOptional extends App.ControllerContent
 App.Config.set( 'layout_ref/content_sidebar_right_sidebar_optional', ContentSidebarRightSidebarOptional, 'Routes' )


-class ModalForm extends App.ControllerModal
-  constructor: ->
-    super
-    @head  = '123 some title'
-    @cancel = true
-    @button = true
+class ModalForm extends App.ControllerModalNice
+  head: '123 some title'

-    @render()
-
-  render: ->
+  content: ->
    controller = new App.ControllerForm(
      model: App.User
      autofocus: true
    )
-    @content = controller.form
-
-    @show()
+    controller.form

  onHide: ->
    window.history.back()
@ -442,15 +434,10 @@ class ModalForm extends App.ControllerModal
 App.Config.set( 'layout_ref/modal_form', ModalForm, 'Routes' )


-class ModalText extends App.ControllerModal
-  constructor: ->
-    super
-    @head = '123 some title'
+class ModalText extends App.ControllerModalNice

-    @render()
-
-  render: ->
-    @show( App.view('layout_ref/content')() )
+  content: ->
+    App.view('layout_ref/content')()

  onHide: ->
    window.history.back()
@ -458,7 +445,6 @@ class ModalText extends App.ControllerModal
 App.Config.set( 'layout_ref/modal_text', ModalText, 'Routes' )


-
 class ContentSidebarTabsRight extends App.ControllerContent
  elements:
    '.tabsSidebar'  : 'sidebar'
@ -1380,12 +1366,13 @@ class SlaRef extends App.ControllerContent
    checkbox.closest('tr').toggleClass('is-active', checkbox.prop('checked'))

  createNew: =>
-    @newItemModal = new App.ControllerModal
-      head: 'New Service Level Agreement (SLA)'
-      content: App.view('layout_ref/sla_modal')()
-      button: 'Create SLA'
+    @newItemModal = new App.ControllerModalNice
+      head: 'Service Level Agreement (SLA)'
+      headPrefox: 'New'
+      contentInline: App.view('layout_ref/sla_modal')()
+      buttonSubmit: 'Create SLA'
      shown: true
-      cancel: true
+      buttonCancel: true
      container: @el
      onShown: =>
        @$('.js-responseTime').timepicker
@ -1419,12 +1406,13 @@ class SchedulersRef extends App.ControllerContent
      .text(if isInactive then 'Enable' else 'Disable')

  createNew: =>
-    new App.ControllerModal
-      head: 'New Scheduler'
-      content: App.view('layout_ref/scheduler_modal')()
-      button: 'Create Schedule'
+    new App.ControllerModalNice
+      head: 'Scheduler'
+      headPrefix: 'New'
+      buttonSubmit: 'Create'
+      buttonCancel: true
+      contentInline: App.view('layout_ref/scheduler_modal')()
      shown: true
-      cancel: true
      container: @el

  select: (event) =>
@ -1655,13 +1643,13 @@ class MergeCustomerRef extends App.ControllerContent
  render: ->
    @html App.view('layout_ref/merge_customer_view')

-    new App.ControllerModal
+    new App.ControllerModalNice
      large: true
-      head: "Merge #{@mergeSource.firstname} #{@mergeSource.lastname}"
-      content: App.view('layout_ref/merge_customer')()
-      button: 'Merge'
-      shown: true
-      cancel: true
+      head: "#{@mergeSource.firstname} #{@mergeSource.lastname}"
+      headPrefix: 'Merge'
+      contentInline: App.view('layout_ref/merge_customer')()
+      buttonSubmit: 'Merge'
+      buttonCancel: true
      container: @el

  onChange: ->
--- a/app/assets/javascripts/app/controllers/object_manager.coffee
+++ b/app/assets/javascripts/app/controllers/object_manager.coffee
@ -152,15 +152,14 @@ class Items extends App.ControllerContent
        @load()
    )

-class Edit extends App.ControllerModal
-  constructor: (params) ->
-    super
+class Edit extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  head: 'Edit'

-    @head  = App.i18n.translateContent( 'Edit' )
-    @cancel = true
-    @button = true
-
-    @content = $( App.view('object_manager/edit')(
+  content: =>
+    content = $( App.view('object_manager/edit')(
      head:  @object
      items: []
    ) )
@ -186,7 +185,7 @@ class Edit extends App.ControllerModal
      model:     { configure_attributes: configureAttributesTop, className: '' },
      params:    item
      #screen:   @screen || 'edit'
-      el:         @content.find('.js-top')
+      el:        content.find('.js-top')
      autofocus: true
    )

@ -203,7 +202,7 @@ class Edit extends App.ControllerModal
    controller = new App.ControllerForm(
      model:     { configure_attributes: configureAttributesInput, className: '' },
      params:    item
-      el:         @content.find('.js-input')
+      el:        content.find('.js-input')
      autofocus: true
    )

@ -217,7 +216,7 @@ class Edit extends App.ControllerModal
    controller = new App.ControllerForm(
      model:     { configure_attributes: configureAttributesTextarea, className: '' },
      params:    item
-      el:         @content.find('.js-textarea')
+      el:        content.find('.js-textarea')
      autofocus: true
    )

@ -233,7 +232,7 @@ class Edit extends App.ControllerModal
    controller = new App.ControllerForm(
      model:      { configure_attributes: configureAttributesSelect, className: '' },
      params:     item
-      el:         @content.find('.js-select')
+      el:         content.find('.js-select')
      autofocus:  true
    )

@ -245,14 +244,14 @@ class Edit extends App.ControllerModal
        },
    ###

-    @content.find('[name=data_type]').on(
+    content.find('[name=data_type]').on(
      'change',
      (e) =>
        dataType = $( e.target ).val()
-        @content.find('.js-middle > div').addClass('hide')
-        @content.find(".js-#{dataType}").removeClass('hide')
+        content.find('.js-middle > div').addClass('hide')
+        content.find(".js-#{dataType}").removeClass('hide')
    )
-    @content.find('[name=data_type]').trigger('change')
+    content.find('[name=data_type]').trigger('change')


    configureAttributesBottom = [
@ -262,15 +261,9 @@ class Edit extends App.ControllerModal
      model:   { configure_attributes: configureAttributesBottom, className: '' },
      params:  item
      #screen: @screen || 'edit'
-      el:         @content.find('.js-bottom')
+      el:      content.find('.js-bottom')
    )

-    #@content = controller.form
-
-
-    #@show(content)
-    @show()
-
-
+    controller.form

 App.Config.set( 'SystemObject', { prio: 1700, parent: '#system', name: 'Objects', target: '#system/object_manager', controller: Index, role: ['Admin'] }, 'NavBarAdmin' )
--- a/app/assets/javascripts/app/controllers/organization_history.coffee
+++ b/app/assets/javascripts/app/controllers/organization_history.coffee
@ -1,22 +1,11 @@
 class App.OrganizationHistory extends App.GenericHistory
-  constructor: ->
-    super
-    @fetch()
-
-  fetch: ->
-
-    # get data
+  fetch: =>
    @ajax(
      id:    'organization_history'
      type:  'GET'
-      url:   @apiPath + '/organizations/history/' + @organization_id
+      url:   "#{@apiPath}/organizations/history/#{@organization_id}"
      success: (data, status, xhr) =>
-
-        # load assets
        App.Collection.loadAssets(data.assets)
-
        @items = data.history
-
-        # render page
        @render()
    )
--- a/app/assets/javascripts/app/controllers/organization_profile.coffee
+++ b/app/assets/javascripts/app/controllers/organization_profile.coffee
@ -108,7 +108,10 @@ class Object extends App.Controller

    # start action controller
    showHistory = ->
-      new App.OrganizationHistory( organization_id: organization.id )
+      new App.OrganizationHistory(
+        organization_id: organization.id
+        container: @el.closest('.content')
+      )
    editOrganization = =>
      new App.ControllerGenericEdit(
        id: organization.id
--- a/app/assets/javascripts/app/controllers/profile.coffee
+++ b/app/assets/javascripts/app/controllers/profile.coffee
@ -6,4 +6,4 @@ App.Config.set( 'profile/:target', Index, 'Routes' )

 App.Config.set( 'Profile', { prio: 1000, name: 'Profile', target: '#profile' }, 'NavBarProfile' )

-App.Config.set( 'Profile', { prio: 1700, parent: '#current_user', name: 'Profile', target: '#profile', role: [ 'Agent', 'Customer' ] }, 'NavBarRight' )
+App.Config.set( 'Profile', { prio: 1700, parent: '#current_user', name: 'Profile', target: '#profile', translate: true, role: [ 'Agent', 'Customer' ] }, 'NavBarRight' )
--- a/app/assets/javascripts/app/controllers/taskbar_widget.coffee
+++ b/app/assets/javascripts/app/controllers/taskbar_widget.coffee
@ -112,18 +112,16 @@ class App.TaskbarWidget extends App.Controller

    @navigate '#'

-class Remove extends App.ControllerModal
-  constructor: ->
-    super
-    @head        = 'Confirm'
-    @message     = 'Tab has changed, you really want to close it?'
-    @cancel      = true
-    @close       = true
-    @button      = 'Discared changes'
-    @buttonClass = 'btn--danger'
-    @show()
+class Remove extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: 'Discared changes'
+  buttonClass: 'btn--danger'
+  head: 'Confirm'
+
+  content: =>
+    App.i18n.translateContent('Tab has changed, you really want to close it?')

  onSubmit: (e) =>
-    e.preventDefault()
-    @hide()
+    @close()
    @ui.remove(e, @key, true)
--- a/app/assets/javascripts/app/controllers/ticket_customer.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_customer.coffee
@ -1,29 +1,21 @@
-class App.TicketCustomer extends App.ControllerModal
-  constructor: ->
-    super
-
-    @head   = 'Change Customer'
-    @close  = true
-    @cancel = true
-    @button = true
+class App.TicketCustomer extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  head: 'Change Customer'

+  content: =>
    configure_attributes = [
      { name: 'customer_id', display: 'Customer', tag: 'user_autocompletion', null: false, placeholder: 'Enter Person or Organization/Company', minLengt: 2, disableCreateUser: true },
    ]
-
    controller = new App.ControllerForm(
      model:
        configure_attributes: configure_attributes,
      autofocus: true
    )
-
-    @content = controller.form
-
-    @show()
+    controller.form

  onSubmit: (e) =>
-    e.preventDefault()
-
    params = @formParam(e.target)

    @customer_id = params['customer_id']
@ -31,7 +23,7 @@ class App.TicketCustomer extends App.ControllerModal
    callback = =>

      # close modal
-      @hide()
+      @close()

      # update ticket
      @ticket.updateAttributes(
--- a/app/assets/javascripts/app/controllers/ticket_history.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_history.coffee
@ -1,22 +1,11 @@
 class App.TicketHistory extends App.GenericHistory
-  constructor: ->
-    super
-    @fetch()
-
-  fetch: ->
-
-    # get data
+  fetch: =>
    @ajax(
-      id:    'ticket_history',
-      type:  'GET',
-      url:   @apiPath + '/ticket_history/' + @ticket_id,
+      id:    'ticket_history'
+      type:  'GET'
+      url:   "#{@apiPath}/ticket_history/#{@ticket_id}"
      success: (data, status, xhr) =>
-
-        # load assets
        App.Collection.loadAssets(data.assets)
-
        @items = data.history
-
-        # render page
        @render()
    )
--- a/app/assets/javascripts/app/controllers/ticket_overview.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_overview.coffee
@ -620,10 +620,15 @@ class BulkForm extends App.Controller
      msg: App.i18n.translateContent('Bulk-Action executed!')
    }

-class App.OverviewSettings extends App.ControllerModal
-  constructor: ->
-    super
+class App.OverviewSettings extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  headPrefix: 'Edit'
+
+  content: =>
    @overview = App.Overview.find(@overview_id)
+    @head     = @overview.name

    @configure_attributes_article = []
    if @view_mode is 'd'
@ -715,19 +720,13 @@ class App.OverviewSettings extends App.ControllerModal
        owner:          'Owner'
    })

-    @head   = App.i18n.translateContent( 'Edit' ) + ': ' + App.i18n.translateContent( @overview.name )
-    @close  = true
-    @cancel = true
-    @button = true
    controller = new App.ControllerForm(
      model:     { configure_attributes: @configure_attributes_article }
      autofocus: false
    )
-    @content = controller.form
-    @show()
+    controller.form

  onSubmit: (e) =>
-    e.preventDefault()
    params = @formParam(e.target)

    # check if re-fetch is needed
@ -756,8 +755,8 @@ class App.OverviewSettings extends App.ControllerModal
          App.OverviewIndexCollection.trigger()
          App.OverviewCollection.trigger(@overview.link)

-        # hide modal
-        @hide()
+        # close modal
+        @close()
    )

 class TicketOverviewRouter extends App.ControllerPermanent
--- a/app/assets/javascripts/app/controllers/user_history.coffee
+++ b/app/assets/javascripts/app/controllers/user_history.coffee
@ -1,22 +1,11 @@
 class App.UserHistory extends App.GenericHistory
-  constructor: ->
-    super
-    @fetch()
-
-  fetch: ->
-
-    # get data
+  fetch: =>
    @ajax(
-      id:    'user_history',
-      type:  'GET',
-      url:   @apiPath + '/users/history/' + @user_id,
+      id:    'user_history'
+      type:  'GET'
+      url:   "#{@apiPath}/users/history/#{@user_id}"
      success: (data, status, xhr) =>
-
-        # load assets
        App.Collection.loadAssets(data.assets)
-
        @items = data.history
-
-        # render page
        @render()
    )
--- a/app/assets/javascripts/app/controllers/user_profile.coffee
+++ b/app/assets/javascripts/app/controllers/user_profile.coffee
@ -110,8 +110,11 @@ class Object extends App.Controller
    })

    # start action controller
-    showHistory = ->
-      new App.UserHistory( user_id: user.id )
+    showHistory = =>
+      new App.UserHistory(
+        user_id: user.id
+        container: @el.closest('.content')
+      )

    editUser = =>
      new App.ControllerGenericEdit(
--- a/app/assets/javascripts/app/controllers/widget/link.coffee
+++ b/app/assets/javascripts/app/controllers/widget/link.coffee
@ -1,7 +1,7 @@
 class App.WidgetLink extends App.Controller
  events:
-    'click .js-add': 'add',
-    'click .js-remove': 'remove',
+    'click .js-add': 'add'
+    'click .js-delete': 'delete'

  constructor: ->
    super
@ -16,25 +16,20 @@ class App.WidgetLink extends App.Controller
    # fetch item on demand
    # get data
    @ajax(
-      id:    'links_' + @object.id + '_' + @object_type,
-      type:  'GET',
-      url:   @apiPath + '/links',
-      data:  {
-        link_object:       @object_type,
-        link_object_value: @object.id,
-      }
-      processData: true,
+      id:    "links_#{@object.id}_#{@object_type}"
+      type:  'GET'
+      url:   "#{@apiPath}/links"
+      data:
+        link_object:       @object_type
+        link_object_value: @object.id
+      processData: true
      success: (data, status, xhr) =>
        @links = data.links
-
-        # load assets
        App.Collection.loadAssets(data.assets)
-
        @render()
    )

  render: =>
-
    list = {}
    for item in @links
      if !list[ item['link_type'] ]
@ -51,7 +46,7 @@ class App.WidgetLink extends App.Controller
      links: list
    )

-  remove: (e) =>
+  delete: (e) =>
    e.preventDefault()
    link_type   = $(e.target).data('link-type')
    link_object_source = $(e.target).data('object')
@ -61,17 +56,16 @@ class App.WidgetLink extends App.Controller

    # get data
    @ajax(
-      id:    'links_remove_' + @object.id + '_' + @object_type,
-      type:  'GET',
-      url:   @apiPath + '/links/remove',
-      data:  {
-        link_type:                 link_type,
-        link_object_source:        link_object_source,
-        link_object_source_value:  link_object_source_value,
-        link_object_target:        link_object_target,
-        link_object_target_value:  link_object_target_value,
-      }
-      processData: true,
+      id:   "links_remove_#{@object.id}_#{@object_type}"
+      type: 'GET'
+      url:  "#{@apiPath}/links/remove"
+      data:
+        link_type:                link_type
+        link_object_source:       link_object_source
+        link_object_source_value: link_object_source_value
+        link_object_target:       link_object_target
+        link_object_target_value: link_object_target_value
+      processData: true
      success: (data, status, xhr) =>
        @fetch()
    )
@ -86,42 +80,37 @@ class App.WidgetLink extends App.Controller
      container:      @container
    )

-class App.LinkAdd extends App.ControllerModal
+class App.LinkAdd extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  head: 'Link'
+  shown: false
+
  constructor: ->
    super
-    @head   = 'Links'
-    @button = true
-    @cancel = true
-
    @ticket = @object
-
    @fetch()

  fetch: ->
-
-    # merge tickets
    @ajax(
      id:    'ticket_related'
      type:  'GET'
-      url:   @apiPath + '/ticket_related/' + @ticket.id
-      processData: true,
+      url:   "#{@apiPath}/ticket_related/#{@ticket.id}"
+      processData: true
      success: (data, status, xhr) =>
-
-        # load assets
        App.Collection.loadAssets(data.assets)
-
        @ticket_ids_by_customer    = data.ticket_ids_by_customer
        @ticket_ids_recent_viewed  = data.ticket_ids_recent_viewed
        @render()
    )

-
-  render: ->
-    @content = $ App.view('link/add')(
-      link_object:    @link_object,
-      link_object_id: @link_object_id,
-      object:         @object,
-    )
+  content: =>
+    content = $( App.view('link/add')(
+      link_object:    @link_object
+      link_object_id: @link_object_id
+      object:         @object
+    ))

    list = []
    for ticket_id in @ticket_ids_by_customer
@ -129,11 +118,11 @@ class App.LinkAdd extends App.ControllerModal
        ticketItem = App.Ticket.fullLocal( ticket_id )
        list.push ticketItem
    new App.ControllerTable(
-      el:       @content.find('#ticket-merge-customer-tickets'),
+      el:       content.find('#ticket-merge-customer-tickets')
      overview: [ 'number', 'title', 'state', 'group', 'created_at' ]
-      model:    App.Ticket,
-      objects:  list,
-      radio:    true,
+      model:    App.Ticket
+      objects:  list
+      radio:    true
    )

    list = []
@ -142,28 +131,26 @@ class App.LinkAdd extends App.ControllerModal
        ticketItem = App.Ticket.fullLocal( ticket_id )
        list.push ticketItem
    new App.ControllerTable(
-      el:       @content.find('#ticket-merge-recent-tickets'),
+      el:       content.find('#ticket-merge-recent-tickets')
      overview: [ 'number', 'title', 'state', 'group', 'created_at' ]
-      model:    App.Ticket,
-      objects:  list,
-      radio:    true,
+      model:    App.Ticket
+      objects:  list
+      radio:    true
    )

-    @content.delegate('[name="ticket_number"]', 'focus', (e) ->
+    content.delegate('[name="ticket_number"]', 'focus', (e) ->
      $(e.target).parents().find('[name="radio"]').prop( 'checked', false )
    )

-    @content.delegate('[name="radio"]', 'click', (e) ->
+    content.delegate('[name="radio"]', 'click', (e) ->
      if $(e.target).prop('checked')
        ticket_id = $(e.target).val()
        ticket    = App.Ticket.fullLocal( ticket_id )
        $(e.target).parents().find('[name="ticket_number"]').val( ticket.number )
    )
-
-    @show()
+    content

  onSubmit: (e) =>
-    e.preventDefault()
    params = @formParam(e.target)

    if !params['ticket_number']
@ -175,18 +162,17 @@ class App.LinkAdd extends App.ControllerModal

    # get data
    @ajax(
-      id:    'links_add_' + @object.id + '_' + @object_type,
-      type:  'GET',
-      url:   @apiPath + '/links/add',
-      data:  {
-        link_type:                params['link_type'],
-        link_object_target:       'Ticket',
-        link_object_target_value: @object.id,
-        link_object_source:       'Ticket',
-        link_object_source_number: params['ticket_number'],
-      }
-      processData: true,
+      id:    "links_add_#{@object.id}_#{@object_type}"
+      type:  'GET'
+      url:   "#{@apiPath}/links/add"
+      data:
+        link_type:                params['link_type']
+        link_object_target:       'Ticket'
+        link_object_target_value: @object.id
+        link_object_source:       'Ticket'
+        link_object_source_number: params['ticket_number']
+      processData: true
      success: (data, status, xhr) =>
-        @hide()
+        @close()
        @parent.fetch()
    )
--- a/app/assets/javascripts/app/controllers/widget/maintenance.coffee
+++ b/app/assets/javascripts/app/controllers/widget/maintenance.coffee
@ -15,6 +15,8 @@ class Widget extends App.Controller
    if message.reload
      @disconnectClient()
      button = 'Continue session'
+    else
+      button = 'Close'

    # convert to html and linkify
    message.message = App.Utils.textCleanup( message.message )
@ -22,11 +24,11 @@ class Widget extends App.Controller

    new App.SessionMessage(
      head:          message.head
-      content:     message.message
+      contentInline: message.message
      keyboard:      true
      backdrop:      true
-      close:       true
-      button:      button
+      buttonClose:   true
+      buttonSubmit:  button
      forceReload:   message.reload
    )

--- a/app/assets/javascripts/app/controllers/widget/session_taken_over.coffee
+++ b/app/assets/javascripts/app/controllers/widget/session_taken_over.coffee
@ -40,11 +40,11 @@ class Widget extends App.Controller
          if data.taskbar_id isnt App.TaskManager.TaskbarId()
            @error = new App.SessionMessage(
              head:         'Session'
-              message:     App.i18n.translateInline('A new session with your account was created. This session will be stopped to prevent a conflict.')
+              message:      'A new session with your account was created. This session will be stopped to prevent a conflict.'
              keyboard:     false
              backdrop:     true
-              close:       false
-              button:      'Continue session'
+              buttonClose:  false
+              buttonSubmit: 'Continue session'
              forceReload:  true
            )
            @disconnectClient()
--- a/app/assets/javascripts/app/controllers/widget/translation_inline.coffee
+++ b/app/assets/javascripts/app/controllers/widget/translation_inline.coffee
@ -32,11 +32,12 @@ class Widget extends App.Controller

    # observe if text has been translated
    $('body')
-      .on '.translation', 'focus', (e) ->
+      .on 'focus.translation', '.translation', (e) ->
        element = $(e.target)
        element.data 'before', element.html()
        element
-      .on '.translation', 'blur', (e) =>
+      .on 'blur.translation', '.translation', (e) =>
+        console.log('blur')
        element = $(e.target)
        source = element.attr('title')

@ -66,16 +67,17 @@ class Widget extends App.Controller
        else
          translation = new App.Translation
          translation.load(
-            locale: @locale
+            locale:         App.i18n.get()
            source:         source
            target:         translation_new
+            initial_target: ''
          )
          translation.save()

        element

  disable: ->
-    $('body').off('.translation')
+    $('body').off('focus.translation blur.translation')

    # disable translation inline
    App.Config.set('translation_inline', false)
--- a/app/assets/javascripts/app/controllers/widget/translation_support.coffee
+++ b/app/assets/javascripts/app/controllers/widget/translation_support.coffee
@ -20,23 +20,9 @@ class TranslationSupport extends App.Controller
      meta    = App.i18n.meta()
      percent = parseInt( meta.translated / (meta.total / 100) )
      return if percent > 95
-      message = App.i18n.translateContent('Only %s% of this language is translated, help to improve Zammad and complete the translation.', percent)
-      if percent > 80
-        message = App.i18n.translateContent('Up to %s% of this language is translated, help to make Zammad even better and complete the translation.', percent)

      # show message
-      modal = new App.ControllerModal(
-        head:        App.i18n.translateContent('Help to improve Zammad!')
-        message:     message
-        cancel:      false
-        close:       true
-        shown:       true
-        button:      'Complete translations'
-        buttonClass: 'btn--success'
-        onSubmitCallback: =>
-          @navigate '#system/translation'
-          modal.hide()
-      )
+      new Modal(percent: percent)

    @bind 'i18n:language:change', =>
      @delay(check, 2500, 'translation_support')
@ -45,3 +31,32 @@ class TranslationSupport extends App.Controller
      @delay(check, 2500, 'translation_support')

 App.Config.set( 'translaton_support', TranslationSupport, 'Widgets' )
+
+class Modal extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: 'No Thanks!'
+  buttonSubmit: 'Complete translations'
+  head: 'Help to improve Zammad!'
+  shown: false
+
+  constructor: ->
+    super
+    return if App.LocalStorage.get('translation_support_no', @Session.get('id'))
+    @render()
+
+  content: =>
+    better = false
+    if @percent > 80
+      better = true
+    App.view('translation/support')(
+      percent: @percent
+      better: better
+    )
+
+  onCancel: =>
+    App.LocalStorage.set('translation_support_no', true, @Session.get('id'))
+    @onClose()
+
+  onSubmit: =>
+    @navigate '#system/translation'
+    @onClose()
--- a/app/assets/javascripts/app/lib/app_post/ajax.coffee
+++ b/app/assets/javascripts/app/lib/app_post/ajax.coffee
@ -73,10 +73,10 @@ class _ajaxSingleton
      return if status is 502

      # show error message
-      new App.ErrorModal(
-        message: 'StatusCode: ' + status
-        detail:  detail
-        close:   true
+      new App.ControllerModalNice(
+        head:          'StatusCode: ' + status
+        contentInline: '<pre>' + App.Utils.htmlEscape(detail) + '</pre>'
+        buttonClose:   true
      )
    )

--- a/app/assets/javascripts/app/lib/app_post/browser.coffee.coffee
+++ b/app/assets/javascripts/app/lib/app_post/browser.coffee.coffee
@ -40,8 +40,11 @@ class App.Browser
    # disable id older
    if data.browser
      if map[data.browser.name] && data.browser.major < map[data.browser.name]
-        @message(data, map[data.browser.name])
-        console.log('Browser not supported')
+        new Modal(
+          data: data
+          version: map[data.browser.name]
+        )
+        App.Log.error('Browser', 'Browser not supported')
        return false

    # allow browser
@ -73,12 +76,13 @@ class App.Browser
      localStorage.setItem('fingerprint', fingerprint)
    fingerprint

-  @message: (data, version) ->
-    new App.ControllerModal(
-      head:     'Browser too old!'
-      message:  "Your Browser is not supported (#{data.browser.name} #{data.browser.major} on #{data.os.name}). Please use a newer one (e. g. #{data.browser.name} #{version} or higher)."
-      close:    false
+class Modal extends App.ControllerModalNice
+  buttonClose: false
+  buttonCancel: false
+  buttonSubmit: false
  backdrop: false
  keyboard: false
-      shown:    true
-    )
+  head: 'Browser too old!'
+
+  content: ->
+    "Your Browser is not supported (#{@data.browser.name} #{@data.browser.major} on #{@data.os.name}). Please use a newer one (e. g. #{@data.browser.name} #{@version} or higher)."
--- a/app/assets/javascripts/app/lib/app_post/user_organization_autocompletion.coffee
+++ b/app/assets/javascripts/app/lib/app_post/user_organization_autocompletion.coffee
@ -294,26 +294,22 @@ class App.UserOrganizationAutocompletion extends App.Controller
      container: @el.closest('.content')
    )

-class UserNew extends App.ControllerModal
-  constructor: ->
-    super
-    @head   = 'New User'
-    @cancel = true
-    @button = true
+class UserNew extends App.ControllerModalNice
+  buttonClose: true
+  buttonCancel: true
+  buttonSubmit: true
+  head: 'User'
+  headPrefix: 'New'

+  content: ->
    controller = new App.ControllerForm(
      model:     App.User
      screen:    'edit'
      autofocus: true
    )
+    controller.form

-    @content = controller.form
-
-    @show()
-
-  onSubmit: (e) ->
-
-    e.preventDefault()
+  onSubmit: (e) =>
    params = @formParam(e.target)

    # if no login is given, use emails as fallback
@ -346,9 +342,9 @@ class UserNew extends App.ControllerModal
          ui.parent.close()

          # start customer info controller
-          ui.hide()
+          ui.close()
        App.User.full(@id, callbackReload , true)

      fail: ->
-        ui.hide()
+        ui.close()
    )
--- a/app/assets/javascripts/app/lib/app_post/websocket.coffee
+++ b/app/assets/javascripts/app/lib/app_post/websocket.coffee
@ -256,14 +256,7 @@ class _webSocketSingleton extends App.Controller
        message = =>

          # show reconnect message
-          @error = new App.ControllerModal(
-            head:    'Lost network connection!'
-            message: 'Trying to reconnect...'
-            backdrop: false
-            keyboard: false
-            close:    false
-            shown:    true
-          )
+          @error = new Modal()
        if !@tryToConnect
          App.Delay.set message, 7000, 'websocket-no-connection-try-reconnect-message', 'ws'
        @tryToConnect = true
@ -380,3 +373,14 @@ class _webSocketSingleton extends App.Controller
        @_ajaxInit( force: true )
        @_ajaxReceiveWorking = false
    )
+
+class Modal extends App.ControllerModalNice
+  buttonClose: false
+  buttonCancel: false
+  buttonSubmit: false
+  backdrop: 'static'
+  keyboard: false
+  head: 'Lost network connection!'
+
+  content: ->
+    'Trying to reconnect...'
--- a/app/assets/javascripts/app/models/translation.coffee
+++ b/app/assets/javascripts/app/models/translation.coffee
@ -1,4 +1,4 @@
 class App.Translation extends App.Model
-  @configure 'Translation', 'source', 'target', 'locale'
+  @configure 'Translation', 'source', 'target', 'target_initial', 'locale'
  @extend Spine.Model.Ajax
  @url: @apiPath + '/translations'
--- a/app/assets/javascripts/app/views/calendar/index.jst.eco
+++ b/app/assets/javascripts/app/views/calendar/index.jst.eco
@ -22,14 +22,14 @@
    <div class="action-flow action-flow--row">
      <div class="action-row">
        <div class="action-flow action-flow--noWrap">
-          <h2><% if !_.isEmpty(calendar.ical_url): %><span title="<%- @T('Last sync at') %>: <%= @Ttimestamp(calendar.last_sync) %><% if calendar.last_log: %>: <%= calendar.last_log %><% end %>">
+          <h2><% if !_.isEmpty(calendar.ical_url): %><span title="<%- @Ti('Last sync at') %>: <%- @Ttimestamp(calendar.last_sync) %><% if calendar.last_log: %>: <%= calendar.last_log %><% end %>">
            <% if calendar.last_log: %>
              <%- @Icon('status', 'error inline') %>
            <% else: %>
              <%- @Icon('status', 'ok inline') %>
            <% end %></span><% end %> <%= calendar.name %></h2>
          <% if calendar.default: %>
-            <div class="action-label">Default</div>
+            <div class="action-label"><%- @T('Default') %></div>
          <% end %>
        </div>
      </div>
--- a/app/assets/javascripts/app/views/channel/form.jst.eco
+++ b/app/assets/javascripts/app/views/channel/form.jst.eco
@ -19,7 +19,7 @@
          <label for="form-message-title"><%- @T('Title of the form') %></label>
        </div>
        <div class="controls">
-          <input type="text" id="form-message-title" name="messageTitle" value="<%- @T('Feedback Form') %>">
+          <input type="text" id="form-message-title" name="messageTitle" value="<%- @Ti('Feedback Form') %>">
        </div>
      </div>
      <div class="input form-group">
@ -27,7 +27,7 @@
          <label for="form-message-submit"><%- @T('Name of form submit button') %></label>
        </div>
        <div class="controls">
-          <input type="text" id="form-message-submit" name="messageSubmit" value="<%- @T('Submit') %>">
+          <input type="text" id="form-message-submit" name="messageSubmit" value="<%- @Ti('Submit') %>">
        </div>
      </div>
      <div class="input form-group">
@ -35,7 +35,7 @@
          <label for="form-message-thank-you"><%- @T('Message after sending form') %></label>
        </div>
        <div class="controls">
-          <textarea type="text" id="form-message-thank-you" name="messageThankYou" rows="3"><%- @T('Thank you for your inquiry! We\'ll contact you soon as possible.') %></textarea>
+          <textarea type="text" id="form-message-thank-you" name="messageThankYou" rows="3"><%- @Ti('Thank you for your inquiry! We\'ll contact you soon as possible.') %></textarea>
        </div>
      </div>
    </fieldset>
--- a/app/assets/javascripts/app/views/generic/admin/empty.jst.eco
+++ b/app/assets/javascripts/app/views/generic/admin/empty.jst.eco
@ -1,4 +1,4 @@
-<p><%= @T(@explanation) %></p>
+<p><%- @T(@explanation) %></p>

 <table class="table table--placeholder">
  <thead><tr><th><%- @T('No Entries') %>
--- a/app/assets/javascripts/app/views/layout_ref/customer_chat.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/customer_chat.jst.eco
@ -17,7 +17,7 @@
        </div>
      </div>
      <div class="page-header-meta">
-        <div class="btn btn--action" data-type="settings"><%= @T('Settings') %></div>
+        <div class="btn btn--action" data-type="settings"><%- @T('Settings') %></div>
      </div>
    </div>
  <div class="chat-workspace"></div>
--- a/app/assets/javascripts/app/views/layout_ref/customer_chat_window.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/customer_chat_window.jst.eco
@ -16,5 +16,5 @@
 </div>
 <div class="chat-controls">
  <div class="chat-input form-control form-control--small form-control--multiline js-customerChatInput" contenteditable="true"></div>
-  <div class="btn btn--primary btn--slim btn--small js-send"><%= @T('Send') %></div>
+  <div class="btn btn--primary btn--slim btn--small js-send"><%- @T('Send') %></div>
 </div>
--- a/app/assets/javascripts/app/views/modal.jst.eco
+++ b/app/assets/javascripts/app/views/modal.jst.eco
@ -2,28 +2,20 @@
  <form>
    <div class="modal-content">
      <div class="modal-header">
-  <% if @close: %>
+  <% if @buttonClose: %>
        <div class="modal-close js-close">
          <%- @Icon('diagonal-cross') %>
        </div>
  <% end %>
-        <h1 class="modal-title"><%- @T( @head ) %></h1>
+        <h1 class="modal-title"><% if @headPrefix: %><%- @T(@headPrefix) %>: <% end %><%- @T(@head) %></h1>
      </div>
      <div class="modal-body">
-      <% if @message: %>
-          <p><%= @message %></p>
-      <% end %>
-      <% if @detail: %>
-          <pre><%= @detail %></pre>
-      <% end %>
-      <% if @content: %>
      <%- @content %>
-      <% end %>
      </div>
      <div class="modal-footer">
-  <% if @cancel: %>
+  <% if @buttonCancel: %>
        <div class="modal-leftFooter">
-          <a class="btn btn--text btn--subtle js-cancel align-left" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+          <a class="btn btn--text btn--subtle js-cancel align-left" href="#/"><%- @T(@buttonCancel) %></a>
        </div>
  <% end %>
  <% for button in @centerButtons: %>
@ -31,9 +23,9 @@
          <div class="btn <%= button.className %> align-center"><%- @T(button.text) %></div>
        </div>
  <% end %>
-  <% if @button: %>
+  <% if @buttonSubmit: %>
        <div class="modal-rightFooter">
-          <button type="submit" class="btn <%= @buttonClass %> js-submit align-right"><%- @T( @button ) %></button>
+          <button type="submit" class="btn <%= @buttonClass %> js-submit align-right"><%- @T(@buttonSubmit) %></button>
        </div>
  <% end %>
      </div>
--- a/app/assets/javascripts/app/views/profile/calendar_subscriptions.jst.eco
+++ b/app/assets/javascripts/app/views/profile/calendar_subscriptions.jst.eco
@ -1,23 +1,23 @@
 <div class="page-header">
  <div class="page-header-title">
-    <h1><%= @T('Calendar') %></h1>
+    <h1><%- @T('Calendar') %></h1>
  </div>
 </div>
 <div class="page-content">
-  <h2><%= @T('Ticket Subscriptions') %></h2>
+  <h2><%- @T('Ticket Subscriptions') %></h2>

-  <p><%= @T('See your tickets from within your favorite calendar by adding the following url to your calendar app.') %></p>
+  <p><%- @T('See your tickets from within your favorite calendar by adding the following url to your calendar app.') %></p>

-  <h3><%= @T('URL') %></h3>
+  <h3><%- @T('URL') %></h3>
  <input class="form-control js-select" readonly value="<%= @baseurl %>/ical/tickets">

-  <h3><%= @T('Subscription Settings') %></h3>
+  <h3><%- @T('Subscription Settings') %></h3>
  <table class="settings-list">
    <thead>
      <tr>
-        <th style="white-space: nowrap;"><%= @T('Status Type') %>
-        <th colspan="2"><%= @T('Options') %>
-        <th width="100%"><%= @T('Direct URL') %>
+        <th style="white-space: nowrap;"><%- @T('Status Type') %>
+        <th colspan="2"><%- @T('Options') %>
+        <th width="100%"><%- @T('Direct URL') %>
      </tr>
    </thead>
    <tbody>
@ -30,18 +30,18 @@
            <input type="checkbox" name="<%= stateType %>/own"<%= if options.own then ' checked' %>>
            <%- @Icon('checkbox', 'icon-unchecked') %>
            <%- @Icon('checkbox-checked', 'icon-checked') %>
-            <span class="label-text"><%= @T('own tickets') %></span>
+            <span class="label-text"><%- @T('own tickets') %></span>
          </label>
        <td>
          <label class="inline-label checkbox-replacement">
            <input type="checkbox" name="<%= stateType %>/not_assigned"<%= if options.not_assigned then ' checked' %>>
            <%- @Icon('checkbox', 'icon-unchecked') %>
            <%- @Icon('checkbox-checked', 'icon-checked') %>
-            <span class="label-text"><%= @T('not assigned tickets') %></span>
+            <span class="label-text"><%- @T('not assigned tickets') %></span>
          </label>
        <td>
-          <div class="btn btn--table btn--text js-showLink"><%= @T('Show') %></div>
-          <input class="form-control form-control--borderless js-select is-hidden" readonly value="<%= @baseurl %>/ical/tickets/<%= stateType %>">
+          <div class="btn btn--table btn--text js-showLink"><%- @T('Show') %></div>
+          <input class="form-control form-control--borderless js-select is-hidden" readonly value="<%- @baseurl %>/ical/tickets/<%= stateType %>">
      </tr>
      <% end %>
    </tbody>
--- a/app/assets/javascripts/app/views/report/download_header.jst.eco
+++ b/app/assets/javascripts/app/views/report/download_header.jst.eco
@ -4,7 +4,7 @@
    <% for profile in @profiles: %>
      <% for backend in @metric.backend: %>
        <% if backend.dataDownload: %>
-        <li <% if backend.name is @downloadBackendSelected: %>class="is-active active"<% end %>><a href="#" class="js-dataDownloadBackendSelector" data-toggle="tab" data-profile-id="<%= profile.id %>" data-backend="<%= backend.name %>"><%= @T(backend.display) %></a></li>
+        <li <% if backend.name is @downloadBackendSelected: %>class="is-active active"<% end %>><a href="#" class="js-dataDownloadBackendSelector" data-toggle="tab" data-profile-id="<%= profile.id %>" data-backend="<%= backend.name %>"><%- @T(backend.display) %></a></li>
        <% end %>
      <% end %>
    <% end %>
--- a/app/models/translation.rb
+++ b/app/models/translation.rb
@ -40,6 +40,8 @@ dedicated:
        {},
        {
          json: true,
+          open_timeout: 6,
+          read_timeout: 16,
        }
      )
      fail "Can't load translations from #{url}: #{result.error}" if !result.success?
@ -114,6 +116,8 @@ push translations to online
      },
      {
        json: true,
+        open_timeout: 6,
+        read_timeout: 16,
      }
    )
    fail "Can't push translations to #{url}: #{result.error}" if !result.success?
--- a/lib/user_agent.rb
+++ b/lib/user_agent.rb
@ -16,11 +16,11 @@ get http/https calls
  result = UserAgent.get(
    'http://host/some_dir/some_file?param1=123',
    {
-      :param1 => 'some value',
+      param1: 'some value',
    },
    {
-      :open_timeout => 2,
-      :read_timeout => 4,
+      open_timeout: 4,
+      read_timeout: 10,
    },
  )

@ -34,7 +34,7 @@ get json object
    'http://host/some_dir/some_file?param1=123',
    {},
    {
-      :json => true,
+      json: true,
    }
  )

@ -77,12 +77,12 @@ post http/https calls
  result = UserAgent.post(
    'http://host/some_dir/some_file',
    {
-      :param1 => 1,
-      :param2 => 2,
+      param1: 1,
+      param2: 2,
    },
    {
-      :open_timeout => 2,
-      :read_timeout => 4,
+      open_timeout: 4,
+      read_timeout: 10,
    },
  )

@ -125,12 +125,12 @@ put http/https calls
  result = UserAgent.put(
    'http://host/some_dir/some_file',
    {
-      :param1 => 1,
-      :param2 => 2,
+      param1: 1,
+      param2: 2,
    },
    {
-      :open_timeout => 2,
-      :read_timeout => 4,
+      open_timeout: 4,
+      read_timeout: 10,
    },
  )

@ -173,8 +173,8 @@ delete http/https calls
  result = UserAgent.delete(
    'http://host/some_dir/some_file',
    {
-      :open_timeout => 2,
-      :read_timeout => 4,
+      open_timeout: 4,
+      read_timeout: 10,
    },
  )

@ -221,8 +221,8 @@ perform get http/https/ftp calls
  result = UserAgent.request(
    'http://host/some_dir/some_file?param1=123',
    {
-      :open_timeout => 2,
-      :read_timeout => 4,
+      open_timeout: 4,
+      read_timeout: 10,
    },
  )

--- a/public/assets/chat/views/loader.eco
+++ b/public/assets/chat/views/loader.eco
@ -4,5 +4,5 @@
    <span class="zammad-chat-loading-circle"></span>
    <span class="zammad-chat-loading-circle"></span>
  </span>
-  <span class="zammad-chat-modal-text"><%= @T('Connecting') %></span>
+  <span class="zammad-chat-modal-text"><%- @T('Connecting') %></span>
 </div>
--- a/public/assets/chat/views/timeout.eco
+++ b/public/assets/chat/views/timeout.eco
@ -1,6 +1,6 @@
 <div class="zammad-chat-modal">
  <div class="zammad-chat-modal-text">
    <%- @T('Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.', "#{ @delay } #{ @unit }", @agent) %><br>
-    <div class="zammad-chat-button"<%= " style='background: #{ @background }'" if @background %>><%= @T('Start new conversation') %></div>
+    <div class="zammad-chat-button"<%= " style='background: #{ @background }'" if @background %>><%- @T('Start new conversation') %></div>
  </div>
 </div>