From 98e225a0152827dbe172a84ba907b6af98edca94 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Thu, 5 Sep 2024 10:04:52 +0300 Subject: [PATCH] little styling --- .../img-input/img-input.component.html | 13 + .../img-input/img-input.component.scss | 31 ++ .../qr-code/img-input/img-input.component.ts | 50 ++++ src/app/qr-code/qr-code.component.html | 280 ++++++------------ src/app/qr-code/qr-code.component.scss | 204 +++++++------ src/app/qr-code/qr-code.component.spec.ts | 23 -- src/app/qr-code/qr-code.component.ts | 80 ++--- 7 files changed, 319 insertions(+), 362 deletions(-) create mode 100644 src/app/qr-code/img-input/img-input.component.html create mode 100644 src/app/qr-code/img-input/img-input.component.scss create mode 100644 src/app/qr-code/img-input/img-input.component.ts delete mode 100644 src/app/qr-code/qr-code.component.spec.ts diff --git a/src/app/qr-code/img-input/img-input.component.html b/src/app/qr-code/img-input/img-input.component.html new file mode 100644 index 0000000..c2b404b --- /dev/null +++ b/src/app/qr-code/img-input/img-input.component.html @@ -0,0 +1,13 @@ +
+
+ +
+ + + + +
+
Загружается файл {{upload.file?.name}}
+ +
+
diff --git a/src/app/qr-code/img-input/img-input.component.scss b/src/app/qr-code/img-input/img-input.component.scss new file mode 100644 index 0000000..b052328 --- /dev/null +++ b/src/app/qr-code/img-input/img-input.component.scss @@ -0,0 +1,31 @@ +.input-img{ + display: flex; + gap: 24px; + align-items: end; + + .input-img-area{ + display: inline-flex; + border: 1px solid var(--clr-gr); + border-radius: 12px; + padding: 12px; + } + } + + input[type="file"]{ + width: 240px; + height: 100px; + overflow: hidden ; + background: center no-repeat; + background-size: contain; + display: block; + &::file-selector-button { + width: 240px; + height: 100px; + color: transparent; + background-color: transparent; + padding: 10px 20px; + + border: none; + cursor: pointer; + } + } \ No newline at end of file diff --git a/src/app/qr-code/img-input/img-input.component.ts b/src/app/qr-code/img-input/img-input.component.ts new file mode 100644 index 0000000..1e16430 --- /dev/null +++ b/src/app/qr-code/img-input/img-input.component.ts @@ -0,0 +1,50 @@ +import { NgIf } from '@angular/common'; +import { Component, EventEmitter, Output} from '@angular/core'; +import { AssetsService } from '../../_services/assets.service'; +import {HttpEventType, HttpResponse} from "@angular/common/http"; + +@Component({ + selector: 'img-input', + standalone: true, + imports: [NgIf], + templateUrl: './img-input.component.html', + styleUrl: './img-input.component.scss' +}) +export class ImgInputComponent { + public upload: any = {file: null, progress: 0}; + public asset: any; + public value: any; + @Output() change = new EventEmitter() + + constructor(private assetsService: AssetsService){} + + + get backGround(){ + return this.value?.links?'url('+this.value.links.thumb+')':'url(assets/img/nir_logo_top.svg)' + } + + clear() { + this.value = null; + this.setValue(); + } + + onFileInput(event: any) { + let file = event.target.files[0]; + this.upload.file = file; + this.assetsService.upload(file).subscribe((result) => { + if (result.type === HttpEventType.UploadProgress) { + this.upload.progress = Math.round(100 * result.loaded / result.total); + } else if (result instanceof HttpResponse) { + this.upload = {file: null, progress: 0}; + this.value = result.body.data; + this.setValue(); + } + }) + event.target.value = null; + } + + setValue(){ + this.change.emit(this.value) + } + +} diff --git a/src/app/qr-code/qr-code.component.html b/src/app/qr-code/qr-code.component.html index a5d3b6a..a8d4508 100644 --- a/src/app/qr-code/qr-code.component.html +++ b/src/app/qr-code/qr-code.component.html @@ -1,200 +1,106 @@ -
-
-
-
-
-
-
-
-

Введите текст или загрузите изображение

-
- -
-
- -
+
+
+
+ +

Данные

+
+ +
+ +

Изображения

+ +

Цвета

+
+
+

Фон

+
+ + +
+
+
+

Данные

+
+
+ +
-
-
-
-
- - - Line breaks are allowed -
+
+
+ + +
+
+ +
-
- -

Перетащите сюда или выберите файл в формате JPEG или PNG общим объемом не более 10 Мбайт.

-
-
Загружается файл {{upload.file?.name}}
-
-
-
-
-
-
- -
-
- -
-
-
-
- -
-
+
+ + +
+
+ +
-
-
-
-

Выберите цвет

-
- -
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
-
-
- -
-
- -
-
-
- - - - -
-
-
-
- -
-
- -
-
- -
-
- - - - - - -
-
-
-
-
-
- -
- -
-
-
-
+
+
+

Метки

+ +
+ +
-
-
-
-

Добавить изображение

-
- -
-
- -
-
-
- -
- -

Перетащите сюда или выберите файл в формате JPEG или PNG общим объемом не более 10 Мбайт.

-
-
Загружается файл {{upload.file?.name}}
-
-
-
-
-
-
- -
-
- -
+
+ +
- -
-
-
-

Ручной дизайн

-
- -
-
- -
-
-
- Обычный - Скругленные края -
-
-
-
-
-

Созданный QR-CODE

-
- +

Битовый элемент

+
+ + + +
+ + +
+
+

Созданный QR-CODE

+
+ +
diff --git a/src/app/qr-code/qr-code.component.scss b/src/app/qr-code/qr-code.component.scss index 05846b4..0b4e46a 100644 --- a/src/app/qr-code/qr-code.component.scss +++ b/src/app/qr-code/qr-code.component.scss @@ -2,6 +2,113 @@ box-sizing: border-box } +.form-group{ + display: flex; + flex-direction: column; + gap: 48px; +} +input[type="file"]{ + width: 240px; + height: 100px; + overflow: hidden ; + background: center no-repeat; + background-size: contain; + display: block; + &::file-selector-button { + width: 240px; + height: 100px; + color: transparent; + background-color: transparent; + padding: 10px 20px; + + border: none; + cursor: pointer; + } +} +h3{ + margin-bottom: -24px; + border-bottom: 1px solid var(--clr-gr); +} + +label, input, select{ + cursor: pointer; +} + +.input-color{ + display: flex; + align-items: end; + [type=color]{ + width: 48px; + height: 48px; + } + gap:24px; +} + +.input-color-stroke, .bits{ + display: flex; + flex-direction: column; + gap: 24px; + .input-color-stroke-type{ + display: flex; + flex-direction: column; + gap: 8px; + } + .input-color-stroke-value{ + display: flex; + flex-direction: column; + gap: 8px; + } +} + +.input-img{ + display: flex; + gap: 24px; + align-items: end; + + .input-img-area{ + display: inline-flex; + border: 1px solid var(--clr-gr); + border-radius: 12px; + padding: 12px; + } +} +.colors{ + display: flex; + flex-direction: row; + gap: 24px; + .color-element{ + flex-grow: 1; + flex-shrink: 0; + flex-basis: 33%; + display: flex; + flex-direction: column; + gap: 16px; + } ; +} + +select{ + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + option{ + font-family: Montserrat; + } + .option{ + font-family: Montserrat; + } +} +.fill{ + height: 10px; + background-color: #495057; +} +input[type="file"]::file-se { + background-color: #4CAF50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} textarea { overflow: auto; resize: vertical @@ -28,89 +135,13 @@ textarea { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; - margin-right: -15px; - margin-left: -15px + } .block .block-options { padding: 32px } -.block .accordion .pane { - margin-bottom: 4px -} - -.block .accordion .pane .pane-header { - cursor: pointer; - -webkit-transition: all .3s; - transition: all .3s; - background: #fff; - font-size: 1.1rem; - position: relative; - font-weight: 500; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 48px; - box-shadow: 0 0 6px rgba(0,0,0,.05) -} - -.block .accordion .pane .pane-header .title { - padding: 0 16px; - text-transform: uppercase; - font-size: 1rem; - margin: 0; - -webkit-flex-shrink: 1; - -webkit-flex-grow: 1; - flex-grow: 1; - flex-shrink: 1; - overflow: hidden; - white-space: nowrap; - line-height: 48px; - text-align: initial -} - -.block .accordion .pane .pane-header .icon { - width: 48px; - text-align: center; - -webkit-flex-shrink: 0; - -webkit-flex-grow: 0; - flex-grow: 0; - flex-shrink: 0; - background: #f2f8fc; - line-height: 48px -} - -.block .accordion .pane .pane-header .minus, .block .accordion .pane .pane-header .plus { - padding: 0 16px; - -webkit-flex-shrink: 0; - -webkit-flex-grow: 0; - flex-grow: 0; - flex-shrink: 0; - line-height: 48px; - color: rgba(111,120,127,.5); - font-size: .9rem -} - -.block .accordion .pane .pane-header .minus { - display: none -} - -.block .accordion .pane .pane-header:hover { - background-color: #f2f8fc; - box-shadow: none -} - -.block.accordion .pane.active .pane-content { - padding: 1rem 0; - display: block; - opacity: 1; - visibility: visible; - max-height: 1400px; - overflow: visible; - -webkit-transition: all .5s ease-in-out 0s,opacity .25s ease-in-out .2s; - transition: all .5s ease-in-out 0s,opacity .25s ease-in-out .2s -} .form-control { display: block; @@ -126,25 +157,6 @@ textarea { transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out } -.block .accordion .pane.active .pane-content { - padding: 1rem 0; - display: block; - opacity: 1; - visibility: visible; - max-height: 1400px; - overflow: visible; - -webkit-transition: all .5s ease-in-out 0s,opacity .25s ease-in-out .2s; - transition: all .5s ease-in-out 0s,opacity .25s ease-in-out .2s -} - -.body .accordion .pane .pane-content .color-group label { - font-weight: 400 -} - -.block .accordion .pane .pane-content .color-group-body { - padding-bottom: 0 -} - .form-check { position: relative; display: block; diff --git a/src/app/qr-code/qr-code.component.spec.ts b/src/app/qr-code/qr-code.component.spec.ts deleted file mode 100644 index a87973f..0000000 --- a/src/app/qr-code/qr-code.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { QrCodeComponent } from './qr-code.component'; - -describe('QrCodeComponent', () => { - let component: QrCodeComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [QrCodeComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(QrCodeComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/qr-code/qr-code.component.ts b/src/app/qr-code/qr-code.component.ts index 74ceede..e5fc600 100644 --- a/src/app/qr-code/qr-code.component.ts +++ b/src/app/qr-code/qr-code.component.ts @@ -1,10 +1,8 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {Router} from "@angular/router"; +import {Component, Input, OnInit, HostListener} from '@angular/core'; import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms"; -import {NgIf} from "@angular/common"; +import {JsonPipe, NgIf} from "@angular/common"; import {FormsService} from "../_services/forms.service"; -import {HttpEventType, HttpResponse} from "@angular/common/http"; -import {AssetsService} from "../_services/assets.service"; +import { ImgInputComponent } from './img-input/img-input.component'; @Component({ selector: 'qr-code', @@ -12,19 +10,21 @@ import {AssetsService} from "../_services/assets.service"; imports: [ FormsModule, NgIf, - ReactiveFormsModule + ReactiveFormsModule, + JsonPipe, + ImgInputComponent ], templateUrl: './qr-code.component.html', styleUrl: './qr-code.component.scss' }) export class QrCodeComponent implements OnInit{ - @Input() field!: any; - public asset: any; + public QrCodeForm: FormGroup; public dragOver = false; public upload: any = {file: null, progress: 0}; - constructor(private formBuilder:FormBuilder, private formsService: FormsService, private assetsService: AssetsService){} + + constructor(private formBuilder:FormBuilder, private formsService: FormsService){} ngOnInit() { this.QrCodeForm = this.formBuilder.group({ @@ -40,7 +40,8 @@ export class QrCodeComponent implements OnInit{ 'custom-eye-color' : [false], 'outside-eye-color' : ['#000000'], 'inner-eye-color' : ['#000000'], - 'image' : [] + 'image' : [], + 'bit-type' : ['normal'] }); } @@ -54,56 +55,23 @@ export class QrCodeComponent implements OnInit{ }); } - get initialValue() { - return this.field.value?.data[0]; + + + get colorType(){ + return this.QrCodeForm.value['color-type'] } - get control() { - return this.QrCodeForm.controls[this.field.name]; + + get bitType(){ + return this.QrCodeForm.value['bit-type'] } - get value() { - return this.control?.value || []; + + get EyeType(){ + return this.QrCodeForm.value['custom-eye-color'] } - set value(asset: any) { - this.asset = asset; - this.control?.setValue(asset?.id); + + setImgFile(value){ + console.log(value) } - setValue(value: any) { - this.control.setValue(value); - this.control.markAsTouched(); - } - - clear() { - this.control.markAsTouched(); - this.value = null; - } - - - - onFileInput(event: any) { - this.uploadFiles(event.target.files); - event.target.value = null; - } - - uploadFiles(files: any) { - for (let file of files) { - this.uploadFile(file); - } - } - uploadFile(file: File) { - this.upload.file = file; - this.assetsService.upload(file).subscribe((result) => { - if (result.type === HttpEventType.UploadProgress) { - this.upload.progress = Math.round(100 * result.loaded / result.total); - } else if (result instanceof HttpResponse) { - this.upload = {file: null, progress: 0}; - this.value = result.body.data; - this.control.markAsTouched(); - } - }, error => { - this.upload = {file: null, progress: 0}; - alert(error.error.message); - }); - } }