From 8cd5dd1f8e5256e5777ea7bea2a92ad20c4758a0 Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Sat, 9 Mar 2024 18:16:20 +0300 Subject: [PATCH] Added info modal window --- package.json | 1 + pnpm-lock.yaml | 18 ++++++++++-- src/app/app.component.html | 1 + src/app/app.component.less | 5 ++-- src/app/app.component.ts | 3 +- src/app/modules/modal/modal.component.html | 1 + src/app/modules/modal/modal.component.less | 0 src/app/modules/modal/modal.component.ts | 29 ++++++++++++++++++++ src/app/modules/panel/panel.component.less | 1 + src/app/modules/window/window.component.html | 10 +++++++ src/app/modules/window/window.component.less | 24 ++++++++++++++++ src/app/modules/window/window.component.ts | 19 +++++++++++++ src/styles.less | 21 ++++++++++++++ 13 files changed, 128 insertions(+), 5 deletions(-) create mode 100644 src/app/modules/modal/modal.component.html create mode 100644 src/app/modules/modal/modal.component.less create mode 100644 src/app/modules/modal/modal.component.ts create mode 100644 src/app/modules/window/window.component.html create mode 100644 src/app/modules/window/window.component.less create mode 100644 src/app/modules/window/window.component.ts diff --git a/package.json b/package.json index 0dc91bf..9d625ee 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@fortawesome/free-brands-svg-icons": "^6.4.2", "@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@ngneat/dialog": "5.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b26c8b9..45ad71a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ dependencies: '@fortawesome/free-solid-svg-icons': specifier: ^6.4.2 version: 6.5.1 + '@ngneat/dialog': + specifier: 5.0.0 + version: 5.0.0(@angular/core@17.2.3) rxjs: specifier: ~7.8.0 version: 7.8.1 @@ -2433,6 +2436,15 @@ packages: call-bind: 1.0.7 dev: true + /@ngneat/dialog@5.0.0(@angular/core@17.2.3): + resolution: {integrity: sha512-+qLGaLcNXQ5PVtlv4htqHsJ4JV9TZ+wy89rtYMsno/jZuB63usMITPEB7TgtEPgpbyDDcYVagA6eQqYMEgZPOA==} + peerDependencies: + '@angular/core': '>=17.0.0' + dependencies: + '@angular/core': 17.2.3(rxjs@7.8.1)(zone.js@0.14.4) + tslib: 2.3.1 + dev: false + /@ngtools/webpack@17.2.2(@angular/compiler-cli@17.2.3)(typescript@5.3.3)(webpack@5.90.1): resolution: {integrity: sha512-HgvClGO6WVq4VA5d0ZvlDG5hrj8lQzRH99Gt87URm7G8E5XkatysdOsMqUQsJz+OwFWhP4PvTRWVblpBDiDl/A==} engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'} @@ -5893,8 +5905,6 @@ packages: peerDependenciesMeta: webpack: optional: true - webpack-sources: - optional: true dependencies: webpack: 5.90.1(esbuild@0.20.0) webpack-sources: 3.2.3 @@ -8054,6 +8064,10 @@ packages: strip-bom: 3.0.0 dev: true + /tslib@2.3.1: + resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==} + dev: false + /tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} diff --git a/src/app/app.component.html b/src/app/app.component.html index 72a5291..5496f27 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,5 +2,6 @@
+
diff --git a/src/app/app.component.less b/src/app/app.component.less index ff8bb98..7e65688 100644 --- a/src/app/app.component.less +++ b/src/app/app.component.less @@ -2,6 +2,7 @@ display: block; width: 100%; height: calc(100% - 2rem); - background: url("../assets/img/wallpaper.png"); - background-size: cover; + background-image: url("../assets/img/wallpaper.png"); + background-repeat: no-repeat; + background-size: 100% 100%; } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0b7248f..44b6132 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,13 @@ import { Component } from "@angular/core"; import { RouterOutlet } from "@angular/router"; import { DockComponent } from "./modules/dock/dock.component"; +import { ModalComponent } from "./modules/modal/modal.component"; import { PanelComponent } from "./modules/panel/panel.component"; @Component({ selector: "app-root", standalone: true, - imports: [RouterOutlet, PanelComponent, DockComponent], + imports: [RouterOutlet, PanelComponent, DockComponent, ModalComponent], templateUrl: "./app.component.html", styleUrl: "./app.component.less", }) diff --git a/src/app/modules/modal/modal.component.html b/src/app/modules/modal/modal.component.html new file mode 100644 index 0000000..c69b526 --- /dev/null +++ b/src/app/modules/modal/modal.component.html @@ -0,0 +1 @@ +
diff --git a/src/app/modules/modal/modal.component.less b/src/app/modules/modal/modal.component.less new file mode 100644 index 0000000..e69de29 diff --git a/src/app/modules/modal/modal.component.ts b/src/app/modules/modal/modal.component.ts new file mode 100644 index 0000000..48e75e3 --- /dev/null +++ b/src/app/modules/modal/modal.component.ts @@ -0,0 +1,29 @@ +import { CommonModule } from "@angular/common"; +import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core"; +import { DialogRef, DialogService } from "@ngneat/dialog"; +import { WindowComponent } from "../window/window.component"; + +@Component({ + selector: "app-modal", + templateUrl: "./modal.component.html", + styleUrls: ["./modal.component.less"], + imports: [CommonModule], + standalone: true, +}) +export class ModalComponent implements AfterViewInit { + dialogRef: DialogRef | undefined = undefined; + @ViewChild("modal") modal: ElementRef | undefined = undefined; + constructor(private dialogService: DialogService, private ref: ElementRef) {} + ngAfterViewInit(): void { + this.dialogRef = this.dialogService.open(WindowComponent, { + resizable: true, + draggable: true, + backdrop: false, + closeButton: false, + container: this.modal ?? this.ref, + enableClose: false, + dragConstraint: "constrain", + id: "info-modal", + }); + } +} diff --git a/src/app/modules/panel/panel.component.less b/src/app/modules/panel/panel.component.less index 9238921..6eafcac 100644 --- a/src/app/modules/panel/panel.component.less +++ b/src/app/modules/panel/panel.component.less @@ -1,4 +1,5 @@ .panel { + z-index: 99999; position: relative; left: 0; top: 0; diff --git a/src/app/modules/window/window.component.html b/src/app/modules/window/window.component.html new file mode 100644 index 0000000..1239aa1 --- /dev/null +++ b/src/app/modules/window/window.component.html @@ -0,0 +1,10 @@ +
+ Info +
+ + +
+
+
+

Hello

+
diff --git a/src/app/modules/window/window.component.less b/src/app/modules/window/window.component.less new file mode 100644 index 0000000..59f4306 --- /dev/null +++ b/src/app/modules/window/window.component.less @@ -0,0 +1,24 @@ +.panel { + width: 100%; + display: flex; + height: 3rem; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0 1rem; + background-color: var(--black); + color: var(--white); + span { + font-size: 600; + } + .btns { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + gap: 1rem; + } +} +.content { + margin: 1rem; +} diff --git a/src/app/modules/window/window.component.ts b/src/app/modules/window/window.component.ts new file mode 100644 index 0000000..df6ec48 --- /dev/null +++ b/src/app/modules/window/window.component.ts @@ -0,0 +1,19 @@ +import { CommonModule } from "@angular/common"; +import { ChangeDetectionStrategy, Component } from "@angular/core"; +import { FontAwesomeModule } from "@fortawesome/angular-fontawesome"; +import { faBars, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { DialogRef } from "@ngneat/dialog"; + +@Component({ + selector: "app-window", + standalone: true, + imports: [CommonModule, FontAwesomeModule], + templateUrl: "./window.component.html", + styleUrls: ["./window.component.less"], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class WindowComponent { + faClose = faXmark; + faMenu = faBars; + constructor(public ref: DialogRef) {} +} diff --git a/src/styles.less b/src/styles.less index 20a20f3..220ca4a 100644 --- a/src/styles.less +++ b/src/styles.less @@ -35,3 +35,24 @@ body { top: 0; left: 0; } +ngneat-dialog { + .ngneat-dialog-backdrop { + pointer-events: none; + .ngneat-dialog-content { + pointer-events: all; + border-radius: 10px; + span { + font-weight: 600; + user-select: none; + } + .btns { + fa-icon { + cursor: pointer; + } + } + .ngneat-drag-marker { + height: 3rem; + } + } + } +}