From e0b3f0921adf4ef57fa1fbac3893a16f72097d62 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Thu, 12 Apr 2018 23:23:35 +0200
Subject: [PATCH] signal to the user that a column is sortable

---
 src/Handler/Utils/Table/Pagination.hs |  1 +
 templates/table/colonnade.lucius      | 15 +++++++++++----
 templates/table/layout.julius         | 12 ++++++++++++
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/Handler/Utils/Table/Pagination.hs b/src/Handler/Utils/Table/Pagination.hs
index 776fd3498..9dc99a2ef 100644
--- a/src/Handler/Utils/Table/Pagination.hs
+++ b/src/Handler/Utils/Table/Pagination.hs
@@ -163,6 +163,7 @@ dbTable PSValidator{..} DBTable{ dbtIdent = (toPathPiece -> dbtIdent), .. } = do
             sortableAttr = foldMap toAttr directions
             toAttr SortAsc = Html5.class_ "sorted-asc"
             toAttr SortDesc = Html5.class_ "sorted-desc"
+            -- TODO: add class "sortable" if column is sortable
     $(widgetFile "table/layout")
   where
     tblLayout :: Widget -> Handler Html
diff --git a/templates/table/colonnade.lucius b/templates/table/colonnade.lucius
index 4fcdad6e2..eddc61f79 100644
--- a/templates/table/colonnade.lucius
+++ b/templates/table/colonnade.lucius
@@ -9,12 +9,11 @@ table th.sorted-desc {
   color: var(--lightbase);
 }
 
-table th.sorted-asc::after,
-table th.sorted-desc::after {
+table th.sortable::after,
+table th.sortable::before {
   content: '';
   position: absolute;
   right: 0;
-  top: 15px;
   width: 0;
   height: 0;
   transform: translateY(-100%);
@@ -22,7 +21,15 @@ table th.sorted-desc::after {
   border-right: 8px solid transparent;
 }
 
-table th.sorted-asc::after {
+table th.sortable::before {
+  top: 21px;
+  border-top: 8px solid rgba(0, 0, 0, 0.1);
+}
+table th.sortable::after {
+  top: 9px;
+  border-bottom: 8px solid rgba(0, 0, 0, 0.1);
+}
+table th.sorted-asc::before {
   border-top: 8px solid var(--lightbase);
 }
 
diff --git a/templates/table/layout.julius b/templates/table/layout.julius
index 45ca89830..f63f64d8b 100644
--- a/templates/table/layout.julius
+++ b/templates/table/layout.julius
@@ -24,6 +24,7 @@
       function clickHandler(event) {
         event.preventDefault();
         var link = this.querySelector('a');
+        // abort if there is no link set for this column
         if (!link) {
           return false;
         }
@@ -70,6 +71,17 @@
         });
       }
 
+
+      // TODO: Remove after class "sortable" gets set by backend
+      (function () {
+        ths.forEach(function(th) {
+          var link = th.querySelector('a');
+          // abort if there is no link set for this column
+          if (!link) return false;
+          th.classList.add('sortable');
+        })
+      })();
+
     }
 
     // TODO: how to get 'terms' only?