Bug 33158: Use template wrapper for authorized values and item types administration tabs
This patch updates the authorized values and item types administration templates so that they use the new WRAPPER directive to build tabbed navigation. Seeing that the markup in itemtypes.tt and authorised_values.tt is indential when it comes to icon selection, I have moved that section of the template into an include file and updated both templates to use it. The patch also makes minor SCSS changes, so to test you must rebuild the staff interface CSS. To test, apply the patch and go to Administration -> Item types. - Edit an item type. - On the edit page you should see tabs under "Choose an icon." - Confirm that the tabs look correct and work correctly. - If you did not previously have any icon selected, the "None" tab should be active. - If you had an icon selected, that icon set's tab should be active. - Confirm that if you specify a remote image (e.g.https://via.placeholder.com/50/FF0000/FFFFFF.png) the tab is correctly shown after you save and re-edit. - Confirm that changing icons works correctly and that the selected icon's tab is always active when you return to the edit view. Perform the same tests in Administration -> Authorized values. Signed-off-by: Andrew Auld <andrew.auld@ptfs-europe.com> Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
parent
b439354026
commit
49c64f3d27
GPG key ID:
0A272EA1B2F3C15F
4 changed files with 97 additions and 150 deletions
|
|
@ -3291,6 +3291,20 @@ code {
|
|||
padding: 1em;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
&.active {
|
||||
&::after,
|
||||
&::before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 0;
|
||||
padding: .2em 1.4em 0 0;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
[% IF ( context == "authval" ) %]
|
||||
[% SET image_location = av.imageurl %]
|
||||
[% ELSE %]
|
||||
[% SET image_location = itemtype.image_location("intranet") %]
|
||||
[% END %]
|
||||
|
||||
[% WRAPPER tabs id= "icons" %]
|
||||
<h5>Choose an icon:</h5>
|
||||
[% WRAPPER tabs_nav %]
|
||||
[% WRAPPER tab_item tabname="none" %]
|
||||
<span>None</span>
|
||||
[% END %]
|
||||
[% FOREACH imageset IN imagesets %]
|
||||
[% IF ( imageset.imagesetactive ) %]
|
||||
[% SET bt_active = 1 %]
|
||||
[% ELSE %]
|
||||
[% SET bt_active = 0 %]
|
||||
[% END %]
|
||||
[% WRAPPER tab_item tabname= imageset.imagesetname bt_active= bt_active %] [% imageset.imagesetname | html %] [% END %]
|
||||
[% END %]
|
||||
[% IF image_location.match('^http') %]
|
||||
[% SET bt_active = 1 %]
|
||||
[% ELSE %]
|
||||
[% SET bt_active = 0 %]
|
||||
[% END %]
|
||||
[% WRAPPER tab_item tabname= "remote" bt_active= bt_active %] <span>Remote image</span> [% END %]
|
||||
[% END %]
|
||||
|
||||
[% WRAPPER tab_panels %]
|
||||
[% WRAPPER tab_panel tabname="none" bt_active= 0 %]
|
||||
<div class="[% context | html %]-icons">
|
||||
<label for="noimage">No image:
|
||||
<input type="radio" name="image" id="noimage" value="removeImage" />
|
||||
</label>
|
||||
</div> <!-- /.[% context | html %]-icons -->
|
||||
[% END %]
|
||||
|
||||
[% FOREACH imageset IN imagesets %]
|
||||
[% IF ( imageset.imagesetactive ) %]
|
||||
[% SET bt_active = 1 %]
|
||||
[% ELSE %]
|
||||
[% SET bt_active = 0 %]
|
||||
[% END %]
|
||||
[% WRAPPER tab_panel tabname=imageset.imagesetname bt_active= bt_active %]
|
||||
<div class="[% context | html %]-icons">
|
||||
[% FOREACH image IN imageset.images %]
|
||||
<label>
|
||||
[% IF image.StaffImageUrl %]
|
||||
<img src="[% image.StaffImageUrl | html %]" alt="[% image.StaffImageUrl | html %]" title="[% image.StaffImageUrl | html %]" />
|
||||
[% END %]
|
||||
[% IF image.checked %]
|
||||
<input type="radio" name="image" value="[% image.KohaImage | html %]" checked="checked" />
|
||||
[% ELSIF image.KohaImage %] <!-- to delete the radio button if there is no image after -->
|
||||
<input type="radio" name="image" value="[% image.KohaImage | html %]" />
|
||||
[% END %]
|
||||
</label>
|
||||
[% END #/ FOREACH image %]
|
||||
</div> <!-- /.[% context | html %]-icons -->
|
||||
[% END # /tab_panel %]
|
||||
[% END # /FOREACH imageset %]
|
||||
|
||||
[% IF image_location.match('^http') %]
|
||||
[% SET bt_active = 1 %]
|
||||
[% ELSE %]
|
||||
[% SET bt_active = 0 %]
|
||||
[% END %]
|
||||
[% WRAPPER tab_panel tabname="remote" %]
|
||||
<label for="remote_image_check"> Remote image:</label>
|
||||
[% IF image_location.match('^http') %]
|
||||
<input type="radio" id="remote_image_check" name="image" value="remoteImage" checked="checked" />
|
||||
<input type="text" name="remoteImage" size="48" maxlength="200" value="[% image_location | html %]" onmousedown="document.getElementById('remote_image_check').checked = true;" />
|
||||
<img src="[% image_location | html %]" alt="" />
|
||||
[% ELSE %]
|
||||
<input type="radio" id="remote_image_check" name="image" value="remoteImage" />
|
||||
<input type="text" name="remoteImage" size="48" maxlength="200" value="" onmousedown="document.getElementById('remote_image_check').checked = true;" />
|
||||
[% END %]
|
||||
[% END %]
|
||||
[% END # /tab_panels %]
|
||||
[% END # /tabs#icons %]
|
||||
|
|
@ -157,82 +157,8 @@
|
|||
</li>
|
||||
</ol>
|
||||
|
||||
<div id="icons" class="toptabs">
|
||||
<h5>Choose an icon:</h5>
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation">
|
||||
<a aria-controls="none" role="tab" data-toggle="tab" href="#none">None</a>
|
||||
</li>
|
||||
[% FOREACH imageset IN imagesets %]
|
||||
[% IF ( imageset.imagesetactive ) %]
|
||||
<li role="presentation" class="active">
|
||||
[% ELSE %]
|
||||
<li role="presentation">
|
||||
[% END %]
|
||||
<a aria-controls="[% imageset.imagesetname | html %]" role="tab" data-toggle="tab" href="#[% imageset.imagesetname | uri %]">[% imageset.imagesetname | html %]</a>
|
||||
</li>
|
||||
[% END %]
|
||||
[% IF av.imageurl.match('^http') %]
|
||||
<li role="presentation" class="active">
|
||||
[% ELSE %]
|
||||
<li role="presentation">
|
||||
[% END %]
|
||||
<a aria-controls="remote" role="tab" data-toggle="tab" href="#remote">Remote image</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="none" role="tabpanel" class="tab-pane">
|
||||
<div class="authval-icons">
|
||||
<label for="noimage">No image:
|
||||
<input type="radio" name="image" id="noimage" value="removeImage" />
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /.tab-pane -->
|
||||
[% INCLUDE 'admin-icon-selection.inc' context = "authval" %]
|
||||
|
||||
[% FOREACH imageset IN imagesets %]
|
||||
[% IF ( imageset.imagesetactive ) %]
|
||||
<div id="[% imageset.imagesetname | html %]" role="tabpanel" class="tab-pane active">
|
||||
[% ELSE %]
|
||||
<div id="[% imageset.imagesetname | html %]" role="tabpanel" class="tab-pane">
|
||||
[% END %]
|
||||
<div class="authval-icons">
|
||||
[% FOREACH image IN imageset.images %]
|
||||
<label>
|
||||
[% IF ( image.StaffImageUrl ) %]
|
||||
<img src="[% image.StaffImageUrl | html %]" alt="[% image.StaffImageUrl | html %]" title="[% image.StaffImageUrl | html %]" />
|
||||
[% ELSE %]
|
||||
[% END %]
|
||||
[% IF ( image.checked ) %]
|
||||
<input type="radio" name="image" value="[% image.KohaImage | html %]" checked="checked" />
|
||||
[% ELSE %]
|
||||
[% IF ( image.KohaImage ) %]
|
||||
<!-- to delete the radio button if there is no image after -->
|
||||
<input type="radio" name="image" value="[% image.KohaImage | html %]" />
|
||||
[% END %]
|
||||
[% END %]
|
||||
</label>
|
||||
[% END # /FOREACH image %]
|
||||
</div> <!-- /.authval-icons -->
|
||||
</div> <!-- /.tab-pane -->
|
||||
[% END # /FOREACH imageset %]
|
||||
|
||||
[% IF av.imageurl.match('^http') %]
|
||||
<div id="remote" role="tabpanel" class="tab-pane active">
|
||||
[% ELSE %]
|
||||
<div id="remote" role="tabpanel" class="tab-pane">
|
||||
[% END %]
|
||||
<label for="remote_image_check"> Remote image:</label>
|
||||
[% IF av.imageurl.match('^http') %]
|
||||
<input type="radio" id="remote_image_check" name="image" value="remoteImage" checked="checked" />
|
||||
<input type="text" name="remoteImage" size="48" maxlength="200" value="[% av.imageurl | html %]" onmousedown="document.getElementById('remote_image_check').checked = true;" />
|
||||
<img src="[% av.imageurl | html %]" alt="" />
|
||||
[% ELSE %]
|
||||
<input type="radio" id="remote_image_check" name="image" value="remoteImage" />
|
||||
<input type="text" name="remoteImage" size="48" maxlength="200" value="" onmousedown="document.getElementById('remote_image_check').checked = true;" />
|
||||
[% END %]
|
||||
</div> <!-- /.tab-pane -->
|
||||
</div> <!-- /.tab-content -->
|
||||
</div> <!-- /#icons -->
|
||||
[% END # /IF action_add_category %]
|
||||
</fieldset>
|
||||
|
||||
|
|
|
|||
|
|
@ -217,83 +217,11 @@ Item types › Administration › Koha
|
|||
</li>
|
||||
[% END %]
|
||||
</ol>
|
||||
|
||||
[% UNLESS Koha.Preference('noItemTypeImages') && Koha.Preference('OpacNoItemTypeImages') %]
|
||||
<div id="icons" class="toptabs">
|
||||
<h5>Choose an icon:</h5>
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation">
|
||||
<a aria-controls="non" role="tab" data-toggle="tab" href="#none">None</a>
|
||||
</li>
|
||||
[% FOREACH imageset IN imagesets %]
|
||||
[% IF ( imageset.imagesetactive ) %]
|
||||
<li role="presentation" class="active">
|
||||
[% ELSE %]
|
||||
<li role="presentation">
|
||||
[% INCLUDE 'admin-icon-selection.inc' context = "itemtype" %]
|
||||
[% END %]
|
||||
<a aria-controls="[% imageset.imagesetname | uri %]" role="tab" data-toggle="tab" href="#[% imageset.imagesetname | uri %]">[% imageset.imagesetname | html %]</a>
|
||||
</li>
|
||||
[% END %]
|
||||
[% IF itemtype.image_location('intranet').match('^http') %]
|
||||
<li role="presentation" class="active">
|
||||
[% ELSE %]
|
||||
<li role="presentation">
|
||||
[% END %]
|
||||
<a aria-controls="remote" role="tab" data-toggle="tab" href="#remote">Remote image</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="none" role="tabpanel" class="tab-pane">
|
||||
<div class="itemtype-icons">
|
||||
<label for="noimage">No image:
|
||||
<input type="radio" name="image" id="noimage" value="removeImage" />
|
||||
</label>
|
||||
</div>
|
||||
</div> <!-- /.tab-pane -->
|
||||
|
||||
[% FOREACH imageset IN imagesets %]
|
||||
[% IF ( imageset.imagesetactive ) %]
|
||||
<div id="[% imageset.imagesetname | html %]" role="tabpanel" class="tab-pane active">
|
||||
[% ELSE %]
|
||||
<div id="[% imageset.imagesetname | html %]" role="tabpanel" class="tab-pane">
|
||||
[% END %]
|
||||
<div class="itemtype-icons">
|
||||
[% FOREACH image IN imageset.images %]
|
||||
<label>
|
||||
[% IF image.StaffImageUrl %]
|
||||
<img src="[% image.StaffImageUrl | html %]" alt="[% image.StaffImageUrl | html %]" title="[% image.StaffImageUrl | html %]" />
|
||||
[% END %]
|
||||
[% IF image.checked %]
|
||||
<input type="radio" name="image" value="[% image.KohaImage | html %]" checked="checked" />
|
||||
[% ELSIF image.KohaImage %] <!-- to delete the radio button if there is no image after -->
|
||||
<input type="radio" name="image" value="[% image.KohaImage | html %]" />
|
||||
[% END %]
|
||||
</label>
|
||||
[% END #/ FOREACH image %]
|
||||
</div> <!-- /.itemtype-icons -->
|
||||
</div> <!-- /.tab-pane -->
|
||||
[% END #/FOREACH imageset %]
|
||||
|
||||
[% SET image_location = itemtype.image_location('intranet') %]
|
||||
[% IF image_location.match('^http') %]
|
||||
<div id="remote" role="tabpanel" class="tab-pane active">
|
||||
[% ELSE %]
|
||||
<div id="remote" role="tabpanel" class="tab-pane">
|
||||
[% END %]
|
||||
<label for="remote_image_check"> Remote image:</label>
|
||||
[% IF image_location.match('^http') %]
|
||||
<input type="radio" id="remote_image_check" name="image" value="remoteImage" checked="checked" />
|
||||
<input type="text" name="remoteImage" size="48" maxlength="200" value="[% image_location | html %]" onmousedown="document.getElementById('remote_image_check').checked = true;" />
|
||||
[% IF itemtype.imageurl %]
|
||||
<img src="[% image_location | html %]" alt="" />
|
||||
[% END %]
|
||||
[% ELSE %]
|
||||
<input type="radio" id="remote_image_check" name="image" value="remoteImage" />
|
||||
<input type="text" name="remoteImage" size="48" maxlength="200" value="" onmousedown="document.getElementById('remote_image_check').checked = true;" />
|
||||
[% END %]
|
||||
</div> <!-- /#remote -->
|
||||
</div> <!-- /.tab-content -->
|
||||
</div> <!-- /#icons -->
|
||||
[% END %]
|
||||
<ol class="oladditemtype">
|
||||
<li>
|
||||
<label for="hideinopac">Hide in OPAC: </label>
|
||||
|
|
|
|||
Loading…
Reference in a new issue