Luigi / wrapper-demo

 <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 rel="stylesheet" href="node_modules/angular-ui-swiper/dist/angular-ui-swiper.css">
+        <link href="./node_modules/ladda/dist/ladda-themeless.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/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
+        <script src="./node_modules/ladda/dist/spin.min.js"></script>
+        <script src="./node_modules/ladda/dist/ladda.min.js"></script>
+        <script src="./node_modules/angular-ladda/dist/angular-ladda.min.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-cotizacion/dist/foca-modal-cotizacion.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 d-none d-sm-block">
+        <div ng-controller="appWrapperDemoController" class="container d-none d-sm-block">
-            <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>

package.json

Diff comments View file @ bb50dfb

 {
     "name": "wrapper-demo",
     "version": "0.0.1",
     "description": "",
     "main": "main.js",
     "scripts": {
         "initdev": "npm install gulp --global && npm install && npm install -g jshint",
         "gulp-pre-commit": "gulp pre-commit",
         "compile": "gulp uglify && gulp sass",
         "electron": "electron .",
         "electron-build": "gulp uglify && gulp html && gulp sass && electron ."
     },
     "pre-commit": [
         "gulp-pre-commit"
     ],
     "repository": {
         "type": "git",
         "url": "https://debo.suite.repo/Wrappers/wrapper-demo.git"
     },
     "author": "Foca Software",
     "license": "ISC",
     "dependencies": {
         "angular": "^1.7.5",
         "angular-cookies": "^1.7.5",
         "angular-i18n": "^1.7.5",
+        "angular-ladda": "^0.4.3",
         "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git",
         "angular-route": "^1.7.5",
         "angular-sanitize": "^1.7.5",
+        "angular-ui-swiper": "^2.3.8",
         "bootstrap": "^4.1.3",
         "foca-abm-plazo-pago": "git+https://debo.suite.repo/modulos-npm/foca-abm-plazo-pago.git",
         "foca-abm-precios-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-abm-precios-condiciones.git",
         "foca-abm-sectores": "git+https://debo.suite.repo/modulos-npm/foca-abm-sectores",
         "foca-botonera-principal": "git+https://debo.suite.repo/modulos-npm/foca-botonera-principal.git",
         "foca-busqueda-cliente": "git+https://debo.suite.repo/modulos-npm/foca-busqueda-cliente.git",
         "foca-crear-nota-pedido": "git+https://debo.suite.repo/modulos-npm/foca-crear-nota-pedido.git",
         "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git",
         "foca-login": "git+https://debo.suite.repo/modulos-npm/foca-login.git",
         "foca-modal": "git+https://debo.suite.repo/modulos-npm/foca-modal",
         "foca-modal-busqueda-productos": "git+https://debo.suite.repo/modulos-npm/foca-modal-busqueda-productos",
+        "foca-modal-cotizacion": "git+https://debo.suite.repo/modulos-npm/foca-modal-cotizacion.git",
         "foca-modal-domicilio": "git+https://debo.suite.repo/modulos-npm/foca-modal-domicilio.git",
         "foca-modal-flete": "git+https://debo.suite.repo/modulos-npm/foca-modal-flete.git",
         "foca-modal-moneda": "git+https://debo.suite.repo/modulos-npm/foca-modal-moneda.git",
         "foca-modal-precio-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-modal-precio-condiciones.git",
         "foca-modal-proveedor": "git+https://debo.suite.repo/modulos-npm/foca-modal-proveedor.git",
         "foca-modal-vendedores": "git+https://debo.suite.repo/modulos-npm/foca-modal-vendedores.git",
         "foca-teclado": "git+https://debo.suite.repo/modulos-npm/foca-teclado.git",
         "foca-turno-apertura": "git+https://debo.suite.repo/modulos-npm/foca-turno-apertura.git",
         "font-awesome": "^4.7.0",
         "gulp-angular-templatecache": "^2.2.1",
         "gulp-htmlmin": "^5.0.1",
         "gulp-uglify": "^3.0.1",
         "jquery": "^3.3.1",
+        "ladda": "1.0.6",
         "node-sass": "^4.9.4",
         "uglify": "^0.1.5",
         "ui-bootstrap4": "^3.0.5"
     },
     "devDependencies": {
         "electron": "^3.0.2",
         "gulp": "^3.9.1",
         "gulp-clean": "^0.4.0",
         "gulp-concat": "^2.6.1",
         "gulp-connect": "^5.6.1",
         "gulp-jshint": "^2.1.0",
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-sass": "^4.0.1",
         "gulp-uglify": "^1.0.4",
         "gulp-watch": "^5.0.1",
         "jasmine-core": "^3.2.1",
         "jshint": "^2.9.6",
         "pre-commit": "^1.2.2",
         "pump": "^3.0.0"
     }
 }

src/js/app.js

Diff comments View file @ bb50dfb

 angular.module('appWrapperDemo', [
+    'angular-ladda',
     'ngCookies',
     'ngRoute',
     'ui.bootstrap',
+    'ui.swiper',
     'focaAbmPlazoPago',
     'focaAbmPreciosCondiciones',
     'focaAbmSectores',
     'focaBotoneraPrincipal',
     'focaBusquedaCliente',
     'focaBusquedaProductos',
     'focaCrearNotaPedido',
     'focaDirectivas',
     'focaLogin',
     'focaModal',
+    'focaModalCotizacion',
     'focaModalFlete',
     'focaModalMoneda',
     'focaModalPrecioCondicion',
     'focaModalProveedor',
     'focaModalVendedores',
     'focaTeclado',
     'focaTurnoApertura',
     'ngSanitize',
     'onScreenKeyboard',
     'focaModalDomicilio'
 ]);

src/js/controller.js

Diff comments View file @ bb50dfb

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/_botonera-principal.scss

Diff comments View file @ bb50dfb

 .botonera-principal {
-    margin: 0;
+    menuitem {
-    padding-left: 30px;
-    padding-top: 30px;
-    & menuitem {
         display: inline-block;
         height: 130px;
         text-align: center;
         width: 180px;
     }
-    & button {
+    button {
         background-image: url('../img/botonera.png');
         border-radius: 12px;
         border-width: 0;
         height: 90px;
         position: relative;
         width: 90px;
+        span {
+            left: 0;
+            position: absolute;
+            text-align: center;
+            top: 90px;
+            width: 100%;
+            font-size: 12px;
+            color: #777777;
+        }
     }
-    & span {
+    &-menu {
-        left: 0;
+        padding-left: 90px;
-        position: absolute;
+    }
-        text-align: center;
+    &-logo {
-        top: 90px;
+        width: 80%;
-        width: 100%;
+        opacity: .8;
-        font-size: 12px;
+    }
-        color: #777777;
+    &-vacio {
+        & button {
+            background-position: -4380px 0;
+            &:hover {
+                background-position: -4380px -90px;
+            }
+        }
     }
     &-abrir-turno {
         & button {
             background-position: 0 0;
             &:hover {
                 background-position: 0 -90px;
             }
         }
     }
     &-cerrar-turno {
         & button {
             background-position: -90px 0;
             &:hover {
                 background-position: -90px -90px;
             }
         }
     }
     &-caja {
         & button {
             background-position: -180px 0;
             &:hover {
                 background-position: -180px -90px;
             }
         }
     }
     &-facturador {
         & button {
             background-position: -270px 0px;
             &:hover {
                 background-position: -270px -90px;
             }
         }
     }
     &-nota-pedido {
         & button {
             background-position: -1250px 0px;
             &:hover {
                 background-position: -1250px -90px;
             }
         }

src/sass/_contenedor.scss

Diff comments View file @ bb50dfb

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	@media (min-width: 768px) {	7	@media (min-width: 768px) {
8	min-height: 600px;	8	min-height: 600px;
9	min-width: 800px;	9	min-width: 800px;
10	}	10	}
11
12	}
13
14	.contenedor-teclado {
15	background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
16	height: 300px;	11
17	}	12	}
18		13
19	.grilla-articulo {	14	.grilla-articulo {
20	background-color: rgba(0, 0, 0, 0.8);
21	@media (min-width: 768px) {
22	height: 430px;
23	}
24	}
25
26	.crear-nota-pedido {
27	form {
28	margin-bottom: 0;
29	}	15	background-color: rgba(0, 0, 0, 0.8);
30	table {	16	@media (min-width: 768px) {
31	margin-bottom: 0;	17	height: 430px;
32	}	18	}
33	}	19	}
34		20

src/sass/_crear-nota-pedido.scss

Diff comments View file @ bb50dfb

File was created	1	.crear-nota-pedido {
	2	&-fecha {
	3	input[type="date"]::-webkit-clear-button {
	4	display: none;
	5	}
	6	}
	7	}
	8

src/sass/_swiper.scss

Diff comments View file @ bb50dfb

File was created	1	.swiper {
	2	&-container {
	3	height: 400px;
	4	}
	5	&-slide {
	6	background: transparent;
	7	height: 400px;
	8	text-align: unset;
	9	-webkit-align-items: unset;
	10	align-items: unset;
	11	}
	12	}
	13

src/sass/_teclado.scss

Diff comments View file @ bb50dfb

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

src/sass/general.scss

Diff comments View file @ bb50dfb

 @import 'bootstrap';
 @import 'botonera';
 @import 'botonera-lateral';
 @import 'botonera-principal';
 @import 'botonera-secundaria';
 @import 'contenedor';
 @import 'lista';
 @import 'login';
 @import 'panel-informativo';
 @import 'tabla';
 @import 'teclado';
 @import 'tabla-articulos';
+@import 'acciones-mobile';
+@import 'swiper';
-@import 'acciones-mobile';
+@import 'crear-nota-pedido';