Bugzilla – Attachment 155112 Details for
Bug 31014
Minor UI problems in QOTD editor tool
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 31014: Minor UI problems in QOTD editor tool
Bug-31014-Minor-UI-problems-in-QOTD-editor-tool.patch (text/plain), 12.97 KB, created by
Jonathan Druart
on 2023-09-01 12:35:08 UTC
(
hide
)
Description:
Bug 31014: Minor UI problems in QOTD editor tool
Filename:
MIME Type:
Creator:
Jonathan Druart
Created:
2023-09-01 12:35:08 UTC
Size:
12.97 KB
patch
obsolete
>From b542acefbecedcc2913a0186c92ce6927b648586 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Thu, 29 Jun 2023 16:41:56 +0000 >Subject: [PATCH] Bug 31014: Minor UI problems in QOTD editor tool > >This patch makes some cosmetic and functional updates to Quote of the >Day template, including simplifying some JavaScript, adding consisten >styles to buttons and page sections, and adding visible buttons to >jEditable text inputs. > >The patch also improves the Quotes page breadcrumbs to add context >on the single quote entry page. > >The patch removes quotes.css which is obsolete. > >To test, apply the page and go to Tools -> Quote editor. > >- The breadcrumbs should read "Tools -> Quote editor." >- Click the "New quote" button. The breadcrumbs should read "Tools -> > Quote editor -> Add quote" >- Go back and click the "Import quotes" button. >- Confirm that the layout of the page looks good and that the upload > instructions are shown. >- Upload a CSV file of quotes > - The instructions should now show information about editing and > saving quotes. > - The "Save quotes" button should be styled consistently with other > submit buttons. > - Confirm that you can click in the "Source" and "Quote" table cells > to trigger the display of a textarea where you can edit the text. > Confirm that both the "Save" and "Cancel" buttons work. > - Click the "Save quotes" button. A message should appear which shows > how many quotes were imported.* > - Confirm that your quotes are saved correctly, including any changes > you made. > >* This process could be improved: When the quotes are done importing the >toolbar doesn't change, and there isn't an indication that the import is >complete. > >Signed-off-by: Sam Lau <samalau@gmail.com> > >Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> >--- > koha-tmpl/intranet-tmpl/prog/css/quotes.css | 43 ------- > .../prog/en/modules/tools/quotes-upload.tt | 106 +++++++++--------- > .../prog/en/modules/tools/quotes.tt | 14 ++- > 3 files changed, 67 insertions(+), 96 deletions(-) > delete mode 100644 koha-tmpl/intranet-tmpl/prog/css/quotes.css > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/quotes.css b/koha-tmpl/intranet-tmpl/prog/css/quotes.css >deleted file mode 100644 >index 50914f64896..00000000000 >--- a/koha-tmpl/intranet-tmpl/prog/css/quotes.css >+++ /dev/null >@@ -1,43 +0,0 @@ >-#quotes_editor_wrapper { >- position : relative; >- top : 15px; >-} >- >-#footer { >- position : relative; >- top : 10px; >- height : 25px; >-} >- >-#instructions li { >- list-style-type : disc; >-} >- >-#instructions div { >- margin-left : 10px; >-} >- >-#file_editor_inst { >- visibility : hidden; >- position : absolute; >-} >- >-#file_uploader { >- visibility :visible; >- position :relative; >-} >- >-#file_upload { >- position : relative; >- top : -1px; >- margin-left : 10px; >-} >- >-#quotes_editor { >- width : 100%; >-} >- >-tr.odd.selected td, >-tr.even.selected td { >- background-color: #D3D3D3; >-} >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes-upload.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes-upload.tt >index 4be8129ce68..583de621d6e 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes-upload.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes-upload.tt >@@ -5,7 +5,15 @@ > <title>Quote uploader › Tools › Koha</title> > [% INCLUDE 'doc-head-close.inc' %] > [% Asset.css("css/uploader.css") | $raw %] >- [% Asset.css("css/quotes.css") | $raw %] >+ <style> >+ .jeditable-text { >+ display: block; >+ height: 5em; >+ margin-bottom: .5em; >+ min-width: 20em; >+ width: 70%; >+ } >+ </style> > </head> > > <body id="tools_quotes" class="tools"> >@@ -31,8 +39,8 @@ > <div class="row"> > <div class="col-sm-10 col-sm-push-2"> > <main> >- <div id="toolbar" class="btn-toolbar" style="visibility: hidden; position: absolute"> >- <div class="btn-group"><a class="btn btn-default" id="save_quotes" href="#"><i class="fa fa-save"></i> Save quotes</a></div> >+ <div id="toolbar" class="btn-toolbar" style="display:none"> >+ <div class="btn-group"><a class="btn btn-primary" id="save_quotes" href="#"><i class="fa fa-save"></i> Save quotes</a></div> > <div class="btn-group"><a href="/cgi-bin/koha/tools/quotes-upload.pl" id="cancel_quotes" class="btn btn-default"><i class="fa fa-times"></i> Cancel import</a></div> > </div> > >@@ -43,9 +51,8 @@ > <div class="import_error dialog alert" style="display: none;"></div> > </div> > >- <div id="instructions"> >- <fieldset id="file_uploader_help" class="rows"> >- <legend>Instructions</legend> >+ <div id="instructions" class="page-section"> >+ <h2>Instructions</h2> > <div id="file_uploader_inst"> > <ul> > <li>The quote uploader accepts standard csv files with two columns: "source","text"</li> >@@ -53,41 +60,34 @@ > <li>The file will be imported into an editable table for review prior to saving.</li> > </ul> > </div> >- <div id="file_editor_inst"> >+ <div id="file_editor_inst" style="display:none"> > <ul> > <li>Click on any field to edit the contents; Press the <Enter> key to save edit.</li> > <li>Click the 'Save quotes' button in the toolbar to save the entire batch of quotes.</li> > </ul> > </div> >- </fieldset> > </div> > > <fieldset id="file_uploader" class="rows"> > <legend>Upload quotes</legend> >- <div id="file_upload"> >- <input type="file" name="file" /> >- <button id="cancel_upload" style="display:none">Cancel upload</button> >- <div id="progress_bar"><div class="percent">0%</div></div> >- </div> >+ <ol> >+ <li> >+ <label for="uploadfile">Select the file to upload: </label> >+ <div id="file_upload"> >+ <input type="file" name="file" /> >+ <button id="cancel_upload" style="display:none">Cancel upload</button> >+ <div id="progress_bar"><div class="percent">0%</div></div> >+ </div> >+ </li> >+ </ol> > </fieldset> >- <table id="quotes_editor" style="visibility: hidden;"> >- <thead> >- <tr> >- <th>Source</th> >- <th>Text</th> >- <th class="noExport">Actions</th> >- </tr> >- </thead> >- <tbody> >- <!-- tbody content is generated by DataTables --> >- <tr> >- <td></td> >- <td>Loading data...</td> >- <td></td> >- </tr> >- </tbody> >- </table> >- <fieldset id="footer" class="action" style="visibility: hidden;"> >+ >+ <div class="page-section"> >+ <table id="quotes_editor" style="display:none"> >+ </table> >+ </div> >+ >+ <fieldset id="footer" class="action" style="display:none"> > </fieldset> > > </main> >@@ -249,16 +249,12 @@ > } > > /* Transition from the quote file uploader to the quote file editor interface */ >- $('#toolbar').css("visibility","visible"); >- $('#toolbar').css("position",""); >- $('#file_editor_inst').css("visibility", "visible"); >- $('#file_editor_inst').css("position", ""); >- $('#file_uploader_inst').css("visibility", "hidden"); >- $('#save_quotes').css("visibility","visible"); >- $('#file_uploader').css("visibility","hidden"); >- $('#file_uploader').css("position","absolute"); >- $('#file_uploader').css("top","-150px"); >- $('#quotes_editor').css("visibility","visible"); >+ $('#toolbar').show(); >+ $('#file_editor_inst').show(); >+ $('#file_uploader_inst').hide(); >+ $('#save_quotes').show(); >+ $('#file_uploader').hide(); >+ $('#quotes_editor').show(); > $("#save_quotes").on("click", yuiGetData); > > oTable = $('#quotes_editor').dataTable( { >@@ -268,6 +264,8 @@ > "sPaginationType" : "full_numbers", > "sDom": '<"top pager"iflp>rt<"bottom pager"flp><"clear">', > "aaData" : aaData, >+ "pageLength": 20, >+ "fixedHeader": true, > "aoColumns" : [ > { > "sTitle" : _("Number"), >@@ -305,14 +303,22 @@ > return(value); > }, > { >- "callback" : function( sValue, y ) { >- oTable.fnDraw(false); /* no filter/sort or we lose our pagination */ >- }, >- "height" : "14px", >- }); >+ "callback" : function( sValue, y ) { >+ oTable.fnDraw(false); /* no filter/sort or we lose our pagination */ >+ }, >+ "cancel" : _("Cancel"), >+ "height": "none", >+ "inputcssclass": "jeditable-text", >+ "onblur": "ignore", >+ "style": "", >+ "submit" : _("Save"), >+ "type": "textarea", >+ "width": "none", >+ } >+ ); > }, > }); >- $('#footer').css("visibility","visible"); >+ $('#footer').show(); > } > > function fnHandleFileSelect(evt) { >@@ -359,7 +365,7 @@ > reader.readAsText(evt.target.files[0]); > } > >- $('#file_upload').one('change', fnHandleFileSelect); >+ $('#file_upload').on('change', fnHandleFileSelect); > > var MSG_IMPORT_SUCCESS = _("%s quotes imported successfully"); > var MSG_IMPORT_ERROR = _("%s quotes have not been imported. An error occurred"); >@@ -376,7 +382,7 @@ > data : JSON.stringify(data), > dataType : "application/json", > success : function(data) { >- $("#messages").show(); >+ $("#messages").addClass("message").show(); > var import_success = $("#messages .import_success"); > import_success.show(); > import_success.data("nb") >@@ -387,7 +393,7 @@ > }, > error : function(xhr) { > if (xhr.status==201) { this.success(null, "Created", xhr); return; } >- $("#messages").show(); >+ $("#messages").addClass("alert").show(); > var import_error = $("#messages .import_error"); > import_error.show(); > import_error.data("nb") >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes.tt >index 3d338191659..39876554e22 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes.tt >@@ -4,7 +4,6 @@ > [% INCLUDE 'doc-head-open.inc' %] > <title>Quote editor › Tools › Koha</title> > [% INCLUDE 'doc-head-close.inc' %] >-[% Asset.css("css/quotes.css") | $raw %] > </head> > > <body id="tools_quotes" class="tools"> >@@ -17,8 +16,17 @@ > [% WRAPPER breadcrumb_item %] > <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> > [% END %] >- [% WRAPPER breadcrumb_item bc_active= 1 %] >- <span>Quote editor</span> >+ [% IF op == 'add_form' %] >+ [% WRAPPER breadcrumb_item %] >+ <a href="/cgi-bin/koha/tools/quotes.pl">Quote editor</a> >+ [% END %] >+ [% WRAPPER breadcrumb_item bc_active= 1 %] >+ <span>Add quote</span> >+ [% END %] >+ [% ELSE %] >+ [% WRAPPER breadcrumb_item bc_active= 1 %] >+ <span>Quote editor</span> >+ [% END %] > [% END %] > [% END #/ WRAPPER breadcrumbs %] > [% END #/ WRAPPER sub-header.inc %] >-- >2.25.1
<b>You cannot view the attachment while viewing its details because your browser does not support IFRAMEs. <a href="attachment.cgi?id=155112">View the attachment on a separate page</a>.</b>
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 31014
:
136413
|
136416
|
152874
|
152876
| 155112