Quote uploader › Tools

From 169758fb565114d7957404a6b02db07d0511d8fb Mon Sep 17 00:00:00 2001 From: Owen Leonard 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 Signed-off-by: Jonathan Druart Signed-off-by: Tomas Cohen Arazi --- 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 50914f6489..0000000000 --- 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 4be8129ce6..583de621d6 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 @@ Quote uploader › Tools › Koha [% INCLUDE 'doc-head-close.inc' %] [% Asset.css("css/uploader.css") | $raw %] - [% Asset.css("css/quotes.css") | $raw %] + @@ -31,8 +39,8 @@

- -

- Instructions +

Instructions

The quote uploader accepts standard csv files with two columns: "source","text"
The file will be imported into an editable table for review prior to saving.

+ -

Upload quotes -

- - -

+ Select the file to upload: +
+ + +
0%
+
+

- - - - - - - - - - - - - - - - -

Source	Text	Actions
	Loading data...

@@ -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 3d33819165..39876554e2 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' %] Quote editor › Tools › Koha [% INCLUDE 'doc-head-close.inc' %] -[% Asset.css("css/quotes.css") | $raw %] @@ -17,8 +16,17 @@ [% WRAPPER breadcrumb_item %] Tools [% END %] - [% WRAPPER breadcrumb_item bc_active= 1 %] - Quote editor + [% IF op == 'add_form' %] + [% WRAPPER breadcrumb_item %] + Quote editor + [% END %] + [% WRAPPER breadcrumb_item bc_active= 1 %] + Add quote + [% END %] + [% ELSE %] + [% WRAPPER breadcrumb_item bc_active= 1 %] + Quote editor + [% END %] [% END %] [% END #/ WRAPPER breadcrumbs %] [% END #/ WRAPPER sub-header.inc %] -- 2.39.5