Bug 14667: UI/UX improvements for the Label creator
authorLiz Rea <wizzyrea@gmail.com>
Wed, 5 Aug 2015 03:36:10 +0000 (03:36 +0000)
committerTomas Cohen Arazi <tomascohen@theke.io>
Tue, 6 Oct 2015 14:22:55 +0000 (11:22 -0300)
Note: It would be good to adopt these same changes in the Patron Card creator for consistency and push
      them in conjunction with these changes. -Chris_n

Reasoning

Librarians will be doing label things in the following frequencies, from most frequent to least frequent:
1. Creating new label batches - every day/every few days
2. Managing existing label batches - every day/every few days
3. Managing existing label layouts - as needed, infrequent
5. Managing existing label templates - as needed, infrequent
6. Creating new label layouts - as needed, infrequent
7. Creating new label templates - as needed, infrequent
8. Managing existing printer profiles - possibly once only!
9. Creating new printer profiles - possibly once only!

This change to the label creator aims to make the most frequently used items easily accessible at the top of the main area,
reduces clutter on the page, and makes the label creator fall in line with UI paradigms found elsewhere in Koha.

To test:

Open the label creator: More -> Tools -> Label creator
Note that the toolbar has changed. It should be consistent across all of the label creator (it is an include).

+ New menu:

Label batch
1. make sure it looks ok - toolbar buttons are consistent at the top of the main block.
2. add items both by barcode, and by search (note this patch does not touch the pop up window. Another day.)
3. note that the usual buttons have moved below the textarea, and now have icons.
4. delete and export single items using the buttons corresponding to each item
5. select multiple and use the buttons above the table to remove and export selected items
6. export a full batch
7. deduplicate a batch
There should be no regressions in functionality.

Layout
1. This menu item should take you directly to the "Edit layout" screen.
2. no functional changes here.
3. note toolbar at top is consistent

Label template
1. this menu item should take you directly to the "Edit label template" page.
2. no functional changes here.
3. note toolbar at top is consistent.

Printer profile
1. this menu item should take you directly to the "Edit printer profile" page.
2. no functional changes here.
3. note toolbar at top is consistent.

+ Manage menu:

Label batches
1. This menu item should take you directly to the "currently available batches" page.
2. select a batch to edit using the buttons
3. select a batch to delete using the buttons - it should ask for confirm.
4. select several batches using the tickboxes, and select Export selected. Batches should be exported as normal.
5. note toolbar at top is consistent.

Layouts
1. This menu item should take you directly to the "currently available layouts" page.
2. select a layout to edit using the buttons
3. select a layout to delete using the buttons
4. note toolbar at top is consistent.

Label templates
1. This menu item should take you directly to the "currently available templates" page.
2. select a template to edit using the buttons
3. select a template to delete using the buttons
4. note toolbar at top is consistent.

Printer profiles
1. This menu item should take you directly to the "currently available profiles" page.
2. select a profile to edit using the buttons
3. select a profile to delete using the buttons
4. note toolbar at top is consistent

+ General
* note that sidebar now only has "labels home" instead of the full "manage" list. It seemed redundant with the toolbar tidied up.

Please note that I am happy to take suggestions/amendments to these changes.

Signed-off-by: Chris Nighswonger <cnighswonger@foundations.edu>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

koha-tmpl/intranet-tmpl/prog/en/includes/labels-menu.inc
koha-tmpl/intranet-tmpl/prog/en/includes/labels-toolbar.inc
koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-batch.tt
koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-layout.tt
koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-profile.tt
koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-edit-template.tt
koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-home.tt
koha-tmpl/intranet-tmpl/prog/en/modules/labels/label-manage.tt
labels/label-edit-batch.pl
labels/label-manage.pl

index db78310..98538ed 100644 (file)
@@ -1,8 +1,4 @@
 <div id="navmenu"><ul id="navmenulist">
     <li><a href="/cgi-bin/koha/labels/label-home.pl">Labels home</a></li>
-    <li><a href="/cgi-bin/koha/labels/label-manage.pl?label_element=layout">Manage layouts</a></li>
-    <li><a href="/cgi-bin/koha/labels/label-manage.pl?label_element=template">Manage templates</a></li>
-    <li><a href="/cgi-bin/koha/labels/label-manage.pl?label_element=profile">Manage profiles</a></li>
-    <li><a href="/cgi-bin/koha/labels/label-manage.pl?label_element=batch">Manage batches</a></li>
 </ul>
 </div>
index 06850f9..76fb660 100644 (file)
@@ -1,17 +1,20 @@
 <div id="toolbar" class="btn-toolbar">
     <div class="btn-group">
-        <a class="btn btn-small" href="/cgi-bin/koha/labels/label-edit-layout.pl?op=new">New layout</a>
+        <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-plus"></i> New <span class="caret"></span></button>
+        <ul class="dropdown-menu">
+            <li><a href="/cgi-bin/koha/labels/label-edit-batch.pl?op=new">Label batch</a></li>
+            <li><a href="/cgi-bin/koha/labels/label-edit-layout.pl?op=new">Layout</a></li>
+            <li><a href="/cgi-bin/koha/labels/label-edit-template.pl?op=new">Label template</a></li>
+            <li><a href="/cgi-bin/koha/labels/label-edit-profile.pl?op=new">Printer profile</a></li>
+        </ul>
     </div>
-
     <div class="btn-group">
-            <a class="btn btn-small" href="/cgi-bin/koha/labels/label-edit-template.pl?op=new">New template</a>
+        <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-edit"></i> Manage <span class="caret"></span></button>
+        <ul class="dropdown-menu">
+            <li><a href="/cgi-bin/koha/labels/label-manage.pl?label_element=batch">Label batches</a></li>
+            <li><a href="/cgi-bin/koha/labels/label-manage.pl?label_element=layout">Layouts</a></li>
+            <li><a href="/cgi-bin/koha/labels/label-manage.pl?label_element=template">Label templates</a></li>
+            <li><a href="/cgi-bin/koha/labels/label-manage.pl?label_element=profile">Printer profiles</a></li>
+        </ul>
     </div>
-
-    <div class="btn-group">
-        <a class="btn btn-small" href="/cgi-bin/koha/labels/label-edit-profile.pl?op=new">New profile</a>
-    </div>
-
-    <div class="btn-group">
-        <a class="btn btn-small" href="/cgi-bin/koha/labels/label-edit-batch.pl?op=new">New batch</a>
-    </div>
-</div>
\ No newline at end of file
+</div>
index 532406a..ed3f148 100644 (file)
                 return true;    // ok
             };
         }
-           function DeleteConfirm() {
-                var msg = "Are you sure you want to delete batch [% batch_id %]?"
-                var answer = confirm(msg);
-                if (answer) {
-                    window.location = "/cgi-bin/koha/labels/label-manage.pl?op=delete&amp;label_element=batch&amp;element_id=[% batch_id %]";
-                }
-                else {
-                    return; // abort delete
-                }
-            };
             function Remove() {
                 items = new Array;
                 item_num = new Array;
                     item_msg = item_num.join(", ");
                     var msg = "Are you sure you want to remove label number(s): " + item_msg + " from this batch?"
                 }
-//                else if (document.items.action.checked) {
-//                    getstr = "label_id="+document.items.action.value;
-//                    var msg = "Are you sure you want to remove selected item from this batch?"
-//                }
                 else {
                     alert(_("Please select at least label to delete."));
                     return;     // no item selected
         <div id="bd">
             <div id="yui-main">
                 <div class="yui-b">
-                    <div id="toolbar" class="btn-toolbar">
-                            <a class="btn btn-small" id="additems" href="#">Add item(s)</a>[% IF ( table_loop ) %]
-                            <a class="btn btn-small" id="removeitems" href="#">Remove item(s)</a>
-                            <a class="btn btn-small" id="deletebatch" href="#">Delete batch</a>
-                            <a class="btn btn-small" id="deduplicate" href="#">Remove duplicates</a>
-                            <a class="btn btn-small" id="exportitems" href="#">Export item(s)</a>
-                            <a class="btn btn-small" id="exportbatch" href="#">Export batch</a>[% END %]
-                    </div>
-
+                        [% INCLUDE 'labels-toolbar.inc' %]
                         [% IF ( err ) %]
                             <div class="dialog alert">
                                 <strong>WARNING:</strong> An error was encountered and [% errstr %] Please have your system administrator check the error log for details.
                                     </fieldset>
                                 </div>
                             </form>
-                                [% IF ( table_loop ) %]
+                            <div id="batch-manage" class="btn-toolbar">
+                                <a class="btn btn-small" id="additems" href="#"><icon class="icon-plus"></icon> Add item(s)</a>[% IF ( table_loop ) %]
+                                <a class="btn btn-small" id="removeitems" href="#"><icon class="icon-trash"></icon> Remove selected items</a>
+                                <a class="btn btn-small" id="deduplicate" href="#"><icon class="icon-minus"></icon> Remove duplicates</a>
+                                <a class="btn btn-small" id="exportitems" href="#"><icon class="icon-share"></icon> Export selected items</a>
+                                <a class="btn btn-small" id="exportbatch" href="#"><icon class="icon-share"></icon> Export full batch</a>[% END %]
+                            </div>
+                            [% IF ( table_loop ) %]
                                 <form name="items" class="checkboxed">
                                     <h2>Items in batch number [% batch_id %]</h2>
                                     <table id="batcht">
                                                     <tr>
                                                         [% FOREACH text_field IN table_loo.text_fields %]
                                                             [% IF ( text_field.select_field ) %]
-                                                                <td><input type="checkbox" name="action" value="[% text_field.field_value %]"></td>
+                                                                <td><a class="btn btn-mini" onclick="return confirm('Are you sure you want to delete this?');" href="/cgi-bin/koha/labels/label-edit-batch.pl?op=remove&amp;batch_id=[% batch_id |url %]&amp;label_id=[% text_field.field_value |url %]"><icon class="icon-trash"></icon> Delete</a> <a class="btn btn-mini" href="#" onclick="GB_showCenter('Export labels','/cgi-bin/koha/labels/label-print.pl?batch_id=[% batch_id %]&amp;label_id=[% text_field.field_value |url %]')"><icon class="icon-share"></icon> Export</a></td>
+                                                                <td><center><input type="checkbox" name="action" value="[% text_field.field_value %]"></center></td>
                                                             [% ELSE %]
                                                                 <td>
                                                                     [% IF ( text_field.field_name == '_item_type_tbl' ) %]
index 20acaaa..2e3b05e 100644 (file)
         <div id="bd">
             <div id="yui-main">
                 <div class="yui-b">
+                    <div class="yui-g">
+                    [% INCLUDE 'labels-toolbar.inc' %]
+                        <div class="yui-u first">
+
+                        </div>
+                    </div>
                     <form name="input" action="/cgi-bin/koha/labels/label-edit-layout.pl" method="get">
                         <fieldset class="rows">
                             <legend>[% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] Label layout</legend>
index 815fe61..7cac6c5 100644 (file)
         <div id="bd">
            <div id="yui-main">
                <div class="yui-b">
-                        <div class="yui-g">
+                    <div class="yui-g">
+                    [% INCLUDE 'labels-toolbar.inc' %]
+                    </div>
+                        <div class="yui-u first">
                             <h3>Edit printer profile</h3>
                                 <div class="yui-g first">
                     <form name="input" action="/cgi-bin/koha/labels/label-edit-profile.pl" method="get">
index 7a316b0..5f3108f 100644 (file)
         <div id="bd">
             <div id="yui-main">
                 <div class="yui-b">
+                    <div class="yui-g">
+                    [% INCLUDE 'labels-toolbar.inc' %]
+                        <div class="yui-u first">
+
+                        </div>
+                    </div>
                     <form name="input" action="/cgi-bin/koha/labels/label-edit-template.pl" method="get">
                     <div class="yui-g">
                         <h3>Edit label template</h3>
index 4889b1c..e537205 100644 (file)
                     <div class="yui-g">
                     [% INCLUDE 'labels-toolbar.inc' %]
                         <div class="yui-u first">
-                            <div class="justify homeimage">
-                            <div class="lci_01"></div>
-                            <div class="lci_02"></div>
-                            <div class="lci_03"></div>
-                                <h2>Welcome to Koha's label creator module</h2>
-                                <p>The Label Creator allow you to use layouts and templates which you design to print a nearly unlimited variety of labels including barcodes. Here are some of the features of the Label Creator module:</p>
-                                <ul>
-                                    <li>Customize label layouts</li>
-                                    <li>Design custom label templates for printed labels</li>
-                                    <li>Build and manage batches of labels</li>
-                                    <li>Export single or multiple batches</li>
-                                    <li>Export single or multiple labels from within a batch</li>
-                                    <li>Export label data in one of three formats:</li>
-                                    <ul>
-                                        <li>PDF - Readable by any standard PDF reader, making labels printable directly on a printer</li>
-                                        <li>CSV - Export label data after your chosen layout is applied allowing labels to be imported in to a variety of applications</li>
-                                        <li>XML - Included as an alternate export format</li>
-                                    </ul>
-                                </ul>
-                                <p>At the top of each screen within the Label Creator, you will see a toolbar allowing quick access to relevant functions. The menu to the left of each screen also allows easy access to the different sections of the Label Creator. The breadcrumb trail near the top of each screen will give specific indication as to where you are within the Label Creator module and allow quick navigation to previously traversed sections. And finally, you can find more detailed information on each section of the Label Creator by clicking the online help link at the upper left-hand corner of every page.</p>
-                                <p>The developers of the Label Creator module hope you will find this an extremely useful tool in the course of your cataloging work. You are encouraged to submit any enhancement requests as well as any bugs via <a href="http://bugs.koha-community.org/">Koha Project Bugzilla</a>.</p>
-                            </div>
+
                         </div>
                     </div>
                 </div>
index 205990a..1e435a6 100644 (file)
@@ -4,31 +4,6 @@
     [% INCLUDE 'greybox.inc' %]
     <script type="text/javascript">
         //<![CDATA[
-            function DeleteConfirm() {
-                var element_id = selected_layout("delete");
-                if (element_id>-1) {
-                    var msg = _("Are you sure you want to delete %s %s?").format("[% label_element %]", element_id);
-                    var answer = confirm(msg);
-                    if (answer) {
-                        window.location = "/cgi-bin/koha/labels/label-manage.pl?op=delete&amp;label_element=[% label_element %]&amp;element_id=" + element_id;
-                    }
-                    else {
-                        return; // abort delete
-                    }
-                }
-                else {
-                    return;     // no layout selected
-                };
-            };
-            function Edit() {
-                var element_id = selected_layout("edit");
-                if (element_id>-1) {
-                    window.location = "/cgi-bin/koha/labels/label-edit-[% label_element %].pl?op=edit&amp;element_id=" + element_id;
-                }
-                else {
-                    return;     // no layout selected
-                };
-            };
             function Xport() {
                 batches= new Array;
                 if(document.layouts.action.length > 0) {
                                         <tr>
                                         [% FOREACH text_field IN table_loo.text_fields %]
                                             [% IF ( text_field.select_field ) %]
-                                                <td align="center"><input type="checkbox" name="action" value="[% text_field.field_value %]" /></td>
+                                                <td align="center"><a class="btn btn-mini" href="/cgi-bin/koha/labels/label-edit-[% label_element |url %].pl?op=edit&amp;element_id=[% text_field.field_value |url %]"><icon class="icon-edit"></icon> Edit</a>  <a class="btn btn-mini" href="/cgi-bin/koha/labels/label-manage.pl?op=delete&amp;label_element=[% label_element %]&amp;element_id=[% text_field.field_value |url %]" onclick="return confirm('Are you sure you want to delete this?');"><icon class="icon-trash"></icon> Delete</a></td>
+                                                [% IF label_element == 'batch' %] <td align="center"><input type="checkbox" name="action" value="[% text_field.field_value %]" /></td>[% END %]
                                             [% ELSIF ( text_field.field_value ) %]
                                                 <td>[% text_field.field_value %]</td>
                                             [% ELSE %]
                                     [% END %]
                                 [% END %]
                             </table>
-                            <fieldset class="action">
-                                <input type="button" id="edit" onclick="Edit()" value="Edit" />
-                                <input type="button" id="delete" onclick="DeleteConfirm()" value="Delete" />
-                                [% IF ( print ) %]<input type="button" id="print" onclick="Xport()" value="Export" />[% END %]
+                                [% IF ( print ) %]<input type="button" class="btn btn-sm" id="print" onclick="Xport()" value="Export selected" />[% END %]
                             </fieldset>
                             </form>
                             [% ELSE %]
index c5e8f5c..c14f8d6 100755 (executable)
@@ -52,6 +52,7 @@ my $display_columns = [ {_label_number  => {label => 'Label Number', link_field
                         {_summary       => {label => 'Summary', link_field => 0}},
                         {_item_type     => {label => 'Item Type', link_field => 0}},
                         {_barcode       => {label => 'Barcode', link_field => 0}},
+                        {_delete        => {label => ' ', link_field => 0}},
                         {select         => {label => 'Select', value => '_label_id'}},
                       ];
 my $op = $cgi->param('op') || 'edit';
index aa842cd..bee2473 100755 (executable)
@@ -49,22 +49,26 @@ my $display_columns = { layout =>   [  # db column       => {col label
                                         {barcode_type    => {label => 'Barcode Type',   link_field      => 0}},
                                         {printing_type   => {label => 'Print Type',     link_field      => 0}},
                                         {format_string   => {label => 'Fields to Print',link_field      => 0}},
-                                        {select          => {label => 'Select',         value           => 'layout_id'}},
+                                        {select         => {label => 'Actions',         value           => 'layout_id'}},
                                     ],
-                        template => [   {template_id     => {label => 'Template ID',    link_field      => 0}},
+                        template => [
+                                        {template_id     => {label => 'Template ID',    link_field      => 0}},
                                         {template_code   => {label => 'Template Name',  link_field      => 0}},
                                         {template_desc   => {label => 'Description',    link_field      => 0}},
-                                        {select          => {label => 'Select',         value           => 'template_id'}},
+                                        {select         => {label => 'Actions',         value           => 'template_id'}},
                                     ],
-                        profile =>  [   {profile_id      => {label => 'Profile ID',     link_field      => 0}},
+                        profile =>  [
+                                        {profile_id      => {label => 'Profile ID',     link_field      => 0}},
                                         {printer_name    => {label => 'Printer Name',   link_field      => 0}},
                                         {paper_bin       => {label => 'Paper Bin',      link_field      => 0}},
                                         {_template_code  => {label => 'Template Name',  link_field      => 0}},     # this display column does not have a corrisponding db column in the profile table, hence the underscore
-                                        {select          => {label => 'Select',         value           => 'profile_id'}},
+                                        {select          => {label => 'Actions',         value           => 'profile_id'}},
                                     ],
-                        batch =>    [   {batch_id        => {label => 'Batch ID',       link_field      => 0}},
+                        batch =>    [
+                                        {batch_id        => {label => 'Batch ID',       link_field      => 0}},
                                         {_item_count     => {label => 'Item Count',     link_field      => 0}},
-                                        {select          => {label => 'Select',         value           => 'batch_id'}},
+                                        {select          => {label => 'Actions',         value           => 'batch_id'}},
+                                        {select1         => {label => ' ',           link_field       => 'batch_id'}},
                                     ],
 };