2:44 a.m.
When there are many reports that make the grid has a scrollbar, the temp
row is always append to the end which make it invisible.
for current design, when generate a report, need to get the grid to
scroll down to the bottom to get it seen.
if all actions are disabled, then just make a bar float on top of the
gird in the middle.
if you plan to enable some action when generating the report in the
future, then just keep current design.
On 5/28/2014 9:45 AM, Wen Wang wrote:
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 | 22 +++++++++++++++++++++
ui/js/src/kimchi.report_add_main.js | 38 ++++++++++++++++++++++++++++++++-----
2 files changed, 55 insertions(+), 5 deletions(-)
diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css
index 6a1a308..c684c0a 100644
--- a/ui/css/theme-default/host.css
+++ b/ui/css/theme-default/host.css
@@ -219,6 +219,28 @@
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;
+ color: #fff;
+ border: 1px solid #ccc;
+ background-color: #5af;
+}
+
+#id-generating {
+ font-color: #fff;
+ background: #5af url(../../images/theme-default/loading.gif) 7px
+ center no-repeat;
+ padding-left: 26px;
+}
/* 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..1e5df89 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,39 @@ 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);
+
$('#available-reports-grid').find('.grid-body').find('table').find('tr').click(function()
{
at the beginning, there is a "reportGridID" defined, so here just use
that varialble.
+ $('#' + reportGridID +
'-remove-button').prop('disabled',true);
+ $('#' + reportGridID +
'-download-button').prop('disabled',true);
+ $('#' + reportGridID +
'-rename-button').prop('disabled',true);
+ });
+ var len =
$('#available-reports-grid').find('.grid-frozen-body-view').find('tr').length
+ 1;
+
$('#available-reports-grid').find('.grid-frozen-body-view').find('table').append('<tr
id="temp-row-col1"><td>' + len +
'</td></tr>');
+
$('#available-reports-grid').find('.grid-body-view').find('table').append('<tr
id="temp-row-col2"><td id="id-generate-bar";
colspan="2"></td></tr>');
+ var textboxValue = $('#report-name-textbox').val();
+ if (textboxValue != "") {
+ if (textboxValue.length <= 15) {
+ $('#id-generate-bar').append('<div
id="id-generate-panel"></div>');
+ $('#id-generate-panel').append('<label
id="id-generating"><span>' + '"' + textboxValue
+'" ' + i18n['KCHDR6007M'] +
'</span></label>');
+ }
+ else {
+ $('#id-generate-bar').append('<div
id="id-generate-panel"></div>');
+ $('#id-generate-panel').append('<label
id="id-generating"><span>' + '"' +
textboxValue.substring(0,13) +'..." ' + i18n['KCHDR6007M'] +
'</span></label>');
+ }
+ }
+ else {
+ $('#id-generate-bar').append('<div
id="id-generate-panel"></div>');
+ $('#id-generate-panel').append('<label
id="id-generating"><span>' + i18n['KCHDR6007M'] +
'</span></label>');
+ }
Looks like here it is trying to make sure there is sufficient horizontal
space for the report name
to make it scalable for different size of real screen estate, try
text-overflow: ellipsis; where browser will handle overflow issue.
Then there is no need to check below, always '"' + textboxValue +'"
' +
i18n['KCHDR6007M']
if (textboxValue != "")
kimchi.createReport(formData, function(result) {
- kimchi.window.close();
+ $('#temp-row-col1').remove();
+ $('#temp-row-col2').remove();
the whole row need to be
removed?
+ $('#' + reportGridID +
'-generate-button').prop('disabled',false);
kimchi.topic('kimchi/debugReportAdded').publish({
result: result
});
why there is no error handling?
