Improved modal dialog.

This commit is contained in:
Martin Edenhofer 2014-09-21 14:06:50 +02:00
parent a56da6fbb9
commit 9ee8e5c0c1
16 changed files with 135 additions and 115 deletions

View file

@ -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)
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')

View file

@ -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()

View file

@ -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()

View file

@ -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

View file

@ -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()

View file

@ -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()

View file

@ -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()

View file

@ -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) ->

View file

@ -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()

View file

@ -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

View file

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

View file

@ -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) ->

View file

@ -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'

View file

@ -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>

View file

@ -1,4 +1,6 @@
<div class="main flex tabsSidebarSpace">
<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>
@ -7,10 +9,11 @@
<div class="main-overviews" id="sortable"></div>
</div>
</div>
</div>
<div class="tabsSidebar vertical"></div>
<!--
<div class="tabsSidebar vertical"></div>
</div>
<form class="bottom-form form-inline horizontal" role="form">
<div class="action"></div>
-->
</form>
</div>

View file

@ -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>