Koha-community/Koha
15
7
Fork 0
Code Issues Releases Wiki Activity

Bug 31014: Minor UI problems in QOTD editor tool

Browse source 
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>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Owen Leonard 2023-06-29 16:41:56 +00:00 committed by Tomas Cohen Arazi
parent cdf2dfeceb
commit 169758fb56
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
3 changed files with 67 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
koha-tmpl/intranet-tmpl/prog/css/quotes.css
View file

@ -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;
}

106
koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes-upload.tt
View file

@ -5,7 +5,15 @@
<title>Quote uploader &rsaquo; Tools &rsaquo; 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 &lt;Enter&gt; 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")

14
koha-tmpl/intranet-tmpl/prog/en/modules/tools/quotes.tt
View file

@ -4,7 +4,6 @@
[% INCLUDE 'doc-head-open.inc' %]
<title>Quote editor &rsaquo; Tools &rsaquo; 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 %]