Jose Pinto / wrapper-demo

Download as
Browse Code ยป

Commit f10288376054528a6510b773d3e9fea7ffb9a4b2

Authored by Pablo Marco del Pont
2 parents eb444b14fd 052547101f
Exists in master

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

Showing 4 changed files   Show diff stats
... ... @@ -41,6 +41,7 @@
41 41  
42 42 <!-- BUILD -->
43 43 <script src="./src/js/app.js"></script>
  44 + <script src="./src/js/controller.js"></script>
44 45 <script src="./src/etc/develop.js"></script>
45 46 <!-- /BUILD -->
46 47  
... ... @@ -50,13 +51,27 @@
50 51 </style>
51 52 <botonera-horizontal></botonera-horizontal>
52 53 <div ng-view class="container contenedor"></div>
53   - <div class="container contenedor-teclado">
54   - <div class="btn-group-toggle" data-toggle="buttons" ng-click="mostrarTeclado = !mostrarTeclado">
55   - <label class="btn btn-secondary active" ng-class="{'teclado-activar': mostrarTeclado}">
56   - <input type="checkbox" autocomplete="off"><i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
  54 + <div ng-controller="appWrapperDemoController" class="container">
  55 + <div
  56 + class="btn-group-toggle"
  57 + data-toggle="buttons"
  58 + ng-click="mostrarTeclado = !mostrarTeclado">
  59 + <label
  60 + class="btn btn-secondary active boton-activar-teclado"
  61 + ng-class="{'teclado-activar': mostrarTeclado}">
  62 + <input
  63 + type="checkbox"
  64 + autocomplete="off"
  65 + >
  66 + <i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
57 67 </label>
58 68 </div>
59   - <foca-teclado ng-show="mostrarTeclado" alfanumeric="true" numeric="true"></foca-teclado>
  69 + <foca-teclado
  70 + ng-show="mostrarTeclado && hasFocus"
  71 + alfanumeric="true"
  72 + numeric="true"
  73 + >
  74 + </foca-teclado>
60 75 </div>
61 76 </body>
62 77 </html>
src/js/controller.js
Diff comments   View file @ f102883
... ... @@ -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 + ]);
src/sass/_contenedor.scss
Diff comments   View file @ f102883
... ... @@ -8,11 +8,6 @@ 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   -
16 11 .grilla-articulo {
17 12 background-color: rgba(0, 0, 0, 0.8);
18 13 height: 430px;
src/sass/_teclado.scss
Diff comments   View file @ f102883
... ... @@ -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 +}