From 876152556f691a82dfacedc3e80fc20190a66c88 Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan.ferrer.toribio@gmail.com>
Date: Tue, 3 Jan 2017 09:45:45 +0100
Subject: [PATCH] Directiva vn-icon

---
 .../src/components/main-menu/main-menu.html   | 15 ++++++++----
 .../app/src/components/main-menu/main-menu.js |  3 +--
 @salix/app/src/components/main-menu/style.css |  5 ++--
 @salix/core/src/core.js                       |  6 +++++
 @salix/core/src/focus.js                      |  6 ++---
 @salix/core/src/icon/icon.js                  | 17 ++++++++++++++
 @salix/core/src/icon/icon.mdl.html            |  1 +
 @salix/core/src/icon/icon.mdl.js              | 12 ++++++++++
 @salix/core/src/popover/popover.js            | 23 +++++++++++++++++++
 @salix/core/src/popover/popover.mdl.html      |  7 ++++++
 @salix/core/src/popover/popover.mdl.js        | 12 ++++++++++
 @salix/core/src/util.js                       |  1 -
 @salix/crud/src/client/fiscal-data/index.html |  6 ++---
 13 files changed, 96 insertions(+), 18 deletions(-)
 create mode 100644 @salix/core/src/icon/icon.js
 create mode 100644 @salix/core/src/icon/icon.mdl.html
 create mode 100644 @salix/core/src/icon/icon.mdl.js
 create mode 100644 @salix/core/src/popover/popover.js
 create mode 100644 @salix/core/src/popover/popover.mdl.html
 create mode 100644 @salix/core/src/popover/popover.mdl.js

diff --git a/@salix/app/src/components/main-menu/main-menu.html b/@salix/app/src/components/main-menu/main-menu.html
index cc39d6c75..981e64bc1 100644
--- a/@salix/app/src/components/main-menu/main-menu.html
+++ b/@salix/app/src/components/main-menu/main-menu.html
@@ -1,9 +1,14 @@
 <div style="position: fixed; top: 0; right: 0; padding: .8em 1.5em; color: white; z-index: 10;">
-    <i class="material-icons" title="Logout" ng-click="mainMenu.onLogoutClick()">exit_to_app</i>
-    <i class="material-icons" id="apps" style="cursor: pointer;">apps</i>
-    <i class="material-icons" title="Notifications">notifications</i>
-    <i class="material-icons" title="Profile" style="font-size: 35px;">account_circle</i>
-    <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right user-menu" pad-medium for="apps" >
+    <vn-icon icon="exit_to_app" title="Logout" ng-click="mainMenu.onLogoutClick()"></vn-icon>
+    <vn-icon icon="apps" id="apps" title="Applications"></vn-icon>
+    <vn-icon icon="notifications" title="Notifications"></vn-icon>
+    <vn-icon icon="account_circle" title="Profile" style="font-size: 35px;"></vn-icon>
+    <vn-popover pad-medium for="apps">
+        <a ui-sref="clients"><vn-icon icon=""></vn-icon></a>
+    </vn-popover>
+<!--
+    <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right user-menu" pad-medium for="apps">
          <a ui-sref="clients"><i class="material-icons" id="clients">person</i></a>
     </ul>
+-->
 </div>
\ No newline at end of file
diff --git a/@salix/app/src/components/main-menu/main-menu.js b/@salix/app/src/components/main-menu/main-menu.js
index aa20ba198..e9c1e4626 100644
--- a/@salix/app/src/components/main-menu/main-menu.js
+++ b/@salix/app/src/components/main-menu/main-menu.js
@@ -6,8 +6,7 @@ export const NAME = 'vnMainMenu';
 export const COMPONENT = {
     template: template,
     controllerAs: "mainMenu",
-    controller: function ()
-    {
+    controller: function() {
         this.onLogoutClick = function ()
         {
             let appName = 'salix';
diff --git a/@salix/app/src/components/main-menu/style.css b/@salix/app/src/components/main-menu/style.css
index 73fc9ec51..16424cb10 100644
--- a/@salix/app/src/components/main-menu/style.css
+++ b/@salix/app/src/components/main-menu/style.css
@@ -1,9 +1,10 @@
-vn-main-menu i {
+vn-main-menu vn-icon {
     padding: .1em;
     border-radius: .1em;
     vertical-align: middle;
+    font-size: 24px;
 }
-vn-main-menu i:hover {
+vn-main-menu vn-icon:hover {
     cursor: pointer;
     opacity: .85;
 }
\ No newline at end of file
diff --git a/@salix/core/src/core.js b/@salix/core/src/core.js
index 52c973f65..ee4349ac3 100644
--- a/@salix/core/src/core.js
+++ b/@salix/core/src/core.js
@@ -43,3 +43,9 @@ export {NAME as DATE_PICKER_MDL, factory as datePickerMdl} from './date-picker/d
 
 export {NAME as TITLE, COMPONENT as TITLE_COMPONENT} from './title/title'
 export {NAME as SUBTITLE, COMPONENT as SUBTITLE_COMPONENT} from './subtitle/subtitle'
+
+export {directive as Popover} from './popover/popover';
+export {factory as PopoverMdl} from './popover/popover.mdl';
+
+export {directive as Icon} from './icon/icon';
+export {factory as IconMdl} from './icon/icon.mdl';
diff --git a/@salix/core/src/focus.js b/@salix/core/src/focus.js
index 196c904f3..72c4cb664 100644
--- a/@salix/core/src/focus.js
+++ b/@salix/core/src/focus.js
@@ -4,12 +4,10 @@ export const NAME = 'vnFocus';
 export function directive() {
     return {
         restrict: 'A',
-        link: function (scope, elements, attrs){
+        link: function(scope, elements, attrs){
             let element = elements[0];
             element.focus();
-            let len = element.value ? element.value.length : 0;
-            element.setSelectionRange(0, len);
-            //element.select();
+            element.select();
         }
     };
 }
diff --git a/@salix/core/src/icon/icon.js b/@salix/core/src/icon/icon.js
new file mode 100644
index 000000000..185b79a5f
--- /dev/null
+++ b/@salix/core/src/icon/icon.js
@@ -0,0 +1,17 @@
+import {module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+
+const _NAME = 'icon';
+export const NAME = 'vnIcon';
+
+export function directive(resolver) {
+    return {
+        restrict: 'E',
+        template: function(_, attrs) {
+            return resolver.getTemplate(_NAME, attrs);
+        }
+    }
+}
+directive.$inject = [resolveFactory.NAME];
+
+module.directive(NAME, directive);
diff --git a/@salix/core/src/icon/icon.mdl.html b/@salix/core/src/icon/icon.mdl.html
new file mode 100644
index 000000000..42a9d6328
--- /dev/null
+++ b/@salix/core/src/icon/icon.mdl.html
@@ -0,0 +1 @@
+<i class="material-icons" style="font-size: inherit;">*[icon]*</i>
diff --git a/@salix/core/src/icon/icon.mdl.js b/@salix/core/src/icon/icon.mdl.js
new file mode 100644
index 000000000..f5eba7800
--- /dev/null
+++ b/@salix/core/src/icon/icon.mdl.js
@@ -0,0 +1,12 @@
+import {module} from '../module';
+import template from './icon.mdl.html';
+
+export const NAME = 'vnIconMdlFactory';
+export function factory() {
+    return {
+        template: template,
+        default: {}
+    }
+}
+
+module.factory(NAME, factory);
diff --git a/@salix/core/src/popover/popover.js b/@salix/core/src/popover/popover.js
new file mode 100644
index 000000000..21d212315
--- /dev/null
+++ b/@salix/core/src/popover/popover.js
@@ -0,0 +1,23 @@
+import {module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+
+const _NAME = 'popover';
+export const NAME = 'vnPopover';
+
+export function directive(resolver) {
+    return {
+        restrict: 'E',
+        transclude: true,
+        template: function(_, attrs) {
+            return resolver.getTemplate(_NAME, attrs);
+        },
+        controller: function () {
+            this.onClick = function (event) {
+                event.stopPropagation();
+            }
+        }
+    }
+}
+directive.$inject = [resolveFactory.NAME];
+
+module.directive(NAME, directive);
diff --git a/@salix/core/src/popover/popover.mdl.html b/@salix/core/src/popover/popover.mdl.html
new file mode 100644
index 000000000..01cd51cc0
--- /dev/null
+++ b/@salix/core/src/popover/popover.mdl.html
@@ -0,0 +1,7 @@
+<div
+    class="mdl-menu mdl-js-menu mdl-menu--bottom-right user-menu"
+    ng-click="$ctrl.onClick($event)"
+    pad-medium
+    ng-transclude
+    *[foo]*>
+</div>
\ No newline at end of file
diff --git a/@salix/core/src/popover/popover.mdl.js b/@salix/core/src/popover/popover.mdl.js
new file mode 100644
index 000000000..4ad5b71cf
--- /dev/null
+++ b/@salix/core/src/popover/popover.mdl.js
@@ -0,0 +1,12 @@
+import {module} from '../module';
+import template from './popover.mdl.html';
+
+export const NAME = 'vnPopoverMdlFactory';
+export function factory() {
+    return {
+        template: template,
+        default: {}
+    }
+}
+
+module.factory(NAME, factory);
diff --git a/@salix/core/src/util.js b/@salix/core/src/util.js
index 5206d3768..0c00b60de 100644
--- a/@salix/core/src/util.js
+++ b/@salix/core/src/util.js
@@ -2,7 +2,6 @@ import * as constant from './constants';
 
 const FACTORY = 'Factory';
 const SERVICE = 'Service';
-const DEFAULT = 'default';
 
 export function getName(name) {
     return constant.PREFIX + toUpperCamelCase(name)
diff --git a/@salix/crud/src/client/fiscal-data/index.html b/@salix/crud/src/client/fiscal-data/index.html
index bd5f1fc6d..f0ebbe96e 100644
--- a/@salix/crud/src/client/fiscal-data/index.html
+++ b/@salix/crud/src/client/fiscal-data/index.html
@@ -23,8 +23,7 @@
         <vn-textfield vn-one label="Teléfono Movil" field="mobile" entity="fiscal"></vn-textfield>
         <vn-textfield vn-one label="Correo electrónico" field="email" entity="fiscal"></vn-textfield>
     </vn-horizontal>
-    <hr class="border-dashed-top"/>
-    <h5 vn-one style="margin-top: 0;">Información de facturación</h5>
+    <vn-subtitle>Información de facturación</vn-subtitle>
      <vn-horizontal>
         <vn-combo vn-two label="Forma de pago" field="payMethod" entity="fiscal"></vn-combo>
         <vn-textfield vn-one label="Vencimiento" field="expiration" entity="fiscal"></vn-textfield>
@@ -36,8 +35,7 @@
         <vn-textfield vn-one label="IAE" field="iae" entity="fiscal"></vn-textfield>
         <vn-textfield vn-three label="IBAN" field="iban" entity="fiscal"></vn-textfield>
     </vn-horizontal>
-    <hr class="border-dashed-top"/>
-    <h5 style="margin-top: 0;">Documentación</h5>
+    <vn-subtitle>Documentación</vn-subtitle>
     <vn-horizontal>
         <vn-check vn-two label="Recibido core VNH" field="coreVnh" entity="fiscal"></vn-check>
         <vn-check vn-two label="Recibido core VNL" field="coreVnl" entity="fiscal"></vn-check>