From: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt; V1 -> V2 Accroding to Yu Xin, this patch move the progress bar to the top of the grid and use ellipsis for hiding the name that is too long for the generating progress bar. 1) Removed the dialogue window when generating a debug report. 2) Designed an animation bar indicate user there is a report generating during the generating progress. 3) Disable the buttons' functions in debug report area when generating a new report in case there might be any conflict. Meanwhile user can operate on other parts of Kimchi. 4) Enable all buttonss' functions in debug report area after generating progress. --- ui/css/theme-default/host.css | 28 ++++++++++++++++++++++++++++ ui/js/src/kimchi.report_add_main.js | 30 +++++++++++++++++++++++++----- 2 files changed, 53 insertions(+), 5 deletions(-) diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css index ed28d25..4e319cb 100644 --- a/ui/css/theme-default/host.css +++ b/ui/css/theme-default/host.css @@ -219,6 +219,34 @@ width: 200px; } +#id-generate-bar { + text-align: center; + vertical-align: middle; +} + +#id-generate-panel { + vertical-align: middle; + margin: 0 auto; + text-align: center; + height: 20px; + width: 250px; + border: 1px solid #ccc; + background-color: #5af; + color: #fff; + background: #5af url(../../images/theme-default/loading.gif) 25px + center no-repeat; + padding-left: 26px; +} + +#id-generating > span{ + display: inline-block; + text-align: center; + vertical-align: middle; + max-width: 120px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} /* End of Debug Report */ /* Software Updates */ diff --git a/ui/js/src/kimchi.report_add_main.js b/ui/js/src/kimchi.report_add_main.js index 8759c2b..f8149ea 100644 --- a/ui/js/src/kimchi.report_add_main.js +++ b/ui/js/src/kimchi.report_add_main.js @@ -1,4 +1,5 @@ kimchi.report_add_main = function() { + var reportGridID = 'available-reports-grid'; var addReportForm = $('#form-report-add'); var submitButton = $('#button-report-add'); var nameTextbox = $('input[name="name"]', addReportForm); @@ -13,12 +14,31 @@ kimchi.report_add_main = function() { return false; } var formData = addReportForm.serializeObject(); - submitButton - .text(i18n['KCHDR6007M']) - .prop('disabled', true); - nameTextbox.prop('disabled', true); + kimchi.window.close(); + var reportGrid = null; + $('#' + reportGridID + '-generate-button').prop('disabled',true); + $('#' + reportGridID + '-remove-button').prop('disabled',true); + $('#' + reportGridID + '-download-button').prop('disabled',true); + $('#' + reportGridID + '-rename-button').prop('disabled',true); + $('#' + reportGridID).find('.grid-body').find('table').find('tr').click(function() { + $('#' + reportGridID + '-remove-button').prop('disabled',true); + $('#' + reportGridID + '-download-button').prop('disabled',true); + $('#' + reportGridID + '-rename-button').prop('disabled',true); + }); + $('#available-reports-grid').find('.grid-frozen-body-view').find('table').prepend('<tr id="temp-row-col1"><td></td></tr>'); + $('#available-reports-grid').find('.grid-body-view').find('table').prepend('<tr id="temp-row-col2"><td id="id-generate-bar"; colspan="2"></td></tr>'); + var textboxValue = $('#report-name-textbox').val(); + $('#id-generate-bar').append('<div id="id-generate-panel"></div>'); + if (textboxValue != "") { + $('#id-generate-panel').append('<div id="id-generating"><span>"' + textboxValue + '</span><span>" is ' + i18n['KCHDR6007M'] + '</span></div>'); + } + else { + $('#id-generate-panel').append('<div id="id-generating">' + i18n['KCHDR6007M'] + '</div>'); + } kimchi.createReport(formData, function(result) { - kimchi.window.close(); + $('#temp-row-col1').remove(); + $('#temp-row-col2').remove(); + $('#' + reportGridID + '-generate-button').prop('disabled',false); kimchi.topic('kimchi/debugReportAdded').publish({ result: result }); -- 1.7.1