Merge lp:~hatch/juju-gui/ellipsis-unit-list into lp:juju-gui/experimental

[Jeff Pihach]

Adds ellipsis to unit list headers

The unit list headers could overflow pushing the chevron onto the next line
when the unit status name is too long. This branch maintains the unit number
and chevron in their appropriate places while limiting the length of the
unit type when closed.

https://codereview.appspot.com/32260044/

[Jeff Pihach (hatch)]

Reviewers: mp+196622_code.launchpad.net,

Message:
Please take a look.

Description:
Adds ellipsis to unit list headers

The unit list headers could overflow pushing the chevron onto the next
line
when the unit status name is too long. This branch maintains the unit
number
and chevron in their appropriate places while limiting the length of the
unit type when closed.

To QA (Chrome, Firefox, IE10):
Deploy service in simulator with 100 units
Wait until either an error status or landscape status gets
   shortened with an ellipsis.
Disable the simulator (ctrl+s)
Clck the header of the truncated status and it should wrap
   while keeping the chevron and coloured icon in the appropriate
   location.

https://code.launchpad.net/~hatch/juju-gui/ellipsis-unit-list/+merge/196622

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/32260044/

Affected files (+29, -2 lines):
   A [revision details]
   M lib/views/juju-inspector.less

Index: [revision details]
=== added file '[revision details]'
--- [revision details] 2012-01-01 00:00:00 +0000
+++ [revision details] 2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: <email address hidden>
+New revision: <email address hidden>

Index: lib/views/juju-inspector.less
=== modified file 'lib/views/juju-inspector.less'
--- lib/views/juju-inspector.less 2013-11-25 18:58:13 +0000
+++ lib/views/juju-inspector.less 2013-11-25 20:54:17 +0000
@@ -886,6 +886,11 @@
                  border-top: 1px solid @inspector-divider-top;
                  background-position: 20px center;
                  background-repeat: no-repeat;
+ display: -ms-flexbox;
+ -ms-flex-align: baseline;
+ display: flex;
+ align-content: stretch;
+ align-items: baseline;

                  span {
                      margin-right: 5px;
@@ -895,20 +900,40 @@
                      background: #fff;
                  }

+ .category-label {
+ text-overflow: ellipsis;
+ white-space: normal;
+ overflow: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
                  .chevron {
                      display: inline-block;
- vertical-align: 15%;
+ /* The above rule is required because IE10 does not
support
+ the flexbox rules that we need. It has no effect in the
+ other supported browsers. */
                      width: 10px;
- height: 3px;
+ height: 5px;
                      margin-left: 5px;
                      background:
url("/juju-ui/assets/images/chevron_up.png") no-repeat;
                  }
              }

+ .closed-unit-list .category-label {
+ white-space: nowrap;
+ }
+
              .closed-unit-list .chevron {
                  background: url("/juju-ui/as...

[Jeff Pihach (hatch)]

reviewer notes

https://codereview.appspot.com/32260044/diff/1/lib/views/juju-inspector.less
File lib/views/juju-inspector.less (right):

https://codereview.appspot.com/32260044/diff/1/lib/views/juju-inspector.less#newcode919
lib/views/juju-inspector.less:919: height: 5px;
Magic number increase because the combination of flexbox rules does not
allow paddings to work in IE10 for whatever reason. This puts the
chevron in the appropriate place cross browser.

https://codereview.appspot.com/32260044/diff/1/lib/views/juju-inspector.less#newcode933
lib/views/juju-inspector.less:933: .status-unit-header {
This keeps the coloured icon in the proper place when the header expands
to reveal the longer status.

https://codereview.appspot.com/32260044/

[Gary Poster (gary)]

LGTM with trivial and QA OK. Very cool! Thank you.

https://codereview.appspot.com/32260044/diff/1/lib/views/juju-inspector.less
File lib/views/juju-inspector.less (right):

https://codereview.appspot.com/32260044/diff/1/lib/views/juju-inspector.less#newcode919
lib/views/juju-inspector.less:919: height: 5px;
On 2013/11/25 21:02:10, jeff.pihach wrote:
> Magic number increase because the combination of flexbox rules does
not allow
> paddings to work in IE10 for whatever reason. This puts the chevron in
the
> appropriate place cross browser.

Sounds like it is worth a comment in the code itself.

https://codereview.appspot.com/32260044/

[Jeff Pihach (hatch)]

Thanks for the review! comment added

https://codereview.appspot.com/32260044/

[Jeff Pihach (hatch)]

*** Submitted:

Adds ellipsis to unit list headers

The unit list headers could overflow pushing the chevron onto the next
line
when the unit status name is too long. This branch maintains the unit
number
and chevron in their appropriate places while limiting the length of the
unit type when closed.

R=gary.poster
CC=
https://codereview.appspot.com/32260044

https://codereview.appspot.com/32260044/

=== modified file 'lib/views/juju-inspector.less'
--- lib/views/juju-inspector.less	2013-11-25 18:58:13 +0000
+++ lib/views/juju-inspector.less	2013-11-25 20:59:47 +0000
@@ -886,6 +886,11 @@
                 border-top: 1px solid @inspector-divider-top;
                 background-position: 20px center;
                 background-repeat: no-repeat;
+                display: -ms-flexbox;
+                -ms-flex-align: baseline;
+                display: flex;
+                align-content: stretch;
+                align-items: baseline;
 
                 span {
                     margin-right: 5px;
@@ -895,20 +900,40 @@
                     background: #fff;
                 }
 
+                .category-label {
+                    text-overflow: ellipsis;
+                    white-space: normal;
+                    overflow: hidden;
+                    -webkit-user-select: none;
+                    -moz-user-select: none;
+                    -ms-user-select: none;
+                    user-select: none;
+                }
+
                 .chevron {
                     display: inline-block;
-                    vertical-align: 15%;
+                    /* The above rule is required because IE10 does not support
+                    the flexbox rules that we need. It has no effect in the
+                    other supported browsers. */
                     width: 10px;
-                    height: 3px;
+                    height: 5px;
                     margin-left: 5px;
                     background: url("/juju-ui/assets/images/chevron_up.png") no-repeat;
                 }
             }
 
+            .closed-unit-list .category-label {
+                white-space: nowrap;
+            }
+
             .closed-unit-list .chevron {
                 background: url("/juju-ui/assets/images/chevron_down.png") no-repeat;
             }
 
+            .status-unit-header {
+                background-position: 15px 19px;
+            }
+
             .status-unit-header.error {
                 background-image: url("/juju-ui/assets/images/inspector-charm-error.png");
             }