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

View File

@ -1,29 +1,12 @@
import {module as _module} from '../module';
// import * as resolveFactory from '../lib/resolveDefaultComponents';
import * as util from '../lib/util';
const _NAME = 'iconButton';
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, {
_module.component('vnIconButton', {
template: require('./icon-button.html'),
bindings: {
icon: '@',
className: '<?',
enabled: '<?',
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 './style.scss';
export default class IconMenu {
constructor($element, $http, $timeout) {
@ -6,7 +7,6 @@ export default class IconMenu {
this.$http = $http;
this.$timeout = $timeout;
this._showDropDown = false;
this._pos = undefined;
}
get showDropDown() {
return this._showDropDown;
@ -15,13 +15,6 @@ export default class IconMenu {
this._showDropDown = value;
}
get pos() {
return this._pos;
}
set pos(value) {
this._pos = value;
}
getItems() {
this.$http.get(this.url).then(
json => {
@ -37,8 +30,6 @@ export default class IconMenu {
this.$element.bind('mouseover', e => {
this.$timeout(() => {
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 './icon.mdl';
import './style.css';
// import * as resolveFactory from '../lib/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);*/
module.component(NAME, {
module.component('vnIcon', {
template: '<i class="material-icons">{{i.icon}}</i>',
bindings: {
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,4 +1,4 @@
<div pad-large>
<form ng-submit="$ctrl.onSearch()">
<vn-horizontal>
<vn-textfield vn-one label="ID Ruta" model="$ctrl.filter.ruteId"></vn-textfield>
@ -19,13 +19,5 @@
<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-horizontal>
<vn-horizontal margin-medium-top>
<vn-one>
<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,17 +1,43 @@
<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-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-one vn-horizontal>
</vn-one>
<vn-two vn-horizontal ng-init="moreFilters = false">
<vn-vertical vn-one>
<vn-horizontal vn-one>
<vn-autocomplete vn-one margin-medium-right
field="$ctrl.filter.stateFk"
data = "$ctrl.states"
label="Estado">
</vn-autocomplete>
<vn-autocomplete vn-one margin-medium-right
field="$ctrl.filter.alarmFk"
data = "$ctrl.states"
label="Alarma">
</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-one
<vn-autocomplete vn-two
initial-value="$ctrl.warehouse"
field="$ctrl.warehouseFk"
url="/client/api/ContactChannels"
url="/production/api/Warehouses/list"
label="Almacen">
</vn-autocomplete>
<vn-icon-button vn-none pad-ten-top icon="refresh"></vn-icon-button>
@ -22,8 +48,7 @@
<vn-horizontal>
<vn-button vn-none margin-medium-right label="Impreso"></vn-button>
<vn-none margin-medium-right>
<mg-ajax path="/production/api/States/productionStates" options="vnIndex as states"></mg-ajax>
<vn-icon-menu icon="assignment" items="states.model.states" selected="$ctrl.actions.state"></vn-icon-menu>
<vn-icon-menu icon="assignment" items="$ctrl.states" selected="$ctrl.actions.state"></vn-icon-menu>
</vn-none>
<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>

View File

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

View File

@ -17,4 +17,18 @@ vn-production-index {
.icon-square{
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;
}
}
}