From 527b5a309757c328b1927fe18cfed8dc7bae4f4f Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Fri, 18 Jan 2019 17:10:40 +0000 Subject: [PATCH] Bug 22168: Improve styling of new chart settings for reports This patch updates a number of aspects of the reports chart creation interface: Chart creation form is now shown in a modal window, and a separate link has been added to show or hide the chart itself. Also changed: Minor markup and JavaScript cleanup. To test, apply the patch and go to Reports -> Saved reports. - Run a report which returns more than one column. - On the report results page, click the "Create chart" button. The chart settings form should appear in a modal window. - Confirm that the form controls work correctly: Each label should give focus to the correct input. Changing the chart type should show or hide the appropriate form fields. - Click the "Draw" button. The modal should disappear and the chart should be shown. - Above the chart should be a "Hide chart" link which works to hide (and then show) the chart. Signed-off-by: Pierre-Marc Thibault Signed-off-by: Katrin Fischer Signed-off-by: Nick Clemens (cherry picked from commit 8e1efe8f10fd5b575b2ceea3b33d1ed9dd91bd96) Signed-off-by: Martin Renvoize --- koha-tmpl/intranet-tmpl/prog/css/reports.css | 36 ++++ .../intranet-tmpl/prog/en/includes/chart.inc | 180 +++++++++--------- .../prog/en/includes/reports-toolbar.inc | 3 +- .../modules/reports/guided_reports_start.tt | 76 ++++---- 4 files changed, 170 insertions(+), 125 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/reports.css b/koha-tmpl/intranet-tmpl/prog/css/reports.css index 4ccee11209..2152cc84c4 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/reports.css +++ b/koha-tmpl/intranet-tmpl/prog/css/reports.css @@ -72,4 +72,40 @@ del { .clear_filter i { color: #C00; +} + +fieldset.rows { + background-color: transparent; + border: 0; + font-size: 100%; + margin: 0; + padding: 0; +} + +fieldset.rows label, +fieldset.rows span.label { + width: 12em; +} + +fieldset.rows legend { + margin-left: 0; +} + +fieldset.rows .column_config_row { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} + +fieldset.rows .chart-column-conf { + padding: .7em; + width: auto; +} + +fieldset.rows .chart-column-conf label { + display: block; + float: none; + margin: .4em 0; + text-align: left; + width: auto; } \ No newline at end of file diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/chart.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/chart.inc index 03a28f09c7..cb1f6d3b55 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/chart.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/chart.inc @@ -1,96 +1,104 @@ - +
- - - - [% item = { cell = supposed_x } %] - [% header_row.unshift(item) | html %] -
+ +
+ + diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/reports-toolbar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/reports-toolbar.inc index 83ad6af1b2..17c66543d2 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/reports-toolbar.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/reports-toolbar.inc @@ -70,8 +70,7 @@
- Show chart settings - + Create chart
[% END %] diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt index 18410c2be1..066999f14c 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt @@ -40,8 +40,8 @@ resize: vertical; } +[% Asset.css("css/reports.css") | $raw %] [% IF ( saved1 ) %] - [% Asset.css("css/reports.css") | $raw %] [% Asset.css("css/datatables.css") | $raw %] [% END %] [% Asset.css("lib/d3c3/c3.min.css") | $raw %] @@ -697,11 +697,15 @@ canned reports and writing custom SQL reports.

[% IF ( execute ) %]

[% name | html %]

-[% INCLUDE 'chart.inc' %] [% IF ( notes ) %]

Notes: [% notes | html %]

[% END %] [% IF ( unlimited_total ) %]

Total number of results: [% unlimited_total | html %][% IF unlimited_total > limit %] ([% limit | html %] shown)[% END %].

[% END %] -
+ + +
@@ -758,6 +762,9 @@ canned reports and writing custom SQL reports.

[% END %] + +[% INCLUDE 'chart.inc' %] + [% END %] [% IF ( create ) %] @@ -1059,9 +1066,6 @@ canned reports and writing custom SQL reports.

[% IF results && !errors %] $('#draw-chart').click(function() { - var btn_text = $("#draw-chart").html(); - $("#draw-chart").html(_("Loading...")); - var x_elements = $('select[name="x"]').val(); var y_elements = []; var groups = []; @@ -1125,10 +1129,9 @@ canned reports and writing custom SQL reports.

options.lines = lines; chart = create_chart(kept_headers, kept_results, x_elements, y_elements, groups, options); - $('#chart').prepend('
' + "[% name | html %]" + '
'); - $('#download-chart').show(); - $("#draw-chart").html(_(btn_text)); - $("html, body").animate({ scrollTop: $(document).height() }, "slow"); + $("#download-chart,#toggle_chart_settings_hid,#chart").show(); + $("#toggle_chart_settings_vis").hide(); + $("#chartModal").modal("hide"); }); [% END %] [% IF ( create ) %] @@ -1267,27 +1270,25 @@ canned reports and writing custom SQL reports.

}); [% END %] - $(".toggle_sql").click(function(){ - $("#sql_output").toggle(); - $("#toggle_sql_hid").toggle(); - $("#toggle_sql_vis").toggle(); - }); + $(".toggle_sql").click(function(){ + $("#sql_output").toggle(); + $("#toggle_sql_hid").toggle(); + $("#toggle_sql_vis").toggle(); + }); - $(".toggle_chart_settings").click(function(){ - $("#makechart").toggle(); - $("#toggle_chart_settings_hid").toggle(); - $("#toggle_chart_settings_vis").toggle(); - }); + $(".toggle_chart_settings").click(function(){ + $("#chart, #toggle_chart_settings_hid, #toggle_chart_settings_vis").toggle(); + }); - $("#table_reports").delegate(".confirmdelete", 'click', function(){ - $(this).parents('tr').attr("class","warn"); - if(confirm(_("Are you sure you want to delete this saved report?"))){ - return true; - } else { - $(this).parents('tr').attr("class",""); - return false; - } - }); + $("#table_reports").delegate(".confirmdelete", 'click', function(){ + $(this).parents('tr').attr("class","warn"); + if(confirm(_("Are you sure you want to delete this saved report?"))){ + return true; + } else { + $(this).parents('tr').attr("class",""); + return false; + } + }); [% IF (create || editsql || save) %] $("#select_group").change(function() { @@ -1341,6 +1342,15 @@ canned reports and writing custom SQL reports.

$(".delete").on("click",function(){ return confirmDelete(MSG_CONFIRM_DELETE); }); + + $("#column_submit").submit(function() { + if ($("#selectedColumns option").size() < 1) { + alert(_("No columns selected!")); + return false; + } + $("#selectedColumns option").attr("selected", "selected"); // Select everything still in #selectedColumns + return true; + }); }); function addColumn() { $("#availableColumns option:selected").clone().appendTo("#selectedColumns").attr("selected", "selected"); @@ -1348,14 +1358,6 @@ canned reports and writing custom SQL reports.

function delColumn() { $("#selectedColumns option:selected").remove(); } - $("#column_submit").submit(function() { - if ($("#selectedColumns option").size() < 1) { - alert(_("No columns selected!")); - return false; - } - $("#selectedColumns option").attr("selected", "selected"); // Select everything still in #selectedColumns - return true; - }); [% END %] -- 2.39.5