Attachment 159313 Details for Bug 35425 – Bug 35425: Optimize UX when dragging a Tag or Subfield

[patch] Bug 35425: Optimize UX when dragging a Tag or Subfield

Bug-35425-Optimize-UX-when-dragging-a-Tag-or-Subfi.patch (text/plain), 5.24 KB, created by Slava Shishkin on 2023-11-28 19:18:16 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Slava Shishkin

Created: 2023-11-28 19:18:16 UTC

Size: 5.24 KB

patch

obsolete

>From 928fe09f279765a5eec73f5c85df9dceb85a43c8 Mon Sep 17 00:00:00 2001
>From: Andrii Nugged <nugged@gmail.com>
>Date: Thu, 16 Nov 2023 18:20:55 +0200
>Subject: [PATCH] Bug 35425: Optimize UX when dragging a Tag or Subfield
>
>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.
>---
> .../intranet-tmpl/prog/css/addbiblio.css      | 14 ++++-------
> .../prog/en/modules/cataloguing/addbiblio.tt  | 24 +++++++++++--------
> koha-tmpl/intranet-tmpl/prog/js/cataloging.js |  2 ++
> 3 files changed, 21 insertions(+), 19 deletions(-)
>
>diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
>index 40dc457193..acfae906bf 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
>+++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
>@@ -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 {
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
>index 68cb3126ce..3f09598fa1 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
>@@ -78,17 +78,17 @@
>             selectTab( "#tab0XX_panel" );
>         }
> 
>-        $("#addbibliotabs ul.sortable_field").each( (i, e) => {
>-            Sortable.create(e, {
>-                animation: 150
>+        function initializeSortable(selector) {
>+            $(selector).each((i, e) => {
>+                Sortable.create(e, {
>+                    handle: '.handle',
>+                    direction: 'vertical',
>+                    animation: 150,
>+                });
>             });
>-        });
>-
>-        $("#addbibliotabs ul.sortable_subfield").each( (i, e) => {
>-            Sortable.create(e, {
>-                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(){
>                                                 
>                                                 <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;"
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
>index 64a5c4cc7f..01c9bcfe99 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
>+++ b/koha-tmpl/intranet-tmpl/prog/js/cataloging.js
>@@ -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,
>         });
>     });
>-- 
>2.43.0

Actions: View | Diff | Splinter Review

Attachments on bug 35425: 159313 | 159379 | 159426