From 5546890ee9a5a33f960c7847990b8f164fa3f2c8 Mon Sep 17 00:00:00 2001
From: Gerard <gerard@verdnatura.es>
Date: Thu, 19 Apr 2018 14:46:06 +0200
Subject: [PATCH] =?UTF-8?q?tarea=20#230=20refactorizar=20Icon-Button=20y?=
 =?UTF-8?q?=20a=C3=B1adir=20focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/address-edit/address-edit.html  |  8 ++++----
 .../components/icon-button/icon-button.html    |  6 +-----
 .../src/components/icon-button/icon-button.js  | 18 ++++++++++++++++++
 .../core/src/components/icon-button/style.scss | 17 +++++++++++++++++
 client/item/src/barcode/barcode.html           | 13 +++++++------
 client/item/src/niche/niche.html               | 12 +++++++-----
 client/ticket/src/note/ticket-observation.html |  7 ++++---
 client/ticket/src/package/index/package.html   |  6 +++---
 8 files changed, 61 insertions(+), 26 deletions(-)
 create mode 100644 client/core/src/components/icon-button/style.scss

diff --git a/client/client/src/address-edit/address-edit.html b/client/client/src/address-edit/address-edit.html
index 0497570af..c1b9cb20d 100644
--- a/client/client/src/address-edit/address-edit.html
+++ b/client/client/src/address-edit/address-edit.html
@@ -41,7 +41,7 @@
             <vn-autocomplete vn-one
                 initial-data="$ctrl.address.agencyMode"
                 field="$ctrl.address.agencyModeFk"
-                url="/client/api/AgencyModes"
+                url="/client/api/AgencyModes/deliveryMethod"
                 show-field="name"
                 value-field="id"
                 label="Agency">
@@ -61,6 +61,7 @@
                 <vn-autocomplete
                     ng-if="!observation.id"
                     vn-one
+                    vn-focus
                     initial-data="observation.observationType"
                     field="observation.observationTypeFk"
                     data="observationsTypes.model"
@@ -94,15 +95,14 @@
             </vn-horizontal>
         </vn-one>
         <vn-one>
-            <vn-icon
+            <vn-icon-button
                 pointer 
                 vn-tooltip="Add note"
                 tooltip-position = "right"
-                orange
                 icon="add_circle"
                 ng-if="observationsTypes.model.length > $ctrl.observations.length" 
                 ng-click="$ctrl.addObservation()">
-            </vn-icon>
+            </vn-icon-button>
         </vn-one>
     </vn-card>
     <vn-button-bar>
diff --git a/client/core/src/components/icon-button/icon-button.html b/client/core/src/components/icon-button/icon-button.html
index fdd022710..4bd8ad78a 100644
--- a/client/core/src/components/icon-button/icon-button.html
+++ b/client/core/src/components/icon-button/icon-button.html
@@ -1,5 +1 @@
-<button
-    class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square {{::$ctrl.className}}"
-    {{$ctrl.enabled}}>
-    <vn-icon icon="{{::$ctrl.icon}}"></vn-icon>{{::$ctrl.label}}
-</button>
\ No newline at end of file
+<vn-icon icon="{{::$ctrl.icon}}"></vn-icon>
\ No newline at end of file
diff --git a/client/core/src/components/icon-button/icon-button.js b/client/core/src/components/icon-button/icon-button.js
index c257b9da9..5765fb249 100644
--- a/client/core/src/components/icon-button/icon-button.js
+++ b/client/core/src/components/icon-button/icon-button.js
@@ -1,6 +1,24 @@
 import ngModule from '../../module';
+import './style.scss';
 
+export default class IconButton {
+    constructor($element) {
+        $element[0].tabIndex = 0;
+        $element.on("keyup", event => this.onKeyDown(event, $element));
+    }
+
+    onKeyDown(event, $element) {
+        if (event.defaultPrevented) return;
+        if (event.keyCode == 13) {
+            event.preventDefault();
+            $element.triggerHandler('click');
+        }
+    }
+}
+
+IconButton.$inject = ['$element'];
 ngModule.component('vnIconButton', {
+    controller: IconButton,
     template: require('./icon-button.html'),
     bindings: {
         icon: '@',
diff --git a/client/core/src/components/icon-button/style.scss b/client/core/src/components/icon-button/style.scss
new file mode 100644
index 000000000..7754c871a
--- /dev/null
+++ b/client/core/src/components/icon-button/style.scss
@@ -0,0 +1,17 @@
+vn-icon-button {
+    display: inline-block;
+    text-align: center;
+    color: rgba(#f7931e, 0.7);
+    transition: color 200ms ease-in-out;
+    cursor: pointer;
+
+    & > i,
+    & > i.material-icons {
+        display: block;
+        font-size: inherit;
+        color: inherit;
+    }
+    &:hover {
+        color: #f7931e;
+    }
+}
diff --git a/client/item/src/barcode/barcode.html b/client/item/src/barcode/barcode.html
index 6a77eacd0..f741c96f6 100644
--- a/client/item/src/barcode/barcode.html
+++ b/client/item/src/barcode/barcode.html
@@ -6,26 +6,27 @@
                 vn-three
                 label="Code"
                 model="barcode.code"
-                vn-acl="buyer, replenisher">
+                vn-acl="buyer, replenisher"
+                vn-focus>
             </vn-textfield>
                 <vn-icon
                     pad-medium-top
                     vn-acl="buyer,replenisher"
                     pointer
                     medium-grey
-                    vn-tooltip="Remove note"
+                    vn-tooltip="Remove barcode"
                     tooltip-position="left"
                     icon="remove_circle_outline"
                     ng-click="$ctrl.removeBarcode($index)">
                 </vn-icon>
         </vn-horizontal>
         <vn-one>
-            <vn-icon
+            <vn-icon-button
                 vn-acl="buyer, replenisher"
-                pointer vn-tooltip="Add note"
-                tooltip-position="right" orange icon="add_circle"
+                vn-tooltip="Add barcode"
+                tooltip-position="right" icon="add_circle"
                 ng-click="$ctrl.addBarcode()">
-            </vn-icon>
+            </vn-icon-button>
         </vn-one>
     </vn-card>
     <vn-button-bar>
diff --git a/client/item/src/niche/niche.html b/client/item/src/niche/niche.html
index 0d296a30f..8c4b4b5ee 100644
--- a/client/item/src/niche/niche.html
+++ b/client/item/src/niche/niche.html
@@ -10,6 +10,7 @@
             <vn-autocomplete
                 ng-if="!itemNiche.id"
                 vn-one
+                vn-focus
                 data="$ctrl.warehouses"
                 show-field="name"
                 value-field="id"
@@ -20,6 +21,7 @@
             </vn-autocomplete>
             <vn-textfield
                 ng-if="itemNiche.id"
+                vn-focus
                 vn-one
                 label="Warehouse"
                 model="itemNiche.warehouse.name"
@@ -37,19 +39,19 @@
                 vn-acl="buyer,replenisher"
                 pointer
                 medium-grey
-                vn-tooltip="Remove note"
+                vn-tooltip="Remove niche"
                 tooltip-position="left"
                 icon="remove_circle_outline"
                 ng-click="$ctrl.removeNiche($index)">
             </vn-icon>
         </vn-horizontal>
         <vn-one>
-            <vn-icon
+            <vn-icon-button
                 vn-acl="buyer, replenisher"
-                pointer vn-tooltip="Add note"
-                tooltip-position="right" orange icon="add_circle"
+                vn-tooltip="Add niche"
+                tooltip-position="right" icon="add_circle"
                 ng-click="$ctrl.addNiche()">
-            </vn-icon>
+            </vn-icon-button>
         </vn-one>
     </vn-card>
     <vn-button-bar>
diff --git a/client/ticket/src/note/ticket-observation.html b/client/ticket/src/note/ticket-observation.html
index 7ca256760..5c683ba09 100644
--- a/client/ticket/src/note/ticket-observation.html
+++ b/client/ticket/src/note/ticket-observation.html
@@ -14,6 +14,7 @@
                 <vn-autocomplete
                     ng-if="!ticketObservation.id"
                     vn-one
+                    vn-focus
                     initial-data="ticketObservation.observationType"
                     field="ticketObservation.observationTypeFk"
                     data="observationTypes.model"
@@ -47,12 +48,12 @@
             </vn-horizontal>
         </vn-one>
         <vn-one>
-            <vn-icon
+            <vn-icon-button
                 pointer vn-tooltip="Add note"
-                tooltip-position="right" orange icon="add_circle"
+                tooltip-position="right" icon="add_circle"
                 ng-if="observationTypes.model.length  > $ctrl.ticketObservations.length"
                 ng-click="$ctrl.addObservation()">
-            </vn-icon>
+            </vn-icon-button>
         </vn-one>
     </vn-card>
     <vn-button-bar>
diff --git a/client/ticket/src/package/index/package.html b/client/ticket/src/package/index/package.html
index d1838924e..3f3130f62 100644
--- a/client/ticket/src/package/index/package.html
+++ b/client/ticket/src/package/index/package.html
@@ -16,6 +16,7 @@
             <vn-horizontal ng-repeat="package in index.model track by $index">
                 <vn-autocomplete vn-one
                     margin-large-right
+                    vn-focus
                     url="/ticket/api/Packagings/listPackaging"
                     label="Package"
                     show-field="name"
@@ -51,14 +52,13 @@
             </vn-horizontal>
         </vn-one>
         <vn-one>
-            <vn-icon
+            <vn-icon-button
                 pointer 
                 vn-tooltip="Add package"
                 tooltip-position = "right"
-                orange
                 icon="add_circle"
                 ng-click="$ctrl.addPackage()">
-            </vn-icon>
+            </vn-icon-button>
         </vn-one>
     </vn-card>
     <vn-button-bar>