Commit 0ac6ce80054b234dd81b134971388df20c433b0a
1 parent
fde0c77d37
Exists in
master
Modificación teclado
Showing
4 changed files
with
39 additions
and
10 deletions
Show diff stats
index.html
... | ... | @@ -19,7 +19,7 @@ |
19 | 19 | <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script> |
20 | 20 | <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script> |
21 | 21 | |
22 | - <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script> | |
22 | + <script src="../foca-directivas/tmp/foca-directivas.js"></script> | |
23 | 23 | <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script> |
24 | 24 | <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script> |
25 | 25 | <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script> |
... | ... | @@ -32,7 +32,7 @@ |
32 | 32 | <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script> |
33 | 33 | <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script> |
34 | 34 | <script src="./node_modules/foca-modal-petroleras/dist/foca-modal-petroleras.min.js"></script> |
35 | - <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script> | |
35 | + <script src="../foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script> | |
36 | 36 | <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script> |
37 | 37 | <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script> |
38 | 38 | <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script> |
... | ... | @@ -40,6 +40,7 @@ |
40 | 40 | |
41 | 41 | <!-- BUILD --> |
42 | 42 | <script src="./src/js/app.js"></script> |
43 | + <script src="./src/js/controller.js"></script> | |
43 | 44 | <script src="./src/etc/develop.js"></script> |
44 | 45 | <!-- /BUILD --> |
45 | 46 | |
... | ... | @@ -49,13 +50,13 @@ |
49 | 50 | </style> |
50 | 51 | <botonera-horizontal></botonera-horizontal> |
51 | 52 | <div ng-view class="container contenedor"></div> |
52 | - <div class="container contenedor-teclado"> | |
53 | + <div ng-controller="appWrapperDemoController" class="container contenedor-teclado"> | |
53 | 54 | <div class="btn-group-toggle" data-toggle="buttons" ng-click="mostrarTeclado = !mostrarTeclado"> |
54 | - <label class="btn btn-secondary active" ng-class="{'teclado-activar': mostrarTeclado}"> | |
55 | + <label class="btn btn-secondary active boton-activar-teclado" ng-class="{'teclado-activar': mostrarTeclado}"> | |
55 | 56 | <input type="checkbox" autocomplete="off"><i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i> |
56 | 57 | </label> |
57 | 58 | </div> |
58 | - <foca-teclado ng-show="mostrarTeclado" alfanumeric="true" numeric="true"></foca-teclado> | |
59 | + <foca-teclado ng-show="mostrarTeclado && hasFocus" alfanumeric="true" numeric="true"></foca-teclado> | |
59 | 60 | </div> |
60 | 61 | </body> |
61 | 62 | </html> |
src/js/controller.js
... | ... | @@ -0,0 +1,22 @@ |
1 | +angular.module('appWrapperDemo') | |
2 | + .controller('appWrapperDemoController', [ | |
3 | + '$scope', | |
4 | + '$rootScope', | |
5 | + '$timeout', | |
6 | + function($scope, $rootScope, $timeout) { | |
7 | + $scope.hasFocus = false; | |
8 | + var estado; | |
9 | + $rootScope.$on('focus', function(event, data) { | |
10 | + estado = data; | |
11 | + if(!data) { | |
12 | + $timeout(function() { | |
13 | + if(!estado) { | |
14 | + $scope.hasFocus = data; | |
15 | + } | |
16 | + },200) | |
17 | + } else { | |
18 | + $scope.hasFocus = data; | |
19 | + } | |
20 | + }); | |
21 | + } | |
22 | + ]); | |
0 | 23 | \ No newline at end of file |
src/sass/_contenedor.scss
... | ... | @@ -9,8 +9,8 @@ body { |
9 | 9 | } |
10 | 10 | |
11 | 11 | .contenedor-teclado { |
12 | - background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3); | |
13 | - height: 300px; | |
12 | + /* background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3); */ | |
13 | + /* height: 300px; */ | |
14 | 14 | } |
15 | 15 | |
16 | 16 | .grilla-articulos { |
src/sass/_teclado.scss
... | ... | @@ -6,10 +6,11 @@ |
6 | 6 | -moz-user-select: none; |
7 | 7 | -ms-user-select: none; |
8 | 8 | user-select: none; |
9 | - width: 70%; | |
9 | + width: 62%; | |
10 | 10 | height: 60%; |
11 | - margin: auto; | |
12 | - margin-top: -6%; | |
11 | + margin-left: 13%; | |
12 | + margin-top: -19%; | |
13 | + position: absolute; | |
13 | 14 | table { |
14 | 15 | border-spacing: 10px; |
15 | 16 | border-collapse: separate; |
... | ... | @@ -66,3 +67,8 @@ |
66 | 67 | .teclado-activar { |
67 | 68 | background-color: #17d236; |
68 | 69 | } |
70 | +.boton-activar-teclado { | |
71 | + margin-top: -10%; | |
72 | + position: absolute; | |
73 | + z-index: 100000; | |
74 | +} |