Merge branch 'master' of https://debo.suite.repo/Wrappers/wrapper-demo

Pablo Marco del Pont
2 parents 3063e08216 5a9f5eaed4
Showing 9 changed files Show diff stats
index.html
package.json
src/js/app.js
src/sass/_bootstrap.scss
src/sass/_botonera-secundaria.scss
src/sass/_contenedor.scss
src/sass/_panel-informativo.scss
src/sass/_teclado.scss
src/sass/general.scss
@@ -16,7 +16,9 @@
         <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="./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>
@@ -33,7 +35,8 @@
         <script src="./node_modules/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>
+
         <!-- BUILD -->
         <script src="./src/js/app.js"></script>
         <script src="./src/etc/develop.js"></script>
@@ -45,5 +48,13 @@
         </style>
         <botonera-horizontal></botonera-horizontal>
         <div ng-view class="container contenedor"></div>
+        <div 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}">
+                    <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>
+        </div>
     </body>
 </html>
@@ -22,7 +22,9 @@
     "dependencies": {
         "angular": "^1.7.5",
         "angular-cookies": "^1.7.5",
+        "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git",
         "angular-route": "^1.7.5",
+        "angular-sanitize": "^1.7.5",
         "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",
@@ -39,6 +41,7 @@
         "foca-modal-petroleras": "git+https://debo.suite.repo/modulos-npm/foca-modal-petroleras.git",
         "foca-modal-precio-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-modal-precio-condiciones.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",
@@ -16,5 +16,8 @@ angular.module(&#39;appWrapperDemo&#39;, [
     'focaModalMoneda',
     'focaModalPrecioCondicion',
     'focaModalVendedores',
-    'focaTurnoApertura'
+    'focaTeclado',
+    'focaTurnoApertura',
+    'ngSanitize',
+    'onScreenKeyboard'
 ]);
@@ -4,3 +4,9 @@
     outline: 0;
     background-color: #337ab7;
 }
+.btn-xs {
+    padding: .15rem .5rem;
+    font-size: .8rem;
+    line-height: 1.5;
+    border-radius: .2rem;
+}
 \ No newline at end of file
 .botonera-secundaria {
     background-color: rgba(0, 0, 0, 0.8);
-    .btn-xs {
-        padding: .15rem .5rem;
-        font-size: .8rem;
-        line-height: 1.5;
-        border-radius: .2rem;
-    }
 }
@@ -8,6 +8,11 @@ body {
     min-width: 800px;
 }
  
+.contenedor-teclado {
+    background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
+    height: 300px;
+}
+
 .grilla-articulos {
     background-color: rgba(0, 0, 0, 0.8);
     height: 430px;
 .panel-informativo {
     background: linear-gradient(#ccc, #eee);
+    min-height: 32px;
     .form-group {
         margin-bottom: 5px;
     }
@@ -0,0 +1,68 @@
+
+.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%;
+    height: 60%;
+    margin: auto;
+    margin-top: -6%;
+    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;
+}
@@ -7,3 +7,4 @@
 @import 'login';
 @import 'panel-informativo';
 @import 'tabla';
+@import 'teclado';
...	...	@@ -16,7 +16,9 @@
16	16	<script src="./node_modules/angular-route/angular-route.min.js"></script>
17	17	<script src="./node_modules/angular-cookies/angular-cookies.min.js"></script>
18	18	<script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
19		-
	19	+ <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script>
	20	+ <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
	21	+
20	22	<script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
21	23	<script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
22	24	<script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script>
...	...	@@ -33,7 +35,8 @@
33	35	<script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
34	36	<script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
35	37	<script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
36		-
	38	+ <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
	39	+
37	40	<!-- BUILD -->
38	41	<script src="./src/js/app.js"></script>
39	42	<script src="./src/etc/develop.js"></script>
...	...	@@ -45,5 +48,13 @@
45	48	</style>
46	49	<botonera-horizontal></botonera-horizontal>
47	50	<div ng-view class="container contenedor"></div>
	51	+ <div class="container contenedor-teclado">
	52	+ <div class="btn-group-toggle" data-toggle="buttons" ng-click="mostrarTeclado = !mostrarTeclado">
	53	+ <label class="btn btn-secondary active" ng-class="{'teclado-activar': mostrarTeclado}">
	54	+ <input type="checkbox" autocomplete="off"><i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
	55	+ </label>
	56	+ </div>
	57	+ <foca-teclado ng-show="mostrarTeclado" alfanumeric="true" numeric="true"></foca-teclado>
	58	+ </div>
48	59	</body>
49	60	</html>
...	...	@@ -22,7 +22,9 @@
22	22	"dependencies": {
23	23	"angular": "^1.7.5",
24	24	"angular-cookies": "^1.7.5",
	25	+ "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git",
25	26	"angular-route": "^1.7.5",
	27	+ "angular-sanitize": "^1.7.5",
26	28	"bootstrap": "^4.1.3",
27	29	"foca-abm-plazo-pago": "git+https://debo.suite.repo/modulos-npm/foca-abm-plazo-pago.git",
28	30	"foca-abm-precios-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-abm-precios-condiciones.git",
...	...	@@ -39,6 +41,7 @@
39	41	"foca-modal-petroleras": "git+https://debo.suite.repo/modulos-npm/foca-modal-petroleras.git",
40	42	"foca-modal-precio-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-modal-precio-condiciones.git",
41	43	"foca-modal-vendedores": "git+https://debo.suite.repo/modulos-npm/foca-modal-vendedores.git",
	44	+ "foca-teclado": "git+https://debo.suite.repo/modulos-npm/foca-teclado.git",
42	45	"foca-turno-apertura": "git+https://debo.suite.repo/modulos-npm/foca-turno-apertura.git",
43	46	"font-awesome": "^4.7.0",
44	47	"gulp-angular-templatecache": "^2.2.1",
...	...	@@ -16,5 +16,8 @@ angular.module('appWrapperDemo', [
16	16	'focaModalMoneda',
17	17	'focaModalPrecioCondicion',
18	18	'focaModalVendedores',
19		- 'focaTurnoApertura'
	19	+ 'focaTeclado',
	20	+ 'focaTurnoApertura',
	21	+ 'ngSanitize',
	22	+ 'onScreenKeyboard'
20	23	]);
...	...	@@ -4,3 +4,9 @@
4	4	outline: 0;
5	5	background-color: #337ab7;
6	6	}
	7	+.btn-xs {
	8	+ padding: .15rem .5rem;
	9	+ font-size: .8rem;
	10	+ line-height: 1.5;
	11	+ border-radius: .2rem;
	12	+}
7	13	\ No newline at end of file
1	1	.botonera-secundaria {
2	2	background-color: rgba(0, 0, 0, 0.8);
3		- .btn-xs {
4		- padding: .15rem .5rem;
5		- font-size: .8rem;
6		- line-height: 1.5;
7		- border-radius: .2rem;
8		- }
9	3	}
...	...	@@ -8,6 +8,11 @@ body {
8	8	min-width: 800px;
9	9	}
10	10
	11	+.contenedor-teclado {
	12	+ background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
	13	+ height: 300px;
	14	+}
	15	+
11	16	.grilla-articulos {
12	17	background-color: rgba(0, 0, 0, 0.8);
13	18	height: 430px;
1	1	.panel-informativo {
2	2	background: linear-gradient(#ccc, #eee);
	3	+ min-height: 32px;
3	4	.form-group {
4	5	margin-bottom: 5px;
5	6	}
...	...	@@ -0,0 +1,68 @@
	1	+
	2	+.keyboard {
	3	+ -webkit-touch-callout: none;
	4	+ -webkit-user-select: none;
	5	+ -khtml-user-select: none;
	6	+ -moz-user-select: none;
	7	+ -ms-user-select: none;
	8	+ user-select: none;
	9	+ width: 70%;
	10	+ height: 60%;
	11	+ margin: auto;
	12	+ margin-top: -6%;
	13	+ table {
	14	+ border-spacing: 10px;
	15	+ border-collapse: separate;
	16	+ z-index: 100000;
	17	+ td {
	18	+ touch-action: none;
	19	+ }
	20	+ }
	21	+
	22	+ .letter {
	23	+ background-color: #bdbdbd;
	24	+ box-shadow: 2px 2px 3px #555555;
	25	+ width: 47px;
	26	+ height: 50px;
	27	+ text-align: center;
	28	+ font-family: "arial";
	29	+ cursor: pointer;
	30	+ color: #000;
	31	+ font-size: 22px;
	32	+
	33	+ &:hover {
	34	+ background-color: #fafafa;
	35	+ }
	36	+ &:active {
	37	+ background-color: #999;
	38	+ color: #fff;
	39	+ }
	40	+ }
	41	+ .number {
	42	+ background-color: #bdbdbd;
	43	+ box-shadow: 2px 2px 3px #555555;
	44	+ width: 47px;
	45	+ height: 35px;
	46	+ text-align: center;
	47	+ font-family: "arial";
	48	+ cursor: pointer;
	49	+ color: #000;
	50	+ font-size: 22px;
	51	+
	52	+ &:hover {
	53	+ background-color: #fafafa;
	54	+ }
	55	+ &:active {
	56	+ background-color: #999;
	57	+ color: #fff;
	58	+ }
	59	+ }
	60	+
	61	+ .margin {
	62	+ width: 40px;
	63	+ height: 50px;
	64	+ }
	65	+}
	66	+.teclado-activar {
	67	+ background-color: #17d236;
	68	+}
...	...	@@ -7,3 +7,4 @@
7	7	@import 'login';
8	8	@import 'panel-informativo';
9	9	@import 'tabla';
	10	+@import 'teclado';