Prettify login/wizard/cluster list pages.

Change-Id: If2a0fb8cd0e3f02d8601faf4f95b2b77de6c2e52

.gitignore

@@ -0,0 +1,3 @@
+*~
+*.swp
+.DS_Store

v2/assets/css/style.css

@@ -4,21 +4,35 @@ html {
     overflow-x: scroll;
     font-size: 14px !important;
     height: 100%;
+    font-family: "Trebuchet MS", san sarif !important;
+    color:rgba(83, 83, 83, 1) !important;
 }
 body {
     min-width: 1024px;
     font-size: 14px !important;
+    font-family:  "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif !important;
+    color:rgba(83, 83, 83, 1) !important;
+
 }
 .main-container {
     position: relative;
 }
 body, .main-content {
-    background: #fff;
-    /*background: #4a4f56;*/
-    /*background: url("../img/bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);*/
+    background: #fff;      
+   /* right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background-size: cover;
+    top: 0px;
+    background-image: url('../img/body_bg3.jpg');*/
 }
 .page-content {
-    background: inherit !important;
+    background: inherit !important;    
+}
+
+.table-responsive
+{
+    background-color:white;
 }
 .notification-msg {
     white-space: normal;
@@ -37,6 +51,15 @@ body, .main-content {
         height: 50px;
     }
 }
+.btn-login {
+    border-radius:7px;
+}
+.btn-topdown{
+    border-radius:7px !important;
+}
+.btn-dropdown {
+    border-radius:7px !important;
+}
 /*
 .cssSlideUp {
     transition: 1s linear all;
@@ -101,6 +124,8 @@ body, .main-content {
 }
 select {
     padding-left: 1px !important;
+    border-radius: 7px;
+    height:33px;
 }
 .opacity-zero {
     opacity: 0;
@@ -141,6 +166,7 @@ select {
     border: 2px dashed #D0D0D0;
     border-radius: 10px;
     padding: 5px 15px 20px 15px;
+    margin-bottom: 20px;
 }
 .no-cluster-panel {
     text-align: center;
@@ -157,11 +183,13 @@ select {
 .widget-body .table {
     border-top: 0px !important;
 }
+.widget-main padding-32t
 .navbar .navbar-nav > li {
     border-style: none;
 }
 .ace-nav > li {
     border-left: none !important;
+    height: 60px;
 }
 .new-servers-result {
     overflow-y: scroll;
@@ -176,7 +204,8 @@ select {
 textarea, input[type="text"], input[type="password"] {
     -webkit-appearance: none;
     /* Remove inner shadow from inputs on mobile iOS */
-    background: inherit;
+    /*background: inherit;*/
+    border-radius: 7px !important;
 }
 /*
 input[type="text"]:focus, input[type="password"]:focus {
@@ -188,6 +217,7 @@ input[type="text"]:focus, input[type="password"]:focus {
 
 input.ace[type="checkbox"] + .lbl:before, input.ace[type="radio"] + .lbl:before {
     content: "\00A0";
+    border-radius:4px !important;
 }
 .progress {
     position: relative;
@@ -245,6 +275,7 @@ button[disabled] {
     margin-bottom: 10px;
     background: rgba(0, 0, 0, 0.07);
     border: 2px dotted #ddd;
+    border-radius: 7px;
 }
 .infobox:hover {
     background: rgba(0, 0, 0, 0.2)
@@ -275,6 +306,10 @@ button[disabled] {
     font-size: 15px;
     line-height: 1.5;
     padding: 4px 12px;
+    border-radius:7px !important;
+}
+.btn-group > .btn {
+    border-radius: 7px !important;
 }
 .btn-xs {
     padding: 1px 5px !important;
@@ -343,7 +378,7 @@ a:active {
 .page-header {
     border-bottom: 0px !important;
     padding-top: 15px;
-    padding-bottom: 6px;
+    padding-bottom: 15px;
 }
 .label {
     border-radius: 0.25em !important;
@@ -367,7 +402,7 @@ a:active {
     margin-top: 26px !important;
 }
 .input-icon {
-    margin-top: 5px !important;
+   /* margin-top: 5px !important;*/
 }
 .ng-table th.sortable {
     cursor: pointer
@@ -481,6 +516,7 @@ td.center-align {
 .side-padding-20 {
     padding-left: 20px !important;
     padding-right: 20px !important;
+    /*padding-top:7px !important;*/
 }
 .top-margin-14 {
     margin-top: 14px;
@@ -500,9 +536,12 @@ div.center-align {
 .interface-placeholder-margin {
     border: 1px solid rgba(190, 210, 219, .5) !important;
     min-height: 60px !important;
+    border-radius: 4px;
+    background-color:rgba(221, 221, 221, 0.32);
 }
 .network-margin-border {
     border: 1px solid rgba(190, 210, 219, .5) !important;
+    border-radius:4px;
 }
 .network-margin {
     margin-left: 10px !important;
@@ -514,11 +553,13 @@ div.center-align {
 .network-background {
     background-image: url();
 }
+
 /* adjustments to draggable */
 
 .network-draggable {
     position: relative;
     width: 132px !important;
+    border-radius: 7px;
 }
 .external-event {
     float: left !important;
@@ -541,3 +582,165 @@ div.center-align {
     min-height: 50px;
     padding: 10px;
 }
+.wizard-steps li.complete:before, .wizard-steps li.complete .step {
+     /* border-color: #93cbf9 !important;*/}
+.a.wizard-steps li.active:before, .wizard-steps li.active .step {
+    border-color: #80afd4 !important; 
+    transform: scale(1.25) !important;
+    font-weight: bold;
+}
+li.incomplete:before, li.incomplete .step {
+    border-color: #d15b47 !important; 
+    font-weight: bold;
+}
+.modal-body
+{    
+    padding-top: 30px;
+    padding-right-value: 20px;
+    padding-bottom: 0px;
+    padding-left-value: 20px;
+    padding-left-ltr-source: physical;
+    padding-left-rtl-source: physical;
+    padding-right-ltr-source: physical;
+    padding-right-rtl-source: physical;
+}
+.modal-header
+{
+    /*background-color: #EFF3F8;*/
+    background-image: url('../img/test1.jpg');
+    
+}
+.bkg-fullscreen
+{
+    /*background-color:#EFF3F8;*/
+    background-image:url(../img/datacenter.jpg);
+    position: fixed;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background-size: cover;
+    background-position: 50% 50%;
+    top: 0px;
+
+}
+
+.bkg-fullscreen:before
+{
+    content:"";
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background-color: rgba(68, 57, 170, 0.3);
+    background-image:none;
+    opacity: 0.6;
+}
+
+.bar-white
+{
+    background-color:white;
+}
+.page-header h1
+{
+    font-weight:bold;
+    font-size: 20px !important;
+}
+.navbar
+{
+    background-image:url(../img/header.png);
+    /*position: fixed;*/
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    background-size: cover;
+    background-position: 50% 50%;
+    top: 0px;
+}
+.ace-nav > li > a 
+{
+    padding: 8px 8px; 
+}
+.modal-footer
+{
+    background-image: url('../img/test1.jpg');
+    
+}
+.modal-title
+{
+    color:white;
+}
+.gritter-error .gritter-close
+{
+    color: rgba(192, 116, 80, 1);
+}
+.gritter-close:hover
+{
+    color:rgba(219, 101, 68, 1) !important;
+}
+
+.gritter-item-wrapper.gritter-error
+{
+    background-image: url('../img/grey.png') !important;
+    background-size: cover;
+    border-radius: 7px;
+    opacity: 0.9;
+
+}
+.error-text
+{
+    color:rgba(219, 101, 68, 1);
+    font-size: 20px;
+    font-weight: bold;
+    padding-left: 10px;
+}
+#side
+{
+    position:absolute;
+    overflow:hidden;
+    right:30px;
+    width: 0px;
+    height: 30%;
+    content:"";
+    background:#fff;
+
+
+}
+#side-content
+{
+    position:absolute;
+    right:0px;
+    top:5px;
+    height:100%;
+    overflow:hidden;
+    width:200px;
+    background:#fff;
+    font-size: 13px;
+}
+#side-ctrl
+{ 
+    position: absolute; 
+    right:5px; 
+    top:0px;
+    height: 1.5%; 
+    width: 15px; 
+    /*background:yellow;*/
+}
+.label-lg.arrowed:before
+{
+    left: -11px;
+}
+.glyphicon
+{
+    top:0px;
+}
+.widget-main
+{
+    padding-top: 25px;
+    padding-bottom: 5px;
+}
+.login-form {
+    background-color: rgba(221, 221, 221, 0.6); 
+    padding: 20px 15px 10px;
+}
+>>>>>>> Prettify login/wizard/cluster list pages.

v2/src/app/cluster/cluster-all-grid.tpl.html

@@ -1,12 +1,12 @@
 <div class="col-sm-12 no-padding">
     <!--div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 no-padding" style="margin-top:10px" ng-repeat="cluster in clusters  | filter:search"-->
     <div ng-repeat="cluster in clusters | filter:search" class="pull-left">
-        <div class="infobox infobox-dark1 action" ng-mouseover="hoverView=true" ng-mouseleave="hoverView=false" ng-class="{'infobox-green': cluster.state == 'SUCCESSFUL', 'infobox-red': cluster.state == 'ERROR', 'infobox-orange': cluster.state == 'INSTALLING', 'infobox-blue': cluster.state == 'INITIALIZED', 'infobox-grey': cluster.state == 'UNINITIALIZED'}" ng-click="goToCluster(cluster.id, cluster.state)">
+        <div class="infobox infobox-dark1 action" ng-mouseover="hoverView=true" ng-mouseleave="hoverView=false" ng-class="{'infobox-green': cluster.state == 'SUCCESSFUL', 'infobox-blue': cluster.state == 'INITIALIZED', 'infobox-red': cluster.state == 'ERROR', 'infobox-orange': cluster.state == 'INSTALLING', 'infobox-grey': cluster.state == 'UNINITIALIZED'}" ng-click="goToCluster(cluster.id, cluster.state)">
             <div class="infobox-icon pull-left">
-                <i class="ace-icon fa" ng-class="{'fa-thumbs-up': cluster.state == 'SUCCESSFUL', 'fa-thumbs-down': cluster.state == 'ERROR', 'fa-spinner': cluster.state == 'INSTALLING', 'fa-meh-o': cluster.state == 'INITIALIZED', 'fa-cogs': cluster.state == 'UNINITIALIZED'}"></i>
+                <i class="ace-icon fa" ng-class="{'fa-check': cluster.state == 'SUCCESSFUL', ' fa-times': cluster.state == 'ERROR', 'fa-spinner': cluster.state == 'INSTALLING', ' fa-circle-o': cluster.state == 'INITIALIZED', 'fa-gear': cluster.state == 'UNINITIALIZED'}"></i>
             </div>
             <div class="pull-left">
-                <span style="text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); font-size: 24px; padding-left: 20px;">{{cluster.name}}</span>
+                <span style="font-size: 22px; padding-left: 20px; text-transform: uppercase;font-family:Impact,'Arial Black','Open-Sans', sans-serif;">{{cluster.name}}</span>
             </div>
             <div class="clearfix"></div>
 

v2/src/app/cluster/cluster-all-list.tpl.html

@@ -59,19 +59,19 @@
                 </td>
                 <td sortable="'state'">
                     <span ng-if="cluster.state == 'SUCCESSFUL'">
-                        <i class="ace-icon fa fa-thumbs-up bigger-160 green"></i>
+                        <i class="ace-icon fa fa fa-check bigger-160 green"></i>
                     </span>
                     <span ng-if="cluster.state == 'ERROR'">
-                        <i class="ace-icon fa fa-thumbs-down bigger-160 red"></i>
+                        <i class="ace-icon fa fa-times bigger-160 red"></i>
                     </span>
                     <span ng-if="cluster.state == 'INSTALLING'">
                         <i class="ace-icon fa fa-spinner fa-spin bigger-160 orange"></i>
                     </span>
                     <span ng-if="cluster.state == 'INITIALIZED'">
-                        <i class="ace-icon fa fa-meh-o bigger-160 blue"></i>
+                        <i class="ace-icon fa fa-circle-o bigger-160 blue"></i>
                     </span>
                     <span ng-if="cluster.state == 'UNINITIALIZED'">
-                        <i class="ace-icon fa fa-cogs bigger-160 grey"></i>
+                        <i class="ace-icon fa fa-gear bigger-160 grey"></i>
                     </span>
                 </td>
                 <td>

v2/src/app/cluster/cluster-all.tpl.html

@@ -3,7 +3,8 @@
         <div class="row">
             <div class="col-md-5 no-padding-left">
                 <h1 class="blue-header">
-                    My Clusters
+                    <span style="font-family:Impact;">My Clusters</span>
+                    
                     <span class="badge badge-yellow">{{clusters.length}}</span>
                     <small>
                         <span class="no-border-search">

v2/src/app/cluster/cluster-overview.tpl.html

@@ -54,7 +54,7 @@
                     </div>
                     <div class="pull-right">
                         <div class="btn-group" dropdown>
-                            <button type="button" class="btn btn-info no-border dropdown-toggle">
+                            <button type="button" class="btn btn-info dropdown-toggle">
                                 Actions
                                 <span class="ace-icon fa fa-caret-down icon-on-right"></span>
                             </button>
@@ -101,7 +101,7 @@
                                     <div>{{column.title}}</div>
                                 </th>
                                 <th>Progress</th>
-                                <th class="align-right">Actions</th>
+                                <th class="align-right"></th>
                             </tr>
                         </thead>
                         <tbody>

v2/src/app/login/login.tpl.html

@@ -1,20 +1,11 @@
-<div class="row login-page">
-    <div class="col-xs-12">
-        <div class="row">
-            <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
-                <h1>
-                    <i class="ace-icon fa fa-compass blue"></i>
-                    <span class="blue">Compass</span>
-                </h1>
-            </div>
-        </div>
+<div class="bkg-fullscreen">
+           <div style="margin:0 auto; top:15%; position:relative; width:400px;">
+                <div class="center">
+                   <img src="assets/img/logo.png" width="200px" style="margin-left: -50px; margin-bottom: 20px"></img>
 
-        <div class="row">
-            <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
-                <div class="login-box visible widget-box no-border">
-                    <div class="widget-body">
-                        <div class="widget-main">
-                            <form name="loginForm">
+                </div>
+                    
+                            <form class="login-form" name="loginForm" style="border-radius:7px">
                                 <fieldset>
                                     <label class="block clearfix">
                                         <span class="block input-icon input-icon-right">
@@ -23,7 +14,7 @@
                                         </span>
                                     </label>
 
-                                    <label class="block clearfix">
+                                    <label class="block clearfix" style="margin-top: 5px">
                                         <span class="block input-icon input-icon-right">
                                             <input type="password" placeholder="Password" ng-model="password" class="form-control" required>
                                             <i class="ace-icon fa fa-lock"></i>
@@ -47,17 +38,6 @@
                                     <div class="space-4"></div>
                                 </fieldset>
                             </form>
-
-                            <div class="space-6"></div>
-                        </div>
-                        <!-- /.widget-main -->
-                    </div>
-                    <!-- /.widget-body -->
-                </div>
-                <!-- /.login-box -->
-            </div>
-
-        </div>
-    </div>
-    <!-- /.col -->
+</div>
+                            
 </div>

v2/src/app/topnav/topnav.tpl.html

@@ -1,10 +1,9 @@
 <div id="navbar" class="navbar navbar-default">
     <div id="navbar-container" class="navbar-container">
         <div class="navbar-header pull-left">
-            <a class="navbar-brand" ui-sref="clusterList">
-                <i class="fa fa-compass"></i>
-                Compass
-            </a>
+        <a style="height: 50px; width: 200px;" class="navbar-brand" ui-sref="clusterList">
+            <img src="assets/img/logo-header.png" height="40px">
+        </a>
             <!-- /.brand -->
         </div>
         <!-- /.navbar-header -->

v2/src/app/wizard/network.tpl.html

@@ -1,6 +1,6 @@
 <div ng-controller="networkCtrl">
     <div class="row">
-        <div collapse="autoFillPanel.isCollapsed" class="dashed-panel">
+        <div collapse="autoFillPanel.isCollapsed" class="dashed-panel" style="height: auto; background-color: rgba(224, 226, 227, 0.25);">
             <span class="action pull-right" ng-click="autoFillPanel.isCollapsed = true;">
                 <i class="ace-icon fa fa-times-circle bigger-120 light-grey"></i>
             </span>
@@ -118,7 +118,7 @@
             </span>
             <!-- Column Show / Hide button -->
             <div class="btn-group" dropdown>
-                <button type="button" class="btn btn-default dropdown-toggle">
+                <button type="button" class="btn btn-default dropdown-toggle" style="border-radius:7px !important;">
                     Column Show / Hide
                     <span class="ace-icon fa fa-caret-down icon-on-right"></span>
                 </button>
@@ -211,51 +211,44 @@
         </table>
     </div>
     <div>
-        <script type="text/ng-template" id="addSubnetModal.html">
-        < div class = "modal-header" >
-            < h3 class = "modal-title" >
-            Subnetwork < /h3>
-            </div >
-            < div class = "modal-body" >
-            < alert ng - repeat = "alert in alerts"
-        type = "danger"
-        close = "closeAlert()" > {
-            {
-                alert.message
-            }
-        } < /alert>
+    <script type="text/ng-template" id="addSubnetModal.html">
+        <div class="modal-header">
+            <h3 class="modal-title" >Subnetwork </h3>
+        </div >
+        <div class = "modal-body" >
+            <alert ng-repeat = "alert in alerts" type = "danger" close = "closeAlert()" > 
+                {{alert.message}} 
+            </alert>
+            <table class="table table-hover nowrap">
+                <thead>
+                    <tr>
+                        <th>Subnet</th >
+                        <th> Actions </th>
+                    </tr >
+                </thead>
+                <tbody>
+                    <tr ng-repeat="sub in subnetworks">
+                        <td>
+                            <input type="text" ng-model="sub.subnet" placeholder="Subnet" / >
+                        </td>
+                        <td>
+                            <span class="action" ng-click="addSubnetwork()">
+                                <i class="fa fa-plus-circle bigger-140 blue"></i>
+                            </span>
 
-                <table class="table table-hover nowrap">
-                    <thead>
-                        <tr>
-                            <th>Subnet</th >
-            < th > Actions < /th>
-                        </tr >
-            < /thead>
-                    <tbody>
-                        <tr ng-repeat="sub in subnetworks">
-                            <td>
-                                <input type="text" ng-model="sub.subnet" placeholder="Subnet" / >
-            < /td>
-                            <td>
-                                <span class="action" ng-click="addSubnetwork()">
-                                    <i class="fa fa-plus-circle bigger-140 blue"></i >
-            < /span>
+                            <span ng-show="subnetworks.length > 1" class="action" ng-click="removeSubnetwork($index)">
+                                <i class="fa fa-minus-circle bigger-140 blue"></i>
+                            </span>
+                        </td>
+                    </tr>
 
-                                <span ng-show="subnetworks.length > 1" class="action" ng-click="removeSubnetwork($index)">
-                                    <i class="fa fa-minus-circle bigger-140 blue"></i >
-            < /span>
-                            </td >
-            < /tr>
-
-                    </tbody >
-            < /table>
-            </div >
-            < div class = "modal-footer" >
-            < button class = "btn btn-primary"
-        ng - click = "ok()" > OK < /button>
-                <button class="btn btn-grey" ng-click="cancel()">Cancel</button >
-            < /div>
+                </tbody>
+            </table>
+        </div >
+        <div class = "modal-footer" >
+            <button class = "btn btn-primary" ng - click = "ok()" > OK </button>
+                <button class="btn btn-grey" ng-click="cancel()">Cancel</button>
+        </div>
         </script>
     </div>
 </div>

v2/src/app/wizard/network_mapping.tpl.html

@@ -13,7 +13,7 @@
                                 (Promisc)
                             </span>
                             <div ui-on-Drop="onDrop($event, interface_key)" drag-hover-class="drag-enter" drop-channel="{{interface_value.dropChannel}}" class="interface-placeholder interface-placeholder-margin">
-                                <div ng-repeat="(network_key, network_value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, network_key, networking)" drag-channel="{{network_value.dragChannel}}" class="external-event label-purple ui-draggable network-draggable margin-right-5" ng-if="network_value.mapping_interface==interface_key">
+                                <div ng-repeat="(network_key, network_value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, network_key, networking)" drag-channel="{{network_value.dragChannel}}" class="external-event ui-draggable network-draggable margin-right-5" ng-class="{'label-pink': network_key == 'management', 'label-success': network_key =='tenant', 'label-purple': network_key == 'public', 'label-warning': network_key == 'storage'}" ng-if="network_value.mapping_interface==interface_key">
                                     <i class="ace-icon fa fa-arrows"></i>
                                     {{network_value.display}}
                                 </div>
@@ -35,7 +35,7 @@
                 <div class="widget-body">
                     <div class="widget-main network-background">
                         <div ui-on-Drop="onDrop($event, interface_key)" drag-hover-class="drag-enter" class="network-placeholder network-margin-border" drop-channel="E">
-                            <div ng-repeat="(key, value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, key, networking);" class="external-event  label-purple ui-draggable network-draggable network-margin margin-right-20" drag-channel="{{value.dragChannel}}" ng-if="!value.mapping_interface">
+                            <div ng-repeat="(key, value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, key, networking);" class="external-event ui-draggable network-draggable network-margin margin-right-20" ng-class="{'label-pink': key == 'management', 'label-success': key =='tenant', 'label-purple': key == 'public', 'label-warning': key == 'storage'}" drag-channel="{{value.dragChannel}}" ng-if="!value.mapping_interface">
                                 <i class="ace-icon fa fa-arrows"></i>
                                 {{value.display}}
                             </div>

v2/src/app/wizard/partition.tpl.html

@@ -22,9 +22,9 @@
                             <input ng-model="newPartition.max_size" type="text" placeholder="Max Size" class="input-medium">
                         </td>
                         <td>
-                            <button ng-click="addPartition()" class="btn btn-sm btn-info" type="button">
-                                Add
-                            </button>
+                               <span ng-click="addPartition()" class="action" >
+                                        <i class="fa fa-plus-circle bigger-140 blue"S></i>
+                               </span>                           
                         </td>
                     </tr>
                     <tr ng-repeat="(key, data) in partition">
@@ -45,9 +45,9 @@
                                 <i class="ace-icon fa fa-pencil bigger-120"></i>
                             </button>
                             <!--delete button-->
-                            <button ng-hide="editPartitionMode" ng-click="editPartitionMode = true; deletePartition(key)" class="btn btn-xs btn-black-white btn-trash-hover border-radius-4">
-                                <i class="ace-icon fa fa-trash-o bigger-120"></i>
-                            </button>
+                            <span ng-hide="editPartitionMode" ng-click="editPartitionMode = true; deletePartition(key)" class="action border-radius-4">
+                                <i class="fa fa-minus-circle bigger-140 blue"></i>
+                            </span>
                             <!--save button-->
                             <button ng-show="editPartitionMode" ng-click="editPartitionMode = false;" class="btn btn-xs btn-black-white btn-topmargin-8 btn-sumbit-hover border-radius-4">
                                 <i class="ace-icon fa fa-check bigger-120"></i>

v2/src/app/wizard/review.tpl.html

@@ -1,3 +1,5 @@
+
+
 <div ng-controller="reviewCtrl">
     <div class="row">
         <div class="col-sm-12">

v2/src/app/wizard/role_assignment.tpl.html

@@ -1,6 +1,6 @@
 <div ng-controller="roleAssignCtrl">
     <div class="row">
-        <div collapse="autoAssignRoles.isCollapsed" class="dashed-panel">
+        <div collapse="autoAssignRoles.isCollapsed" class="dashed-panel" style="background-color: rgba(224, 226, 227, 0.25);">
             <span class="action pull-right" ng-click="autoAssignRoles.isCollapsed = true;">
                 <i class="ace-icon fa fa-times-circle bigger-120 light-grey"></i>
             </span>