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
|
||||
initial-data="$ctrl.address.agencyMode"
|
||||
field="$ctrl.address.agencyModeFk"
|
||||
url="/client/api/AgencyModes"
|
||||
url="/client/api/AgencyModes/deliveryMethod"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
label="Agency">
|
||||
|
@ -61,6 +61,7 @@
|
|||
<vn-autocomplete
|
||||
ng-if="!observation.id"
|
||||
vn-one
|
||||
vn-focus
|
||||
initial-data="observation.observationType"
|
||||
field="observation.observationTypeFk"
|
||||
data="observationsTypes.model"
|
||||
|
@ -94,15 +95,14 @@
|
|||
</vn-horizontal>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-icon
|
||||
<vn-icon-button
|
||||
pointer
|
||||
vn-tooltip="Add note"
|
||||
tooltip-position = "right"
|
||||
orange
|
||||
icon="add_circle"
|
||||
ng-if="observationsTypes.model.length > $ctrl.observations.length"
|
||||
ng-click="$ctrl.addObservation()">
|
||||
</vn-icon>
|
||||
</vn-icon-button>
|
||||
</vn-one>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
|
|
|
@ -1,5 +1 @@
|
|||
<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>
|
||||
<vn-icon icon="{{::$ctrl.icon}}"></vn-icon>
|
|
@ -1,6 +1,24 @@
|
|||
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', {
|
||||
controller: IconButton,
|
||||
template: require('./icon-button.html'),
|
||||
bindings: {
|
||||
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
|
||||
label="Code"
|
||||
model="barcode.code"
|
||||
vn-acl="buyer, replenisher">
|
||||
vn-acl="buyer, replenisher"
|
||||
vn-focus>
|
||||
</vn-textfield>
|
||||
<vn-icon
|
||||
pad-medium-top
|
||||
vn-acl="buyer,replenisher"
|
||||
pointer
|
||||
medium-grey
|
||||
vn-tooltip="Remove note"
|
||||
vn-tooltip="Remove barcode"
|
||||
tooltip-position="left"
|
||||
icon="remove_circle_outline"
|
||||
ng-click="$ctrl.removeBarcode($index)">
|
||||
</vn-icon>
|
||||
</vn-horizontal>
|
||||
<vn-one>
|
||||
<vn-icon
|
||||
<vn-icon-button
|
||||
vn-acl="buyer, replenisher"
|
||||
pointer vn-tooltip="Add note"
|
||||
tooltip-position="right" orange icon="add_circle"
|
||||
vn-tooltip="Add barcode"
|
||||
tooltip-position="right" icon="add_circle"
|
||||
ng-click="$ctrl.addBarcode()">
|
||||
</vn-icon>
|
||||
</vn-icon-button>
|
||||
</vn-one>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
<vn-autocomplete
|
||||
ng-if="!itemNiche.id"
|
||||
vn-one
|
||||
vn-focus
|
||||
data="$ctrl.warehouses"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
|
@ -20,6 +21,7 @@
|
|||
</vn-autocomplete>
|
||||
<vn-textfield
|
||||
ng-if="itemNiche.id"
|
||||
vn-focus
|
||||
vn-one
|
||||
label="Warehouse"
|
||||
model="itemNiche.warehouse.name"
|
||||
|
@ -37,19 +39,19 @@
|
|||
vn-acl="buyer,replenisher"
|
||||
pointer
|
||||
medium-grey
|
||||
vn-tooltip="Remove note"
|
||||
vn-tooltip="Remove niche"
|
||||
tooltip-position="left"
|
||||
icon="remove_circle_outline"
|
||||
ng-click="$ctrl.removeNiche($index)">
|
||||
</vn-icon>
|
||||
</vn-horizontal>
|
||||
<vn-one>
|
||||
<vn-icon
|
||||
<vn-icon-button
|
||||
vn-acl="buyer, replenisher"
|
||||
pointer vn-tooltip="Add note"
|
||||
tooltip-position="right" orange icon="add_circle"
|
||||
vn-tooltip="Add niche"
|
||||
tooltip-position="right" icon="add_circle"
|
||||
ng-click="$ctrl.addNiche()">
|
||||
</vn-icon>
|
||||
</vn-icon-button>
|
||||
</vn-one>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
<vn-autocomplete
|
||||
ng-if="!ticketObservation.id"
|
||||
vn-one
|
||||
vn-focus
|
||||
initial-data="ticketObservation.observationType"
|
||||
field="ticketObservation.observationTypeFk"
|
||||
data="observationTypes.model"
|
||||
|
@ -47,12 +48,12 @@
|
|||
</vn-horizontal>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-icon
|
||||
<vn-icon-button
|
||||
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-click="$ctrl.addObservation()">
|
||||
</vn-icon>
|
||||
</vn-icon-button>
|
||||
</vn-one>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
<vn-horizontal ng-repeat="package in index.model track by $index">
|
||||
<vn-autocomplete vn-one
|
||||
margin-large-right
|
||||
vn-focus
|
||||
url="/ticket/api/Packagings/listPackaging"
|
||||
label="Package"
|
||||
show-field="name"
|
||||
|
@ -51,14 +52,13 @@
|
|||
</vn-horizontal>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<vn-icon
|
||||
<vn-icon-button
|
||||
pointer
|
||||
vn-tooltip="Add package"
|
||||
tooltip-position = "right"
|
||||
orange
|
||||
icon="add_circle"
|
||||
ng-click="$ctrl.addPackage()">
|
||||
</vn-icon>
|
||||
</vn-icon-button>
|
||||
</vn-one>
|
||||
</vn-card>
|
||||
<vn-button-bar>
|
||||
|
|
Loading…
Reference in New Issue