Bugzilla – Attachment 88953 Details for
Bug 22408
Subscription entry form cleanup
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 22408: Subscription entry form cleanup
Bug-22408-Subscription-entry-form-cleanup.patch (text/plain), 31.25 KB, created by
Michal Denar
on 2019-04-26 18:42:20 UTC
(
hide
)
Description:
Bug 22408: Subscription entry form cleanup
Filename:
MIME Type:
Creator:
Michal Denar
Created:
2019-04-26 18:42:20 UTC
Size:
31.25 KB
patch
obsolete
>From 6b2e99bc2426e5810c672da6cc0290cd0fe08ffa Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Mon, 25 Feb 2019 16:28:10 +0000 >Subject: [PATCH] Bug 22408: Subscription entry form cleanup > >This patch makes a number of changes to the subscription entry form: > > - Make the default layout single-column. > - Switch the layout to two-column only when testing prediction > pattern. > - Add a button to hide the prediction pattern test pane. > - Change the style of some buttons and links. Add Font Awesome icons > to some. > - Clean up some issues with capitalization and spacing. > - Make it clearer when form fields are read-only: Move "locked" form > field style from addbiblio.css to staff-global.css and improve it > with regard to mouse interactions > >To test, apply the patch and regenerate the staff client CSS. Clear your >browser cache if necessary. > > - Go to Serials -> New subscription. > - Readonly fields under "Vendor" and "Record" should show a small > padlock icon. > - Test the process of adding a subscription, paying special attention > to the advanced pattern controls: Showing, hiding, modifying, > canceling. > - Test the process of editing a subscription in the same way. > >Signed-off-by: Michal Denar <black23@gmail.com> >--- > koha-tmpl/intranet-tmpl/prog/css/addbiblio.css | 1 - > .../intranet-tmpl/prog/css/src/staff-global.scss | 28 +++-- > .../en/modules/serials/showpredictionpattern.tt | 4 + > .../prog/en/modules/serials/subscription-add.tt | 126 ++++++++++++--------- > .../intranet-tmpl/prog/js/subscription-add.js | 19 +++- > 5 files changed, 112 insertions(+), 66 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css >index 03dd04bb8f..c31b7aa9a7 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css >+++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css >@@ -135,7 +135,6 @@ a.tagnum { > .linktools a:first-child { border-bottom: 1px solid #DDD; } > .linktools a:hover { background-color: #FFC; } > .subfield_controls { margin : 0 .5em; } >-.readonly { border-width : 1px; border-style: inset; padding-left : 15px; background: #EEE url(../img/locked.png) center left no-repeat; width:29em; } > > #cataloguing_additem_itemlist { > margin-bottom : 1em; >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >index 7327eb3e7d..c0f13aed81 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >@@ -343,6 +343,10 @@ th { > font-weight: bold; > text-align: center; > >+ &[scope="row"] { >+ text-align: right; >+ } >+ > &.data { > font-family: $font-monospace; > text-align: right; >@@ -1019,7 +1023,7 @@ fieldset { > > div { > &.hint { >- margin-bottom: .4em; >+ margin: .5em 0; > margin-left: 10.5em; > } > } >@@ -1074,6 +1078,7 @@ fieldset { > } > > &.radio { >+ margin: 0; > padding-left: 9em; > width: auto; > >@@ -1893,6 +1898,21 @@ dd { > } > } > >+.readonly, >+input[type='text']:read-only { >+ background: #EEE url("../img/locked.png") center left no-repeat; >+ border-style: inset; >+ border-width: 1px; >+ cursor: default; >+ padding-left: 15px; >+} >+ >+.readonly:focus, >+input[type='text']:read-only:focus { >+ border-color: unset; >+ border-radius: unset; >+} >+ > .checkedout { > color: #999999; > font-style: italic; >@@ -2439,12 +2459,6 @@ li { > font-style: italic; > } > >-#displayexample { >- background-color: #CCCCCC; >- margin-bottom: 10px; >- padding: 5px; >-} >- > #irregularity_summary { > vertical-align: top; > } >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/showpredictionpattern.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/showpredictionpattern.tt >index d99b946b31..c684348deb 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/showpredictionpattern.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/showpredictionpattern.tt >@@ -84,4 +84,8 @@ > </tbody> > </table> > >+<fieldset class="action"> >+ <button class="btn btn-default btn-sm" id="hidepredictionpattern">Done</button> >+</fieldset> >+ > [% END %] >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-add.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-add.tt >index 0f056f0bd1..eff55ae7da 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-add.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/subscription-add.tt >@@ -14,6 +14,7 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > /* Prevents Bootstrap menus from being hidden inside modal */ > #mana_search_result .modal { overflow: visible; } > #mana_search_result .modal-body { overflow-y: visible; } >+fieldset.rows table { clear: none; margin: 0; } > </style> > </head> > >@@ -32,35 +33,36 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > > <div class="main container-fluid"> > <div class="row"> >- <div class="col-sm-12"> >- <h1>[% IF ( modify ) %] Modify subscription for <i>[% bibliotitle | html %]</i>[% ELSE %]Add a new subscription[% END %] (<span id="page_number">1/2</span>)</h1> >- </div> >- <form method="post" id="subscription_add_form" name="f" action="/cgi-bin/koha/serials/subscription-add.pl" class="validated"> >- [% IF ( modify ) %] >- <input type="hidden" name="op" value="modsubscription" /> >- <input type="hidden" name="subscriptionid" value="[% subscriptionid | html %]" /> >- [% ELSE %] >- <input type="hidden" name="op" value="addsubscription" /> >- [% END %] >- <input type="hidden" name="user" value="[% logged_in_user.userid | html %]" /> >- <input type="hidden" name="irreg_check" value="0" /> >- >- <div id="page_1"> >- <div class="col-md-6"> >+ <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> >+ <h1>[% IF ( modify ) %] Modify subscription for <i>[% bibliotitle | html %]</i>[% ELSE %]Add a new subscription[% END %] (<span id="page_number">1/2</span>)</h1> >+ </div> >+ </div> >+ <form method="post" id="subscription_add_form" name="f" action="/cgi-bin/koha/serials/subscription-add.pl" class="validated"> >+ <div class="row" id="page_1"> >+ <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> >+ [% IF ( modify ) %] >+ <input type="hidden" name="op" value="modsubscription" /> >+ <input type="hidden" name="subscriptionid" value="[% subscriptionid | html %]" /> >+ [% ELSE %] >+ <input type="hidden" name="op" value="addsubscription" /> >+ [% END %] >+ <input type="hidden" name="user" value="[% logged_in_user.userid | html %]" /> >+ <input type="hidden" name="irreg_check" value="0" /> > <fieldset id="subscription_add_information" class="rows"> > <legend>Subscription details</legend> > <ol> > [% IF ( subscriptionid ) %] >- <li><span class="label">Subscription #</span> [% subscriptionid | html %]</li> >+ <li><span class="label">Subscription number: </span> [% subscriptionid | html %]</li> > [% END %] > <li> > <label for="aqbooksellerid">Vendor: </label> > <input type="text" name="aqbooksellerid" id="aqbooksellerid" value="[% aqbooksellerid | html %]" size="8" /> (<input type="text" name="aqbooksellername" id="aqbooksellername" value="[% aqbooksellername | html %]" disabled="disabled" readonly="readonly" />) <a href="#" id="vendor_search"><i class="fa fa-search"></i> Search for a vendor</a> > </li> > <li> >- <label for="biblionumber" class="required" title="Subscriptions must be associated with a bibliographic record">Record:</label> >+ <label for="biblionumber" class="required">Record:</label> > <input type="text" name="biblionumber" id="biblionumber" value="[% bibnum | html %]" size="8" /> > (<input type="text" name="title" value="[% bibliotitle | html %]" disabled="disabled" readonly="readonly" />) <span class="required" title="Subscriptions must be associated with a bibliographic record">Required</span> >+ <div class="hint">Subscriptions must be associated with a bibliographic record</div> > <div class="inputnote"> <a href="#" id="record_search"><i class="fa fa-search"></i> Search for record</a> > [% IF ( CAN_user_editcatalogue ) %] > [% IF ( modify ) %] >@@ -73,11 +75,11 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > </li> > <li class="radio"> > [% IF ( serialsadditems ) %] >- <p><input type="radio" id="serialsadditems-yes" name="serialsadditems" value="1" checked="checked" /><label class="widelabel" for="serialsadditems-yes">create an item record when receiving this serial</label></p> >- <p><input type="radio" id="serialsadditems-no" name="serialsadditems" value="0" /><label class="widelabel" for="serialsadditems-no">do not create an item record when receiving this serial </label></p> >+ <p><input type="radio" id="serialsadditems-yes" name="serialsadditems" value="1" checked="checked" /><label class="widelabel" for="serialsadditems-yes"> Create an item record when receiving this serial</label></p> >+ <p><input type="radio" id="serialsadditems-no" name="serialsadditems" value="0" /><label class="widelabel" for="serialsadditems-no"> Do not create an item record when receiving this serial </label></p> > [% ELSE %] >- <p><input type="radio" id="serialsadditems-yes" name="serialsadditems" value="1"/><label class="widelabel" for="serialsadditems-yes">create an item record when receiving this serial</label></p> >- <p><input type="radio" id="serialsadditems-no" name="serialsadditems" value="0" checked="checked" /><label class="widelabel" for="serialsadditems-no">do not create an item record when receiving this serial</label></p> >+ <p><input type="radio" id="serialsadditems-yes" name="serialsadditems" value="1"/><label class="widelabel" for="serialsadditems-yes"> Create an item record when receiving this serial</label></p> >+ <p><input type="radio" id="serialsadditems-no" name="serialsadditems" value="0" checked="checked" /><label class="widelabel" for="serialsadditems-no"> Do not create an item record when receiving this serial</label></p> > [% END %] > </li> > <li class="radio"> >@@ -116,7 +118,7 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > </li> > <li> > <label for="branchcode">Library:</label> >- <select name="branchcode" id="branchcode" style="width: 20em;"> >+ <select name="branchcode" id="branchcode"> > [% UNLESS ( Independentbranches ) %] > <option value="">None</option> > [% END %] >@@ -125,7 +127,7 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > [% ELSE %] > [% PROCESS options_for_libraries libraries => Branches.all( selected => branchcode ) %] > [% END %] >- </select> (select a library) >+ </select> > </li> > <li> > <label for="notes">Public note:</label> >@@ -210,13 +212,12 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > </ol> > </fieldset> > <fieldset class="action"> >- <input type="button" value="Next >>" id="subscription_add_next" style="float:right;" /> >+ <button type="button" id="subscription_add_next" style="float:right;">Next <i class="fa fa-long-arrow-right"></i></button> > </fieldset> >- </div> >- </div> >- >- <div id="page_2"> >- <div class="col-md-6"> >+ </div> <!-- /.col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 --> >+ </div> <!-- /.row#page_1 --> >+ <div class="row" id="page_2"> >+ <div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> > [% IF ( Koha.Preference('Mana') == 1) && !mana_url %] > <fieldset> > <p><center>The Mana Knowledge Base can be used to import subscription patterns submitted by other libraries and save you extra work. Ask your system administrator to configure this service and complete the configuration, or remove this message by disabling the system preference >@@ -235,8 +236,9 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > <input type="text" size="10" id="acqui_date" name="firstacquidate" value="[% firstacquidate | $KohaDates %]" class="datepicker required" required="required" /> > [% ELSE %] > [% firstacquidate | $KohaDates %] >- <input type="hidden" size="10" id="acqui_date" name="firstacquidate" value="[% firstacquidate | $KohaDates %]"/> >+ <input type="hidden" id="acqui_date" name="firstacquidate" value="[% firstacquidate | $KohaDates %]"/> > [% END %] >+ <span class="required">Required</span> > </li> > [% IF (more_than_one_serial) %] > <li> >@@ -315,6 +317,7 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > </option> > [% END %] > </select> >+ <span class="required">Required</span> > </li> > <li> > <label for="locale">Locale:</label> >@@ -328,9 +331,10 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > [% END %] > [% END %] > </select> >- <span class="hint">If empty, English is used</span> >+ <div class="hint">If empty, English is used</div> > </li> > <li id="more_options"> >+ <span class="label"> </span> > <table id="moreoptionst"> > <thead> > <tr> >@@ -342,19 +346,19 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > </thead> > <tbody> > <tr> >- <td> >+ <th scope="row"> > [% IF (more_than_one_serial) %] >- Last value >+ Last value: > [% ELSE %] >- Begins with >+ Begins with: > [% END %] >- </td> >+ </th> > <td id="beginsX"><input type="text" id="lastvaluetemp1" name="lastvaluetemp1" value="[% lastvalue1 | html %]" /></td> > <td id="beginsY"><input type="text" id="lastvaluetemp2" name="lastvaluetemp2" value="[% lastvalue2 | html %]" /></td> > <td id="beginsZ"><input type="text" id="lastvaluetemp3" name="lastvaluetemp3" value="[% lastvalue3 | html %]" /></td> > </tr> > <tr> >- <td>Inner counter</td> >+ <th scope="row">Inner counter:</th> > <td id="innerX"><input type="text" id="innerlooptemp1" name="innerlooptemp1" value="[% innerloop1 | html %]" /></td> > <td id="innerY"><input type="text" id="innerlooptemp2" name="innerlooptemp2" value="[% innerloop2 | html %]" /></td> > <td id="innerZ"><input type="text" id="innerlooptemp3" name="innerlooptemp3" value="[% innerloop3 | html %]" /></td> >@@ -363,24 +367,28 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > </table> > </li> > <li> >+ <span class="label"> </span> > <a href="#" class="toggle_advanced_pattern show_advanced_pattern"><i class="fa fa-plus-square"></i> Show advanced pattern</a> > <a href="#" style="display:none;" class="toggle_advanced_pattern hide_advanced_pattern"><i class="fa fa-minus-square"></i> Hide advanced pattern</a> > </li> >+ </ol> >+ > <div id="advancedpredictionpattern" style="display:none"> >+ <ol> > <li> > <label for="patternname" class="required">Pattern name:</label> > <input id="patternname" name="patternname" type="text" readonly="readonly" class="required" required="required" /> >+ <span class="required">Required</span> > </li> > <li> > <label for="numberingmethod">Numbering formula:</label> > <input readonly="readonly" type="text" name="numberingmethod" id="numberingmethod" size="50" value="[% numberingmethod | html %]" /> > </li> >+ <li> >+ <span class="label">Advanced prediction pattern: </span> > <table id="advancedpredictionpatternt"> > <thead> > <tr> >- <th colspan="4">Advanced prediction pattern</th> >- </tr> >- <tr> > <th> </th> > <th>X</th> > <th>Y</th> >@@ -389,43 +397,43 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > </thead> > <tbody> > <tr> >- <td>Label</td> >+ <th scope="row">Label: </th> > <td><input type="text" readonly="readonly" id="label1" name="label1" /></td> > <td><input type="text" readonly="readonly" id="label2" name="label2" /></td> > <td><input type="text" readonly="readonly" id="label3" name="label3" /></td> > </tr> > <tr> >- <td>Begins with</td> >+ <th scope="row">Begins with: </th> > <td><input type="text" readonly="readonly" id="lastvalue1" name="lastvalue1" /></td> > <td><input type="text" readonly="readonly" id="lastvalue2" name="lastvalue2" /></td> > <td><input type="text" readonly="readonly" id="lastvalue3" name="lastvalue3" /></td> > </tr> > <tr> >- <td>Add</td> >+ <th scope="row">Add: </th> > <td><input type="text" readonly="readonly" id="add1" name="add1" /></td> > <td><input type="text" readonly="readonly" id="add2" name="add2" /></td> > <td><input type="text" readonly="readonly" id="add3" name="add3" /></td> > </tr> > <tr> >- <td>Every</td> >+ <th scope="row">Every: </th> > <td><input type="text" readonly="readonly" id="every1" name="every1" /></td> > <td><input type="text" readonly="readonly" id="every2" name="every2" /></td> > <td><input type="text" readonly="readonly" id="every3" name="every3" /></td> > </tr> > <tr> >- <td>Set back to</td> >+ <th scope="row">Set back to: </th> > <td><input type="text" readonly="readonly" id="setto1" name="setto1" /></td> > <td><input type="text" readonly="readonly" id="setto2" name="setto2" /></td> > <td><input type="text" readonly="readonly" id="setto3" name="setto3" /></td> > </tr> > <tr> >- <td>When more than</td> >+ <th scope="row">When more than: </th> > <td><input type="text" readonly="readonly" id="whenmorethan1" name="whenmorethan1" /></td> > <td><input type="text" readonly="readonly" id="whenmorethan2" name="whenmorethan2" /></td> > <td><input type="text" readonly="readonly" id="whenmorethan3" name="whenmorethan3" /></td> > </tr> > <tr> >- <td>Inner counter</td> >+ <th scope="row">Inner counter: </th> > <td><input type="text" readonly="readonly" id="innerloop1" name="innerloop1" /></td> > <td><input type="text" readonly="readonly" id="innerloop2" name="innerloop2" /></td> > <td><input type="text" readonly="readonly" id="innerloop3" name="innerloop3" /></td> >@@ -442,18 +450,25 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > <option value="seasonabrv">Name of season (abbreviated)</option> > </select> > [% END %] >- <td>Formatting</td> >+ <th scope="row">Formatting:</th> > <td>[% PROCESS numbering_select name="numbering1" %]</td> > <td>[% PROCESS numbering_select name="numbering2" %]</td> > <td>[% PROCESS numbering_select name="numbering3" %]</td> > </tr> > </tbody> > </table> >- <input id="modifyadvancedpatternbutton" type="button" value="Modify pattern" /> >- <input id="restoreadvancedpatternbutton" type="button" value="Cancel modifications" style="display:none" /> >- <input id="saveadvancedpatternbutton" type="button" value="Save as new pattern" style="display:none" /> >- </div> >- </ol> >+ </li> >+ <li> >+ <span class="label"> </span> >+ <a href="#" id="modifyadvancedpatternbutton"><i class="fa fa-pencil"></i> Modify pattern</a> >+ <button type="button" class="btn btn-default btn-xs" id="saveadvancedpatternbutton" style="display:none"><i class="fa fa-save"></i> Save as new pattern</button> >+ <a class="cancel" href="#" id="restoreadvancedpatternbutton" style="display:none">Cancel modifications</a> >+ </li> >+ </ol> >+ </div> <!-- /#advancedpredictionpattern --> >+ <fieldset class="action"> >+ <button type="button" id="testpatternbutton" class="btn btn-default btn-sm"><i class="fa fa-play"></i> Test prediction pattern</a> >+ </fieldset> > </fieldset> > > [% IF additional_fields %] >@@ -469,16 +484,15 @@ fieldset.rows li.radio { width: 100%; } /* override staff-global.css */ > <input type="hidden" id="unitsperissue" name="unitsperissue" value=""/> > <input type="hidden" id="issuesperunit" name="issuesperunit" value=""/> > <fieldset class="action"> >- <input type="button" id="subscription_add_previous" value="<< Previous" style="float:left;"/> >- <input id="testpatternbutton" type="button" value="Test prediction pattern" /> >+ <button type="button" id="subscription_add_previous" style="float:left"><i class="fa fa-long-arrow-left"></i> Previous</button> > <input id="save-subscription" type="submit" value="Save subscription" style="float:right;" accesskey="w"/> > </fieldset> > </div> > </div> > <div class="col-md-6"> >- <li id="displayexample"></li> >+ <fieldset id="displayexample"></fieldset> > </div> >- </div> >+ </div> <!-- /.row#page_2 --> > </form> > </div> > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/subscription-add.js b/koha-tmpl/intranet-tmpl/prog/js/subscription-add.js >index d82b875dbf..4c6bf22c29 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/subscription-add.js >+++ b/koha-tmpl/intranet-tmpl/prog/js/subscription-add.js >@@ -210,7 +210,7 @@ function displaymoreoptions() { > } > > function modifyAdvancedPattern() { >- $("#patternname").prop('readOnly', false).val(''); >+ $("#patternname").prop('readOnly', false).val('').focus(); > $("#numberingmethod").prop('readOnly', false); > > $("#advancedpredictionpatternt input").each(function() { >@@ -318,7 +318,7 @@ function testPredictionPattern() { > url:"/cgi-bin/koha/serials/showpredictionpattern.pl", > data: ajaxData, > success: function(data) { >- $("#displayexample").html(data).show(); >+ showPredictionPatternTest( data ); > patternneedtobetested = 0; > } > }); >@@ -519,6 +519,16 @@ function mana_comment_close(){ > $("#new_mana_comment").hide(); > } > >+function showPredictionPatternTest( data ){ >+ $("#displayexample").html(data).show(); >+ $("#page_2 > div").attr("class","col-xs-6"); >+} >+ >+function hidePredcitionPatternTest(){ >+ $("#displayexample").hide(); >+ $("#page_2 > div").attr("class","col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"); >+} >+ > $(document).ready(function() { > if ( mana_enabled == 1 ) { > mana_search(); >@@ -679,4 +689,9 @@ $(document).ready(function() { > var subscription_id = $(this).data("subscription_id"); > mana_use( subscription_id ); > }); >+ >+ $("#displayexample").on("click", "#hidepredictionpattern", function(e){ >+ e.preventDefault(); >+ hidePredcitionPatternTest(); >+ }); > }); >-- >2.11.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 22408
:
85629
|
85630
|
88189
|
88953
|
88984