Add user role privilege table

Created a directive to handle display of user privilege roles
on the local user management page.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I83caea33356012752c7a67301fa2a372f0c28620

4 files changed, 23 insertions, 6 deletions

diff --git a/app/common/components/table/table.html b/app/common/components/table/table.html
index b40c346..ceedd91 100644
--- a/app/common/components/table/table.html
+++ b/app/common/components/table/table.html
@@ -1,4 +1,4 @@
-<table class="bmc-table">
+<table class="bmc-table {{$ctrl.size}}">
   <thead>
     <!-- Header row -->
     <tr>
@@ -14,9 +14,9 @@
         ng-repeat="row in $ctrl.model.data"
         class="bmc-table__row">
       <!-- Row item -->
-      <td ng-repeat="item in row.uiData"
+      <td ng-repeat="item in row.uiData track by $index"
           class="bmc-table__cell">
-        {{item}}
+          <ng-bind-html ng-bind-html="item"></ng-bind-html>
       </td>
       <!-- Row Actions -->
       <td ng-if="$ctrl.rowActionsEnabled"
diff --git a/app/common/components/table/table.js b/app/common/components/table/table.js
index 09a6d6d..cf2b797 100644
--- a/app/common/components/table/table.js
+++ b/app/common/components/table/table.js
@@ -9,13 +9,16 @@ window.angular && (function(angular) {
    * The <bmc-table> component expects a 'model' attribute
    * that will contain all the data needed to render the table.
    *
-   * The component also accepts a 'row-actions-enabled' attribute,
+   * The component accepts a 'row-actions-enabled' attribute,
    * to optionally render table row actions. Defaults to false.
    * Pass true to render actions. Row actions are defined in
    * model.data.actions.
    *
+   * The component accepts a 'size' attribute which can be
+   * set to 'small' which will render a smaller font size in the
+   * table.
    *
-   * The model object should contain 'header', and 'data'
+   * The model object should contain 'header' and 'data'
    * properties.
    *
    * model: {
@@ -96,6 +99,6 @@ window.angular && (function(angular) {
   angular.module('app.common.components').component('bmcTable', {
     template: require('./table.html'),
     controller: TableController,
-    bindings: {model: '<', rowActionsEnabled: '<', emitAction: '&'}
+    bindings: {model: '<', rowActionsEnabled: '<', size: '<', emitAction: '&'}
   })
 })(window.angular);
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 40b6a64..0cdb414 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -149,6 +149,9 @@
 
 .bmc-table {
   width: 100%;
+  &.small {
+    font-size: 90%;
+  }
 }
 
 .bmc-table__row {
diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss
index 6f4c62e..5923505 100644
--- a/app/common/styles/elements/accordion.scss
+++ b/app/common/styles/elements/accordion.scss
@@ -49,4 +49,15 @@
     max-height: 1000px;
     @include fastTransition-all;
   }
+}
+
+.accordion-trigger {
+  .icon {
+    transition: transform $duration--fast-01;
+  }
+  &.accordion-trigger--expanded {
+    .icon {
+      transform: rotate(90deg);
+    }
+  }
 }
\ No newline at end of file