table columns list ui

app/scripts/views/list-view.js

@@ -14,6 +14,7 @@ var ListView = Backbone.View.extend({
 
     events: {
         'click .list__item': 'itemClick',
+        'click .list__table-options': 'tableOptionsClick',
         'dragstart .list__item': 'itemDragStart'
     },
 
@@ -206,6 +207,10 @@ var ListView = Backbone.View.extend({
         e.originalEvent.dataTransfer.setData('text/entry', id);
         e.originalEvent.dataTransfer.effectAllowed = 'move';
         DragDropInfo.dragObject = this.items.get(id);
+    },
+
+    tableOptionsClick: function() {
+        // TODO: show available columns list
     }
 });
 

app/styles/areas/_list.scss

@@ -96,6 +96,17 @@
     td, th {
       padding: $base-padding;
       text-align: left;
+      &:first-child {
+        text-align: center;
+      }
+    }
+    th:first-child {
+      padding: 0;
+      width: 3em;
+    }
+    &-options {
+      @include icon-btn();
+      cursor: pointer;
     }
   }
 

app/styles/base/_base.scss

@@ -12,5 +12,4 @@
 @import "buttons";
 @import "forms";
 @import "lists";
-@import "tables";
 @import "typography";

app/styles/base/_tables.scss

@@ -1,25 +0,0 @@
-//table {
-//  border-collapse: collapse;
-//  font-feature-settings: "kern", "liga", "tnum";
-//  margin: $small-spacing 0;
-//  table-layout: fixed;
-//  width: 100%;
-//}
-//
-//th {
-//  @include th { border-bottom: 1px solid light-border-color(); }
-//  font-weight: 600;
-//  padding: $small-spacing 0;
-//  text-align: left;
-//}
-//
-//td {
-//  @include th { border-bottom: base-border(); }
-//  padding: $small-spacing 0;
-//}
-//
-//tr,
-//td,
-//th {
-//  vertical-align: middle;
-//}

app/templates/list-table.hbs

@@ -1,7 +1,7 @@
 <table class="list__table">
     <thead>
         <tr>
-            <th></th>
+            <th><i class="fa fa-bars muted-color list__table-options"></i></th>
             <th>{{Res 'title'}}</th>
             <th>{{Res 'user'}}</th>
             <th>{{Res 'website'}}</th>