Checkboxes for selecting rows.

uiframework/admin/layout.html

@@ -197,12 +197,283 @@
       <div class="table-panel">
         <table class="table">
           <tr>
+            <th>&nbsp;</th>
             <th>Lorem</th>
             <th>Ipsum</th>
             <th style="width: 136px;">Dolor</th>
             <th colspan="3">&nbsp;</th>
           </tr>
           <tr>
+            <td class="row-select">
+              <label>
+                <input type="checkbox" checked>
+              </label>
+            </td>
+            <td class="lead">Lorem</td>
+            <td>Ipsum</td>
+            <td>
+              <select class="form-control">
+                <option>Pacem</option>
+                <option>Para</option>
+                <option>Bellum</option>
+              </select>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-success tooltip-top" title="Activate">
+                <span class="fa fa-check"></span>
+              </button>
+            </td>
+            <td class="row-action">
+              <div class="btn-group pull-right">
+                <button type="button" class="btn btn-default dropdown-toggle tooltip-top" data-toggle="dropdown" title="Item options">
+                  <span class="fa fa-gear"></span>
+                </button>
+                <ul class="dropdown-menu" role="menu">
+                  <li>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Newest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Oldest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Most posts
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Least posts
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-danger tooltip-top" title="Activate">
+                <span class="fa fa-times"></span>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td class="row-select">
+              <label>
+                <input type="checkbox" checked>
+              </label>
+            </td>
+            <td class="lead">Lorem</td>
+            <td>Ipsum</td>
+            <td>
+              <select class="form-control">
+                <option>Pacem</option>
+                <option>Para</option>
+                <option>Bellum</option>
+              </select>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-success tooltip-top" title="Activate">
+                <span class="fa fa-check"></span>
+              </button>
+            </td>
+            <td class="row-action">
+              <div class="btn-group pull-right">
+                <button type="button" class="btn btn-default dropdown-toggle tooltip-top" data-toggle="dropdown" title="Item options">
+                  <span class="fa fa-gear"></span>
+                </button>
+                <ul class="dropdown-menu" role="menu">
+                  <li>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Newest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Oldest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Most posts
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Least posts
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-danger tooltip-top" title="Activate">
+                <span class="fa fa-times"></span>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td class="row-select">
+              <label>
+                <input type="checkbox" checked>
+              </label>
+            </td>
+            <td class="lead">Lorem</td>
+            <td>Ipsum</td>
+            <td>
+              <select class="form-control">
+                <option>Pacem</option>
+                <option>Para</option>
+                <option>Bellum</option>
+              </select>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-success tooltip-top" title="Activate">
+                <span class="fa fa-check"></span>
+              </button>
+            </td>
+            <td class="row-action">
+              <div class="btn-group pull-right">
+                <button type="button" class="btn btn-default dropdown-toggle tooltip-top" data-toggle="dropdown" title="Item options">
+                  <span class="fa fa-gear"></span>
+                </button>
+                <ul class="dropdown-menu" role="menu">
+                  <li>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Newest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Oldest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Most posts
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Least posts
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-danger tooltip-top" title="Activate">
+                <span class="fa fa-times"></span>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td class="row-select">
+              <label>
+                <input type="checkbox" checked>
+              </label>
+            </td>
+            <td class="lead">Lorem</td>
+            <td>Ipsum</td>
+            <td>
+              <select class="form-control">
+                <option>Pacem</option>
+                <option>Para</option>
+                <option>Bellum</option>
+              </select>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-success tooltip-top" title="Activate">
+                <span class="fa fa-check"></span>
+              </button>
+            </td>
+            <td class="row-action">
+              <div class="btn-group pull-right">
+                <button type="button" class="btn btn-default dropdown-toggle tooltip-top" data-toggle="dropdown" title="Item options">
+                  <span class="fa fa-gear"></span>
+                </button>
+                <ul class="dropdown-menu" role="menu">
+                  <li>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Newest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Oldest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Most posts
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Least posts
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-danger tooltip-top" title="Activate">
+                <span class="fa fa-times"></span>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td class="row-select">
+              <label>
+                <input type="checkbox" checked>
+              </label>
+            </td>
+            <td class="lead">Lorem</td>
+            <td>Ipsum</td>
+            <td>
+              <select class="form-control">
+                <option>Pacem</option>
+                <option>Para</option>
+                <option>Bellum</option>
+              </select>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-success tooltip-top" title="Activate">
+                <span class="fa fa-check"></span>
+              </button>
+            </td>
+            <td class="row-action">
+              <div class="btn-group pull-right">
+                <button type="button" class="btn btn-default dropdown-toggle tooltip-top" data-toggle="dropdown" title="Item options">
+                  <span class="fa fa-gear"></span>
+                </button>
+                <ul class="dropdown-menu" role="menu">
+                  <li>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Newest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Oldest
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-desc"></span>
+                      Most posts
+                    </a>
+                    <a href="#">
+                      <span class="fa fa-sort-numeric-asc"></span>
+                      Least posts
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </td>
+            <td class="row-action">
+              <button type="button" class="btn btn-danger tooltip-top" title="Activate">
+                <span class="fa fa-times"></span>
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td class="row-select">
+              <label>
+                <input type="checkbox" checked>
+              </label>
+            </td>
             <td class="lead">Lorem</td>
             <td>Ipsum</td>
             <td>

uiframework/misago/admin/css/misago/tables.less

@@ -26,6 +26,12 @@
     margin: 0px;
 
     tr {
+      &.active {
+        td {
+          background-color: fadeOut(@brand-warning, 95%);
+        }
+      }
+
       th {
         background: @table-header-bg;
         border: none;
@@ -44,6 +50,7 @@
       }
 
       td {
+        background-color: #fff;
         vertical-align: middle;
 
         img {
@@ -69,6 +76,51 @@
             }
           }
         }
+
+        &.row-select {
+          width: 1%;
+
+          label {
+            padding: 0px;
+            width: 24px;
+            height: 24px;
+
+            text-align: center;
+
+            input {
+              width: 12px;
+              height: 12px;
+            }
+
+            &.ninja-label {
+                border: 0;
+                clip: rect(0 0 0 0);
+                height: 1px;
+                margin: -1px;
+                overflow: hidden;
+                padding: 0;
+                position: absolute;
+                width: 1px;
+            }
+          }
+
+          a {
+            display: block;
+            width: 24px;
+            height: 24px;
+
+            span {
+              color: lighten(@gray-light, 5%);
+              font-size: 24px;
+            }
+
+            &.active {
+              span {
+                color: @brand-success;
+              }
+            }
+          }
+        }
       }
     }
   }

uiframework/misago/admin/css/style.css

@@ -6125,6 +6125,9 @@ body {
 .table-panel table.table {
   margin: 0px;
 }
+.table-panel table.table tr.active td {
+  background-color: rgba(240, 173, 78, 0.05);
+}
 .table-panel table.table tr th {
   background: #ededed;
   border: none;
@@ -6139,8 +6142,14 @@ body {
   border-radius: 0px 3px 0px 0px;
 }
 .table-panel table.table tr td {
+  background-color: #fff;
   vertical-align: middle;
 }
+.table-panel table.table tr td img {
+  border-radius: 4px;
+  max-width: 30px;
+  max-height: 30px;
+}
 .table-panel table.table tr td.row-action {
   width: 1%;
 }
@@ -6157,6 +6166,41 @@ body {
   position: relative;
   bottom: 1px;
 }
+.table-panel table.table tr td.row-select {
+  width: 1%;
+}
+.table-panel table.table tr td.row-select label {
+  padding: 0px;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+}
+.table-panel table.table tr td.row-select label input {
+  width: 12px;
+  height: 12px;
+}
+.table-panel table.table tr td.row-select label.ninja-label {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+.table-panel table.table tr td.row-select a {
+  display: block;
+  width: 24px;
+  height: 24px;
+}
+.table-panel table.table tr td.row-select a span {
+  color: #a6a6a6;
+  font-size: 24px;
+}
+.table-panel table.table tr td.row-select a.active span {
+  color: #2ecc71;
+}
 .navbars-container {
   border-bottom: 3px solid #c7c7c7;
 }

uiframework/misago/admin/js/misago.js

@@ -5,3 +5,34 @@ $(function() {
   $('.tooltip-left').tooltip({placement: 'left', container: 'body'});
   $('.tooltip-right').tooltip({placement: 'right', container: 'body'});
 });
+
+
+// Tables
+$(function() {
+  $('.table tr').each(function() {
+    var $row = $(this);
+    var $checkbox = $row.find('input[type=checkbox]');
+    var $label = $checkbox.parent();
+
+    $label.addClass('ninja-label');
+    $label.parent().append('<a href="#"><span class="fa fa-check"></span></a>');
+    var $check = $label.parent().find('a');
+
+    if ($checkbox.prop("checked")) {
+      $check.toggleClass('active');
+      $row.addClass('active');
+    }
+
+    $check.click(function() {
+      $(this).toggleClass('active');
+      if ($(this).hasClass('active')) {
+        $(this).parent().find('input').prop("checked", true);
+        $row.addClass('active');
+      } else {
+        $(this).parent().find('input').prop("checked", false);
+        $row.removeClass('active');
+      }
+      return false;
+    });
+  });
+});