Directiva vn-icon

@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>
+    <vn-icon icon="exit_to_app" title="Logout" ng-click="mainMenu.onLogoutClick()"></vn-icon>
-    <i class="material-icons" id="apps" style="cursor: pointer;">apps</i>
+    <vn-icon icon="apps" id="apps" title="Applications"></vn-icon>
-    <i class="material-icons" title="Notifications">notifications</i>
+    <vn-icon icon="notifications" title="Notifications"></vn-icon>
-    <i class="material-icons" title="Profile" style="font-size: 35px;">account_circle</i>
+    <vn-icon icon="account_circle" title="Profile" style="font-size: 35px;"></vn-icon>
-    <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right user-menu" pad-medium for="apps" >
+    <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>

@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';

@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;
 }

@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';

@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.select();
-            element.setSelectionRange(0, len);
-            //element.select();
         }
     };
 }

@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);

@salix/core/src/icon/icon.mdl.html

@@ -0,0 +1 @@
+<i class="material-icons" style="font-size: inherit;">*[icon]*</i>

@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);

@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);

@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>

@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);

@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)

@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"/>
+    <vn-subtitle>Información de facturación</vn-subtitle>
-    <h5 vn-one style="margin-top: 0;">Información de facturación</h5>
      <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"/>
+    <vn-subtitle>Documentación</vn-subtitle>
-    <h5 style="margin-top: 0;">Documentación</h5>
     <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>