Merge "Style: Update Image Metadata overflow fail Style: Host Aggregate: Update Metadata overflow fail"

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"

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;
           }
         }
       }

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;

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;
+    }
+  }
+}