From c6f805b12e01eeb7e74c6904a3f095416f8dd4c5 Mon Sep 17 00:00:00 2001 From: mpuebla Date: Mon, 2 Sep 2019 12:46:34 -0300 Subject: [PATCH] First commit --- .gitignore | 3 + angular.json | 7 +- package-lock.json | 20 +++ package.json | 4 + src/app/app-routing.module.ts | 7 +- src/app/app.component.html | 20 --- src/app/app.module.ts | 10 +- .../abm-imagenes/abm-imagenes.component.html | 105 ++++++++++++ .../abm-imagenes/abm-imagenes.component.scss | 18 +++ .../abm-imagenes/abm-imagenes.component.spec.ts | 25 +++ .../abm-imagenes/abm-imagenes.component.ts | 124 +++++++++++++++ src/app/components/header/header.component.html | 8 + src/app/components/header/header.component.scss | 0 src/app/components/header/header.component.spec.ts | 25 +++ src/app/components/header/header.component.ts | 18 +++ src/app/services/imagenes.service.spec.ts | 12 ++ src/app/services/imagenes.service.ts | 28 ++++ src/app/wrappers/categoria.ts | 8 + src/app/wrappers/producto.ts | 98 ++++++++++++ src/app/wrappers/sinonimo.ts | 10 ++ src/assets/scss/animation.scss | 177 +++++++++++++++++++++ src/assets/scss/bootstrap-override.scss | 82 ++++++++++ src/etc/AppSettings ejemplo.ts | 3 + src/styles.scss | 161 ++++++++++++++++++- 24 files changed, 948 insertions(+), 25 deletions(-) create mode 100644 src/app/components/abm-imagenes/abm-imagenes.component.html create mode 100644 src/app/components/abm-imagenes/abm-imagenes.component.scss create mode 100644 src/app/components/abm-imagenes/abm-imagenes.component.spec.ts create mode 100644 src/app/components/abm-imagenes/abm-imagenes.component.ts create mode 100644 src/app/components/header/header.component.html create mode 100644 src/app/components/header/header.component.scss create mode 100644 src/app/components/header/header.component.spec.ts create mode 100644 src/app/components/header/header.component.ts create mode 100644 src/app/services/imagenes.service.spec.ts create mode 100644 src/app/services/imagenes.service.ts create mode 100644 src/app/wrappers/categoria.ts create mode 100644 src/app/wrappers/producto.ts create mode 100644 src/app/wrappers/sinonimo.ts create mode 100644 src/assets/scss/animation.scss create mode 100644 src/assets/scss/bootstrap-override.scss create mode 100644 src/etc/AppSettings ejemplo.ts diff --git a/.gitignore b/.gitignore index 86d943a..169c706 100644 --- a/.gitignore +++ b/.gitignore @@ -44,3 +44,6 @@ testem.log # System Files .DS_Store Thumbs.db + +# Project Settings +src/etc/AppSettings.ts diff --git a/angular.json b/angular.json index 4793c04..83323bc 100644 --- a/angular.json +++ b/angular.json @@ -28,9 +28,14 @@ "src/assets" ], "styles": [ + "./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss" ], - "scripts": [] + "scripts": [ + "node_modules/jquery/dist/jquery.slim.min.js", + "node_modules/popper.js/dist/umd/popper.min.js", + "node_modules/bootstrap/dist/js/bootstrap.min.js" + ] }, "configurations": { "production": { diff --git a/package-lock.json b/package-lock.json index 2dc4c8d..68c4680 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2191,6 +2191,11 @@ "multicast-dns-service-types": "^1.1.0" } }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -5372,6 +5377,11 @@ "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=", "dev": true }, + "jquery": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz", + "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==" + }, "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", @@ -6946,6 +6956,11 @@ "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "dev": true }, + "ngx-bootstrap": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.1.1.tgz", + "integrity": "sha512-++6+YHbIWTR/3sHH9C0aelIP25KMKhylWSEet6HonZfVr8quzEUjq6xEzTnDbZpnxlly2j58Gg0O9DWXu0UCxA==" + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -7705,6 +7720,11 @@ "find-up": "^3.0.0" } }, + "popper.js": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz", + "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==" + }, "portfinder": { "version": "1.0.23", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.23.tgz", diff --git a/package.json b/package.json index 94c5bb2..5c94273 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,10 @@ "@angular/platform-browser": "~8.2.0", "@angular/platform-browser-dynamic": "~8.2.0", "@angular/router": "~8.2.0", + "bootstrap": "^4.3.1", + "jquery": "^3.4.1", + "ngx-bootstrap": "^5.1.1", + "popper.js": "^1.15.0", "rxjs": "~6.4.0", "tslib": "^1.10.0", "zone.js": "~0.9.1" diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 06c7342..8caef86 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,8 +1,13 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { AbmImagenesComponent } from './components/abm-imagenes/abm-imagenes.component'; -const routes: Routes = []; +const routes: Routes = [ + { path: '', component: AbmImagenesComponent }, + { path: 'abm-imagenes', component: AbmImagenesComponent }, + { path: '**', redirectTo: '/home', pathMatch: 'full' }, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.html b/src/app/app.component.html index 0f3d9d8..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,21 +1 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- - diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..a61dbff 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,14 +3,20 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { AbmImagenesComponent } from './components/abm-imagenes/abm-imagenes.component'; +import { PaginationModule } from 'ngx-bootstrap/pagination'; +import { HeaderComponent } from './components/header/header.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + AbmImagenesComponent, + HeaderComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + PaginationModule.forRoot() ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/components/abm-imagenes/abm-imagenes.component.html b/src/app/components/abm-imagenes/abm-imagenes.component.html new file mode 100644 index 0000000..bcf97e2 --- /dev/null +++ b/src/app/components/abm-imagenes/abm-imagenes.component.html @@ -0,0 +1,105 @@ +

abm-imagenes works!

+ + +
+
+
+

Configuración de imágenes

+
+
+ +
+
+ + +
+
+ +
+
+
Productos
+ + + + + + + + + + + + + + +
NombreImagen
+

{{articulo.DET_LAR}}

+

Descripción: {{articulo.DET_LAR}}

+

Sector: {{articulo.CodSec}}

+

Código: {{articulo.CodArt}}

+ 		+ + + + + + + + + +
+ + +
+
+
+
+ +
+
+ +
+
+ +
diff --git a/src/app/components/abm-imagenes/abm-imagenes.component.scss b/src/app/components/abm-imagenes/abm-imagenes.component.scss new file mode 100644 index 0000000..ccad32a --- /dev/null +++ b/src/app/components/abm-imagenes/abm-imagenes.component.scss @@ -0,0 +1,18 @@ +.search .form-control-search { + position: absolute; + z-index: 2; + display: block; + text-align: center; + pointer-events: none; + color: #aaa; + line-height: inherit; +} + +.custom-file-input:lang(es) ~ .custom-file-label::after { + content: "Elegir"; +} + +.btn-delete-image { + top: 0; + left: 95%; +} diff --git a/src/app/components/abm-imagenes/abm-imagenes.component.spec.ts b/src/app/components/abm-imagenes/abm-imagenes.component.spec.ts new file mode 100644 index 0000000..81cf025 --- /dev/null +++ b/src/app/components/abm-imagenes/abm-imagenes.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AbmImagenesComponent } from './abm-imagenes.component'; + +describe('AbmImagenesComponent', () => { + let component: AbmImagenesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AbmImagenesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AbmImagenesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/abm-imagenes/abm-imagenes.component.ts b/src/app/components/abm-imagenes/abm-imagenes.component.ts new file mode 100644 index 0000000..9e49bd1 --- /dev/null +++ b/src/app/components/abm-imagenes/abm-imagenes.component.ts @@ -0,0 +1,124 @@ +import { Component, OnInit } from '@angular/core'; +import { appSettings } from 'src/etc/AppSettings'; +import { ImagenesService } from 'src/app/services/imagenes.service'; +import { Producto } from 'src/app/wrappers/producto'; +import { HttpClient } from '@angular/common/http'; + +@Component({ + selector: 'app-amb-imagenes', + templateUrl: './abm-imagenes.component.html', + styleUrls: ['./abm-imagenes.component.scss'] +}) + +export class AbmImagenesComponent implements OnInit { + + apiUrl = appSettings.apiImagenes; + articulos: Producto[] = []; + private auxProductos: Producto[] = []; + private searchTerm: string = ''; + private paginationData: any; + private disabledPaginador: boolean = false; + + constructor(private productoService: ImagenesService, private http: HttpClient) { } + + ngOnInit() { + + this.productoService.getAllWithPaginator() + .subscribe((res) => { + + this.articulos = res.data; + this.paginationData = res.pagination; + this.filterItems(); + }, error => console.error(error)); + } + + onFileSelected(event, articulo: Producto) { + + let auxFiles: FileList = event.target.files; + Array.from(auxFiles).forEach(file => { + + this.onLoad(file) + .then(result => { + // articulo.imagenes.push({ + // name: file.name + articulo.CodArt + articulo.CodSec, + // fromGallery: true, + // imagen: result, + // id_articulo: articulo.id + // }); + let imagenAguardar = { + imagen: { + name: `${articulo.CodSec}${articulo.CodArt}${file.name}`, + base64: result, + codigo: articulo.CodArt, + sector: articulo.CodSec, + id_articulo: articulo.id + }, + articulo: articulo + }; + this.saveInBase(imagenAguardar); + }); + }) + } + + filterItems() { + + this.auxProductos = this.articulos.filter(x => { + return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) || + x.CodArt.toString().includes(this.searchTerm.toLowerCase()) || + x.CodSec.toString().includes(this.searchTerm.toLowerCase()); + }); + } + + saveInBase(imagenAguardar) { + + this.productoService.saveInBase(imagenAguardar.imagen) + .subscribe(res => { + imagenAguardar.imagen['id'] = res[0]; + imagenAguardar.imagen['fromGallery'] = true; + imagenAguardar.articulo.imagenes.push(imagenAguardar.imagen); + }, error => console.error(error)); + } + + onLoad(file) { + + return new Promise((resolve, reject) => { + + var fr = new FileReader(); + + fr.onload = function () { + + resolve(fr.result); + }; + + fr.readAsDataURL(file); + }); + + } + + deleteImage(imagenes, index: number) { + + if (!imagenes[index].name) { + imagenes[index].name = imagenes[index].imagen; + } + + this.productoService.deleteImage(imagenes[index]) + .subscribe(res => { + + if (res) { + imagenes.splice(index, 1); + } + }, error => console.error(error)); + } + + pageChanged(event: any): void { + this.disabledPaginador = true; + this.productoService.getAllWithPaginator(event.page) + .subscribe((res) => { + this.disabledPaginador = false; + this.articulos = res.data; + this.paginationData = res.pagination; + this.filterItems(); + }, error => console.error(error)); + } + +} diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html new file mode 100644 index 0000000..c218c0c --- /dev/null +++ b/src/app/components/header/header.component.html @@ -0,0 +1,8 @@ +
+
+ +
+
+ +
+
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts new file mode 100644 index 0000000..2d0479d --- /dev/null +++ b/src/app/components/header/header.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts new file mode 100644 index 0000000..22f995b --- /dev/null +++ b/src/app/components/header/header.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; +import { appSettings } from 'src/etc/AppSettings'; + +@Component({ + selector: 'app-header', + templateUrl: './header.component.html', + styleUrls: ['./header.component.scss'] +}) +export class HeaderComponent implements OnInit { + + private apiImagenes : string = appSettings.apiImagenes; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/services/imagenes.service.spec.ts b/src/app/services/imagenes.service.spec.ts new file mode 100644 index 0000000..25c967d --- /dev/null +++ b/src/app/services/imagenes.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { ImagenesService } from './imagenes.service'; + +describe('ImagenesService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: ImagenesService = TestBed.get(ImagenesService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/imagenes.service.ts b/src/app/services/imagenes.service.ts new file mode 100644 index 0000000..f7e254c --- /dev/null +++ b/src/app/services/imagenes.service.ts @@ -0,0 +1,28 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; +import { appSettings } from 'src/etc/AppSettings'; + +@Injectable({ + providedIn: 'root' +}) +export class ImagenesService { + + constructor(private http: HttpClient) { } + + getAllWithPaginator(page: number = 1): Observable { + + return this.http.get(`${appSettings.apiImagenes}/articulos/${page}`); + } + + saveInBase(body): Observable { + + return this.http.post(`${appSettings.apiImagenes}/imagenes/guardar`, body); + } + + deleteImage(body): Observable { + + return this.http.post(`${appSettings.apiImagenes}/imagen/borrar`, body); + } + +} diff --git a/src/app/wrappers/categoria.ts b/src/app/wrappers/categoria.ts new file mode 100644 index 0000000..634a807 --- /dev/null +++ b/src/app/wrappers/categoria.ts @@ -0,0 +1,8 @@ +export interface Categoria { + id: number, + detalle: string, + es_promocion: boolean, + vigencia_desde: Date, + vigencia_hasta: Date, + ES_PEDIDO: boolean +} diff --git a/src/app/wrappers/producto.ts b/src/app/wrappers/producto.ts new file mode 100644 index 0000000..068df1e --- /dev/null +++ b/src/app/wrappers/producto.ts @@ -0,0 +1,98 @@ +export interface Producto { + CodSec: number; + CodArt: number; + DetArt: string; + CodRub: number; + Costo: number; + PreNet: number; + ImpInt: number; + UniVen: number; + FecCos: Date; + UltAct: Date; + CodPro: number; + ExiDep: number; + ExiVta: number; + MinDep: number; + MaxDep: number; + MinPVE: number; + MaxPVE: number; + ENTTur: number; + SINTur: number; + SALTur: number; + IvaSN: boolean; + DepSN: boolean; + RubMay: number; + PreVen: number; + IvaCO: number; + TIP: string; + IMPIVA: number; + ENTADM: number; + SALADM: number; + CODIIN: number; + PRO: boolean; + FPP: boolean; + ESS: boolean; + FID: Date; + NID: number; + FIV: Date; + NIV: number; + COO: string; + CAG: string; + CAP: number; + UTL: number; + NHA: boolean; + PID: boolean; + PRV: number; + PRD: number; + ImpInt2: number; + E_HD: string; + C_HD: string; + CLA: number; + UNICAP: number; + ELBPRO: string; + PPP: number; + ALI: number; + BAL_TIPO: string; + PER_MAY: boolean; + ES_MAY: boolean; + CLA_MAY: number; + PME_CMP: string; + USA_BAL: boolean; + DET_LAR: string; + ROTULO: string; + REC_MANUAL: boolean; + E_HD1: string; + C_HD1: string; + ImpInt3: number; + FUA_MAE_YPF: Date; + CPQ: number; + EPQ: string; + BPQ: number; + PUPQ: number; + CORVTO: boolean; + CORVTO_COSTO: number; + UTLFR: number; + FAMILIA: number; + ES_LUB: boolean; + ES_FERT: boolean; + AutoFac: boolean; + LitrosPCD: number; + LisPCD: number; + ImpLey23966: boolean; + es_bio: boolean; + ExpArbaRev: boolean; + ES_AGROQ: boolean; + ES_PLAST: boolean; + es_bio_por: string; + IMP_IMP_INT: boolean; + id: number; + nombreImagen?: any; + categoria_selfservice: number; + cantidad?: number; + esPadre?: boolean; + codigoBarra: string; + idSinonimo?: number; + productos?: Producto[]; + tieneSinonimos?: boolean; + imagenes: object[] +} diff --git a/src/app/wrappers/sinonimo.ts b/src/app/wrappers/sinonimo.ts new file mode 100644 index 0000000..901b683 --- /dev/null +++ b/src/app/wrappers/sinonimo.ts @@ -0,0 +1,10 @@ +import { Producto } from './producto'; + +export interface Sinonimo { + + ID_SIN: number, + descripcion: string, + productos: Producto[], + productoPadre?: number; + cantidad? : number; +} diff --git a/src/assets/scss/animation.scss b/src/assets/scss/animation.scss new file mode 100644 index 0000000..79f75bf --- /dev/null +++ b/src/assets/scss/animation.scss @@ -0,0 +1,177 @@ +.fade-in { + -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; + animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; +} + +@-webkit-keyframes fadein { + 0% { + -webkit-transform: translateZ(80px); + transform: translateZ(80px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 1; + } +} + +@keyframes fadein { + 0% { + -webkit-transform: translateZ(80px); + transform: translateZ(80px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 1; + } +} + +.fade-right { + animation: faderight 1s; + -moz-animation: faderight 1s; /* Firefox */ + -webkit-animation: faderight 1s; /* Safari and Chrome */ + -o-animation: faderight 1s; /* Opera */ +} + +@keyframes faderight { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@-moz-keyframes faderight { + /* Firefox */ + from { + opacity: 0; + -moz-transform: translateX(-20px); + } + to { + opacity: 1; + -moz-transform: translateX(0); + } +} + +@-webkit-keyframes faderight { + /* Safari and Chrome */ + from { + opacity: 0; + -webkit-transform: translateX(-20px); + } + to { + opacity: 1; + -webkit-transform: translateX(0); + } +} + +.fade-left { + -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; +} + +@-webkit-keyframes fadeleft { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + opacity: 1; + } + 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + opacity: 1; + } +} + +@keyframes fadeleft { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + opacity: 1; + } + 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + opacity: 1; + } +} + +.fade-bottom { + -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; + animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; +} + +@-webkit-keyframes fade-bottom { + 0% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); + -webkit-transform-origin: 100% 0%; + transform-origin: 100% 0%; + } + 100% { + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: 100% 0%; + transform-origin: 100% 0%; + } +} + +@keyframes fade-bottom { + 0% { + -webkit-transform: scaleY(0.4); + transform: scaleY(0.4); + -webkit-transform-origin: 100% 0%; + transform-origin: 100% 0%; + } + 100% { + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: 100% 0%; + transform-origin: 100% 0%; + } +} + +.slide-in-bl { + -webkit-animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; +} + +@-webkit-keyframes slide-in-bl { + 0% { + -webkit-transform: translateY(1000px) translateX(-1000px); + transform: translateY(1000px) translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0) translateX(0); + transform: translateY(0) translateX(0); + opacity: 1; + } +} + +@keyframes slide-in-bl { + 0% { + -webkit-transform: translateY(1000px) translateX(-1000px); + transform: translateY(1000px) translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0) translateX(0); + transform: translateY(0) translateX(0); + opacity: 1; + } +} diff --git a/src/assets/scss/bootstrap-override.scss b/src/assets/scss/bootstrap-override.scss new file mode 100644 index 0000000..2734ee5 --- /dev/null +++ b/src/assets/scss/bootstrap-override.scss @@ -0,0 +1,82 @@ +@import "../../../node_modules/bootstrap/scss/functions"; +@import "../../../node_modules/bootstrap/scss/variables"; +@import "../../../node_modules/bootstrap/scss/mixins"; + +$primary: #2872ae; + +$theme-colors: ( + primary: $primary, + light: white +); + +.popover { + transform: translate3d(-425px, 0, -34px) !important; + min-width: 350px !important; + max-width: 425px !important; + border: none !important; + border-radius: 1.5rem !important; + padding: 0 !important; + background-color: $primary !important; + .popover-body { + padding: 0 !important; + } +} + +.bs-popover-left .arrow::after, +.bs-popover-auto[x-placement^="left"] .arrow::after { + border-left-color: $primary !important; +} + +.bs-popover-right .arrow::after, +.bs-popover-auto[x-placement^="right"] .arrow::after { + border-right-color: $primary !important; +} + +.bs-popover-top .arrow::after, +.bs-popover-auto[x-placement^="top"] .arrow::after { + border-top-color: $primary !important; +} + +.bs-popover-bottom .arrow::after, +.bs-popover-auto[x-placement^="bottom"] .arrow::after { + border-bottom-color: $primary !important; +} + +.list-group-item.active { + background-color: $primary !important; + border-color: $primary !important; +} + +.custom-radio .custom-control-label::before { + background-color: $primary !important; + border-color: $white !important; + border-width: 2px !important; +} + +.custom-control-input { + border-color: $white !important; + background-color: $primary !important; + color: $primary !important; + &:checked ~ .custom-control-label::before { + border-color: $white !important; + color: #fff !important; + background-color: $primary !important; + } + &:focus ~ .custom-control-label::before { + border-color: $white !important; + box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.7) !important; + } +} + +.carousel-control { + visibility: hidden !important; +} + +.carousel, .carousel-inner, .item { + height: 100% !important; + &:focus{ + outline: none !important; + } +} + +@import "../../../node_modules/bootstrap/scss/bootstrap"; diff --git a/src/etc/AppSettings ejemplo.ts b/src/etc/AppSettings ejemplo.ts new file mode 100644 index 0000000..31f991f --- /dev/null +++ b/src/etc/AppSettings ejemplo.ts @@ -0,0 +1,3 @@ +export const appSettings = { + // apiImagenes: 'http://10.231.45.117:4513/' +}; diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..864d8b9 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,160 @@ -/* You can add global styles to this file, and also import other style files */ +@import "./assets/scss/animation.scss"; +@import "./assets/scss/bootstrap-override.scss"; +@import "../node_modules/bootstrap/scss/_variables.scss"; + +html, +body { + background-color: #f0f0f0; + font-family: bahnschrift; + overflow: hidden !important; +} + +.disable-user-select { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.blue-gradient { + background: linear-gradient(0deg, #ffffff00, $white); +} + +.rounded { + border-radius: 1.5rem !important; +} + +.rounded-top-sm { + border-top-left-radius: 0.75rem !important; + border-top-right-radius: 0.75rem !important; +} + +.rounded-sm { + border-radius: 0.75rem !important; +} + +.card-effect { + &:active { + background-color: #c9c9c9b3 !important; + transition: background-color 0.5s; + } + &:focus { + background-color: #c9c9c9b3 !important; + transition: background-color 0.5s; + } +} + +.overflow-scroll { + overflow-y: auto !important; + overflow-x: hidden !important; + &::-webkit-scrollbar { + width: 1em; + } + &::-webkit-scrollbar-track { + border-radius: 10px; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); + background-color: $white; + } + &::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); + outline: 1px solid slategrey; + border-radius: 10px; + height: 12px; + &:active { + box-shadow: inset 0 0 8px $primary; + -webkit-box-shadow: inset 0 0 8px $primary; + } + } + &::-webkit-scrollbar-corner { + border-radius: 10px; + } +} + +.bg-gray { + background-color: #e6e6e6; +} + +.bg-primary-gradient { + background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); +} + +.bg-primary-gradient-horizontal { + background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%); +} + +.icon-dim { + height: 40px !important; + width: auto !important; + background-color: white !important; +} + +.text-purple { + color: $purple; +} + +.vh-70 { + min-height: auto !important; + max-height: 70vh !important; +} + +.vh-60 { + min-height: auto !important; + max-height: 60vh !important; +} + +.vh-50 { + min-height: auto !important; + max-height: 50vh !important; +} + +.spinner-lg { + width: 3rem !important; + height: 3rem !important; +} + +.sidebar { + right: 0; +} + +.background-image { + background-repeat: no-repeat; + background-size: cover; + position: fixed; +} + +.rounded-bottom-right { + border-bottom-right-radius: 10rem; + &:before { + border-radius: 0 40px 40px 0; + background-color: #fff; + } +} + +.rounded-top-left { + border-top-left-radius: 10rem; +} + +.bg-gray { + background-color: #cccccc; +} + +.cdk-overlay-container { + position: absolute; + top: 65%; + width: 100%; +} + +.min-h-40 { + min-height: 40px; +} + +.min-h-55 { + min-height: 55px; +} + +.pagination { + justify-content: center !important; + display: flex !important; +} -- 1.9.1