From a19f515d05d46e9a66659f3ab4f44af757e23ead Mon Sep 17 00:00:00 2001
From: Gilberto Medrano <gmedrano@gmail.com>
Date: Tue, 23 Sep 2014 20:41:58 -0700
Subject: [PATCH 1/3] created a grid for action items

---
 apps/st2-actions/template.html | 18 ++++++++++++++++++
 less/style.less                |  4 ++++
 2 files changed, 22 insertions(+)

diff --git a/apps/st2-actions/template.html b/apps/st2-actions/template.html
index b7b9d6ae9..a70b21f28 100644
--- a/apps/st2-actions/template.html
+++ b/apps/st2-actions/template.html
@@ -1,6 +1,24 @@
 <div class="st2-panel" ng-class="{'st2-panel--slide': state.includes('*.details')}">
 
   <div class="st2-actions">
+    <table class="table table-hover">
+      <thead>
+        <tr>
+          <th>Machine Name</th>
+          <th>Human-friendly Name</th>
+          <th>Description</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody ng-repeat="action in actions">
+        <tr>
+          <td>{{ action.name }}</td>
+          <td>{{ action.runner_type }}</td>
+          <td>{{ action.description }}</td>
+          <td><span class="label label-warning">{{ action.enabled }}</span></td>
+        </tr>
+      </tbody>
+    </table>
 
     <ul class="st2-actions__list">
       <li class="st2-actions__item" ng-repeat="action in actions"
diff --git a/less/style.less b/less/style.less
index 2b8951b1d..821edb220 100644
--- a/less/style.less
+++ b/less/style.less
@@ -1,8 +1,12 @@
 @import (inline) "../components/normalize-css/normalize.css";
 
+@import (reference) '/components/bootstrap/less/variables.less';
+@import (reference) '/components/bootstrap/less/mixins.less';
+
 @import "fonts";
 @import "layout";
 @import "colors";
+@import "/components/bootstrap/less/tables.less";
 
 html, body {
   height: 100%;

From 51912e1bb8766a1460412bfba037e65dc083bf74 Mon Sep 17 00:00:00 2001
From: Gilberto Medrano <gmedrano@gmail.com>
Date: Tue, 23 Sep 2014 20:41:58 -0700
Subject: [PATCH 2/3] created a grid for action items

---
 apps/st2-actions/template.html | 18 ++++++++++++++++++
 less/style.less                |  4 ++++
 2 files changed, 22 insertions(+)

diff --git a/apps/st2-actions/template.html b/apps/st2-actions/template.html
index b7b9d6ae9..a70b21f28 100644
--- a/apps/st2-actions/template.html
+++ b/apps/st2-actions/template.html
@@ -1,6 +1,24 @@
 <div class="st2-panel" ng-class="{'st2-panel--slide': state.includes('*.details')}">
 
   <div class="st2-actions">
+    <table class="table table-hover">
+      <thead>
+        <tr>
+          <th>Machine Name</th>
+          <th>Human-friendly Name</th>
+          <th>Description</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody ng-repeat="action in actions">
+        <tr>
+          <td>{{ action.name }}</td>
+          <td>{{ action.runner_type }}</td>
+          <td>{{ action.description }}</td>
+          <td><span class="label label-warning">{{ action.enabled }}</span></td>
+        </tr>
+      </tbody>
+    </table>
 
     <ul class="st2-actions__list">
       <li class="st2-actions__item" ng-repeat="action in actions"
diff --git a/less/style.less b/less/style.less
index 2b8951b1d..821edb220 100644
--- a/less/style.less
+++ b/less/style.less
@@ -1,8 +1,12 @@
 @import (inline) "../components/normalize-css/normalize.css";
 
+@import (reference) '/components/bootstrap/less/variables.less';
+@import (reference) '/components/bootstrap/less/mixins.less';
+
 @import "fonts";
 @import "layout";
 @import "colors";
+@import "/components/bootstrap/less/tables.less";
 
 html, body {
   height: 100%;

From 313301a53775439de0e006915057c90bbe0cf22b Mon Sep 17 00:00:00 2001
From: Gilberto Medrano <gmedrano@gmail.com>
Date: Wed, 24 Sep 2014 00:21:48 -0700
Subject: [PATCH 3/3] added markup and styles to Actions grid to match static
 prototype

---
 apps/st2-actions/style.less    | 45 +++++++++++++++++++++++++++++++-
 apps/st2-actions/template.html | 47 ++++++++++++++++++++--------------
 index.html                     |  1 +
 less/style.less                |  1 +
 4 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/apps/st2-actions/style.less b/apps/st2-actions/style.less
index fa38a5c25..f34295bd0 100644
--- a/apps/st2-actions/style.less
+++ b/apps/st2-actions/style.less
@@ -58,7 +58,50 @@
   position: relative;
 
   flex: 1;
-
+  
+  .panel-default {
+    border: none;
+    border-radius: 0;
+  }
+  
+  .panel-heading {
+    background: #666;
+    border-bottom: 1px solid #999;
+    h2 {
+      color: white;
+      font-size: 15px;
+      text-transform: uppercase;
+      font-weight: 200;
+      font-family: Oswald;
+    }
+  }
+  
+  .panel-body {
+    padding: 0;
+  }
+  
+  .panel, .panel-heading, .panel-body, .table {
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    margin: 0;
+    
+    th {
+      border-bottom: none;
+    }
+    .odd {
+      background-color: #E9E9EC;
+    }
+    .even {
+      background-color: transparent;
+    }
+    .table-hover > tbody > tr:hover > td,
+    .table-hover > tbody > tr:hover > th {
+      background-color: #428bca;
+      color: white;
+    }
+  }
+  
   &__list {
     margin: 0;
     padding: 0;
diff --git a/apps/st2-actions/template.html b/apps/st2-actions/template.html
index a70b21f28..4d070099e 100644
--- a/apps/st2-actions/template.html
+++ b/apps/st2-actions/template.html
@@ -1,31 +1,40 @@
 <div class="st2-panel" ng-class="{'st2-panel--slide': state.includes('*.details')}">
 
-  <div class="st2-actions">
-    <table class="table table-hover">
-      <thead>
-        <tr>
-          <th>Machine Name</th>
-          <th>Human-friendly Name</th>
-          <th>Description</th>
-          <th>Status</th>
-        </tr>
-      </thead>
-      <tbody ng-repeat="action in actions">
-        <tr>
-          <td>{{ action.name }}</td>
-          <td>{{ action.runner_type }}</td>
-          <td>{{ action.description }}</td>
-          <td><span class="label label-warning">{{ action.enabled }}</span></td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="st2-actions panel panel-default">
+    <div class="panel-heading">
+      <h2 class="panel-title">Category One</h2>
+    </div>
+    
+    <div class="panel-body">
+      <table class="table table-hover">
+        <thead>
+          <tr>
+            <th>Machine Name</th>
+            <th>Human-friendly Name</th>
+            <th>Description</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        
+        <tbody>
+          <tr ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="action in actions" ng-click="state.go('^.summary', {id: action.id})">
+            <td>{{ action.name }}</td>
+            <td>{{ action.runner_type }}</td>
+            <td>{{ action.description }}</td>
+            <td><span class="label label-warning">{{ action.enabled }}</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
+<!--
     <ul class="st2-actions__list">
       <li class="st2-actions__item" ng-repeat="action in actions"
       ng-click="state.go('^.summary', {id: action.id})">
         {{ action | json }}
       </li>
     </ul>
+-->
 
     <div class="st2-panel__back-button" ng-click="state.go('^.summary', {id: current.id})"></div>
   </div>
diff --git a/index.html b/index.html
index 729e1f72a..9b0238878 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
 
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
+	<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Oswald:400,300,700'>
 
   <!-- buils:styles -->
   <link rel="stylesheet" href="css/style.css">
diff --git a/less/style.less b/less/style.less
index 821edb220..b18704eca 100644
--- a/less/style.less
+++ b/less/style.less
@@ -7,6 +7,7 @@
 @import "layout";
 @import "colors";
 @import "/components/bootstrap/less/tables.less";
+@import "/components/bootstrap/less/panels.less";
 
 html, body {
   height: 100%;