Fix unsorting table headers style #1414

metasfresh · Dec 7, 2017 · ce3cbb8 · ce3cbb8
1 parent 1b96c46
commit ce3cbb8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
@@ -751,13 +751,15 @@ body {
 }
 
 .sort-menu {
-    cursor: pointer;
     width: 100%;
     line-height: 22px;
     vertical-align: middle;
     position: relative;
 }
 
+.sort-menu--sortable {
+    cursor: pointer;
+}
 .sort-menu .sort-ico {
     position: absolute;
     right: -12px;

diff --git a/src/components/table/TableHeader.js b/src/components/table/TableHeader.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import cx from 'classnames';
 
 class TableHeader extends Component {
     constructor(props) {
@@ -25,13 +26,15 @@ class TableHeader extends Component {
                 sorting.asc = item.ascending;
             }
         })
-
         return (
             <div
-                className="sort-menu"
+                className={cx('sort-menu', {['sort-menu--sortable']: sortable})}
                 onClick={() => this.handleClick(field, sorting, sortable)}
             >
-                <span title={caption} className="th-caption">{caption}</span>
+                <span
+                    title={caption}
+                    className={cx({ ['th-caption']: sortable })}
+                >{caption}</span>
                 <span
                     className={sorting.name && sorting.asc ?
                         'sort rotate-90 sort-ico' :