Jose Pinto / foca-botonera-lateral

Download as
Browse Code ยป

Commit 04074190765bf88afad347e0f954d5203a203843

Authored by Jose Pinto
1 parent cd82850dff
Exists in master

boton guardar con ladda y verde al guardar

Showing 3 changed files with 27 additions and 9 deletions   Show diff stats
1 angular.module('focaBotoneraLateral', []) 1 angular.module('focaBotoneraLateral', ['angular-ladda'])
2 .component('focaBotoneraLateral', { 2 .component('focaBotoneraLateral', {
3 templateUrl: 'src/views/botonera-lateral.html', 3 templateUrl: 'src/views/botonera-lateral.html',
4 controller: 'focaBotoneraLateralController' 4 controller: 'focaBotoneraLateralController'
5 }); 5 });
6 6
1 angular.module('focaBotoneraLateral') 1 angular.module('focaBotoneraLateral')
2 .service('focaBotoneraLateralService', function() { 2 .service('focaBotoneraLateralService', function() {
3 3
4 this.botones = { 4 this.botones = {
5 salir: false, 5 salir: false,
6 cancelar: false, 6 cancelar: false,
7 pausar: false, 7 pausar: false,
8 guardar: false, 8 guardar: false,
9 guardando: false,
9 funcionGuardar: undefined, 10 funcionGuardar: undefined,
10 pathCancelar: undefined, 11 pathCancelar: undefined,
11 custom: [] 12 custom: []
12 }; 13 };
13 14
14 this.showSalir = function(value) { 15 this.showSalir = function(value) {
15 this.botones.custom = []; 16 this.botones.custom = [];
16 this.botones.salir = value; 17 this.botones.salir = value;
17 }; 18 };
18 this.showPausar = function(value) { 19 this.showPausar = function(value) {
19 this.botones.custom = []; 20 this.botones.custom = [];
20 this.botones.pausar = value; 21 this.botones.pausar = value;
21 }; 22 };
22 this.showCancelar = function(value, path) { 23 this.showCancelar = function(value, path) {
23 this.botones.custom = []; 24 this.botones.custom = [];
24 this.botones.cancelar = value; 25 this.botones.cancelar = value;
25 this.botones.pathCancelar = (path) ? path : undefined; 26 this.botones.pathCancelar = (path) ? path : undefined;
26 }; 27 };
27 this.showGuardar = function(value, funcion) { 28 this.showGuardar = function(value, funcion) {
28 this.botones.custom = []; 29 this.botones.custom = [];
29 this.botones.guardar = value; 30 this.botones.guardar = value;
30 if(value) this.botones.funcionGuardar = funcion; 31 if(value) this.botones.funcionGuardar = funcion;
31 }; 32 };
32 this.addCustomButton = function(title, funcion) { 33 this.addCustomButton = function(title, funcion) {
33 this.botones.custom.push({ 34 this.botones.custom.push({
34 title: title, 35 title: title,
35 funcion: funcion 36 funcion: funcion
36 }); 37 });
37 }; 38 };
39 this.startGuardar = function() {
40 this.botones.guardando = true;
41
42 };
43 this.endGuardar = function(guardado) {
44 this.botones.guardando = false;
45 if(guardado) angular.element('#guardar').addClass('guardado');
46 };
38 }); 47 });
39 48
src/views/botonera-lateral.html
Diff comments   View file @ 0407419
1 <div class="container botonera-lateral"> 1 <div class="container botonera-lateral">
2 <div class="row"> 2 <div class="row">
3 <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px"> 3 <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px">
4 <div class="px-2 mt-auto"> 4 <div class="px-2 mt-auto">
5 <div class="container"> 5 <div class="container">
6 <div class="row"> 6 <div class="row">
7 <button 7 <div
8 ng-click="botones.funcionGuardar()" 8 ladda="botones.guardando"
9 ng-show="botones.guardar" 9 data-spinner-size="30"
10 type="button" 10 data-spinner-color="#000000"
11 title="Guardar" 11 class="mb-2 border border-dark rounded"
12 class="btn btn-block border border-dark"> 12 >
13 <strong>GUARDAR</strong> 13 <button
14 </button> 14 id="guardar"
15 ng-click="botones.funcionGuardar()"
16 ng-show="botones.guardar"
17 ng-disabled="botones.guardando"
18 type="button"
19 title="Guardar"
20 class="btn btn-block">
21 <strong>GUARDAR</strong>
22 </button>
23 </div>
15 <button 24 <button
16 ng-show="botones.pausar" 25 ng-show="botones.pausar"
17 type="button" 26 type="button"
18 title="Pausar" 27 title="Pausar"
19 class="btn btn-block border border-dark"> 28 class="btn btn-block border border-dark">
20 <strong>PAUSAR</strong> 29 <strong>PAUSAR</strong>
21 </button> 30 </button>
22 <button 31 <button
23 ng-click="cancelar()" 32 ng-click="cancelar()"
24 ng-show="botones.cancelar" 33 ng-show="botones.cancelar"
25 type="button" 34 type="button"
26 title="Cancelar" 35 title="Cancelar"
27 class="btn btn-block border border-dark"> 36 class="btn btn-block border border-dark">
28 <strong>CANCELAR</strong> 37 <strong>CANCELAR</strong>
29 </button> 38 </button>
30 <button 39 <button
31 ng-click="salir()" 40 ng-click="salir()"
32 ng-show="botones.salir" 41 ng-show="botones.salir"
33 type="button" 42 type="button"
34 title="Salir" 43 title="Salir"
35 class="btn btn-block border border-dark"> 44 class="btn btn-block border border-dark">
36 <strong>SALIR</strong> 45 <strong>SALIR</strong>
37 </button> 46 </button>
38 <button 47 <button
39 ng-repeat="boton in botones.custom" 48 ng-repeat="boton in botones.custom"
40 ng-click="boton.funcion()" 49 ng-click="boton.funcion()"
41 type="button" 50 type="button"
42 title="{{boton.title}}" 51 title="{{boton.title}}"
43 class="btn btn-block border border-dark"> 52 class="btn btn-block border border-dark">
44 <strong 53 <strong
45 class="text-uppercase" 54 class="text-uppercase"
46 ng-bind="boton.title"> 55 ng-bind="boton.title">
47 </strong> 56 </strong>
48 </button> 57 </button>
49 </div> 58 </div>
50 </div> 59 </div>
51 </div> 60 </div>
52 </div> 61 </div>
53 </div> 62 </div>
54 </div> 63 </div>
55 <div class="container botonera-lateral teclado"> 64 <div class="container botonera-lateral teclado">
56 <div class="row"> 65 <div class="row">
57 <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px"> 66 <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px">
58 <div class="px-2 mt-auto"> 67 <div class="px-2 mt-auto">
59 <div class="container"> 68 <div class="container">
60 <div class="row"> 69 <div class="row">
61 <div 70 <div
62 class="btn-group-toggle btn btn-block btn-default border border-dark" 71 class="btn-group-toggle btn btn-block btn-default border border-dark"
63 data-toggle="buttons" 72 data-toggle="buttons"
64 ng-click="cambioUsoTeclado()" 73 ng-click="cambioUsoTeclado()"
65 title="Activar/desactivar teclado"> 74 title="Activar/desactivar teclado">
66 <label 75 <label
67 class=" active boton-activar-teclado mb-0" 76 class=" active boton-activar-teclado mb-0"
68 ng-class="{'teclado-activar': usarTeclado}"> 77 ng-class="{'teclado-activar': usarTeclado}">
69 <input 78 <input
70 type="checkbox" 79 type="checkbox"
71 autocomplete="off" 80 autocomplete="off"
72 > 81 >
73 <strong>TECLADO</strong> 82 <strong>TECLADO</strong>
74 </label> 83 </label>
75 </div> 84 </div>
76 </div> 85 </div>
77 </div> 86 </div>
78 </div> 87 </div>
79 </div> 88 </div>
80 </div> 89 </div>
81 </div> 90 </div>
82 91