iconMenu arreglo de posicion del DropDown interno

This commit is contained in:
Dani Herrero 2017-06-15 11:22:47 +02:00
parent f346e5e83c
commit 5f2aa345ba
15 changed files with 95 additions and 131 deletions

View File

@ -10,7 +10,7 @@ export default class Autocomplete extends Component {
super($element); super($element);
this.input = $element[0].querySelector('input'); this.input = $element[0].querySelector('input');
this.item = null; this.item = null;
this.data = null; // this.data = null;
this.popover = null; this.popover = null;
this.displayData = null; this.displayData = null;
this.timeoutId = null; this.timeoutId = null;
@ -83,8 +83,10 @@ export default class Autocomplete extends Component {
if (requestWillSame) if (requestWillSame)
this.localFilter(textFilter); this.localFilter(textFilter);
else else if (this.url)
this.requestData(textFilter, false); this.requestData(textFilter, false);
else
this.setDisplayData(this.data);
} }
getRequestFields() { getRequestFields() {
let fields = {}; let fields = {};
@ -402,11 +404,12 @@ Autocomplete.$inject = ['$element', '$scope', '$http', 'vnPopover', '$transclude
module.component('vnAutocomplete', { module.component('vnAutocomplete', {
template: require('./autocomplete.html'), template: require('./autocomplete.html'),
bindings: { bindings: {
url: '@', url: '@?',
showField: '@?', showField: '@?',
valueField: '@?', valueField: '@?',
selectFields: '@?', selectFields: '@?',
initialData: '<?', initialData: '<?',
data: '<?',
itemAs: '@?', itemAs: '@?',
field: '=', field: '=',
label: '@' label: '@'

View File

@ -29,7 +29,7 @@ export {NAME as TEXTAREA_MDL, factory as textareaMdl} from './textarea/textarea.
export {NAME as LABEL, directive as LabelDirective} from './label/label'; export {NAME as LABEL, directive as LabelDirective} from './label/label';
export {NAME as LABEL_MDL, factory as labelMdl} from './label/label.mdl'; export {NAME as LABEL_MDL, factory as labelMdl} from './label/label.mdl';
export {NAME as ICON_BUTTON, directive as IconButtonDirective} from './icon-button/icon-button'; export {NAME as ICON_BUTTON, directive as IconButtonDirective} from './icon-button/icon-button';
export {NAME as ICON_BUTTON_MDL, factory as iconButtonMdl} from './icon-button/icon-button.mdl';
export {NAME as SUBMIT, directive as SubmitDirective} from './submit/submit'; export {NAME as SUBMIT, directive as SubmitDirective} from './submit/submit';
export {NAME as SUBMIT_MDL, factory as submitMdl} from './submit/submit.mdl'; export {NAME as SUBMIT_MDL, factory as submitMdl} from './submit/submit.mdl';
export {NAME as COMBO, directive as ComboDirective} from './combo/combo'; export {NAME as COMBO, directive as ComboDirective} from './combo/combo';

View File

@ -1,3 +1,3 @@
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square {{ib.className}}" {{ib.enabled}}> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square {{$ctrl.className}}" {{$ctrl.enabled}}>
<vn-icon icon="{{ib.icon}}"></vn-icon>{{ib.label}} <vn-icon icon="{{$ctrl.icon}}"></vn-icon>{{$ctrl.label}}
</button> </button>

View File

@ -1,29 +1,12 @@
import {module as _module} from '../module'; import {module as _module} from '../module';
// import * as resolveFactory from '../lib/resolveDefaultComponents';
import * as util from '../lib/util';
const _NAME = 'iconButton'; _module.component('vnIconButton', {
export const NAME = util.getName(_NAME);
/*
directive.$inject = [resolveFactory.NAME];
export function directive(resolve) {
return {
restrict: 'E',
template: function(_, attr) {
return resolve.getTemplate(_NAME, attr);
}
};
}
_module.directive(NAME, directive); */
_module.component(NAME, {
template: require('./icon-button.html'), template: require('./icon-button.html'),
bindings: { bindings: {
icon: '@', icon: '@',
className: '<?', className: '<?',
enabled: '<?', enabled: '<?',
label: '@?' label: '@?'
}, }
controllerAs: 'ib'
}); });

View File

@ -1,3 +0,0 @@
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square *[className]*" *[enabled]*>
<vn-icon icon="*[icon]*"></vn-icon>*[label]*
</button>

View File

@ -1,15 +0,0 @@
import {module} from '../module';
import template from './icon-button.mdl.html';
export const NAME = 'vnIconButtonMdlFactory';
export function factory() {
return {
template: template,
default: {
enabled: 'enabled',
icon: '',
label: ''
}
};
}
module.factory(NAME, factory);

View File

@ -1,4 +1,5 @@
import {module} from '../module'; import {module} from '../module';
import './style.scss';
export default class IconMenu { export default class IconMenu {
constructor($element, $http, $timeout) { constructor($element, $http, $timeout) {
@ -6,7 +7,6 @@ export default class IconMenu {
this.$http = $http; this.$http = $http;
this.$timeout = $timeout; this.$timeout = $timeout;
this._showDropDown = false; this._showDropDown = false;
this._pos = undefined;
} }
get showDropDown() { get showDropDown() {
return this._showDropDown; return this._showDropDown;
@ -15,13 +15,6 @@ export default class IconMenu {
this._showDropDown = value; this._showDropDown = value;
} }
get pos() {
return this._pos;
}
set pos(value) {
this._pos = value;
}
getItems() { getItems() {
this.$http.get(this.url).then( this.$http.get(this.url).then(
json => { json => {
@ -37,8 +30,6 @@ export default class IconMenu {
this.$element.bind('mouseover', e => { this.$element.bind('mouseover', e => {
this.$timeout(() => { this.$timeout(() => {
this.showDropDown = true; this.showDropDown = true;
if (e.target.nodeName === 'BUTTON')
this.pos = e.target.getBoundingClientRect();
}); });
}); });

View File

@ -0,0 +1,3 @@
vn-icon-menu{
position: relative;
}

View File

@ -1,24 +1,7 @@
import {module} from '../module'; import {module} from '../module';
import './icon.mdl';
import './style.css'; import './style.css';
// import * as resolveFactory from '../lib/resolveDefaultComponents';
// const _NAME = 'icon'; module.component('vnIcon', {
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);*/
module.component(NAME, {
template: '<i class="material-icons">{{i.icon}}</i>', template: '<i class="material-icons">{{i.icon}}</i>',
bindings: { bindings: {
icon: '@' icon: '@'

View File

@ -1 +0,0 @@
<i class="material-icons">*[icon]*</i>

View File

@ -1,12 +0,0 @@
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

@ -1,31 +1,23 @@
<div pad-large>
<form ng-submit="$ctrl.onSearch()"> <form ng-submit="$ctrl.onSearch()">
<vn-horizontal> <vn-horizontal>
<vn-textfield vn-one label="ID Ruta" model="$ctrl.filter.ruteId"></vn-textfield> <vn-textfield vn-one label="ID Ruta" model="$ctrl.filter.ruteId"></vn-textfield>
<vn-date-picker vn-one label="Fecha" model="$ctrl.filter.date"></vn-date-picker> <vn-date-picker vn-one label="Fecha" model="$ctrl.filter.date"></vn-date-picker>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-autocomplete vn-one <vn-autocomplete vn-one
initial-value="$ctrl.filter.province" initial-value="$ctrl.filter.province"
field="$ctrl.filter.provinceFk" field="$ctrl.filter.provinceFk"
url="/client/api/Provinces" url="/client/api/Provinces"
show-field="name" show-field="name"
value-field="id" value-field="id"
label="Provincia"> label="Provincia">
</vn-autocomplete> </vn-autocomplete>
<vn-date-picker vn-one label="Hora" ini-opts="{enableTime:true,noCalendar:true,dateFormat:'H:i',time_24hr:true,static:true,minuteIncrement:30}" model="$ctrl.filter.hour"></n-date-picker> <vn-date-picker vn-one label="Hora" ini-opts="{enableTime:true,noCalendar:true,dateFormat:'H:i',time_24hr:true,static:true,minuteIncrement:30}" model="$ctrl.filter.hour"></n-date-picker>
</vn-horizontal> </vn-horizontal>
<vn-horizontal> <vn-horizontal>
<vn-check vn-one pad-medium-top label="Ticket con incidencia" field="$ctrl.filter.withIncidence"></vn-check> <vn-check vn-one pad-medium-top label="Ticket con incidencia" field="$ctrl.filter.withIncidence"></vn-check>
<vn-textfield vn-one label="Agencia" model="$ctrl.filter.agency"></vn-textfield> <vn-textfield vn-one label="Agencia" model="$ctrl.filter.agency"></vn-textfield>
</vn-horizontal> </vn-horizontal>
<vn-horizontal margin-medium-top>
<vn-one> </form>
<vn-submit label="Filtrar"></vn-submit>
</vn-one>
<vn-one>
<vn-button vn-right label="Cancelar"></vn-button>
</vn-one>
</vn-horizontal>
</form>
</div>

View File

@ -1,29 +1,54 @@
<mg-ajax path="/production/api/Tickets/list" options="vnIndex" actions="$ctrl.tickets = index.model.tickets;$ctrl.sumTickets()"></mg-ajax> <mg-ajax path="/production/api/Tickets/list" options="vnIndex" actions="$ctrl.tickets = index.model.tickets;$ctrl.sumTickets()"></mg-ajax>
<mg-ajax path="/production/api/States/productionStates" options="vnIndex as states" actions="$ctrl.states = states.model.states;"></mg-ajax>
<vn-card margin-large> <vn-card margin-large>
<vn-vertical pad-medium> <vn-vertical pad-medium>
<vn-horizontal vn-one> <vn-horizontal vn-one margin-large-bottom class="locator-header">
<vn-title vn-one><span translate>Localizador</span></vn-title> <vn-title vn-one><span translate>Localizador</span></vn-title>
<vn-one vn-horizontal> <vn-two vn-horizontal ng-init="moreFilters = false">
<vn-vertical vn-one>
</vn-one> <vn-horizontal vn-one>
<vn-one vn-horizontal> <vn-autocomplete vn-one margin-medium-right
<vn-one></vn-one> field="$ctrl.filter.stateFk"
<vn-autocomplete vn-one data = "$ctrl.states"
initial-value="$ctrl.warehouse" label="Estado">
field="$ctrl.warehouseFk" </vn-autocomplete>
url="/client/api/ContactChannels" <vn-autocomplete vn-one margin-medium-right
label="Almacen"> field="$ctrl.filter.alarmFk"
</vn-autocomplete> data = "$ctrl.states"
<vn-icon-button vn-none pad-ten-top icon="refresh"></vn-icon-button> label="Alarma">
</vn-one> </vn-autocomplete>
<vn-autocomplete vn-one margin-medium-right
field="$ctrl.filter.agencyFk"
data = "$ctrl.states"
label="Agencias">
</vn-autocomplete>
<vn-icon vn-none margin-medium-right pad-medium-top icon="{{!moreFilters ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}" ng-click="moreFilters = !moreFilters"></vn-icon>
<vn-button vn-none pad-small-top label="Filtrar"></vn-button>
</vn-none>
</vn-horizontal>
<vn-horizontal vn-one ng-show="moreFilters" class="moreFilters">
<vn-production-filter-panel vn-one></vn-production-filter-panel>
</vn-horizontal>
</vn-vertical>
</vn-two>
<vn-one vn-horizontal>
<vn-one></vn-one>
<vn-autocomplete vn-two
initial-value="$ctrl.warehouse"
field="$ctrl.warehouseFk"
url="/production/api/Warehouses/list"
label="Almacen">
</vn-autocomplete>
<vn-icon-button vn-none pad-ten-top icon="refresh"></vn-icon-button>
</vn-one>
</vn-horizontal> </vn-horizontal>
<vn-horizontal vn-one margin-large-bottom> <vn-horizontal vn-one margin-large-bottom>
<vn-one> <vn-one>
<vn-horizontal> <vn-horizontal>
<vn-button vn-none margin-medium-right label="Impreso"></vn-button> <vn-button vn-none margin-medium-right label="Impreso"></vn-button>
<vn-none margin-medium-right> <vn-none margin-medium-right>
<mg-ajax path="/production/api/States/productionStates" options="vnIndex as states"></mg-ajax> <vn-icon-menu icon="assignment" items="$ctrl.states" selected="$ctrl.actions.state"></vn-icon-menu>
<vn-icon-menu icon="assignment" items="states.model.states" selected="$ctrl.actions.state"></vn-icon-menu>
</vn-none> </vn-none>
<vn-none margin-medium-right> <vn-none margin-medium-right>
<vn-icon-menu icon="textsms" items="[{id:1,name:'prueba 01'},{id:2,name:'prueba 02'},{id:3,name:'prueba 03'}]" selected="$ctrl.actions.textsm"></vn-icon-menu> <vn-icon-menu icon="textsms" items="[{id:1,name:'prueba 01'},{id:2,name:'prueba 02'},{id:3,name:'prueba 03'}]" selected="$ctrl.actions.textsm"></vn-icon-menu>

View File

@ -8,6 +8,7 @@ export default class ProductionIndex {
this.filter = {}; this.filter = {};
this._checkAll = false; this._checkAll = false;
this.tickets = []; this.tickets = [];
this.states = [];
this.lines = 0; this.lines = 0;
this.meters = 0; this.meters = 0;
this.actions = { this.actions = {

View File

@ -17,4 +17,18 @@ vn-production-index {
.icon-square{ .icon-square{
height: 36px; height: 36px;
} }
.locator-header{
i{
cursor: pointer;
}
.moreFilters{
position: absolute;
z-index: 99;
background-color: white;
padding: 15px;
border: 1px solid #9D9D9D;
margin-top: 60px;
width: 600px;
}
}
} }