Tarea #271 Atajo de teclado para botones +

client/client/src/address-edit/address-edit.html

@@ -96,7 +96,8 @@
         </vn-one>
         <vn-one>
             <vn-icon-button
-                pointer 
+                pointer
+                vn-bind="+"
                 vn-tooltip="Add note"
                 tooltip-position = "right"
                 icon="add_circle"

client/client/src/addresses/addresses.html

@@ -39,6 +39,7 @@
     </vn-card>
     <vn-paging index="index" total="index.model.total"></vn-paging>
     <vn-float-button
+        vn-bind="+"
         fixed-bottom-right
         ui-sref="clientCard.addresses.create"
         icon="add"

client/client/src/credit-classification-list/credit-classification-list.html

@@ -46,6 +46,7 @@
         fixed-bottom-right
         ui-sref="clientCard.creditClassification.create"
         icon="add"
+        vn-bind="+"
         label="Add">
     </vn-float-button>
 </vn-vertical>

client/client/src/credit-insurance-list/credit-insurance-list.html

@@ -24,6 +24,6 @@
     </vn-card>
 </vn-vertical>
 <a ui-sref="clientCard.creditInsurance.create({classificationId: {{index.params.classificationId}}})" 
-    fixed-bottom-right vn-tooltip="New classification" tooltip-position="left" ng-if="!$ctrl.isClosed">
+    fixed-bottom-right vn-tooltip="New classification"  vn-bind="+" tooltip-position="left" ng-if="!$ctrl.isClosed">
     <vn-float-button icon="add"></vn-float-button>
 </a>

client/client/src/credit-list/credit-list.html

@@ -24,6 +24,6 @@
     </vn-vertical>
     </vn-card>
 </vn-vertical>
-<a ui-sref="clientCard.credit.create" fixed-bottom-right>
+<a ui-sref="clientCard.credit.create" vn-bind="+" fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
 </a>

client/client/src/greuge-list/greuge-list.html

@@ -32,7 +32,7 @@
     </vn-vertical>
     </vn-card>
 </vn-vertical>
-<a ui-sref="clientCard.greuge.create" fixed-bottom-right>
+<a ui-sref="clientCard.greuge.create" vn-bind="+" fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
 </a>
     

client/client/src/index/index.html

@@ -21,7 +21,7 @@
         <vn-paging index="index" total="index.model.count"></vn-paging>
     </div>
 </div>
-<a ui-sref="create" fixed-bottom-right>
+<a ui-sref="create" vn-bind="+" fixed-bottom-right>
     <vn-float-button icon="person_add"></vn-float-button>
 </a>
 <vn-dialog class="dialog-summary"

client/client/src/notes/notes.html

@@ -20,5 +20,6 @@
 <vn-float-button
     fixed-bottom-right
     ng-click="$ctrl.newObservation()"
+    vn-bind="+"
     icon="add">
 </vn-float-button>

client/client/src/recovery-list/recovery-list.html

@@ -32,6 +32,6 @@
     </vn-vertical>
     </vn-card>
 </vn-vertical>
-<a ui-sref="clientCard.recovery.create" fixed-bottom-right>
+<a ui-sref="clientCard.recovery.create" vn-bind="+" fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
 </a>

client/core/src/components/icon-focusable/icon-focusable.html

@@ -0,0 +1 @@
+<vn-icon icon="{{::$ctrl.icon}}"></vn-icon>

client/core/src/components/icon-focusable/icon-focusable.js

@@ -0,0 +1,29 @@
+import ngModule from '../../module';
+import './style.scss';
+
+export default class IconFocusable {
+    constructor($element) {
+        $element[0].tabIndex = 0;
+        $element.on("keyup", event => this.onKeyDown(event, $element));
+    }
+
+    onKeyDown(event, $element) {
+        if (event.defaultPrevented) return;
+        if (event.keyCode == 32 || event.keyCode == 13) {
+            event.preventDefault();
+            $element.triggerHandler('click');
+        }
+    }
+}
+
+IconFocusable.$inject = ['$element'];
+ngModule.component('vnIconFocusable', {
+    controller: IconFocusable,
+    template: require('./icon-focusable.html'),
+    bindings: {
+        icon: '@',
+        className: '@?',
+        enabled: '<?',
+        label: '@?'
+    }
+});

client/core/src/components/icon-focusable/style.scss

@@ -0,0 +1,10 @@
+vn-icon-focusable {
+    display: inline-block;
+    text-align: center;
+
+    & > i,
+    & > i.material-icons {
+        display: block;
+        font-size: inherit;
+    }
+}

client/core/src/directives/bind.js

@@ -0,0 +1,60 @@
+import ngModule from '../module';
+
+directive.$inject = ['$document'];
+export function directive($document) {
+    let modifiers = ["alt", "ctrl", "meta", "shift"];
+
+    function checkAttributes($attrs) {
+        let shortcut = $attrs.vnBind.split(' ');
+        let keys = {};
+
+        if (shortcut[0] == "") {
+            throw new Error('vnBind: Binding keys not defined');
+        }
+
+        if (shortcut.length == 1) {
+            keys.altKey = true;
+            keys.ctrlKey = true;
+        } else {
+            let mods = shortcut.splice(0, shortcut.length - 1);
+            for (let mod of mods) {
+                if (modifiers.indexOf(mod) == -1)
+                    throw new Error('vnBind: Invalid modifier key in binding');
+
+                keys[`${mod}Key`] = true;
+            }
+        }
+
+        keys.key = shortcut[0];
+        if (keys.key == 'space') keys.key = ' ';
+
+        return keys;
+    }
+
+    return {
+        restrict: 'A',
+        link: function($scope, $element, $attrs) {
+            let shortcut = checkAttributes($attrs);
+
+            function onKeyUp(event) {
+                if (event.defaultPrevented) return;
+                let correctShortcut = true;
+
+                for (const key in shortcut) {
+                    correctShortcut = correctShortcut && shortcut[key] == event[key];
+                }
+                if (correctShortcut) {
+                    event.preventDefault();
+                    $element.triggerHandler('click');
+                }
+            }
+
+            $document.on("keyup", onKeyUp);
+            $element.on('$destroy', function() {
+                $document.off('keyup', onKeyUp);
+            });
+        }
+    };
+}
+ngModule.directive('vnBind', directive);
+

client/core/src/directives/index.js

@@ -7,3 +7,4 @@ import './acl';
 import './on-error-src';
 import './zoom-image';
 import './visible-by';
+import './bind';

client/item/src/barcode/barcode.html

@@ -24,6 +24,7 @@
             <vn-icon-button
                 vn-acl="buyer, replenisher"
                 vn-tooltip="Add barcode"
+                vn-bind="+"
                 tooltip-position="right" icon="add_circle"
                 ng-click="$ctrl.addBarcode()">
             </vn-icon-button>

client/item/src/list/list.html

@@ -21,7 +21,7 @@
         <vn-paging index="index" total="index.model.count"></vn-paging>
     </div>
 </div>
-<a ui-sref="item.create" fixed-bottom-right>
+<a ui-sref="item.create" vn-bind="+" fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
 </a>
 <vn-dialog vn-id="preview" class="dialog-summary">

client/item/src/niche/niche.html

@@ -49,6 +49,7 @@
             <vn-icon-button
                 vn-acl="buyer, replenisher"
                 vn-tooltip="Add niche"
+                vn-bind="+"
                 tooltip-position="right" icon="add_circle"
                 ng-click="$ctrl.addNiche()">
             </vn-icon-button>

client/item/src/tags/tags.html

@@ -60,6 +60,7 @@
         </vn-horizontal>
         <vn-one>
             <vn-icon-button
+                vn-bind="+"
                 vn-tooltip="Add tag"
                 tooltip-position="right"
                 icon="add_circle"

client/route/src/index/index.html

@@ -17,7 +17,7 @@
         </vn-card>
         <vn-paging index="index" total="index.model.count"></vn-paging>
     </div>
-    <a ui-sref="routes.create" fixed-bottom-right>
+    <a ui-sref="routes.create" vn-bind="+" fixed-bottom-right>
         <vn-float-button icon="add"></vn-float-button>
     </a>
 </div>

client/ticket/src/list/ticket-list.html

@@ -65,7 +65,7 @@
         <vn-paging index="index" total="index.model.count"></vn-paging>
     </div>
 </div>
-<a ui-sref="ticket.create" fixed-bottom-right>
+<a ui-sref="ticket.create" vn-bind="+" fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
 </a>
 <vn-dialog class="dialog-summary"

client/ticket/src/note/ticket-observation.html

@@ -51,6 +51,7 @@
             <vn-icon-button
                 pointer vn-tooltip="Add note"
                 tooltip-position="right" icon="add_circle"
+                vn-bind="+"
                 ng-if="observationTypes.model.length  > $ctrl.ticketObservations.length"
                 ng-click="$ctrl.addObservation()">
             </vn-icon-button>

client/ticket/src/package/index/package.html

@@ -56,6 +56,7 @@
                 pointer 
                 vn-tooltip="Add package"
                 tooltip-position = "right"
+                vn-bind="+"
                 icon="add_circle"
                 ng-click="$ctrl.addPackage()">
             </vn-icon-button>

client/ticket/src/tracking/index.html

@@ -24,6 +24,6 @@
     </vn-vertical>
     </vn-card>
 </vn-vertical>
-<a ui-sref="ticket.card.tracking.edit" fixed-bottom-right>
+<a ui-sref="ticket.card.tracking.edit" vn-bind="+" fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
 </a>