acciones botones salir, guardar

Eric Fernandez
1 parent b9135c990b
Showing 3 changed files with 160 additions and 0 deletions Show diff stats
src/app/acciones/acciones.component.html
src/app/acciones/acciones.component.scss
src/app/acciones/acciones.component.ts
@@ -0,0 +1,39 @@
+<!-- DESKTOP -->
+<div class="container botonera-lateral">
+  <div class="row">
+    <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px">
+      <div class="px-2 mt-auto">
+        <div class="container">
+          <div class="row">
+            <button
+              (click)="callSave()"
+              [ladda]="saveLoading"
+              type="button"
+              title="Guardar"
+              class="btn btn-block border border-dark"
+              data-spinner-color="#000000"
+              data-size="s">
+              <strong>GUARDAR</strong>
+            </button>
+            <button routerLink="/home" type="button" title="Salir" class="btn btn-block border border-dark">
+              <strong>SALIR</strong>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- MOBILE -->
+<div class="row d-md-none fixed-bottom">
+  <div class="w-100 bg-dark d-flex px-3 acciones-mobile">
+    <span class="ml-3 text-muted mt-3" routerLink="/home">Salir</span>
+    <span
+      class="mr-3 ml-auto"
+      [ngClass]="saveLoading ? 'text-muted' : ''"
+      (click)="callSave()"
+      [ladda]="saveLoading"
+      data-style="expand-left"
+    >Guardar</span>
+  </div>
+</div>
 \ No newline at end of file
@@ -0,0 +1,96 @@
+.acciones-mobile {
+  line-height: 0.5em;
+  color: orange;
+  font-size: 1.25em
+}
+
+.botonera-lateral {
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 402px;
+  &.teclado{
+      top: 449px;
+      z-index: 100000;
+  }
+  .row{
+      margin: 0 !important;
+      pointer-events: none;
+  }
+
+  .container{
+      @media (min-width: 768px){
+          display: grid !important;
+      }
+  }
+
+  button{
+      pointer-events: all;
+      background-color: #DDD;
+  }
+
+  .teclado-activar {
+      background-color: #17d236 !important;
+      color: #FFF !important;
+  }
+  div[ladda]{
+      background-color: #DDD;
+  }
+
+  button, .btn-group-toggle{
+      background-color: #DDD;
+      color: #000;
+      text-transform: uppercase;
+      min-width: 109px;
+      &:hover{
+          color: #FFF;
+          .boton-activar-teclado{
+              color: #FFF;
+          }
+          background-color: #000;
+      }
+  }
+  
+  
+  .btn-group-toggle{
+      pointer-events: all;
+      &.active{
+          background-color: transparent;
+          .boton-activar-teclado{
+              color: #FFF;
+          }
+      }
+      
+      .boton-activar-teclado{
+          cursor: pointer;
+          color: #000;
+          background-color: transparent;
+      }
+
+      input{
+          display: none;
+      }
+  }
+
+  .guardado{
+      animation:guardado 4s 1;
+      -webkit-animation:guardado 4s 1; /* Safari and Chrome */
+  }
+
+  @keyframes guardado
+  {
+      0%      {background:#DDD; color: #000;}
+      25%     {background:#28a745; color: #FFF;}
+      75%     {background:#28a745; color: #FFF;}
+      100%    {background:#DDD; color: #000;}
+  }
+
+  @-webkit-keyframes guardado /* Safari and Chrome */
+  {
+      0%      {background:#DDD; color: #000;}
+      25%     {background:#28a745; color: #FFF;}
+      75%     {background:#28a745; color: #FFF;}
+      100%    {background:#DDD; color: #000;}
+  }
+}
@@ -0,0 +1,25 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+@Component({
+  selector: 'app-acciones',
+  templateUrl: './acciones.component.html',
+  styleUrls: ['./acciones.component.scss']
+})
+export class AccionesComponent implements OnInit {
+
+  @Output() guardar = new EventEmitter<any>();
+  saveLoading = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  callSave() {
+    //llamo función guardar pasada en el componente
+    this.saveLoading = true;
+
+    setTimeout(() => {
+      this.saveLoading = false;
+    }, 10000);
+  }
+}
...	...	@@ -0,0 +1,39 @@
	1	+<!-- DESKTOP -->
	2	+<div class="container botonera-lateral">
	3	+ <div class="row">
	4	+ <div class="col-auto my-2 col-2 offset-10 d-none d-md-flex" style="min-height: 176px">
	5	+ <div class="px-2 mt-auto">
	6	+ <div class="container">
	7	+ <div class="row">
	8	+ <button
	9	+ (click)="callSave()"
	10	+ [ladda]="saveLoading"
	11	+ type="button"
	12	+ title="Guardar"
	13	+ class="btn btn-block border border-dark"
	14	+ data-spinner-color="#000000"
	15	+ data-size="s">
	16	+ <strong>GUARDAR</strong>
	17	+ </button>
	18	+ <button routerLink="/home" type="button" title="Salir" class="btn btn-block border border-dark">
	19	+ <strong>SALIR</strong>
	20	+ </button>
	21	+ </div>
	22	+ </div>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+</div>
	27	+<!-- MOBILE -->
	28	+<div class="row d-md-none fixed-bottom">
	29	+ <div class="w-100 bg-dark d-flex px-3 acciones-mobile">
	30	+ <span class="ml-3 text-muted mt-3" routerLink="/home">Salir</span>
	31	+ <span
	32	+ class="mr-3 ml-auto"
	33	+ [ngClass]="saveLoading ? 'text-muted' : ''"
	34	+ (click)="callSave()"
	35	+ [ladda]="saveLoading"
	36	+ data-style="expand-left"
	37	+ >Guardar</span>
	38	+ </div>
	39	+</div>
0	40	\ No newline at end of file
...	...	@@ -0,0 +1,96 @@
	1	+.acciones-mobile {
	2	+ line-height: 0.5em;
	3	+ color: orange;
	4	+ font-size: 1.25em
	5	+}
	6	+
	7	+.botonera-lateral {
	8	+ pointer-events: none;
	9	+ position: absolute;
	10	+ left: 0;
	11	+ right: 0;
	12	+ top: 402px;
	13	+ &.teclado{
	14	+ top: 449px;
	15	+ z-index: 100000;
	16	+ }
	17	+ .row{
	18	+ margin: 0 !important;
	19	+ pointer-events: none;
	20	+ }
	21	+
	22	+ .container{
	23	+ @media (min-width: 768px){
	24	+ display: grid !important;
	25	+ }
	26	+ }
	27	+
	28	+ button{
	29	+ pointer-events: all;
	30	+ background-color: #DDD;
	31	+ }
	32	+
	33	+ .teclado-activar {
	34	+ background-color: #17d236 !important;
	35	+ color: #FFF !important;
	36	+ }
	37	+ div[ladda]{
	38	+ background-color: #DDD;
	39	+ }
	40	+
	41	+ button, .btn-group-toggle{
	42	+ background-color: #DDD;
	43	+ color: #000;
	44	+ text-transform: uppercase;
	45	+ min-width: 109px;
	46	+ &:hover{
	47	+ color: #FFF;
	48	+ .boton-activar-teclado{
	49	+ color: #FFF;
	50	+ }
	51	+ background-color: #000;
	52	+ }
	53	+ }
	54	+
	55	+
	56	+ .btn-group-toggle{
	57	+ pointer-events: all;
	58	+ &.active{
	59	+ background-color: transparent;
	60	+ .boton-activar-teclado{
	61	+ color: #FFF;
	62	+ }
	63	+ }
	64	+
	65	+ .boton-activar-teclado{
	66	+ cursor: pointer;
	67	+ color: #000;
	68	+ background-color: transparent;
	69	+ }
	70	+
	71	+ input{
	72	+ display: none;
	73	+ }
	74	+ }
	75	+
	76	+ .guardado{
	77	+ animation:guardado 4s 1;
	78	+ -webkit-animation:guardado 4s 1; /* Safari and Chrome */
	79	+ }
	80	+
	81	+ @keyframes guardado
	82	+ {
	83	+ 0% {background:#DDD; color: #000;}
	84	+ 25% {background:#28a745; color: #FFF;}
	85	+ 75% {background:#28a745; color: #FFF;}
	86	+ 100% {background:#DDD; color: #000;}
	87	+ }
	88	+
	89	+ @-webkit-keyframes guardado /* Safari and Chrome */
	90	+ {
	91	+ 0% {background:#DDD; color: #000;}
	92	+ 25% {background:#28a745; color: #FFF;}
	93	+ 75% {background:#28a745; color: #FFF;}
	94	+ 100% {background:#DDD; color: #000;}
	95	+ }
	96	+}
...	...	@@ -0,0 +1,25 @@
	1	+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
	2	+@Component({
	3	+ selector: 'app-acciones',
	4	+ templateUrl: './acciones.component.html',
	5	+ styleUrls: ['./acciones.component.scss']
	6	+})
	7	+export class AccionesComponent implements OnInit {
	8	+
	9	+ @Output() guardar = new EventEmitter<any>();
	10	+ saveLoading = false;
	11	+
	12	+ constructor() { }
	13	+
	14	+ ngOnInit() {
	15	+ }
	16	+
	17	+ callSave() {
	18	+ //llamo función guardar pasada en el componente
	19	+ this.saveLoading = true;
	20	+
	21	+ setTimeout(() => {
	22	+ this.saveLoading = false;
	23	+ }, 10000);
	24	+ }
	25	+}