Owen Leonard
5fe1ad8ac6
This patch updates the OPAC and staff interface to use Bootstrap 5. Bootstrap CSS assets are now pulled from node_modules and compiled into staff-global.css and opac.css at build time. This update lays the foundations of some other chnages, especially the addition of a dark mode in the future. Hundreds of templates have been updated, mostly with updates to the grid markup. Most of the responsive behavior is still the same with the exception of improved flexibility of headers and footers in both the OPAC and staff interface. The other most common change is to add a new "namespace" to data attributes used by Bootstrap, e.g. "data-bs-target" or "data-bs-toggle". Modal markup has also been updated everywhere. Other common changes: dropdown button markup, alert markup (we now use Bootstrap's "alert alert-warning" and "alert alert-info" instead of our old "dialog alert" and "dialog info"). Bootstrap 5 now uses CSS variables which we can override in our own '_variables.scss' (in both the OPAC and staff) to accomplish a lot of the style overrides which we previously put in staff-global.scss. Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
196 lines
11 KiB
Text
196 lines
11 KiB
Text
[% USE raw %]
|
|
[% USE Asset %]
|
|
[% USE Koha %]
|
|
[% PROCESS 'i18n.inc' %]
|
|
[% SET footerjs = 1 %]
|
|
[% INCLUDE 'doc-head-open.inc' %]
|
|
<title>[% FILTER collapse %]
|
|
[% t("Audio alerts") | html %] ›
|
|
[% t("Administration") | html %] ›
|
|
[% t("Koha") | html %]
|
|
[% END %]</title>
|
|
[% INCLUDE 'doc-head-close.inc' %]
|
|
</head>
|
|
|
|
<body id="admin_audio_alerts" class="admin">
|
|
[% WRAPPER 'header.inc' %]
|
|
[% INCLUDE 'prefs-admin-search.inc' %]
|
|
[% END %]
|
|
|
|
[% WRAPPER 'sub-header.inc' %]
|
|
[% WRAPPER breadcrumbs %]
|
|
[% WRAPPER breadcrumb_item %]
|
|
<a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a>
|
|
[% END %]
|
|
[% WRAPPER breadcrumb_item bc_active= 1 %]
|
|
<span>Audio alerts</span>
|
|
[% END %]
|
|
[% END #/ WRAPPER breadcrumbs %]
|
|
[% END #/ WRAPPER sub-header.inc %]
|
|
|
|
<div class="main container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-10 order-md-2 order-sm-1">
|
|
<main>
|
|
[% INCLUDE 'messages.inc' %]
|
|
|
|
<div id="toolbar" class="btn-toolbar">
|
|
<a class="btn btn-default" id="newalert" href="/cgi-bin/koha/admin/audio_alerts.pl"><i class="fa fa-plus"></i> New alert</a>
|
|
</div>
|
|
|
|
|
|
<form id="new-alert-form" action="audio_alerts.pl" method="post" class="validated">
|
|
[% INCLUDE 'csrf-token.inc' %]
|
|
<h1><span class="create-alert">New alert</span><span class="edit-alert">Edit alert</span></h1>
|
|
<fieldset class="rows">
|
|
<legend class="sr-only">Audio alert details</legend>
|
|
<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-default btn-xs disabled"><i class="fa fa-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 type="hidden" id="op-add-edit" name="op" value="cud-add"/>
|
|
<input type="submit" id="save-alert" class="btn btn-primary" value="Submit" />
|
|
<a href="#" id="cancel-edit" class="cancel cancel-edit">Cancel</a>
|
|
</fieldset>
|
|
</form>
|
|
|
|
<h1>Audio alerts</h1>
|
|
[%IF !( Koha.Preference('AudioAlerts') ) %]
|
|
<div class="alert alert-warning">
|
|
<h3>Audio alerts are disabled</h3>
|
|
[% IF ( CAN_user_parameters_manage_sysprefs ) %]
|
|
<p>Please enable system preference <a href="/cgi-bin/koha/admin/preferences.pl?op=search&searchfield=AudioAlerts">AudioAlerts</a> to activate sounds.</p>
|
|
[% ELSE %]
|
|
<p>The system preference <strong>AudioAlerts</strong> must be enabled to activate sounds.</p>
|
|
[% END %]
|
|
</div>
|
|
[% END %]
|
|
<div class="page-section">
|
|
<table id="audio-alerts-table">
|
|
<thead id="audio-alerts-table-head">
|
|
<tr>
|
|
<th> </th>
|
|
<th>Precedence</th>
|
|
<th>Change order</th>
|
|
<th>Selector</th>
|
|
<th>Sound</th>
|
|
<th> </th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody id="audio-alerts-table-body">
|
|
[% FOREACH a IN audio_alerts %]
|
|
<tr>
|
|
<td><input id="del-checkbox-[% a.id | html %]" class="del-checkbox" type="checkbox" value="[% a.id | html %]" /></td>
|
|
<td>[% a.precedence | html %]</td>
|
|
<td style="white-space:nowrap;">
|
|
<form class="move-alert-form" action="audio_alerts.pl" method="post">
|
|
[% INCLUDE 'csrf-token.inc' %]
|
|
<input type="hidden" name="op" value="cud-move"/>
|
|
<input type="hidden" name="where" value="up"/>
|
|
<input type="hidden" name="id" value="[% a.id | html %]"/>
|
|
<button title="Move alert up" type="submit" class="btn btn-link">
|
|
<i class="fa fa-arrow-up fa-lg order-control"></i>
|
|
</button>
|
|
</form>
|
|
|
|
<form class="move-alert-form" action="audio_alerts.pl" method="post">
|
|
[% INCLUDE 'csrf-token.inc' %]
|
|
<input type="hidden" name="op" value="cud-move"/>
|
|
<input type="hidden" name="where" value="top"/>
|
|
<input type="hidden" name="id" value="[% a.id | html %]"/>
|
|
<button title="Move alert to top" type="submit" class="btn btn-link">
|
|
<i class="fa fa-arrow-up fa-lg overline order-control"></i>
|
|
</button>
|
|
</form>
|
|
|
|
<form class="move-alert-form" action="audio_alerts.pl" method="post">
|
|
[% INCLUDE 'csrf-token.inc' %]
|
|
<input type="hidden" name="op" value="cud-move"/>
|
|
<input type="hidden" name="where" value="bottom"/>
|
|
<input type="hidden" name="id" value="[% a.id | html %]"/>
|
|
<button title="Move alert to bottom" type="submit" class="btn btn-link">
|
|
<i class="fa fa-arrow-down fa-lg underline order-control"></i>
|
|
</button>
|
|
</form>
|
|
|
|
<form class="move-alert-form" action="audio_alerts.pl" method="post">
|
|
[% INCLUDE 'csrf-token.inc' %]
|
|
<input type="hidden" name="op" value="cud-move"/>
|
|
<input type="hidden" name="where" value="down"/>
|
|
<input type="hidden" name="id" value="[% a.id | html %]"/>
|
|
<button title="Move alert down" type="submit" class="btn btn-link">
|
|
<i class="fa fa-arrow-down fa-lg order-control"></i>
|
|
</button>
|
|
</form>
|
|
</td>
|
|
<td>[% a.selector | html %]</td>
|
|
<td>[% a.sound | html %]</td>
|
|
<td>
|
|
<a class="btn btn-default btn-xs edit" data-soundid="[% a.id | html %]" data-precedence="[% a.precedence | html %]" data-selector="[% a.selector | html %]" data-sound="[% a.sound | html %]"><i class="fa-solid fa-pencil" aria-hidden="true"></i> Edit</a></td>
|
|
</tr>
|
|
[% END %]
|
|
</tbody>
|
|
</table>
|
|
</div> <!-- /.page-section -->
|
|
|
|
<form id="delete-alert-form" action="audio_alerts.pl" method="post">
|
|
[% INCLUDE 'csrf-token.inc' %]
|
|
[% FOREACH a IN audio_alerts %]
|
|
<input id="del-hidden-[% a.id | html %]" type="hidden" name="delete" value="" />
|
|
[% END %]
|
|
<fieldset class="action">
|
|
<input type="hidden" name="op" value="cud-delete"/>
|
|
<button id="delete-alerts" type="submit" class="btn btn-default disabled"><i class="fa fa-trash-can"></i> Delete selected alerts</button>
|
|
</fieldset>
|
|
</form>
|
|
</main>
|
|
</div> <!-- /.col-md-10.order-md-2 -->
|
|
|
|
<div class="col-md-2 order-sm-2 order-md-1">
|
|
<aside>
|
|
[% INCLUDE 'admin-menu.inc' %]
|
|
</aside>
|
|
</div> <!-- /.col-md-2.order-md-1 -->
|
|
</div> <!-- /.row -->
|
|
[% MACRO jsinclude BLOCK %]
|
|
[% Asset.js("js/admin-menu.js") | $raw %]
|
|
[% Asset.js("js/audio_alerts.js") | $raw %]
|
|
[% END %]
|
|
[% INCLUDE 'intranet-bottom.inc' %]
|