From 4ef0f5efba3935b1d017440426252ab0c8b217a5 Mon Sep 17 00:00:00 2001 From: wagonsoftware Date: Tue, 1 Nov 2022 23:25:26 +0300 Subject: [PATCH] new icons, advanced popup windows --- package-lock.json | 38 ++++ package.json | 2 + .../ui/src/lib/button/button.component.scss | 3 + .../ui/src/lib/button/button.interface.ts | 6 + .../src/lib/directives/directives.module.ts | 18 ++ .../lib/directives/keyboard.directive.spec.ts | 8 + .../src/lib/directives/keyboard.directive.ts | 18 ++ projects/ui/src/lib/game/game.component.html | 2 +- projects/ui/src/lib/icon/icon.component.html | 2 +- projects/ui/src/lib/icon/icon.component.scss | 4 +- projects/ui/src/lib/icon/icon.component.ts | 11 +- projects/ui/src/lib/icon/icon.module.ts | 26 ++- projects/ui/src/lib/icon/icons.ts | 12 ++ projects/ui/src/lib/icon/skirda/skirda.css | 42 ---- projects/ui/src/lib/icon/skirda/skirda.eot | Bin 10068 -> 0 bytes projects/ui/src/lib/icon/skirda/skirda.svg | 30 --- projects/ui/src/lib/icon/skirda/skirda.ttf | Bin 9908 -> 0 bytes projects/ui/src/lib/icon/skirda/skirda.woff | Bin 6088 -> 0 bytes projects/ui/src/lib/icon/skirda/skirda.woff2 | Bin 5232 -> 0 bytes projects/ui/src/lib/popup/popup.class.ts | 183 ++++++++++++++++++ .../ui/src/lib/popup/popup.component.html | 20 +- .../ui/src/lib/popup/popup.component.scss | 49 +++-- projects/ui/src/lib/popup/popup.component.ts | 24 ++- projects/ui/src/lib/popup/popup.directive.ts | 2 +- projects/ui/src/lib/popup/popup.module.ts | 3 +- projects/ui/src/lib/popup/popup.service.ts | 16 +- projects/ui/src/lib/tag/tag.component.scss | 5 +- projects/ui/src/lib/ui.module.ts | 3 + .../main/main-menu/main-menu.component.html | 4 +- .../main/main-menu/main-menu.component.scss | 9 +- .../main/main-root/main-root.component.scss | 4 +- .../main/main-root/main-root.component.ts | 2 +- src/app/components/main/sections/_global.scss | 8 +- .../game-page/game-page.component.html | 10 +- .../sections/game-page/game-page.component.ts | 59 ++++-- .../components/sandbox/sandbox.component.ts | 21 +- src/app/modules/app-routing.module.ts | 4 +- src/styles.scss | 11 +- 38 files changed, 505 insertions(+), 154 deletions(-) create mode 100644 projects/ui/src/lib/button/button.interface.ts create mode 100644 projects/ui/src/lib/directives/directives.module.ts create mode 100644 projects/ui/src/lib/directives/keyboard.directive.spec.ts create mode 100644 projects/ui/src/lib/directives/keyboard.directive.ts create mode 100644 projects/ui/src/lib/icon/icons.ts delete mode 100644 projects/ui/src/lib/icon/skirda/skirda.css delete mode 100644 projects/ui/src/lib/icon/skirda/skirda.eot delete mode 100644 projects/ui/src/lib/icon/skirda/skirda.svg delete mode 100644 projects/ui/src/lib/icon/skirda/skirda.ttf delete mode 100644 projects/ui/src/lib/icon/skirda/skirda.woff delete mode 100644 projects/ui/src/lib/icon/skirda/skirda.woff2 create mode 100644 projects/ui/src/lib/popup/popup.class.ts diff --git a/package-lock.json b/package-lock.json index 36523df..b9cdc22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,8 @@ "@angular/platform-browser": "^14.1.0", "@angular/platform-browser-dynamic": "^14.1.0", "@angular/router": "^14.1.0", + "@ng-icons/core": "^22.4.0", + "@ng-icons/tabler-icons": "^22.4.0", "fast-average-color": "^9.1.1", "moment": "^2.29.4", "rxjs": "~7.5.0", @@ -2632,6 +2634,26 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "node_modules/@ng-icons/core": { + "version": "22.4.0", + "resolved": "https://registry.npmjs.org/@ng-icons/core/-/core-22.4.0.tgz", + "integrity": "sha512-sOACYxjGuJ7TQEARD7XhLF0mZGTTkEF8o2yNl3J+KXTPz+A5CptkT/57S+UNdXXeKuw9c6xlYpxUWu3tISkp/Q==", + "dependencies": { + "tslib": "^2.2.0" + }, + "peerDependencies": { + "@angular/common": ">=14.0.0", + "@angular/core": ">=14.0.0" + } + }, + "node_modules/@ng-icons/tabler-icons": { + "version": "22.4.0", + "resolved": "https://registry.npmjs.org/@ng-icons/tabler-icons/-/tabler-icons-22.4.0.tgz", + "integrity": "sha512-aF9MLx//95Yp3smWNGRUaHtYecO37TtubukNArTdxShKX3+wThdPb5rvIeIq9KoOEq2iJn2iWXHq+XRdPILKrw==", + "dependencies": { + "tslib": "^2.2.0" + } + }, "node_modules/@ngtools/webpack": { "version": "14.2.6", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-14.2.6.tgz", @@ -13458,6 +13480,22 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "@ng-icons/core": { + "version": "22.4.0", + "resolved": "https://registry.npmjs.org/@ng-icons/core/-/core-22.4.0.tgz", + "integrity": "sha512-sOACYxjGuJ7TQEARD7XhLF0mZGTTkEF8o2yNl3J+KXTPz+A5CptkT/57S+UNdXXeKuw9c6xlYpxUWu3tISkp/Q==", + "requires": { + "tslib": "^2.2.0" + } + }, + "@ng-icons/tabler-icons": { + "version": "22.4.0", + "resolved": "https://registry.npmjs.org/@ng-icons/tabler-icons/-/tabler-icons-22.4.0.tgz", + "integrity": "sha512-aF9MLx//95Yp3smWNGRUaHtYecO37TtubukNArTdxShKX3+wThdPb5rvIeIq9KoOEq2iJn2iWXHq+XRdPILKrw==", + "requires": { + "tslib": "^2.2.0" + } + }, "@ngtools/webpack": { "version": "14.2.6", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-14.2.6.tgz", diff --git a/package.json b/package.json index c13fe9e..d72a07f 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,8 @@ "@angular/platform-browser": "^14.1.0", "@angular/platform-browser-dynamic": "^14.1.0", "@angular/router": "^14.1.0", + "@ng-icons/core": "^22.4.0", + "@ng-icons/tabler-icons": "^22.4.0", "fast-average-color": "^9.1.1", "moment": "^2.29.4", "rxjs": "~7.5.0", diff --git a/projects/ui/src/lib/button/button.component.scss b/projects/ui/src/lib/button/button.component.scss index 222f06b..281756b 100644 --- a/projects/ui/src/lib/button/button.component.scss +++ b/projects/ui/src/lib/button/button.component.scss @@ -9,7 +9,10 @@ border-radius: var(--sk-br-m); border: none; cursor: pointer; + font-size: 1rem; font-weight: 500; + outline: none; + appearance: none; &:hover { opacity: 0.9; diff --git a/projects/ui/src/lib/button/button.interface.ts b/projects/ui/src/lib/button/button.interface.ts new file mode 100644 index 0000000..5cbe392 --- /dev/null +++ b/projects/ui/src/lib/button/button.interface.ts @@ -0,0 +1,6 @@ +export type ButtonAppearance = + | 'default' + | 'primary' + | 'secondary' + | 'outline' + | 'flat'; diff --git a/projects/ui/src/lib/directives/directives.module.ts b/projects/ui/src/lib/directives/directives.module.ts new file mode 100644 index 0000000..32b6e30 --- /dev/null +++ b/projects/ui/src/lib/directives/directives.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { KeyboardDirective } from './keyboard.directive'; + + + +@NgModule({ + declarations: [ + KeyboardDirective + ], + imports: [ + CommonModule + ], + exports: [ + KeyboardDirective + ] +}) +export class DirectivesModule { } diff --git a/projects/ui/src/lib/directives/keyboard.directive.spec.ts b/projects/ui/src/lib/directives/keyboard.directive.spec.ts new file mode 100644 index 0000000..d6eabf0 --- /dev/null +++ b/projects/ui/src/lib/directives/keyboard.directive.spec.ts @@ -0,0 +1,8 @@ +import { KeyboardDirective } from './keyboard.directive'; + +describe('KeyboardDirective', () => { + it('should create an instance', () => { + const directive = new KeyboardDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/directives/keyboard.directive.ts b/projects/ui/src/lib/directives/keyboard.directive.ts new file mode 100644 index 0000000..3719c57 --- /dev/null +++ b/projects/ui/src/lib/directives/keyboard.directive.ts @@ -0,0 +1,18 @@ +import { Directive, EventEmitter, HostListener, Output } from '@angular/core'; + +@Directive({ + selector: '[skirdaKeyboard]', +}) +export class KeyboardDirective { + @Output() escape: EventEmitter = new EventEmitter(); + + constructor() {} + + @HostListener('window:keydown.Escape', ['$event']) keyboardHandler( + event: KeyboardEvent + ) { + event.preventDefault(); + event.stopPropagation(); + this.escape.emit(event); + } +} diff --git a/projects/ui/src/lib/game/game.component.html b/projects/ui/src/lib/game/game.component.html index be8c381..60fcf43 100644 --- a/projects/ui/src/lib/game/game.component.html +++ b/projects/ui/src/lib/game/game.component.html @@ -6,5 +6,5 @@ description - + diff --git a/projects/ui/src/lib/icon/icon.component.html b/projects/ui/src/lib/icon/icon.component.html index 9b7d932..2566434 100644 --- a/projects/ui/src/lib/icon/icon.component.html +++ b/projects/ui/src/lib/icon/icon.component.html @@ -1 +1 @@ -
+ diff --git a/projects/ui/src/lib/icon/icon.component.scss b/projects/ui/src/lib/icon/icon.component.scss index 1ae7b77..e6dead2 100644 --- a/projects/ui/src/lib/icon/icon.component.scss +++ b/projects/ui/src/lib/icon/icon.component.scss @@ -1,6 +1,4 @@ -@import './skirda/skirda.css'; - -:host::ng-deep { +:host { display: flex; align-items: center; justify-content: center; diff --git a/projects/ui/src/lib/icon/icon.component.ts b/projects/ui/src/lib/icon/icon.component.ts index cd6ba4e..a2535c5 100644 --- a/projects/ui/src/lib/icon/icon.component.ts +++ b/projects/ui/src/lib/icon/icon.component.ts @@ -1,5 +1,6 @@ import { Component, Input, OnInit } from '@angular/core'; import { environment } from 'src/environments/environment'; +import { icons } from './icons'; const BASE_SIZE = 24; const BASE_STROKE_WIDTH = 1.5; @@ -9,17 +10,17 @@ const BASE_STROKE_WIDTH = 1.5; templateUrl: './icon.component.html', styleUrls: ['./icon.component.scss'], }) -export class IconComponent implements OnInit { +export class IconComponent { @Input() name!: string; @Input() size: number | string = 24; @Input() sizeUnit: string = 'px'; @Input() color: string = '#fff'; - constructor() {} - - ngOnInit(): void {} - get sizeWithUnit() { return this.size + this.sizeUnit; } + + get iconName() { + return icons.get(this.name) ?? 'tablerIcons'; + } } diff --git a/projects/ui/src/lib/icon/icon.module.ts b/projects/ui/src/lib/icon/icon.module.ts index 79ab8cf..1192ce8 100644 --- a/projects/ui/src/lib/icon/icon.module.ts +++ b/projects/ui/src/lib/icon/icon.module.ts @@ -1,10 +1,34 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IconComponent } from './icon.component'; +import { NgIconsModule } from '@ng-icons/core'; +import { + tablerIcons, + tablerSearch, + tablerLayoutSidebar, + tablerServerBolt, + tablerDeviceGamepad2, + tablerUsers, + tablerDownload, + tablerPlayerPlay, + tablerX, +} from '@ng-icons/tabler-icons'; + +const icons = { + tablerIcons, + tablerSearch, + tablerLayoutSidebar, + tablerServerBolt, + tablerDeviceGamepad2, + tablerUsers, + tablerDownload, + tablerPlayerPlay, + tablerX, +}; @NgModule({ declarations: [IconComponent], - imports: [CommonModule], + imports: [CommonModule, NgIconsModule.withIcons(icons)], exports: [IconComponent], }) export class IconModule {} diff --git a/projects/ui/src/lib/icon/icons.ts b/projects/ui/src/lib/icon/icons.ts new file mode 100644 index 0000000..b910a7d --- /dev/null +++ b/projects/ui/src/lib/icon/icons.ts @@ -0,0 +1,12 @@ +const icons: Map = new Map(); + +icons.set('search', 'tablerSearch'); +icons.set('menu-panel', 'tablerLayoutSidebar'); +icons.set('server', 'tablerServerBolt'); +icons.set('library', 'tablerDeviceGamepad2'); +icons.set('friends', 'tablerUsers'); +icons.set('download', 'tablerDownload'); +icons.set('play', 'tablerPlayerPlay'); +icons.set('close', 'tablerX'); + +export { icons }; diff --git a/projects/ui/src/lib/icon/skirda/skirda.css b/projects/ui/src/lib/icon/skirda/skirda.css deleted file mode 100644 index 1b37a70..0000000 --- a/projects/ui/src/lib/icon/skirda/skirda.css +++ /dev/null @@ -1,42 +0,0 @@ -@font-face { - font-family: 'skirda'; - src: url('./skirda.eot?27107141'); - src: url('./skirda.eot?27107141#iefix') format('embedded-opentype'), - url('./skirda.woff2?27107141') format('woff2'), - url('./skirda.woff?27107141') format('woff'), - url('./skirda.ttf?27107141') format('truetype'), - url('./skirda.svg?27107141#skirda') format('svg'); - font-weight: normal; - font-style: normal; -} -/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ -/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ - -@media screen and (-webkit-min-device-pixel-ratio:0) { - @font-face { - font-family: 'skirda'; - src: url('./skirda.svg?27107141#skirda') format('svg'); - } -} - -[class^="skirda-"]:before, [class*=" skirda-"]:before { - font-family: "skirda"; - display: inline-block; - text-decoration: inherit; - text-align: center; - font-variant: normal; - text-transform: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.skirda-discord:before { content: '\e800'; } /* '' */ -.skirda-friends:before { content: '\e801'; } /* '' */ -.skirda-menu-panel:before { content: '\e802'; } /* '' */ -.skirda-play:before { content: '\e803'; } /* '' */ -.skirda-search:before { content: '\e804'; } /* '' */ -.skirda-server:before { content: '\e805'; } /* '' */ -.skirda-sign-out:before { content: '\e806'; } /* '' */ -.skirda-favorite:before { content: '\e807'; } /* '' */ -.skirda-library:before { content: '\e808'; } /* '' */ -.skirda-download:before { content: '\e809'; } /* '' */ diff --git a/projects/ui/src/lib/icon/skirda/skirda.eot b/projects/ui/src/lib/icon/skirda/skirda.eot deleted file mode 100644 index 3f81b6bc935a9ab677981a5533cb497ec1050d8c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10068 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 diff --git a/projects/ui/src/lib/icon/skirda/skirda.svg b/projects/ui/src/lib/icon/skirda/skirda.svg deleted file mode 100644 index e732458..0000000 --- a/projects/ui/src/lib/icon/skirda/skirda.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - -Copyright (C) 2022 by original authors @ fontello.com - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/projects/ui/src/lib/icon/skirda/skirda.ttf b/projects/ui/src/lib/icon/skirda/skirda.ttf deleted file mode 100644 index 4e117514130531a2682c7374310f216c4d59129f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9908 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 diff --git a/projects/ui/src/lib/icon/skirda/skirda.woff b/projects/ui/src/lib/icon/skirda/skirda.woff deleted file mode 100644 index be8bac30c7b4a6c9eced1fa0f28d180bf66af093..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6088 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 diff --git a/projects/ui/src/lib/popup/popup.class.ts b/projects/ui/src/lib/popup/popup.class.ts new file mode 100644 index 0000000..9cffd25 --- /dev/null +++ b/projects/ui/src/lib/popup/popup.class.ts @@ -0,0 +1,183 @@ +import { ButtonAppearance } from '../button/button.interface'; + +export type PopupAppearance = 'default' | 'attention'; +export type PopupTheme = 'dark' | 'light'; + +export interface PopupHeader { + title: string; + closable?: boolean; +} + +export interface StrictPopupHeader extends PopupHeader { + title: string; + closable: boolean; +} + +export interface PopupAction { + title: string; + event: string; + appearance?: ButtonAppearance; +} + +export interface StrictPopupAction extends PopupAction { + title: string; + event: string; + appearance: ButtonAppearance; +} + +export interface PopupOverlay { + closable?: boolean; + background?: string; +} + +export interface StrictPopupOverlay extends PopupOverlay { + closable: boolean; + background: string; +} + +export interface PopupConfig { + header?: PopupHeader | StrictPopupHeader; + actions?: PopupAction[] | StrictPopupAction[]; + overlay?: PopupOverlay | StrictPopupOverlay; + body?: string; + appearance?: PopupAppearance; + theme?: PopupTheme; +} + +export interface StrictPopupConfig extends PopupConfig { + header: StrictPopupHeader; + actions: StrictPopupAction[]; + overlay: StrictPopupOverlay; + body?: string; + appearance: PopupAppearance; + theme: PopupTheme; +} + +export class PopupConfiguration implements StrictPopupConfig { + private _header: StrictPopupHeader; + private _actions: StrictPopupAction[]; + private _overlay: StrictPopupOverlay; + private _body?: string; + private _appearance: PopupAppearance; + private _theme: PopupTheme; + + constructor(config?: PopupConfig) { + this._header = this.getHeaderConfig(config); + this._actions = this.getActionsConfig(config); + this._overlay = this.getOverlayConfig(config); + this._body = this.getBodyConfig(config); + this._appearance = this.getAppearanceConfig(config); + this._theme = this.getThemeConfig(config); + } + + /** + * If the config object has a header object with a title property, return that, otherwise return + * 'Window'. + * @param {PopupConfig} [config] - PopupConfig - This is the configuration object that is passed to the + * popup. + * @returns An object with the properties title and closable. + */ + private getHeaderConfig(config?: PopupConfig) { + return { + title: config?.header?.title ?? 'Window', + closable: config?.header?.closable ?? true, + }; + } + + /** + * It checks if the config has actions and if it does it is pushing the actions into the actions + * array. If the config doesn't have actions it is pushing the default actions into the actions array + * @param {PopupConfig} [config] - PopupConfig - This is the config object that is passed to the + * popup. + * @returns An array of PopupAction objects. + */ + private getActionsConfig(config?: PopupConfig): StrictPopupAction[] { + let actions: StrictPopupAction[] = []; + + /* Checking if the config has actions and if it does it is pushing the actions into the actions array. */ + if (config && config.actions) { + for (const action of config.actions) { + actions.push({ + title: action.title, + event: action.event, + appearance: action.appearance ?? 'default', + }); + } + + return actions; + } + + /* Pushing the default actions into the actions array. */ + actions.push({ + title: 'Cancel', + event: 'cancel', + appearance: 'flat', + }); + actions.push({ + title: 'Submit', + event: 'submit', + appearance: 'primary', + }); + + return actions; + } + + private getOverlayConfig(config?: PopupConfig) { + return { + closable: config?.overlay?.closable ?? 'true', + background: config?.overlay?.background ?? 'var(--sk-overlay)', + }; + } + + /** + * If the config object has an appearance property, return it, otherwise return 'default'. + * @param {PopupConfig} [config] - PopupConfig - This is the configuration object that is passed to the + * popup. + * @returns The appearance of the popup. + */ + private getAppearanceConfig(config?: PopupConfig) { + return (config?.appearance ?? 'default'); + } + + /** + * If the config object has a body property, return that, otherwise return 'Content'. + * @param {PopupConfig} [config] - PopupConfig - This is the configuration object that we will pass to + * the popup. + * @returns The body of the popup. + */ + private getBodyConfig(config?: PopupConfig) { + return config?.body ?? 'Content'; + } + + private getThemeConfig(config?: PopupConfig) { + return config?.theme ?? 'dark'; + } + + get header() { + return this._header; + } + + get actions() { + return this._actions; + } + + get overlay() { + return this._overlay; + } + + get body() { + return this._body; + } + + get appearance() { + return this._appearance; + } + + get theme() { + return this._theme; + } + + set body(value: string | undefined) { + this._body = value; + } +} diff --git a/projects/ui/src/lib/popup/popup.component.html b/projects/ui/src/lib/popup/popup.component.html index 8399381..38b82e6 100644 --- a/projects/ui/src/lib/popup/popup.component.html +++ b/projects/ui/src/lib/popup/popup.component.html @@ -1,20 +1,22 @@ -
-
+
+
-
Notification
-
- +
{{ config.header.title }}
+
+
-
+
+
+ {{config.body}} +
-
- Cancel - Confirm +
+ {{ action.title }}
diff --git a/projects/ui/src/lib/popup/popup.component.scss b/projects/ui/src/lib/popup/popup.component.scss index d146e57..b983b7f 100644 --- a/projects/ui/src/lib/popup/popup.component.scss +++ b/projects/ui/src/lib/popup/popup.component.scss @@ -1,4 +1,4 @@ -:host { +:host::ng-deep { position: absolute; @keyframes show { @@ -48,7 +48,7 @@ left: 0; width: 100%; height: 100vh; - background-color: rgba(0,0,0,0.5); + background-color: var(--local-overlay, var(--sk-overlay)); display: flex; justify-content: center; align-items: center; @@ -71,27 +71,45 @@ .popup-window-wrapper { width: 500px; - background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.25)); padding: 1px; - border-radius: 8px; + border-radius: 12px; overflow: hidden; translate: 0px 20px; opacity: 0; + box-shadow: 0px 10px 32px 0px rgba(0,0,0,0.15); + + &[data-appearance="attention"] { + box-shadow: 0px 0px 0px 1.5px red; + } + + &[data-theme="dark"] { + --local-background: #222; + --local-color: #fff; + --local-border: rgba(255, 255, 255, 0.125); + background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.25)); + } + &[data-theme="light"] { + --local-background: #fff; + --local-color: #111; + --local-border: rgba(0, 0, 0, 0.125); + background: linear-gradient(45deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25)); + } .popup-window { - border-radius: 7px; - background-color: #222; + border-radius: 11px; + background-color: var(--local-background); + color: var(--local-color); .popup-head { padding: 1rem; display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid var(--local-border); .head-title { font-size: 1rem; - color: #aaa; + font-weight: 500; } .head-close { @@ -103,19 +121,28 @@ .popup-body { padding: 2rem; - text-align: center; line-height: 140%; } .popup-actions { - border-top: 1px solid rgba(255, 255, 255, 0.1); + border-top: 1px solid var(--local-border); display: flex; align-items: center; padding: 1rem; - gap: 0.25rem; + gap: 0.5rem; justify-content: flex-end; } } } } } + +:host::ng-deep { + skirda-button button[data-appearance="outline"], skirda-button button[data-appearance="flat"] { + color: var(--local-color)!important; + } + + skirda-button button[data-appearance="outline"] { + box-shadow: 0px 0px 0px 1px var(--local-border)!important; + } +} diff --git a/projects/ui/src/lib/popup/popup.component.ts b/projects/ui/src/lib/popup/popup.component.ts index 1083c61..63bc1e8 100644 --- a/projects/ui/src/lib/popup/popup.component.ts +++ b/projects/ui/src/lib/popup/popup.component.ts @@ -2,12 +2,13 @@ import { AfterViewInit, Component, EventEmitter, + Input, OnInit, Output, TemplateRef, ViewChild, - ViewContainerRef, } from '@angular/core'; +import { PopupConfiguration } from './popup.class'; import { PopupDirective } from './popup.directive'; @Component({ @@ -16,16 +17,16 @@ import { PopupDirective } from './popup.directive'; styleUrls: ['./popup.component.scss'], }) export class PopupComponent implements OnInit, AfterViewInit { + @Input() config: PopupConfiguration = new PopupConfiguration(); loaded: boolean = false; hiding: boolean = false; contentQueue?: TemplateRef; - @Output() cancel: EventEmitter = new EventEmitter(); - @Output() confirm: EventEmitter = new EventEmitter(); + @Output() event: EventEmitter = new EventEmitter(); @ViewChild(PopupDirective) private popupContent!: PopupDirective; - constructor(private viewContainerRef: ViewContainerRef) {} + constructor() {} ngOnInit(): void {} @@ -42,14 +43,29 @@ export class PopupComponent implements OnInit, AfterViewInit { if (!template) return; if (!this.popupContent) { this.contentQueue = template; + this.config.body = undefined; return; } this.popupContent.viewContainerRef.createEmbeddedView(template); + this.config.body = undefined; } hide() { this.loaded = false; this.hiding = true; } + + close() { + console.log('close'); + } + + closeViaEscape(event: KeyboardEvent) { + if (this.config.overlay.closable) this.event.emit('cancel'); + } + + closeViaClick(event: MouseEvent) { + if (this.config.overlay.closable && event.target === event.currentTarget) + this.event.emit('cancel'); + } } diff --git a/projects/ui/src/lib/popup/popup.directive.ts b/projects/ui/src/lib/popup/popup.directive.ts index 477180d..a4a0991 100644 --- a/projects/ui/src/lib/popup/popup.directive.ts +++ b/projects/ui/src/lib/popup/popup.directive.ts @@ -1,4 +1,4 @@ -import { Directive, ViewContainerRef } from '@angular/core'; +import { Directive, HostListener, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[skirdaPopup]', diff --git a/projects/ui/src/lib/popup/popup.module.ts b/projects/ui/src/lib/popup/popup.module.ts index 0efa7fa..2f534a7 100644 --- a/projects/ui/src/lib/popup/popup.module.ts +++ b/projects/ui/src/lib/popup/popup.module.ts @@ -4,10 +4,11 @@ import { PopupComponent } from './popup.component'; import { PopupDirective } from './popup.directive'; import { ButtonModule } from '../button/button.module'; import { IconModule } from '../icon/icon.module'; +import { DirectivesModule } from '../directives/directives.module'; @NgModule({ declarations: [PopupComponent, PopupDirective], - imports: [CommonModule, ButtonModule, IconModule], + imports: [CommonModule, ButtonModule, IconModule, DirectivesModule], exports: [PopupComponent, PopupDirective], }) export class PopupModule {} diff --git a/projects/ui/src/lib/popup/popup.service.ts b/projects/ui/src/lib/popup/popup.service.ts index 3c0a702..a069269 100644 --- a/projects/ui/src/lib/popup/popup.service.ts +++ b/projects/ui/src/lib/popup/popup.service.ts @@ -7,6 +7,7 @@ import { ViewChild, } from '@angular/core'; import { first } from 'rxjs'; +import { PopupConfig, PopupConfiguration } from './popup.class'; import { PopupComponent } from './popup.component'; import { PopupDirective } from './popup.directive'; @@ -18,7 +19,11 @@ export class PopupService { constructor() {} - open(portal: PopupDirective, template?: TemplateRef) { + open( + portal: PopupDirective, + template?: TemplateRef, + config?: PopupConfig + ) { let container = portal.viewContainerRef; container.clear(); @@ -26,15 +31,14 @@ export class PopupService { this.instance = componentRef.instance; - this.instance.confirm.pipe(first()).subscribe(() => { - this.hide(componentRef); - }); - this.instance.cancel.pipe(first()).subscribe(() => { + this.instance.config = new PopupConfiguration(config); + this.instance.event.pipe(first()).subscribe((event) => { this.hide(componentRef); }); this.instance.load(template); - return this.instance; + + return this.instance.event; } hide(componentRef: ComponentRef) { diff --git a/projects/ui/src/lib/tag/tag.component.scss b/projects/ui/src/lib/tag/tag.component.scss index 2595639..58a161a 100644 --- a/projects/ui/src/lib/tag/tag.component.scss +++ b/projects/ui/src/lib/tag/tag.component.scss @@ -5,8 +5,9 @@ } .sk-tag { - display: inline-block; - padding: 0px var(--sk-gap-m); + display: inline-flex; + align-items: center; + padding: 1px var(--sk-gap-m); border-radius: var(--sk-br-s); background-color: rgba(255, 255, 255, 0.05); } diff --git a/projects/ui/src/lib/ui.module.ts b/projects/ui/src/lib/ui.module.ts index 68312e3..17be2ad 100644 --- a/projects/ui/src/lib/ui.module.ts +++ b/projects/ui/src/lib/ui.module.ts @@ -11,6 +11,7 @@ import { TagModule } from './tag/tag.module'; import { PipesModule } from './pipes/pipes.module'; import { GameModule } from './game/game.module'; import { PopupModule } from '../public-api'; +import { DirectivesModule } from './directives/directives.module'; @NgModule({ declarations: [], @@ -27,6 +28,7 @@ import { PopupModule } from '../public-api'; PipesModule, GameModule, PopupModule, + DirectivesModule, ], exports: [ IconModule, @@ -41,6 +43,7 @@ import { PopupModule } from '../public-api'; PipesModule, GameModule, PopupModule, + DirectivesModule, ], }) export class UiModule {} diff --git a/src/app/components/main/main-menu/main-menu.component.html b/src/app/components/main/main-menu/main-menu.component.html index 9e4671d..14f0323 100644 --- a/src/app/components/main/main-menu/main-menu.component.html +++ b/src/app/components/main/main-menu/main-menu.component.html @@ -1,7 +1,7 @@
- +
- - + Run game +
diff --git a/src/app/components/main/sections/game-page/game-page.component.ts b/src/app/components/main/sections/game-page/game-page.component.ts index eaa8a55..ae6b8ed 100644 --- a/src/app/components/main/sections/game-page/game-page.component.ts +++ b/src/app/components/main/sections/game-page/game-page.component.ts @@ -1,29 +1,66 @@ -import { TemplateRef, ViewChild } from '@angular/core'; +import { OnDestroy, TemplateRef, ViewChild } from '@angular/core'; import { Component, OnInit } from '@angular/core'; +import { PopupConfiguration } from 'projects/ui/src/lib/popup/popup.class'; import { PopupDirective } from 'projects/ui/src/lib/popup/popup.directive'; import { PopupService } from 'projects/ui/src/lib/popup/popup.service'; -import { first } from 'rxjs'; +import { first, Subscription } from 'rxjs'; @Component({ selector: 'app-game-page', templateUrl: './game-page.component.html', styleUrls: ['./game-page.component.scss'], }) -export class GamePageComponent implements OnInit { +export class GamePageComponent implements OnInit, OnDestroy { @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective; + subs: Map = new Map(); constructor(private popup: PopupService) {} ngOnInit(): void {} - openPopup(template: TemplateRef) { - let dialog = this.popup.open(this.popupPortal, template); + ngOnDestroy(): void { + this.subs.forEach((value) => value.unsubscribe()); + } - dialog.cancel.pipe(first()).subscribe(() => { - console.log('cancel clicked'); - }); - dialog.confirm.pipe(first()).subscribe(() => { - console.log('confirm clicked'); - }); + ngAfterViewInit(): void { + //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only. + //Add 'implements AfterViewInit' to the class. + // this.openPopup(); + } + + openPopup(template?: TemplateRef) { + this.subs.set( + 'popup-events', + this.popup + .open(this.popupPortal, undefined, { + header: { closable: false, title: 'Warning' }, + actions: [ + { + title: 'I understand, delete file', + event: 'delete', + appearance: 'primary', + }, + { + title: 'Do not delete', + event: 'cancel', + appearance: 'outline', + }, + // { + // title: 'Primary button', + // event: 'button-2', + // appearance: 'primary', + // }, + ], + overlay: { + closable: true, + // background: 'rgba(255, 255, 255, 1)', + }, + body: 'Humblebrag chillwave sriracha, ramps polaroid distillery edison bulb palo santo etsy sus pabst knausgaard typewriter dreamcatcher.', + theme: 'light', + }) + .subscribe((event) => { + console.log(`event: ${event}`); + }) + ); } } diff --git a/src/app/components/sandbox/sandbox.component.ts b/src/app/components/sandbox/sandbox.component.ts index d7e9b4e..0f9c330 100644 --- a/src/app/components/sandbox/sandbox.component.ts +++ b/src/app/components/sandbox/sandbox.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { PopupDirective } from 'projects/ui/src/lib/popup/popup.directive'; import { PopupService } from 'projects/ui/src/lib/popup/popup.service'; -import { first } from 'rxjs'; +import { first, Subscription } from 'rxjs'; @Component({ selector: 'app-sandbox', @@ -17,6 +17,11 @@ export class SandboxComponent implements OnInit { age: new FormControl(0), }); @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective; + subs: Map = new Map(); + + ngOnDestroy(): void { + this.subs.forEach((value) => value.unsubscribe()); + } constructor(private popup: PopupService) {} @@ -27,13 +32,11 @@ export class SandboxComponent implements OnInit { } openPopup(template: TemplateRef) { - let dialog = this.popup.open(this.popupPortal, template); - - dialog.cancel.pipe(first()).subscribe(() => { - console.log('cancel clicked'); - }); - dialog.confirm.pipe(first()).subscribe(() => { - console.log('confirm clicked'); - }); + this.subs.set( + 'popup-events', + this.popup.open(this.popupPortal, template).subscribe((event) => { + console.log(`event: ${event}`); + }) + ); } } diff --git a/src/app/modules/app-routing.module.ts b/src/app/modules/app-routing.module.ts index d468c51..0aaa34f 100644 --- a/src/app/modules/app-routing.module.ts +++ b/src/app/modules/app-routing.module.ts @@ -12,7 +12,7 @@ const routes: Routes = [ component: PlaygroundComponent, }, { - path: 'main', + path: '', loadChildren: () => MainRoutingModule, }, { @@ -24,7 +24,7 @@ const routes: Routes = [ component: SignInComponent, }, { - path: '', + path: 'loading', component: LoadingScreenComponent, }, ]; diff --git a/src/styles.scss b/src/styles.scss index da5ebd5..31956e9 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -22,11 +22,16 @@ button, input, textarea { // colors --sk-input: rgba(18,18,18,0.5); --sk-input-focus: rgba(18,18,18,0.9); - --sk-primary: #24927a; - --sk-secondary: #1b557d; - --sk-primary-dark: #2A3B39; + --sk-primary: #d62828ff; + --sk-secondary: #f77f00ff; // border-radius --sk-br-s: 0.25rem; --sk-br-m: 0.5rem; + --sk-palette-1: #ffbe0b; + --sk-palette-2: #fb5607; + --sk-palette-3: #ff006e; + --sk-palette-4: #8338ec; + --sk-palette-5: #3a86ff; + --sk-overlay: rgba(0,0,0,0.5); }