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 3f81b6b..0000000 Binary files a/projects/ui/src/lib/icon/skirda/skirda.eot and /dev/null differ 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 4e11751..0000000 Binary files a/projects/ui/src/lib/icon/skirda/skirda.ttf and /dev/null differ 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 be8bac3..0000000 Binary files a/projects/ui/src/lib/icon/skirda/skirda.woff and /dev/null differ diff --git a/projects/ui/src/lib/icon/skirda/skirda.woff2 b/projects/ui/src/lib/icon/skirda/skirda.woff2 deleted file mode 100644 index d78d1e3..0000000 Binary files a/projects/ui/src/lib/icon/skirda/skirda.woff2 and /dev/null differ 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); }