Luigi / wrapper-demo

Browse Code »

Commit 0ac6ce80054b234dd81b134971388df20c433b0a

Authored by Eric Fernandez 2018-10-26 18:33:56 -0300

1 parent fde0c77d37

Exists in master

Modificación teclado

Showing 4 changed files with 39 additions and 10 deletions Show diff stats

index.html

Diff comments View file @ 0ac6ce8

 <html ng-app="appWrapperDemo">
     <head>
         <meta charset="UTF-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <base href="./">
         <!--CSS-->
         <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
         <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
         <link href="css/general.css" rel="stylesheet"/>
         <!--VENDOR JS-->
         <script src="./node_modules/jquery/dist/jquery.min.js"></script>
         <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
         <script src="./node_modules/angular/angular.min.js"></script>
         <script src="./node_modules/angular-route/angular-route.min.js"></script>
         <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script>
         <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
         <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script>
         <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
-        <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
+        <script src="../foca-directivas/tmp/foca-directivas.js"></script>
         <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
         <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script>
         <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>
         <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>
         <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
         <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script>
         <script src="./node_modules/foca-login/dist/foca-login.min.js"></script>
         <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script>
         <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script>
         <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>
         <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>
         <script src="./node_modules/foca-modal-petroleras/dist/foca-modal-petroleras.min.js"></script>
-        <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
+        <script src="../foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
         <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
         <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
         <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
         <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script>
         <!-- BUILD -->
         <script src="./src/js/app.js"></script>
+        <script src="./src/js/controller.js"></script>
         <script src="./src/etc/develop.js"></script>
         <!-- /BUILD -->
     </head>
     <body>
         <style>
         </style>
         <botonera-horizontal></botonera-horizontal>
         <div ng-view class="container contenedor"></div>
-        <div class="container contenedor-teclado">
+        <div ng-controller="appWrapperDemoController" class="container contenedor-teclado">
             <div class="btn-group-toggle" data-toggle="buttons" ng-click="mostrarTeclado = !mostrarTeclado">
-                <label class="btn btn-secondary active" ng-class="{'teclado-activar': mostrarTeclado}">
+                <label class="btn btn-secondary active boton-activar-teclado" ng-class="{'teclado-activar': mostrarTeclado}">
                     <input type="checkbox" autocomplete="off"><i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
                 </label>
             </div>
-            <foca-teclado ng-show="mostrarTeclado" alfanumeric="true" numeric="true"></foca-teclado>
+            <foca-teclado ng-show="mostrarTeclado && hasFocus" alfanumeric="true" numeric="true"></foca-teclado>
         </div>
     </body>
 </html>

src/js/controller.js

Diff comments View file @ 0ac6ce8

File was created	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	]);

src/sass/_contenedor.scss

Diff comments View file @ 0ac6ce8

1	body {	1	body {
2	background-color: #cccccc;	2	background-color: #cccccc;
3	}	3	}
4		4
5	.contenedor {	5	.contenedor {
6	background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);	6	background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
7	min-height: 600px;	7	min-height: 600px;
8	min-width: 800px;	8	min-width: 800px;
9	}	9	}
10		10
11	.contenedor-teclado {	11	.contenedor-teclado {
12	background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);	12	/* background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3); */
13	height: 300px;	13	/* height: 300px; */
14	}	14	}
15		15
16	.grilla-articulos {	16	.grilla-articulos {
17	background-color: rgba(0, 0, 0, 0.8);	17	background-color: rgba(0, 0, 0, 0.8);
18	height: 430px;	18	height: 430px;
19	}	19	}
20		20
21	.crear-nota-pedido {	21	.crear-nota-pedido {
22	form {	22	form {
23	margin-bottom: 0;	23	margin-bottom: 0;
24	}	24	}
25	table {	25	table {
26	margin-bottom: 0;	26	margin-bottom: 0;
27	}	27	}
28	}	28	}
29		29

src/sass/_teclado.scss

Diff comments View file @ 0ac6ce8

 .keyboard {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    width: 70%;
+    width: 62%;
     height: 60%;
-    margin: auto;
+    margin-left: 13%;
-    margin-top: -6%;
+    margin-top: -19%;
+    position: absolute;
     table {
         border-spacing: 10px;
         border-collapse: separate;
         z-index: 100000;
         td {
             touch-action: none;
         }
     }
     .letter {
         background-color: #bdbdbd;
         box-shadow: 2px 2px 3px #555555;
         width: 47px;
         height: 50px;
         text-align: center;
         font-family: "arial";
         cursor: pointer;
         color: #000;
         font-size: 22px;
         &:hover {
             background-color: #fafafa;
         }
         &:active {
             background-color: #999;
             color: #fff;
         }
     }
     .number {
         background-color: #bdbdbd;
         box-shadow: 2px 2px 3px #555555;
         width: 47px;
         height: 35px;
         text-align: center;
         font-family: "arial";
         cursor: pointer;
         color: #000;
         font-size: 22px;
         &:hover {
             background-color: #fafafa;
         }
         &:active {
             background-color: #999;
             color: #fff;
         }
     }
     .margin {
         width: 40px;
         height: 50px;
     }
 }
 .teclado-activar {
     background-color: #17d236;
 }
+.boton-activar-teclado {
+    margin-top: -10%;
+    position: absolute;
+    z-index: 100000;
+}