From 3c7968161ac8ca464d209216a8f753e173ac2d22 Mon Sep 17 00:00:00 2001
From: Samuel Georges <sam@daftspunk.com>
Date: Fri, 30 Sep 2016 10:36:10 +1000
Subject: [PATCH] Add icon badges to lists

---
 modules/system/assets/ui/docs/list.md   | 56 ++++++++++++++++++++++++-
 modules/system/assets/ui/less/list.less | 50 ++++++++++++++++++++++
 modules/system/assets/ui/storm.css      |  7 ++++
 3 files changed, 112 insertions(+), 1 deletion(-)

diff --git a/modules/system/assets/ui/docs/list.md b/modules/system/assets/ui/docs/list.md
index d2261a99c..4386a252d 100644
--- a/modules/system/assets/ui/docs/list.md
+++ b/modules/system/assets/ui/docs/list.md
@@ -213,7 +213,7 @@ It might be fun to include a status column!
                 <tr>
                     <td>
                         <span class="oc-icon-circle text-success">
-                            Pending
+                            Approved
                         </span>
                     </td>
                     <td>The sun is shining</td>
@@ -230,6 +230,60 @@ It might be fun to include a status column!
         </table>
     </div>
 
+
+### Badge column
+
+You can also include an icon badge inside a column.
+
+    <div class="control-list">
+        <table class="table data">
+            <thead>
+                <tr>
+                    <th style="width: 150px"><span>Status</span></th>
+                    <th class="active sort-asc"><a href="/">Title</a></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>
+                        <span class="list-badge badge-info">
+                            <i class="icon-info"></i>
+                        </span>
+                        Draft
+                    </td>
+                    <td>Welcome to October</td>
+                </tr>
+                <tr>
+                    <td>
+                        <span class="list-badge badge-warning">
+                            <i class="icon-exclamation"></i>
+                        </span>
+                        Pending
+                    </td>
+                    <td>What a wonderful day</td>
+                </tr>
+                <tr>
+                    <td>
+                        <span class="list-badge badge-success">
+                            <i class="icon-check"></i>
+                        </span>
+                        Approved
+                    </td>
+                    <td>The sun is shining</td>
+                </tr>
+                <tr>
+                    <td>
+                        <span class="list-badge badge-danger">
+                            <i class="icon-times"></i>
+                        </span>
+                        Cancelled
+                    </td>
+                    <td>The weather is sweet here</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
 ### Linking rows
 
 You may link an entire row by adding the `data-control="rowlink"` attribute to the table element. The first table data (TD) column with an anchor will be used to link the entire row. To bypass this behavior, simply add the `nolink` class to the column.
diff --git a/modules/system/assets/ui/less/list.less b/modules/system/assets/ui/less/list.less
index 0837f8fed..347a347b7 100644
--- a/modules/system/assets/ui/less/list.less
+++ b/modules/system/assets/ui/less/list.less
@@ -284,6 +284,52 @@ table.table.data {
         text-align: center;
     }
 
+    //
+    // Labels
+    //
+
+    .list-badge {
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        margin: 0 5px 0 0;
+        padding: 1px 0 0 0;
+        font-size: 10px;
+        width: 15px;
+        height: 15px;
+        text-align: center;
+        border-radius: @border-radius-base;
+        color: #fff;
+
+        &.badge-default {
+            background: @gray-light;
+        }
+
+        &.badge-primary {
+            background: @brand-primary;
+        }
+
+        &.badge-success {
+            background: @brand-success;
+        }
+
+        &.badge-info {
+            background: @brand-info;
+        }
+
+        &.badge-warning {
+            background: @brand-warning;
+        }
+
+        &.badge-danger {
+            background: @brand-danger;
+        }
+    }
+
+    //
+    // Checkbox
+    //
+
     .list-checkbox {
         width: 52px;
         vertical-align: top;
@@ -312,6 +358,10 @@ table.table.data {
         padding: 18px 0 0 @padding-standard;
     }
 
+    //
+    // Trees
+    //
+
     .list-tree {
         width: 10px;
         padding: 0;
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index bacc3e598..c5cbdc24b 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -2612,6 +2612,13 @@ table.table.data.no-active-indicator tbody tr td:first-child{border-left:none}
 table.table.data tfoot a{color:#666666;text-decoration:none}
 table.table.data tfoot td,table.table.data tfoot th{border-color:#d4d8da;padding:10px 15px}
 table.table.data th.list-cell-type-switch,table.table.data td.list-cell-type-switch{text-align:center}
+table.table.data .list-badge{display:inline-block;position:relative;top:-1px;margin:0 5px 0 0;padding:1px 0 0 0;font-size:10px;width:15px;height:15px;text-align:center;border-radius:3px;color:#fff}
+table.table.data .list-badge.badge-default{background:#999999}
+table.table.data .list-badge.badge-primary{background:#34495e}
+table.table.data .list-badge.badge-success{background:#31ac5f}
+table.table.data .list-badge.badge-info{background:#5bc0de}
+table.table.data .list-badge.badge-warning{background:#f0ad4e}
+table.table.data .list-badge.badge-danger{background:#ab2a1c}
 table.table.data .list-checkbox{width:52px;vertical-align:top;border-right:1px solid #eeeeee}
 table.table.data .list-checkbox .checkbox{margin:0;min-height:0}
 table.table.data .list-checkbox .custom-checkbox{position:relative;top:-14px;left:-2px}