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

View File

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

View File

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

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

View File

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

View File

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

View File

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