Fix sortable table column header style to v6.1

sw-jung · Dec 25, 2017 · 9f6661d · 9f6661d
1 parent af29b7f
commit 9f6661d
Showing 1 changed file with 43 additions and 25 deletions.
diff --git a/public/management/list.html b/public/management/list.html
@@ -105,33 +105,51 @@ <h1 class="kuiTitle">
             <thead>
               <tr>
                 <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
-                  <input
-                    type="checkbox"
-                    class="kuiCheckBox"
-                    ng-checked="areAllRowsChecked()"
-                    ng-click="toggleAll()"
-                    ng-disabled="!templates.length"
-                  >
+                  <span class="kuiTableHeaderCell__liner">
+                    <input
+                      type="checkbox"
+                      class="kuiCheckBox"
+                      ng-checked="areAllRowsChecked()"
+                      ng-click="toggleAll()"
+                      ng-disabled="!templates.length"
+                    >
+                  </span>
                 </th>
-                <th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" ng-click="changeOrder('_id')">
-                  IndexPattern
-                  <span
-                    class="kuiTableSortIcon kuiIcon"
-                    ng-class="{
-                      'fa-long-arrow-up': listOrder === '+_id',
-                      'fa-long-arrow-down': listOrder === '-_id'
-                    }
-                  "></span>
+                <th class="kuiTableHeaderCell">
+                  <button
+                    type="button"
+                    class="kuiTableHeaderCellButton"
+                    ng-class="{ 'kuiTableHeaderCellButton-isSorted': isSorted('_id') }"
+                    ng-click="changeOrder('_id')">
+                    <span class="kuiTableHeaderCell__liner">
+                      IndexPattern
+                      <span
+                        class="kuiTableSortIcon kuiIcon"
+                        ng-class="{
+                          'fa-long-arrow-up': listOrder === '+_id',
+                          'fa-long-arrow-down': listOrder === '-_id'
+                        }
+                      "></span>
+                    </span>
+                  </button>
                 </th>
-                <th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" ng-click="changeOrder('status')">
-                  Status
-                  <span
-                    class="kuiTableSortIcon kuiIcon"
-                    ng-class="{
-                      'fa-long-arrow-up': listOrder === '+status',
-                      'fa-long-arrow-down': listOrder === '-status'
-                    }
-                  "></span>
+                <th class="kuiTableHeaderCell">
+                  <button
+                    type="button"
+                    class="kuiTableHeaderCellButton"
+                    ng-class="{ 'kuiTableHeaderCellButton-isSorted': isSorted('status') }"
+                    ng-click="changeOrder('status')">
+                    <span class="kuiTableHeaderCell__liner">
+                      Status
+                      <span
+                        class="kuiTableSortIcon kuiIcon"
+                        ng-class="{
+                          'fa-long-arrow-up': listOrder === '+status',
+                          'fa-long-arrow-down': listOrder === '-status'
+                        }
+                      "></span>
+                    </span>
+                  </button>
                 </th>
               </tr>
             </thead>