yahoo-eng-team team mailing list archive

[chenyujie <gzyjchen@xxxxxxx>]

Public bug reported:

Abstract horizon table code as following:

            if ($new_row.hasClass('warning')) {
              var $container = $(document.createElement('div'))
                .addClass('progress-text horizon-loading-bar');

              var $progress = $(document.createElement('div'))
                .addClass('progress progress-striped active')
                .appendTo($container);

              $(document.createElement('div'))
                .addClass('progress-bar')
                .appendTo($progress);

              // if action/confirm is required, show progress-bar with "?"
              // icon to indicate user action is required
              if ($new_row.find('.btn-action-required').length > 0) {
                $(document.createElement('span'))
                  .addClass('fa fa-question-circle progress-bar-text')
                  .appendTo($container);
              }
              $new_row.find("td.warning:last").prepend($container);
            }

When progress bar being displayed, an image would be placed before the
table text. The result is a long process bar displaying before a short
text, and column become two line. The visual effect is poor. How ever,
if we change 'prepend' to 'wrapInner', the text would be placed over the
progress bar, and the column keep single line.

              $new_row.find("td.warning:last").prepend($container);
=>              $new_row.find("td.warning:last").wrapInner($container);

** Affects: horizon
     Importance: Undecided
         Status: New

** Description changed:

  Abstract horizon table code as following:
  
-             if ($new_row.hasClass('warning')) {
-               var $container = $(document.createElement('div'))
-                 .addClass('progress-text horizon-loading-bar');
+             if ($new_row.hasClass('warning')) {
+               var $container = $(document.createElement('div'))
+                 .addClass('progress-text horizon-loading-bar');
  
-               var $progress = $(document.createElement('div'))
-                 .addClass('progress progress-striped active')
-                 .appendTo($container);
+               var $progress = $(document.createElement('div'))
+                 .addClass('progress progress-striped active')
+                 .appendTo($container);
  
-               $(document.createElement('div'))
-                 .addClass('progress-bar')
-                 .appendTo($progress);
+               $(document.createElement('div'))
+                 .addClass('progress-bar')
+                 .appendTo($progress);
  
-               // if action/confirm is required, show progress-bar with "?"
-               // icon to indicate user action is required
-               if ($new_row.find('.btn-action-required').length > 0) {
-                 $(document.createElement('span'))
-                   .addClass('fa fa-question-circle progress-bar-text')
-                   .appendTo($container);
-               }
-               $new_row.find("td.warning:last").prepend($container);
-             }
+               // if action/confirm is required, show progress-bar with "?"
+               // icon to indicate user action is required
+               if ($new_row.find('.btn-action-required').length > 0) {
+                 $(document.createElement('span'))
+                   .addClass('fa fa-question-circle progress-bar-text')
+                   .appendTo($container);
+               }
+               $new_row.find("td.warning:last").prepend($container);
+             }
  
- When progress bar should be displaced, an image would be placed before
+ When progress bar should be displayed, an image would be placed before
  the table text. The result is a long process bar displaying before a
  short text, and column become two line. The visual effect is poor. How
  ever, if we change 'prepend' to 'wrapInner', the text would be placed
  over the progress bar, and the colume keep single line.
  
-               $new_row.find("td.warning:last").prepend($container);
+               $new_row.find("td.warning:last").prepend($container);
  =>              $new_row.find("td.warning:last").wrapInner($container);

** Description changed:

  Abstract horizon table code as following:
  
              if ($new_row.hasClass('warning')) {
                var $container = $(document.createElement('div'))
                  .addClass('progress-text horizon-loading-bar');
  
                var $progress = $(document.createElement('div'))
                  .addClass('progress progress-striped active')
                  .appendTo($container);
  
                $(document.createElement('div'))
                  .addClass('progress-bar')
                  .appendTo($progress);
  
                // if action/confirm is required, show progress-bar with "?"
                // icon to indicate user action is required
                if ($new_row.find('.btn-action-required').length > 0) {
                  $(document.createElement('span'))
                    .addClass('fa fa-question-circle progress-bar-text')
                    .appendTo($container);
                }
                $new_row.find("td.warning:last").prepend($container);
              }
  
- When progress bar should be displayed, an image would be placed before
- the table text. The result is a long process bar displaying before a
- short text, and column become two line. The visual effect is poor. How
- ever, if we change 'prepend' to 'wrapInner', the text would be placed
- over the progress bar, and the colume keep single line.
+ When progress bar being displayed, an image would be placed before the
+ table text. The result is a long process bar displaying before a short
+ text, and column become two line. The visual effect is poor. How ever,
+ if we change 'prepend' to 'wrapInner', the text would be placed over the
+ progress bar, and the colume keep single line.
  
                $new_row.find("td.warning:last").prepend($container);
  =>              $new_row.find("td.warning:last").wrapInner($container);

** Description changed:

  Abstract horizon table code as following:
  
              if ($new_row.hasClass('warning')) {
                var $container = $(document.createElement('div'))
                  .addClass('progress-text horizon-loading-bar');
  
                var $progress = $(document.createElement('div'))
                  .addClass('progress progress-striped active')
                  .appendTo($container);
  
                $(document.createElement('div'))
                  .addClass('progress-bar')
                  .appendTo($progress);
  
                // if action/confirm is required, show progress-bar with "?"
                // icon to indicate user action is required
                if ($new_row.find('.btn-action-required').length > 0) {
                  $(document.createElement('span'))
                    .addClass('fa fa-question-circle progress-bar-text')
                    .appendTo($container);
                }
                $new_row.find("td.warning:last").prepend($container);
              }
  
  When progress bar being displayed, an image would be placed before the
  table text. The result is a long process bar displaying before a short
  text, and column become two line. The visual effect is poor. How ever,
  if we change 'prepend' to 'wrapInner', the text would be placed over the
- progress bar, and the colume keep single line.
+ progress bar, and the column keep single line.
  
                $new_row.find("td.warning:last").prepend($container);
  =>              $new_row.find("td.warning:last").wrapInner($container);

-- 
You received this bug notification because you are a member of Yahoo!
Engineering Team, which is subscribed to OpenStack Dashboard (Horizon).
https://bugs.launchpad.net/bugs/1640019

Title:
  table text should be placed over progress image

Status in OpenStack Dashboard (Horizon):
  New

Bug description:
  Abstract horizon table code as following:

              if ($new_row.hasClass('warning')) {
                var $container = $(document.createElement('div'))
                  .addClass('progress-text horizon-loading-bar');

                var $progress = $(document.createElement('div'))
                  .addClass('progress progress-striped active')
                  .appendTo($container);

                $(document.createElement('div'))
                  .addClass('progress-bar')
                  .appendTo($progress);

                // if action/confirm is required, show progress-bar with "?"
                // icon to indicate user action is required
                if ($new_row.find('.btn-action-required').length > 0) {
                  $(document.createElement('span'))
                    .addClass('fa fa-question-circle progress-bar-text')
                    .appendTo($container);
                }
                $new_row.find("td.warning:last").prepend($container);
              }

  When progress bar being displayed, an image would be placed before the
  table text. The result is a long process bar displaying before a short
  text, and column become two line. The visual effect is poor. How ever,
  if we change 'prepend' to 'wrapInner', the text would be placed over
  the progress bar, and the column keep single line.

                $new_row.find("td.warning:last").prepend($container);
  =>              $new_row.find("td.warning:last").wrapInner($container);

To manage notifications about this bug go to:
https://bugs.launchpad.net/horizon/+bug/1640019/+subscriptions