[PATCH V5 0/2] Issue#296 UI redesign when generating debug reports
Issue#296 debug report: kimchi UI should not waiting while generating reports V4 -> V5 Deleted one useless line that change the loading icon's size V3 -> V4 Changed generating logo(Hong Liang Wang) V2 -> V3 Change the layout of the grid: Removed the frist column that has line number Changed the progress bar layout that make the whole table more consistant. 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. Wang Wen (2): Remove the first column of debug report grid Added the generating progress indicator ui/css/theme-default/host.css | 10 +++++--- ui/css/theme-default/report-add.css | 9 +------- ui/images/theme-default/kimchi-loading.gif | Bin 6181 -> 6181 bytes ui/images/theme-default/kimchi-loading15x15.gif | Bin 0 -> 1653 bytes ui/js/src/kimchi.host.js | 6 +---- ui/js/src/kimchi.report_add_main.js | 26 ++++++++++++++++++---- ui/pages/i18n.html.tmpl | 1 + 7 files changed, 30 insertions(+), 22 deletions(-) create mode 100644 ui/images/theme-default/kimchi-loading15x15.gif
Have the first column of debug report grid which indicate numbers removed --- ui/css/theme-default/host.css | 4 ---- ui/js/src/kimchi.host.js | 6 +----- 2 files changed, 1 insertions(+), 9 deletions(-) diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css index ed28d25..a040204 100644 --- a/ui/css/theme-default/host.css +++ b/ui/css/theme-default/host.css @@ -210,10 +210,6 @@ margin: .2em 1em; } -.debug-report-id { - width: 30px; -} - .debug-report-name, .debug-report-time { width: 200px; diff --git a/ui/js/src/kimchi.host.js b/ui/js/src/kimchi.host.js index ee59a7e..3d8da1f 100644 --- a/ui/js/src/kimchi.host.js +++ b/ui/js/src/kimchi.host.js @@ -357,11 +357,7 @@ kimchi.host_main = function() { $('#' + reportGridID + '-download-button') .prop('disabled', false); }, - frozenFields: [{ - name: 'id', - label: ' ', - 'class': 'debug-report-id' - }], + frozenFields: [], fields: [{ name: 'name', label: i18n['KCHDR6003M'], -- 1.7.1
Have the generating progress indicator added, which will be removed after generating progress finished. --- ui/css/theme-default/host.css | 6 +++++ ui/css/theme-default/report-add.css | 9 +------- ui/images/theme-default/kimchi-loading.gif | Bin 6181 -> 6181 bytes ui/images/theme-default/kimchi-loading15x15.gif | Bin 0 -> 1653 bytes ui/js/src/kimchi.report_add_main.js | 26 ++++++++++++++++++---- ui/pages/i18n.html.tmpl | 1 + 6 files changed, 29 insertions(+), 13 deletions(-) create mode 100644 ui/images/theme-default/kimchi-loading15x15.gif diff --git a/ui/css/theme-default/host.css b/ui/css/theme-default/host.css index a040204..bfe98f1 100644 --- a/ui/css/theme-default/host.css +++ b/ui/css/theme-default/host.css @@ -215,6 +215,12 @@ width: 200px; } +#id-debug-img { + background: url(../../images/theme-default/kimchi-loading15x15.gif) 7px + center no-repeat; + padding-left: 26px; +} + /* End of Debug Report */ /* Software Updates */ diff --git a/ui/css/theme-default/report-add.css b/ui/css/theme-default/report-add.css index 236029a..3e52f63 100644 --- a/ui/css/theme-default/report-add.css +++ b/ui/css/theme-default/report-add.css @@ -12,11 +12,4 @@ box-sizing: border-box; margin: .5em 0; width: 100%; -} - -#button-report-add[disabled] { - background: #c0c0c0 url(../../images/theme-default/loading.gif) 7px - center no-repeat; - color: #DDD; - padding-left: 26px; -} +} \ No newline at end of file diff --git a/ui/images/theme-default/kimchi-loading.gif b/ui/images/theme-default/kimchi-loading.gif index af92bfdc0a44170c71fb7406d2c6bc359e176e91..233bd5f140d63a30b1944cce33bcb68aedea2efc 100644 GIT binary patch delta 88 zcmV-e0H^<@Fr_fCm;;k$7rv8U1SFGw6zr2G7eJGc53{o%6$S#cH52OrvqKOD0<&-o uF$0ru3=or#2XC`H3Pb|4j|Z&+ll})}v#kcT0h6r;3zKmLNRyZY#{oNnW*-Fr delta 92 zcmZ2#u+(6~4CcwP;>R}&2(dFx<`NH{T);nJ@>_B4$@_#Nfqd@G38JeQH;W73V%#L) w!n8SoN0E7Q70aT{UR-QUK*pQR@f@!iC(E#UZC=c_hjDTmtHb0O%=;Lv0m~sDe*gdg diff --git a/ui/images/theme-default/kimchi-loading15x15.gif b/ui/images/theme-default/kimchi-loading15x15.gif new file mode 100644 index 0000000000000000000000000000000000000000..aaa4f85a0560dcb59d4bb70154a9144417aae926 GIT binary patch literal 1653 zcmZ?wbhEHb6krfwcz&0`fx$V3fzy*s(30KRoyj+pP0*a%B9B4Xkl)0X$H9|dJd8D} zo<ZDBSSFF7*jZT0OhTc9Q7nTgk3rREDud*7MxI>8&Ju=(ISf+93MQOdag7Y~1hic{ z8T#{u6)cohTNtM^7+W$J#50+i$>`cj=^O84k`pyFn#{1$Ur8%a&i6QjtgEuCfQhw> zh77A6gQ$gokA@_-E$2dp^>Sv?oMy2Rvbjr`S1FsTIOwZtnQE_R*m$2oUC1KhF@wT7 z#vS5TPBXdYi#jqhIC*|#&}Xr)`pY25?86wZk@$x}Azj<#4}*rAu{Vcnu(UhJUj}_& zGsWW!mvn9Irz#jqI|d0m<_4Kq$D4?%x#%8bJFV#KwS(tqvz9fdTmMyIV-~+CKU<>^ zTODbStQ;$e9OEp8kfaJrQB(IojUXN?PfLA&1ruKlE$<Ybz{O>Dnh|c+IZj3l84L_z z+ZiGkGQ_8gg)Ec{ZB|VbVu;;p8Ir+}TJcZ8St};J)7e)ugI_wAy~kUSA^Gq;v#nzB zo6<uZ9TN=&l6EuXHCx41&a>X&p6tkweNrgxtWY&KLrITauKX0wDL;*ZSPITdWuHCl z7S2#|o1wN-skGcGd-j}YNrw7v?ff;HUH7htly%83WoVk=SR=P3TA8QnVNZtdt|Td^ z4tBRT;l<gOCKJSuq^f)gOk<w3o@>%d>z1S5joVY2V;E+x4Cszxn7#dGQiZ}|@k{wq ze5<)H#@>~ixp+mvx~nC^*GqKvReGJxyd=J8Z|Hp0)LG8{Q?7j|(|J;(^S(;?X-VtX z{Ej0{$vo>WNUb@RHtpd12Emt&YTJ7ve>HRaY*WxWB$BmO<7<oVrMfE&d+u577yI7H zdv${AuTG6`J!)PD74G*(XRN&WpI$)mKewN2NU*bGfUA+70W%{51B2pE7EU3C{|q`n zHZYS2Ffee)GW_S1@z}87U^9oXR?LYF3lFyoD0|KE*tqCuBO@a=9coY=j!k!j<aB0i zc<9u4hfS*nq@!EHIP1=djf>s;v1`@Ep>^V-!(BqkNq@`*laF`Fn|H~0Zd!7(0h{Hf zM42F;^~FLc<zy?bzucZ38xtI`nPf?{Nk)rZI#dI#a%KcAJ>AR3%!JJ}Tb!mjcL>V+ z&Dl|qe5_B>QtnB`#6;Il`9QBD85<TlO;@&EX5(p~fXzf_h=~b~c^s@tPtrczcWUF8 zl$)Y)G4W`lxU|rj6$Xj!z4E$EBA!9O@K)2-%Q<1V)NzW4rQ4Q{qQ@s^Df6<iU^CYa zVJ@$f%ZvcUgKd2BZZRt+Jap&~-N|`mN5EtIK6cxtnin4*pO_@<TefG1V5)aFPwc)q zGcP6L3rdhvk&Uz{R5;QluAbJjV`8#<o~Uk<jm4+?Cwh5=mxY`NNH{%#3wux+Vs{|2 sX~(-16pJpOC{Q`pufUDnn>s|9;tWh`McC5^G?`;~3OSj#0+YEl0GD)I?EnA( literal 0 HcmV?d00001 diff --git a/ui/js/src/kimchi.report_add_main.js b/ui/js/src/kimchi.report_add_main.js index 8759c2b..9b73994 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,27 @@ 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); + }); + var textboxValue = $('#report-name-textbox').val(); + if (textboxValue != "") { + $('#available-reports-grid').find('.grid-body-view').find('table').prepend('<tr id="temp-row"><td>' + textboxValue + '</td><td id ="id-debug-img">' + i18n['KCHDR6007M'] + '</td></tr>'); + } + else { + $('#available-reports-grid').find('.grid-body-view').find('table').prepend('<tr id="temp-row"><td>' + i18n['KCHDR6012M'] + '</td><td id ="id-debug-img">' + i18n['KCHDR6007M'] + '</td></tr>'); + } kimchi.createReport(formData, function(result) { - kimchi.window.close(); + $('#temp-row').remove(); + $('#' + reportGridID + '-generate-button').prop('disabled',false); kimchi.topic('kimchi/debugReportAdded').publish({ result: result }); diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl index 25b81c2..375a37a 100644 --- a/ui/pages/i18n.html.tmpl +++ b/ui/pages/i18n.html.tmpl @@ -124,6 +124,7 @@ var i18n = { 'KCHDR6009M': "$_("Remove")", 'KCHDR6010M': "$_("Download")", 'KCHDR6011M': "$_("Report name should contain only letters, digits and/or hyphen ('-').")", + 'KCHDR6012M': "$_("Pending...")", 'KCHVM6001M': "$_("This will delete the virtual machine and its virtual disks. This operation cannot be undone. Would you like to continue?")", 'KCHVM6002M': "$_("Power off Confirmation")", -- 1.7.1
Almost there... =) I have 2 comments: 1) Add a margin to grid content The name and date are too close to the table columns. 2) When the debug report creation failed, an error is displayed on top of page But the grid keeps showing "Pending..." and "Generating..." You should remove that line after the error. On 06/05/2014 07:09 AM, Wang Wen wrote:
Issue#296 debug report: kimchi UI should not waiting while generating reports
V4 -> V5 Deleted one useless line that change the loading icon's size
V3 -> V4 Changed generating logo(Hong Liang Wang)
V2 -> V3 Change the layout of the grid: Removed the frist column that has line number Changed the progress bar layout that make the whole table more consistant.
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.
Wang Wen (2): Remove the first column of debug report grid Added the generating progress indicator
ui/css/theme-default/host.css | 10 +++++--- ui/css/theme-default/report-add.css | 9 +------- ui/images/theme-default/kimchi-loading.gif | Bin 6181 -> 6181 bytes ui/images/theme-default/kimchi-loading15x15.gif | Bin 0 -> 1653 bytes ui/js/src/kimchi.host.js | 6 +---- ui/js/src/kimchi.report_add_main.js | 26 ++++++++++++++++++---- ui/pages/i18n.html.tmpl | 1 + 7 files changed, 30 insertions(+), 22 deletions(-) create mode 100644 ui/images/theme-default/kimchi-loading15x15.gif
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
participants (2)
-
Aline Manera -
Wang Wen