From 299c6617c8ac344396deb6f69f72eaaa400c496a Mon Sep 17 00:00:00 2001
From: Diana Whitten <hurgleburgler@gmail.com>
Date: Fri, 29 Jul 2016 10:38:46 -0700
Subject: [PATCH] Style: Update Image Metadata overflow fail Style: Host
 Aggregate: Update Metadata overflow fail

admin/images: 'Update Metadata' overflow text failure, seen here:
https://i.imgur.com/LlI1x1I.png

Also took the oportunity to fix a color problem on selected rows.

Closes-bug: #1570513
Closes-bug: #1570477

Change-Id: I46ffdb4cbd74e5e20e613852dbf00e83b6ab9521
---
 .../metadata/tree/metadata-tree-item.html     | 12 ++++----
 .../framework/widgets/metadata/tree/tree.scss | 28 +++++++++++++------
 .../material/static/horizon/_styles.scss      |  1 +
 .../static/horizon/components/_trees.scss     |  8 ++++++
 4 files changed, 33 insertions(+), 16 deletions(-)
 create mode 100644 openstack_dashboard/themes/material/static/horizon/components/_trees.scss

diff --git a/horizon/static/framework/widgets/metadata/tree/metadata-tree-item.html b/horizon/static/framework/widgets/metadata/tree/metadata-tree-item.html
index 7fa49c2b8f..6a30a21256 100644
--- a/horizon/static/framework/widgets/metadata/tree/metadata-tree-item.html
+++ b/horizon/static/framework/widgets/metadata/tree/metadata-tree-item.html
@@ -65,15 +65,13 @@
        class="panel panel-default multiselect">
     <div class="panel-heading">
       <div ng-click="ctrl.switchOpened()">
-        <span class="fa fa-fw"
+        <span class="metadata-tree-item-icon fa fa-fw"
               ng-class="ctrl.item.leaf.readonly ? '' : ctrl.opened ? 'fa-chevron-down' : 'fa-chevron-right'">
         </span>
-        <span ng-bind="::ctrl.item.leaf.name"></span>
-        <div class="text-right">
-          <a class="btn btn-xs btn-default" ng-click="ctrl.action()">
-            <span class="fa fa-minus"></span>
-          </a>
-        </div>
+        <span class="metadata-tree-item-label" ng-bind="::ctrl.item.leaf.name"></span>
+        <a class="btn btn-xs btn-default metadata-tree-item-button" ng-click="ctrl.action()">
+          <span class="fa fa-minus"></span>
+        </a>
       </div>
     </div>
     <div class="panel-body values"
diff --git a/horizon/static/framework/widgets/metadata/tree/tree.scss b/horizon/static/framework/widgets/metadata/tree/tree.scss
index 2e0372952c..8ce520baa6 100644
--- a/horizon/static/framework/widgets/metadata/tree/tree.scss
+++ b/horizon/static/framework/widgets/metadata/tree/tree.scss
@@ -8,7 +8,7 @@
 
   /* Item lists */
 
-  :not(.active) {
+  &:not(.active) {
     &.dark-stripe {
       background-color: $table-bg-accent;
     }
@@ -35,10 +35,19 @@
   .metadata-tree-item {
     display: block;
 
+    .metadata-tree-item-label {
+      @include text-overflow();
+    }
+
+    .input-group {
+      & > .input-group-addon,
+      & > .form-control {
+        font-size: $font-size-small;
+        @include text-overflow();
+      }
+    }
+
     .input-group-addon {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
       width: 50%;
       max-width: 140px;
       text-align: right;
@@ -50,13 +59,14 @@
 
       .panel-heading {
 
-        &>* {
-          display: table;
+        & > div {
+          display: inline-flex;
           width: 100%;
+        }
 
-          &>* {
-            display: table-cell;
-            vertical-align: middle;
+        .metadata-tree-item {
+          &-label {
+            padding: 0 $padding-small-vertical;
           }
         }
       }
diff --git a/openstack_dashboard/themes/material/static/horizon/_styles.scss b/openstack_dashboard/themes/material/static/horizon/_styles.scss
index 7ef31e0977..09b10ef476 100644
--- a/openstack_dashboard/themes/material/static/horizon/_styles.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_styles.scss
@@ -10,6 +10,7 @@
 @import "components/progress_bars";
 @import "components/selects";
 @import "components/sidebar";
+@import "components/trees";
 
 .login .splash-logo {
   width: 215px;
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_trees.scss b/openstack_dashboard/themes/material/static/horizon/components/_trees.scss
new file mode 100644
index 0000000000..11509f6da6
--- /dev/null
+++ b/openstack_dashboard/themes/material/static/horizon/components/_trees.scss
@@ -0,0 +1,8 @@
+.metadata-tree-item {
+  .input-group {
+    & > .input-group-addon,
+    & > .form-control {
+      color: inherit;
+    }
+  }
+}