Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 35425: Optimize UX when dragging a tag or subfield

Browse source 
To reproduce:
1. Open any biblio and edit that record.
   (select "Edit record" from the "Edit" drop-down menu).
2. Check that selecting the text in any draggable block input/textarea
   fields with a mouse is not possible - it starts dragging instantly.
3. Apply the patch
4. Make sure that draging is activated only when you click
   on the "::" icon in front of the dragged item. And text selection
   works correctly.

Signed-off-by: Phil Ringnalda <phil@chetcolibrary.org>

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
(cherry picked from commit 494ee7c68f)
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This commit is contained in:
Andrii Nugged 2023-11-16 18:20:55 +02:00 committed by Fridolin Somers
parent aad41dd27a
commit 95c36cb388
3 changed files with 21 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
View file

@ -40,20 +40,16 @@ ul li.tag::before {
top: 0;
}
ul li.tag.sortable_tag::before,
ul li.tag li.subfield_line::before {
ul .handle {
color: #999;
content: "\f58e";
cursor: move;
font-family: "Font Awesome 6 Free";
font-size: .8em;
left: 10px;
position: absolute;
top: -3px;
font-size: 1em;
padding-right: 3px;
}
ul li.tag li.subfield_line::before {
top: 3px;
ul li.subfield_line .handle {
font-size: .8em;
}
li.sortable-ghost {

20
koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
View file

@ -78,17 +78,17 @@
selectTab( "#tab0XX_panel" );
}
$("#addbibliotabs ul.sortable_field").each( (i, e) => {
function initializeSortable(selector) {
$(selector).each((i, e) => {
Sortable.create(e, {
animation: 150
});
});
$("#addbibliotabs ul.sortable_subfield").each( (i, e) => {
Sortable.create(e, {
animation: 150
handle: '.handle',
direction: 'vertical',
animation: 150,
});
});
}
initializeSortable("#addbibliotabs ul.sortable_field");
initializeSortable("#addbibliotabs ul.sortable_subfield");
[% IF tab %]
hash = "#[% tab | html %]";
@ -1089,6 +1089,9 @@ $(document).ready(function(){
<li class="tag clearfix" id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
[% END %]
<div class="tag_title" id="div_indicator_tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
[% IF ( innerloo.repeatable ) %]
<span class="handle">&#xf58e;</span>
[% END %]
[% IF advancedMARCEditor %]
<a href="#" tabindex="1" class="tagnum" title="[% innerloo.tag_lib | html %] - Click to expand this tag" data-field_id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">[% innerloo.tag | html %]</a>
[% ELSE %]
@ -1151,6 +1154,7 @@ $(document).ready(function(){
<!-- One line on the marc editor -->
<li class="subfield_line" style="[% subfield_loo.visibility | html %]" id="subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]">
<div class="subfieldcode">
<span class="handle">&#xf58e;</span>
<input type="text"
title="[% subfield_loo.marc_lib | $raw %]"
style=" [% IF ( subfield_loo.fixedfield ) %]display:none; [% END %]border:0;"

2
koha-tmpl/intranet-tmpl/prog/js/cataloging.js
View file

@ -326,6 +326,8 @@ function CloneField(index, hideMarc, advancedMARCEditor) {
$(clone).find("ul.sortable_subfield").each((i, e) => {
Sortable.create(e, {
handle: '.handle',
direction: 'vertical',
animation: 150,
});
});