Directiva vn-icon

This commit is contained in:
Juan Ferrer Toribio 2017-01-03 09:45:45 +01:00
parent 98dada7c8c
commit 876152556f
13 changed files with 96 additions and 18 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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