cabecera para listas, flechas para las columnas ordenables

client/core/src/column-header/column-header.html

@@ -1,11 +1,22 @@
 <div class="{{$ctrl.className}}" ng-mouseover="$ctrl.mouseIsOver = true" ng-mouseleave="$ctrl.mouseIsOver = false">
-    <vn-horizontal ng-if="$ctrl.text" class="orderly" ng-class="{'pointer' : !$ctrl.orderLocked}" ng-click="$ctrl.onClick()">
-        <vn-none class="title" translate>
-            {{::$ctrl.text}}
+    <vn-horizontal ng-if="$ctrl.text" class="orderly">
+        <vn-none 
+            class="title" 
+            ng-class="{'noDrop': $ctrl.orderLocked, 'pointer' : !$ctrl.orderLocked}" 
+            ng-click="$ctrl.onClick($event)" translate>
+                {{::$ctrl.text}}
         </vn-none>
-        <vn-none>
-            <vn-icon icon="arrow_drop_down" ng-if="$ctrl.showArrow('DESC')"></vn-icon>  
-            <vn-icon icon="arrow_drop_up" ng-if="$ctrl.showArrow('ASC')"></vn-icon>
+        <vn-none ng-if="!$ctrl.orderLocked">
+            <vn-icon 
+                icon="arrow_drop_down" 
+                ng-class="{'active': $ctrl.showArrow('DESC')}"
+                ng-click="$ctrl.onClick($event, 'DESC')"
+            ></vn-icon>  
+            <vn-icon 
+                icon="arrow_drop_up" 
+                ng-class="{'active': $ctrl.showArrow('ASC')}"
+                ng-click="$ctrl.onClick($event, 'ASC')"
+            ></vn-icon>
         </vn-none>
     </vn-horizontal>
     <ng-transclude ng-if="!$ctrl.text"></ng-transclude>

client/core/src/column-header/column-header.js

@@ -6,15 +6,18 @@ export default class ColumnHeader {
         this.mouseIsOver = false;
         this.orderLocked = ($attrs.orderLocked !== undefined);
     }
-    onClick() {
+    onClick(event, order) {
         if (!this.orderLocked) {
-            if (this.order === 'ASC') {
+            if (order) {
+                this.order = order;
+            } else if (this.order === 'ASC') {
                 this.order = 'DESC';
             } else {
                 this.order = 'ASC';
             }
             this.gridHeader.selectColum(this);
         }
+        event.preventDefault();
     }
     showArrow(type) {
         if (this.orderLocked)

client/core/src/grid-header/style.scss

@@ -10,13 +10,18 @@ vn-grid-header {
         }
     }
     vn-icon{
-        line-height: 17px;
-        font-size: 17px;
         margin: 0;
         padding: 0;
-        display: inline;
         i {
-            padding-top: 3px;
+            padding: 0;
+            margin: -2px -17px 0 0;
+            opacity: 0.2;
+            cursor: pointer;
+        }
+        &.active {
+            i {
+                opacity: 1;
+            }
         }
     }
     [min-none]{

client/salix/src/styles/misc.scss

@@ -95,3 +95,7 @@ html [vn-center], .vn-center{
 html [pointer], .pointer{
     cursor: pointer;
 }
+
+html [noDrop], .noDrop{
+    cursor: no-drop;
+}