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

View file

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

View file

@ -73,6 +73,12 @@ class App.ChannelEmailFilter extends App.Controller
class App.ChannelEmailFilterEdit extends App.ControllerModal class App.ChannelEmailFilterEdit extends App.ControllerModal
constructor: -> constructor: ->
super super
@head = 'Postmaster Filter'
@button = true
@close = true
@cancel = true
if @object if @object
@form = new App.ControllerForm( @form = new App.ControllerForm(
model: App.PostmasterFilter, model: App.PostmasterFilter,
@ -84,11 +90,9 @@ class App.ChannelEmailFilterEdit extends App.ControllerModal
model: App.PostmasterFilter, model: App.PostmasterFilter,
autofocus: true, autofocus: true,
) )
@head = 'Postmaster Filter'
@button = true @el = @form.form
@close = true @show()
@cancel = true
@show( @form.form )
onSubmit: (e) => onSubmit: (e) =>
e.preventDefault() e.preventDefault()
@ -158,6 +162,12 @@ class App.ChannelEmailAddress extends App.Controller
class App.ChannelEmailAddressEdit extends App.ControllerModal class App.ChannelEmailAddressEdit extends App.ControllerModal
constructor: -> constructor: ->
super super
@head = 'Email-Address'
@button = true
@close = true
@cancel = true
if @object if @object
@form = new App.ControllerForm( @form = new App.ControllerForm(
model: App.EmailAddress model: App.EmailAddress
@ -169,11 +179,10 @@ class App.ChannelEmailAddressEdit extends App.ControllerModal
model: App.EmailAddress, model: App.EmailAddress,
autofocus: true, autofocus: true,
) )
@head = 'Email-Address'
@button = true @el = @form.form
@close = true
@cancel = true @show()
@show( @form.form )
onSubmit: (e) => onSubmit: (e) =>
e.preventDefault() e.preventDefault()
@ -239,6 +248,12 @@ class App.ChannelEmailSignature extends App.Controller
class App.ChannelEmailSignatureEdit extends App.ControllerModal class App.ChannelEmailSignatureEdit extends App.ControllerModal
constructor: -> constructor: ->
super super
@head = 'Signature'
@button = true
@close = true
@cancel = true
if @object if @object
@form = new App.ControllerForm( @form = new App.ControllerForm(
model: App.Signature model: App.Signature
@ -250,11 +265,10 @@ class App.ChannelEmailSignatureEdit extends App.ControllerModal
model: App.Signature model: App.Signature
autofocus: true autofocus: true
) )
@head = 'Signature'
@button = true @el = @form.form
@close = true
@cancel = true @show()
@show( @form.form )
onSubmit: (e) => onSubmit: (e) =>
e.preventDefault() e.preventDefault()
@ -321,6 +335,12 @@ class App.ChannelEmailInbound extends App.Controller
class App.ChannelEmailInboundEdit extends App.ControllerModal class App.ChannelEmailInboundEdit extends App.ControllerModal
constructor: -> constructor: ->
super super
@head = 'Email Channel'
@button = true
@close = true
@cancel = true
if @object if @object
@form = new App.ControllerForm( @form = new App.ControllerForm(
model: App.Channel model: App.Channel
@ -332,11 +352,10 @@ class App.ChannelEmailInboundEdit extends App.ControllerModal
model: App.Channel model: App.Channel
autofocus: true autofocus: true
) )
@head = 'Email Channel'
@button = true @el = @form.form
@close = true
@cancel = true @show()
@show( @form.form )
onSubmit: (e) => onSubmit: (e) =>
e.preventDefault() 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 ) $(e.target).parents().find('[name="master_ticket_number"]').val( ticket.number )
) )
@hide() @show()
submit: (e) => onSubmit: (e) =>
e.preventDefault() e.preventDefault()
# disable form # disable form

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,13 +1,7 @@
<div class="modal-dialog"> <div>
<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> <a href="#" data-type="sortorder" class="<%= @orderClass %>"><%- @T( 'Change order' ) %></a>
</div>
<div class="modal-body"> <hr>
<% open = false %> <% open = false %>
<% for item in @items: %> <% for item in @items: %>
@ -52,10 +46,4 @@
<% if open: %> <% if open: %>
</ul> </ul>
<% end %> <% end %>
</div>
<div class="modal-footer">
</div>
</div>
</div> </div>

View file

@ -1,3 +1,5 @@
<div class="flex vertical">
<div class="flex u-positionOrigin horizontal">
<div class="main flex tabsSidebarSpace"> <div class="main flex tabsSidebarSpace">
<div class="userZoom"> <div class="userZoom">
<div class="page-header"> <div class="page-header">
@ -10,7 +12,8 @@
</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> <div class="action"></div>
--> </form>
</div>

View file

@ -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"> <ul class="dropdown-menu">
<li><a href="#" data-type="history"><%- @T( 'History' ) %></a></li> <li><a href="#" data-type="history"><%- @T( 'History' ) %></a></li>
<li><a href="#" data-type="merge"><%- @T( 'Merge' ) %></a></li>
</ul> </ul>
</div> </div>