Bugzilla – Attachment 48945 Details for
Bug 15886
Revise layout and behavior of audio alerts management
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 15886 - Revise layout and behavior of audio alerts management
Bug-15886---Revise-layout-and-behavior-of-audio-al.patch (text/plain), 17.88 KB, created by
Jonathan Druart
on 2016-03-10 11:39:02 UTC
(
hide
)
Description:
Bug 15886 - Revise layout and behavior of audio alerts management
Filename:
MIME Type:
Creator:
Jonathan Druart
Created:
2016-03-10 11:39:02 UTC
Size:
17.88 KB
patch
obsolete
>From 8d9c2c32826ee8e1f8a61e8095e429f2204c86d7 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Tue, 23 Feb 2016 12:07:17 -0500 >Subject: [PATCH] Bug 15886 - Revise layout and behavior of audio alerts > management > >This patch changes the behavior of the audio alerts management page so >that sections of the page are shown or hidden based on what the current >task is. Other changes include: > >- Moving JavaScript to a separate file >- Adding a toolbar with a "New alert" button. >- Enabling or disabling the "play sound" button based on the value of > the sound file field. >- Enabling or disabling the "delete" button based on whether there are > checkboxes checked. >- Switching the patron category administration header search form for > the "generic" catalog search one. >- Adding "Required" classes to required fields so that the staff > client's built-in JS validation library can be used. >- Styling the add/edit form in a way which is consistent with other > interfaces in Koha. >- Removing the invalid "border" attribute from images. >- Adding better alt attributes to images. > >To test, the AudioAlerts system preference must be enabled. Apply the >patch and go to Administration -> Audio alerts. > >- Confirm that the add/edit form is hidden initially. A toolbar with a > "New" button should appear with existing audio alerts in a table > below. >- Confirm that the "New alert" button works: > - The table should be hidden and an empty "add" form displayed. > - Confirm that an empty form cannot be submitted. > - Confirm that typing or selecting a sound enables the "Play sound" > button and that it works to play the sound. > - Confirm that adding valid data works. > - Confirm that clicking the "Cancel" button hides the form and > redisplays the table. >- Test the "edit" button for an existing sound: > - Confirm that the edit form is displayed and populated with the > correct data. > - Confirm that edits are saved correctly. >- When viewing the table of existing alerts, confirm that checking one > of the checkboxes "enables" the delete button. >- With one or more checkboxes checked, test that clicking the delete > button triggers a deletion confirmation. Test both confirm and cancel > operations. >- With no checkboxes checked, test that clicking the delete button > triggers an alert that checkboxes must be checked. >- Ponder whether all this is an improvement or not. > >Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com> > >Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> >--- > koha-tmpl/intranet-tmpl/prog/en/js/audio_alerts.js | 89 +++++++++++ > .../prog/en/modules/admin/audio_alerts.tt | 169 ++++++++------------- > 2 files changed, 151 insertions(+), 107 deletions(-) > create mode 100644 koha-tmpl/intranet-tmpl/prog/en/js/audio_alerts.js > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/audio_alerts.js b/koha-tmpl/intranet-tmpl/prog/en/js/audio_alerts.js >new file mode 100644 >index 0000000..154c33a >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/en/js/audio_alerts.js >@@ -0,0 +1,89 @@ >+$( document ).ready(function() { >+ var checkboxes = $("#delete-alert-form input[type='checkbox']"); >+ var checkedcheckboxes = 0; >+ checkboxes.on("change",function(){ >+ if( $(checkboxes+":checked").length > 0){ >+ checkedcheckboxes = 1; >+ $("#delete-alerts").removeClass("disabled"); >+ } else { >+ checkedcheckboxes = 0; >+ $("#delete-alerts").addClass("disabled"); >+ } >+ }); >+ >+ var soundfield = $("#sound"); >+ var playsound = $('#play-sound'); >+ >+ soundfield.on("change",function(){ >+ enablePlayButton($(this).val(),playsound); >+ }); >+ >+ $(".edit-alert").hide(); >+ $("#new-alert-form").hide(); >+ >+ $("#newalert").on("click",function(e){ >+ e.preventDefault(); >+ $("#new-alert-form").show(); >+ $("#toolbar, #delete-alert-form").hide(); >+ }); >+ >+ $('#koha-sounds').on('change', function() { >+ soundfield.val( this.value ); >+ enablePlayButton($(this).val(),playsound); >+ }); >+ >+ playsound.on('click', function(e) { >+ e.preventDefault(); >+ if( soundfield.val() !== '' ){ >+ playSound( soundfield.val() ); >+ } else { >+ alert( MSG_AUDIO_EMPTY_SOUND ); >+ } >+ }); >+ >+ $('#cancel-edit').on('click', function(e) { >+ e.preventDefault(); >+ >+ enablePlayButton("",playsound); >+ $("#id").val(""); >+ $("#selector").val(""); >+ soundfield.val(""); >+ $("#koha-sounds").val(""); >+ >+ $("#toolbar").show(); >+ $(".edit-alert").hide(); >+ $(".create-alert").show(); >+ $("#new-alert-form").hide(); >+ $("#delete-alert-form").show(); >+ }); >+ >+ $('#delete-alert-form').on('submit', function() { >+ if( checkedcheckboxes == 1 ){ >+ return confirm( MSG_AUDIO_CONFIRM_DELETE ); >+ } else { >+ alert( MSG_AUDIO_CHECK_CHECKBOXES ); >+ return false; >+ } >+ }); >+}); >+ >+function enablePlayButton(sound_field_value,playbutton){ >+ if( sound_field_value !== '' ){ >+ playbutton.removeClass("disabled"); >+ } else { >+ playbutton.addClass("disabled"); >+ } >+} >+ >+function EditAlert( elt, id, precedence, selector, sound ) { >+ $("#new-alert-form").show(); >+ $("#delete-alert-form").hide(); >+ $("#toolbar").hide(); >+ $(".create-alert").hide(); >+ $(".edit-alert").show(); >+ $("#id").val(id); >+ $("#selector").val(selector); >+ $("#sound").val(sound); >+ $("#koha-sounds").val(sound); >+ enablePlayButton(sound,$('#play-sound')); >+} >\ No newline at end of file >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/audio_alerts.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/audio_alerts.tt >index 434716c..69b0aa2 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/audio_alerts.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/audio_alerts.tt >@@ -1,76 +1,17 @@ > [% INCLUDE 'doc-head-open.inc' %] > <title>Koha › Administration › Audio alerts</title> > [% INCLUDE 'doc-head-close.inc' %] >- > <script type="text/javascript"> >-$( document ).ready(function() { >- $(".edit-alert").hide(); >- >- $('#koha-sounds').on('change', function() { >- $('#sound').val( this.value ); >- }); >- >- $('#koha-sounds').on('change', function() { >- $('#sound').val( this.value ); >- }); >- >- $('#play-sound').on('click', function() { >- playSound( $('#sound').val() ); >- return false; >- }); >- >- $('#cancel-edit').on('click', function() { >- $("#id").val(""); >- $("#selector").val(""); >- $("#sound").val(""); >- >- $(".edit-alert").hide(); >- $(".create-alert").show(); >- >- $("#audio-alerts-table").find("td").each(function (i) { >- $(this).removeClass('highlighted-row'); >- }); >- return false; >- }); >- >- $('#new-alert-form').on('submit', function() { >- if ( ! $('#selector').val() ) { >- alert(_("You must enter a selector!")); >- return false; >- } else if ( ! $('#sound').val() ) { >- alert(_("You must choose a sound!")); >- return false; >- } else { >- return true; >- } >- }); >- >- $('#delete-alert-form').on('submit', function() { >- return confirm(_("Are you sure you want to delete the selected audio alerts?")); >- }); >-}); >- >-function EditAlert( elt, id, precedence, selector, sound ) { >- $("#audio-alerts-table").find("td").each(function (i) { >- $(this).removeClass('highlighted-row'); >- }); >- >- $(".create-alert").hide(); >- $(".edit-alert").show(); >- >- $(elt).parent().parent().find("td").each(function (i) { >- $(this).addClass('highlighted-row'); >- }); >- $("#id").val(id); >- $("#selector").val(selector); >- $("#sound").val(sound); >-} >+ var MSG_AUDIO_EMPTY_SOUND = _("Please select or enter a sound."); >+ var MSG_AUDIO_CONFIRM_DELETE = _("Are you sure you want to delete the selected audio alerts?"); >+ var MSG_AUDIO_CHECK_CHECKBOXES = _("Check the box next to the alert you want to delete.") > </script> >- >+<script type="text/javascript" src="[% themelang %]/js/audio_alerts.js"></script> > </head> >+ > <body id="admin_audio_alerts" class="admin"> > [% INCLUDE 'header.inc' %] >-[% INCLUDE 'patrons-admin-search.inc' %] >+[% INCLUDE 'cat-search.inc' %] > > <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> › <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> › Audio alerts</div> > >@@ -78,49 +19,62 @@ function EditAlert( elt, id, precedence, selector, sound ) { > <div id="bd"> > <div id="yui-main"> > <div class="yui-b"> >- <form id="new-alert-form" action="audio_alerts.pl" method="post"> >- <fieldset class="form-inline"> >- <legend><span class="create-alert">Add new alert</span><span class="edit-alert">Edit alert</span></legend> >- >- <input id="id" name="id" type="hidden" value="" /> >- <input id="selector" name="selector" type="text" class="input-large" placeholder="selector" /> >- <input id="sound" name="sound" type="text" class="input-large" placeholder="sound" /> >- >- <button id="play-sound" class="btn"><i class="icon-play"></i> Play sound</button> > >- <br/> >+ <div id="toolbar" class="btn-toolbar"> >+ <a class="btn btn-small" id="newalert" href="/cgi-bin/koha/admin/audio_alerts.pl"><i class="fa fa-plus"></i> New alert</a> >+ </div> > >- <select id="koha-sounds"> >- <option value="">Select built-in sound</option> >- <option value="beep.ogg">beep.ogg</option> >- <option value="call.ogg">call.ogg</option> >- <option value="critical.ogg">critical.ogg</option> >- <option value="device_connect.ogg">device_connect.ogg</option> >- <option value="device_disconnect.ogg">device_disconnect.ogg</option> >- <option value="ending.ogg">ending.ogg</option> >- <option value="fail.ogg">fail.ogg</option> >- <option value="IM_notification.ogg">IM_notification.ogg</option> >- <option value="incoming_call.ogg">incoming_call.ogg</option> >- <option value="loading.ogg">loading.ogg</option> >- <option value="loading_2.ogg">loading_2.ogg</option> >- <option value="maximize.ogg">maximize.ogg</option> >- <option value="minimize.ogg">minimize.ogg</option> >- <option value="new_mail_notification.ogg">new_mail_notification.ogg</option> >- <option value="opening.ogg">opening.ogg</option> >- <option value="panic.ogg">panic.ogg</option> >- <option value="popup.ogg">popup.ogg</option> >- <option value="warning.ogg">warning.ogg</option> >- </select> >+ <form id="new-alert-form" action="audio_alerts.pl" method="post" class="validated"> >+ <fieldset class="rows"> >+ <legend><span class="create-alert">Add new alert</span><span class="edit-alert">Edit alert</span></legend> > >- <p> >- <button id="save-alert" type="submit" class="btn create-alert"><i class="icon-hdd"></i> Save alert</button> >- <button id="save-edit" type="submit" class="btn edit-alert save-edit"><i class="icon-hdd"></i> Update alert</button> >- <a id="cancel-edit" class="btn edit-alert cancel-edit"><i class="icon icon-remove-circle"></i> Cancel edit</a> >- </p> >+ <input id="id" name="id" type="hidden" value="" /> >+ <ol> >+ <li> >+ <label for="selector" class="required">Selector: </label> >+ <input id="selector" name="selector" type="text" class="required input-large" placeholder="selector" /> >+ <span class="required">Required</span> >+ </li> >+ <li> >+ <label for="sound" class="required">Sound: </label> >+ <input id="sound" name="sound" type="text" class="required input-large" placeholder="sound" /> >+ <button id="play-sound" class="btn btn-mini disabled"><i class="icon-play"></i> Play sound</button> >+ <span class="required">Required</span> >+ </li> >+ <li> >+ <label for="koha-sounds">Select a built-in sound: </label> >+ <select id="koha-sounds"> >+ <option value=""> -- Choose one -- </option> >+ <option value="beep.ogg">beep.ogg</option> >+ <option value="call.ogg">call.ogg</option> >+ <option value="critical.ogg">critical.ogg</option> >+ <option value="device_connect.ogg">device_connect.ogg</option> >+ <option value="device_disconnect.ogg">device_disconnect.ogg</option> >+ <option value="ending.ogg">ending.ogg</option> >+ <option value="fail.ogg">fail.ogg</option> >+ <option value="IM_notification.ogg">IM_notification.ogg</option> >+ <option value="incoming_call.ogg">incoming_call.ogg</option> >+ <option value="loading.ogg">loading.ogg</option> >+ <option value="loading_2.ogg">loading_2.ogg</option> >+ <option value="maximize.ogg">maximize.ogg</option> >+ <option value="minimize.ogg">minimize.ogg</option> >+ <option value="new_mail_notification.ogg">new_mail_notification.ogg</option> >+ <option value="opening.ogg">opening.ogg</option> >+ <option value="panic.ogg">panic.ogg</option> >+ <option value="popup.ogg">popup.ogg</option> >+ <option value="warning.ogg">warning.ogg</option> >+ </select> >+ </li> >+ </ol> >+ </fieldset> >+ <fieldset class="action"> >+ <input id="save-alert" type="submit" value="Submit" /> >+ <a href="#" id="cancel-edit" class="cancel cancel-edit">Cancel</a> > </fieldset> > </form> > > <form id="delete-alert-form" action="audio_alerts.pl" method="post"> >+ <h3>Audio alerts</h3> > <table id="audio-alerts-table"> > <thead id="audio-alerts-table-head"> > <tr> >@@ -140,19 +94,19 @@ function EditAlert( elt, id, precedence, selector, sound ) { > <td>[% a.precedence %]</td> > <td style="white-space:nowrap;"> > <a title="Move alert up" href="audio_alerts.pl?action=move&where=up&id=[% a.id %]"> >- <img src="[% interface %]/[% theme %]/img/go-up.png" border="0" alt="Go up" /> >+ <img src="[% interface %]/[% theme %]/img/go-up.png" alt="Move alert up" /> > </a> > > <a title="Move alert to top" href="audio_alerts.pl?action=move&where=top&id=[% a.id %]"> >- <img src="[% interface %]/[% theme %]/img/go-top.png" border="0" alt="Go top" /> >+ <img src="[% interface %]/[% theme %]/img/go-top.png" alt="Move alert to top" /> > </a> > > <a title="Move alert to bottom" href="audio_alerts.pl?action=move&where=bottom&id=[% a.id %]"> >- <img src="[% interface %]/[% theme %]/img/go-bottom.png" border="0" alt="Go bottom" /> >+ <img src="[% interface %]/[% theme %]/img/go-bottom.png" alt="Move alert to bottom" /> > </a> > > <a title="Move alert down" href="audio_alerts.pl?action=move&where=down&id=[% a.id %]"> >- <img src="[% interface %]/[% theme %]/img/go-down.png" border="0" alt="Go down" /> >+ <img src="[% interface %]/[% theme %]/img/go-down.png" alt="Move alert down" /> > </a> > </td> > <td>[% a.selector %]</td> >@@ -163,8 +117,9 @@ function EditAlert( elt, id, precedence, selector, sound ) { > </tbody> > </table> > >- <p/> >- <button id="delete-alerts" type="submit" class="btn"><i class="icon-trash"></i> Delete selected alerts</button> >+ <p> >+ <button id="delete-alerts" type="submit" class="btn disabled"><i class="icon-trash"></i> Delete selected alerts</button> >+ </p> > </form> > </div> > </div> >-- >2.7.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 15886
:
48317
|
48318
| 48945