tarea #230 refactorizar Icon-Button y añadir focus
This commit is contained in:
parent
b4af50cc48
commit
5546890ee9
|
@ -41,7 +41,7 @@
|
||||||
<vn-autocomplete vn-one
|
<vn-autocomplete vn-one
|
||||||
initial-data="$ctrl.address.agencyMode"
|
initial-data="$ctrl.address.agencyMode"
|
||||||
field="$ctrl.address.agencyModeFk"
|
field="$ctrl.address.agencyModeFk"
|
||||||
url="/client/api/AgencyModes"
|
url="/client/api/AgencyModes/deliveryMethod"
|
||||||
show-field="name"
|
show-field="name"
|
||||||
value-field="id"
|
value-field="id"
|
||||||
label="Agency">
|
label="Agency">
|
||||||
|
@ -61,6 +61,7 @@
|
||||||
<vn-autocomplete
|
<vn-autocomplete
|
||||||
ng-if="!observation.id"
|
ng-if="!observation.id"
|
||||||
vn-one
|
vn-one
|
||||||
|
vn-focus
|
||||||
initial-data="observation.observationType"
|
initial-data="observation.observationType"
|
||||||
field="observation.observationTypeFk"
|
field="observation.observationTypeFk"
|
||||||
data="observationsTypes.model"
|
data="observationsTypes.model"
|
||||||
|
@ -94,15 +95,14 @@
|
||||||
</vn-horizontal>
|
</vn-horizontal>
|
||||||
</vn-one>
|
</vn-one>
|
||||||
<vn-one>
|
<vn-one>
|
||||||
<vn-icon
|
<vn-icon-button
|
||||||
pointer
|
pointer
|
||||||
vn-tooltip="Add note"
|
vn-tooltip="Add note"
|
||||||
tooltip-position = "right"
|
tooltip-position = "right"
|
||||||
orange
|
|
||||||
icon="add_circle"
|
icon="add_circle"
|
||||||
ng-if="observationsTypes.model.length > $ctrl.observations.length"
|
ng-if="observationsTypes.model.length > $ctrl.observations.length"
|
||||||
ng-click="$ctrl.addObservation()">
|
ng-click="$ctrl.addObservation()">
|
||||||
</vn-icon>
|
</vn-icon-button>
|
||||||
</vn-one>
|
</vn-one>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-button-bar>
|
<vn-button-bar>
|
||||||
|
|
|
@ -1,5 +1 @@
|
||||||
<button
|
<vn-icon icon="{{::$ctrl.icon}}"></vn-icon>
|
||||||
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>
|
|
|
@ -1,6 +1,24 @@
|
||||||
import ngModule from '../../module';
|
import ngModule from '../../module';
|
||||||
|
import './style.scss';
|
||||||
|
|
||||||
|
export default class IconButton {
|
||||||
|
constructor($element) {
|
||||||
|
$element[0].tabIndex = 0;
|
||||||
|
$element.on("keyup", event => this.onKeyDown(event, $element));
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyDown(event, $element) {
|
||||||
|
if (event.defaultPrevented) return;
|
||||||
|
if (event.keyCode == 13) {
|
||||||
|
event.preventDefault();
|
||||||
|
$element.triggerHandler('click');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
IconButton.$inject = ['$element'];
|
||||||
ngModule.component('vnIconButton', {
|
ngModule.component('vnIconButton', {
|
||||||
|
controller: IconButton,
|
||||||
template: require('./icon-button.html'),
|
template: require('./icon-button.html'),
|
||||||
bindings: {
|
bindings: {
|
||||||
icon: '@',
|
icon: '@',
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
vn-icon-button {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(#f7931e, 0.7);
|
||||||
|
transition: color 200ms ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
& > i,
|
||||||
|
& > i.material-icons {
|
||||||
|
display: block;
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: #f7931e;
|
||||||
|
}
|
||||||
|
}
|
|
@ -6,26 +6,27 @@
|
||||||
vn-three
|
vn-three
|
||||||
label="Code"
|
label="Code"
|
||||||
model="barcode.code"
|
model="barcode.code"
|
||||||
vn-acl="buyer, replenisher">
|
vn-acl="buyer, replenisher"
|
||||||
|
vn-focus>
|
||||||
</vn-textfield>
|
</vn-textfield>
|
||||||
<vn-icon
|
<vn-icon
|
||||||
pad-medium-top
|
pad-medium-top
|
||||||
vn-acl="buyer,replenisher"
|
vn-acl="buyer,replenisher"
|
||||||
pointer
|
pointer
|
||||||
medium-grey
|
medium-grey
|
||||||
vn-tooltip="Remove note"
|
vn-tooltip="Remove barcode"
|
||||||
tooltip-position="left"
|
tooltip-position="left"
|
||||||
icon="remove_circle_outline"
|
icon="remove_circle_outline"
|
||||||
ng-click="$ctrl.removeBarcode($index)">
|
ng-click="$ctrl.removeBarcode($index)">
|
||||||
</vn-icon>
|
</vn-icon>
|
||||||
</vn-horizontal>
|
</vn-horizontal>
|
||||||
<vn-one>
|
<vn-one>
|
||||||
<vn-icon
|
<vn-icon-button
|
||||||
vn-acl="buyer, replenisher"
|
vn-acl="buyer, replenisher"
|
||||||
pointer vn-tooltip="Add note"
|
vn-tooltip="Add barcode"
|
||||||
tooltip-position="right" orange icon="add_circle"
|
tooltip-position="right" icon="add_circle"
|
||||||
ng-click="$ctrl.addBarcode()">
|
ng-click="$ctrl.addBarcode()">
|
||||||
</vn-icon>
|
</vn-icon-button>
|
||||||
</vn-one>
|
</vn-one>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-button-bar>
|
<vn-button-bar>
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
<vn-autocomplete
|
<vn-autocomplete
|
||||||
ng-if="!itemNiche.id"
|
ng-if="!itemNiche.id"
|
||||||
vn-one
|
vn-one
|
||||||
|
vn-focus
|
||||||
data="$ctrl.warehouses"
|
data="$ctrl.warehouses"
|
||||||
show-field="name"
|
show-field="name"
|
||||||
value-field="id"
|
value-field="id"
|
||||||
|
@ -20,6 +21,7 @@
|
||||||
</vn-autocomplete>
|
</vn-autocomplete>
|
||||||
<vn-textfield
|
<vn-textfield
|
||||||
ng-if="itemNiche.id"
|
ng-if="itemNiche.id"
|
||||||
|
vn-focus
|
||||||
vn-one
|
vn-one
|
||||||
label="Warehouse"
|
label="Warehouse"
|
||||||
model="itemNiche.warehouse.name"
|
model="itemNiche.warehouse.name"
|
||||||
|
@ -37,19 +39,19 @@
|
||||||
vn-acl="buyer,replenisher"
|
vn-acl="buyer,replenisher"
|
||||||
pointer
|
pointer
|
||||||
medium-grey
|
medium-grey
|
||||||
vn-tooltip="Remove note"
|
vn-tooltip="Remove niche"
|
||||||
tooltip-position="left"
|
tooltip-position="left"
|
||||||
icon="remove_circle_outline"
|
icon="remove_circle_outline"
|
||||||
ng-click="$ctrl.removeNiche($index)">
|
ng-click="$ctrl.removeNiche($index)">
|
||||||
</vn-icon>
|
</vn-icon>
|
||||||
</vn-horizontal>
|
</vn-horizontal>
|
||||||
<vn-one>
|
<vn-one>
|
||||||
<vn-icon
|
<vn-icon-button
|
||||||
vn-acl="buyer, replenisher"
|
vn-acl="buyer, replenisher"
|
||||||
pointer vn-tooltip="Add note"
|
vn-tooltip="Add niche"
|
||||||
tooltip-position="right" orange icon="add_circle"
|
tooltip-position="right" icon="add_circle"
|
||||||
ng-click="$ctrl.addNiche()">
|
ng-click="$ctrl.addNiche()">
|
||||||
</vn-icon>
|
</vn-icon-button>
|
||||||
</vn-one>
|
</vn-one>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-button-bar>
|
<vn-button-bar>
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
<vn-autocomplete
|
<vn-autocomplete
|
||||||
ng-if="!ticketObservation.id"
|
ng-if="!ticketObservation.id"
|
||||||
vn-one
|
vn-one
|
||||||
|
vn-focus
|
||||||
initial-data="ticketObservation.observationType"
|
initial-data="ticketObservation.observationType"
|
||||||
field="ticketObservation.observationTypeFk"
|
field="ticketObservation.observationTypeFk"
|
||||||
data="observationTypes.model"
|
data="observationTypes.model"
|
||||||
|
@ -47,12 +48,12 @@
|
||||||
</vn-horizontal>
|
</vn-horizontal>
|
||||||
</vn-one>
|
</vn-one>
|
||||||
<vn-one>
|
<vn-one>
|
||||||
<vn-icon
|
<vn-icon-button
|
||||||
pointer vn-tooltip="Add note"
|
pointer vn-tooltip="Add note"
|
||||||
tooltip-position="right" orange icon="add_circle"
|
tooltip-position="right" icon="add_circle"
|
||||||
ng-if="observationTypes.model.length > $ctrl.ticketObservations.length"
|
ng-if="observationTypes.model.length > $ctrl.ticketObservations.length"
|
||||||
ng-click="$ctrl.addObservation()">
|
ng-click="$ctrl.addObservation()">
|
||||||
</vn-icon>
|
</vn-icon-button>
|
||||||
</vn-one>
|
</vn-one>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-button-bar>
|
<vn-button-bar>
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
<vn-horizontal ng-repeat="package in index.model track by $index">
|
<vn-horizontal ng-repeat="package in index.model track by $index">
|
||||||
<vn-autocomplete vn-one
|
<vn-autocomplete vn-one
|
||||||
margin-large-right
|
margin-large-right
|
||||||
|
vn-focus
|
||||||
url="/ticket/api/Packagings/listPackaging"
|
url="/ticket/api/Packagings/listPackaging"
|
||||||
label="Package"
|
label="Package"
|
||||||
show-field="name"
|
show-field="name"
|
||||||
|
@ -51,14 +52,13 @@
|
||||||
</vn-horizontal>
|
</vn-horizontal>
|
||||||
</vn-one>
|
</vn-one>
|
||||||
<vn-one>
|
<vn-one>
|
||||||
<vn-icon
|
<vn-icon-button
|
||||||
pointer
|
pointer
|
||||||
vn-tooltip="Add package"
|
vn-tooltip="Add package"
|
||||||
tooltip-position = "right"
|
tooltip-position = "right"
|
||||||
orange
|
|
||||||
icon="add_circle"
|
icon="add_circle"
|
||||||
ng-click="$ctrl.addPackage()">
|
ng-click="$ctrl.addPackage()">
|
||||||
</vn-icon>
|
</vn-icon-button>
|
||||||
</vn-one>
|
</vn-one>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-button-bar>
|
<vn-button-bar>
|
||||||
|
|
Loading…
Reference in New Issue