Commit 654425c39950687c7efc62e0ecc31a790065f856
1 parent
b9135c990b
Exists in
master
acciones botones salir, guardar
Showing
3 changed files
with
160 additions
and
0 deletions
Show diff stats
src/app/acciones/acciones.component.html
| File was created | 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> |
src/app/acciones/acciones.component.scss
| File was created | 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 | } | ||
| 97 |
src/app/acciones/acciones.component.ts
| File was created | 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 | } | ||
| 26 |