tarea #230 refactorizar Icon-Button y añadir focus

This commit is contained in:
Gerard 2018-04-19 14:46:06 +02:00
parent b4af50cc48
commit 5546890ee9
8 changed files with 61 additions and 26 deletions

View File

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

View File

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

View File

@ -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: '@',

View File

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

View File

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

View File

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

View File

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

View File

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