Luigi / wrapper-demo

Commit 052547101fc76c1d3f9682b50a28aa808452ae20

Authored by Eric Fernandez 2018-10-30 11:14:36 -0300

Exists in master

Merge branch 'master' into 'master'

Master

See merge request Wrappers/wrapper-demo!19

Showing 4 changed files Show diff stats

index.html

Diff comments View file @ 0525471

 <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/angular-i18n/angular-locale_es-ar.js"></script>
         <script src="./node_modules/foca-directivas/dist/foca-directivas.min.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-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
         <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.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">
-            <div class="btn-group-toggle" data-toggle="buttons" ng-click="mostrarTeclado = !mostrarTeclado">
+            <div
-                <label class="btn btn-secondary active" ng-class="{'teclado-activar': mostrarTeclado}">
+                class="btn-group-toggle"
-                    <input type="checkbox" autocomplete="off"><i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
+                data-toggle="buttons"
+                ng-click="mostrarTeclado = !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 @ 0525471

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	]);
	23

src/sass/_contenedor.scss

Diff comments View file @ 0525471

 body {
     background-color: #cccccc;
 }
 .contenedor {
     background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
     min-height: 600px;
     min-width: 800px;
 }
-.contenedor-teclado {
-    background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
-    height: 300px;
-}
 .grilla-articulo {
     background-color: rgba(0, 0, 0, 0.8);
     height: 430px;
 }
 .crear-nota-pedido {
     form {
         margin-bottom: 0;
     }
     table {
         margin-bottom: 0;
     }
 }

src/sass/_teclado.scss

Diff comments View file @ 0525471

 .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;
+}