From 9b4bb9f0a3cd60f2044026d76b8aac52224042d8 Mon Sep 17 00:00:00 2001 From: wagonsoftware <68749617+wagonsoftware@users.noreply.github.com> Date: Sat, 12 Nov 2022 23:44:03 +0300 Subject: [PATCH 1/3] button sizes --- .../ui/src/lib/button/button.component.html | 2 +- .../ui/src/lib/button/button.component.scss | 25 ++++++++++++++++--- .../ui/src/lib/button/button.component.ts | 9 +++++-- .../ui/src/lib/button/button.interface.ts | 8 ++---- src/_themes.scss | 1 + .../game-page/game-page.component.html | 5 +++- 6 files changed, 37 insertions(+), 13 deletions(-) diff --git a/projects/ui/src/lib/button/button.component.html b/projects/ui/src/lib/button/button.component.html index e970e42..779e4a4 100644 --- a/projects/ui/src/lib/button/button.component.html +++ b/projects/ui/src/lib/button/button.component.html @@ -1,3 +1,3 @@ - diff --git a/projects/ui/src/lib/button/button.component.scss b/projects/ui/src/lib/button/button.component.scss index 771c820..3dca73e 100644 --- a/projects/ui/src/lib/button/button.component.scss +++ b/projects/ui/src/lib/button/button.component.scss @@ -2,11 +2,9 @@ display: block; button { - padding: var(--sk-gap-m) var(--sk-gap-xl); display: flex; align-items: center; gap: var(--sk-gap-m); - border-radius: var(--sk-br-m); border: none; cursor: pointer; font-size: 1rem; @@ -18,6 +16,7 @@ opacity: 0.9; } + // Appearance &[data-appearance="default"], &[data-appearance="primary"] { background-color: var(--sk-primary-accent); color: #fff; @@ -38,13 +37,33 @@ color: #fff; background-color: transparent; } + + // Size + &[data-size="small"] { + padding: var(--sk-gap-s) var(--sk-gap-l); + border-radius: var(--sk-br-m); + } + &[data-size="default"] { + padding: var(--sk-gap-m) var(--sk-gap-xl); + border-radius: var(--sk-br-m); + } + &[data-size="medium"] { + padding: var(--sk-gap-l) var(--sk-gap-xl); + border-radius: var(--sk-br-l); + gap: var(--sk-gap-l); + } + &[data-size="large"] { + padding: var(--sk-gap-xl) var(--sk-gap-xxxl); + border-radius: var(--sk-br-xl); + gap: var(--sk-gap-xl); + } } } :host::ng-deep { button { - &[data-appearance="default"], &[data-appearance="primary"] { + &[data-appearance="default"], &[data-appearance="primary"], &[data-appearance="secondary"] { skirda-icon ng-icon { color: #fff!important; diff --git a/projects/ui/src/lib/button/button.component.ts b/projects/ui/src/lib/button/button.component.ts index 46a7e6e..303e321 100644 --- a/projects/ui/src/lib/button/button.component.ts +++ b/projects/ui/src/lib/button/button.component.ts @@ -1,4 +1,6 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, ContentChild, Input } from '@angular/core'; +import { IconComponent } from '../icon/icon.component'; +import { ButtonAppearance, ButtonSize } from './button.interface' @Component({ selector: 'skirda-button', @@ -6,7 +8,10 @@ import { Component, Input, OnInit } from '@angular/core'; styleUrls: ['./button.component.scss'], }) export class ButtonComponent { - @Input() appearance: string = 'default'; + @ContentChild(IconComponent) icon!: IconComponent + @Input() appearance: ButtonAppearance = 'default'; + @Input() size: ButtonSize = 'default' + constructor() {} } diff --git a/projects/ui/src/lib/button/button.interface.ts b/projects/ui/src/lib/button/button.interface.ts index 5cbe392..bced259 100644 --- a/projects/ui/src/lib/button/button.interface.ts +++ b/projects/ui/src/lib/button/button.interface.ts @@ -1,6 +1,2 @@ -export type ButtonAppearance = - | 'default' - | 'primary' - | 'secondary' - | 'outline' - | 'flat'; +export type ButtonAppearance = 'default' | 'primary' | 'secondary' | 'outline' | 'flat'; +export type ButtonSize = 'default' | 'small' | 'medium' | 'large'; diff --git a/src/_themes.scss b/src/_themes.scss index 3605954..cc5681a 100644 --- a/src/_themes.scss +++ b/src/_themes.scss @@ -145,4 +145,5 @@ --sk-br-s: 0.25rem; --sk-br-m: 0.5rem; --sk-br-l: 0.75rem; + --sk-br-xl: 1rem; } diff --git a/src/app/components/main/sections/game-page/game-page.component.html b/src/app/components/main/sections/game-page/game-page.component.html index d568b22..2b7577c 100644 --- a/src/app/components/main/sections/game-page/game-page.component.html +++ b/src/app/components/main/sections/game-page/game-page.component.html @@ -41,7 +41,10 @@ - Play + + + Play + From 1c009c5d3eba222466ac5996212164e1456a765d Mon Sep 17 00:00:00 2001 From: svensken Date: Sun, 13 Nov 2022 17:42:19 +0300 Subject: [PATCH 2/3] popup call example (game-page component) --- .../ui/src/lib/popup/popup.component.scss | 1 + .../game-page/game-page.component.html | 22 +++-- .../sections/game-page/game-page.component.ts | 83 ++++++++----------- 3 files changed, 51 insertions(+), 55 deletions(-) diff --git a/projects/ui/src/lib/popup/popup.component.scss b/projects/ui/src/lib/popup/popup.component.scss index 7018515..9ec70c7 100644 --- a/projects/ui/src/lib/popup/popup.component.scss +++ b/projects/ui/src/lib/popup/popup.component.scss @@ -58,6 +58,7 @@ justify-content: center; align-items: center; opacity: 0; + z-index: 100; &.shown { animation: showOverlay 0.2s ease 0s 1 forwards; diff --git a/src/app/components/main/sections/game-page/game-page.component.html b/src/app/components/main/sections/game-page/game-page.component.html index 2b7577c..2edbe48 100644 --- a/src/app/components/main/sections/game-page/game-page.component.html +++ b/src/app/components/main/sections/game-page/game-page.component.html @@ -1,12 +1,15 @@ - + + + +

😳🕶🤏

Church-key listicle whatever hoodie hexagon pour-over ascot paleo tacos, organic aesthetic tbh meggings raclette.

- --> - +
@@ -41,10 +44,13 @@
- + + Play - + \ No newline at end of file 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 29cdec3..b9bec65 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,12 +1,10 @@ -import { inject, OnDestroy, TemplateRef, ViewChild } from '@angular/core'; -import { Component, OnInit } from '@angular/core'; -import { NavigationEnd, Router } from '@angular/router'; -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, Subscription } from 'rxjs'; -import { Game } from 'src/app/interfaces/game.interface'; -import { UiService } from 'src/app/services/ui.service'; +import { Component, inject, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core' +import { NavigationEnd, Router } from '@angular/router' +import { PopupDirective } from 'projects/ui/src/lib/popup/popup.directive' +import { PopupService } from 'projects/ui/src/lib/popup/popup.service' +import { Subscription } from 'rxjs' +import { Game } from 'src/app/interfaces/game.interface' +import { UiService } from 'src/app/services/ui.service' @Component({ selector: 'app-game-page', @@ -14,7 +12,10 @@ import { UiService } from 'src/app/services/ui.service'; styleUrls: ['./game-page.component.scss'], }) export class GamePageComponent implements OnInit, OnDestroy { - // @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective; + // File: name.component.ts + // 3. Получить в классе компонента элемент с директивой (портал из 1 пункта) + @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective; + uiService = inject(UiService) subs: Map = new Map(); game: Game = { @@ -40,8 +41,11 @@ export class GamePageComponent implements OnInit, OnDestroy { ] constructor( - private router: Router - ) {} // private popup: PopupService + private router: Router, + + // 4. Импортировать сервис для попап окон + private popup: PopupService + ) {} ngOnInit(): void { this.observeNavigation() @@ -64,39 +68,24 @@ export class GamePageComponent implements OnInit, OnDestroy { return this.tempImages[Math.floor(0 + Math.random() * ((this.tempImages.length - 1) + 1 - 0))] } - // 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: 'dark', - // }) - // .subscribe((event) => { - // console.log(`event: ${event}`); - // }) - // ); - // } + // 5. Написать метод для вызова попап окна, куда аргументом передается + // шаблон тела окна (из пункта 2) + openPopup(template?: TemplateRef) { + // Здесь мы подписываемся на ивента попап окна и сохраняем подписку, чтобы потом + // при дестрое компонента можно было от них отписаться + this.subs.set( + 'popup-events', + // при вызове передается: + // 1. popupPortal - портал для спавна оверлея с окном (пункт 1 в html, пункт 3 в ts), + // 2. template - шаблон тела окна, если он есть + // 3. объект с настройками окна (необязательный параметр), где можно кастомизировать внешний вид + // типа PopupConfig (\projects\ui\src\lib\popup\popup.class.ts) + this.popup + .open(this.popupPortal, template, {}) + .subscribe((event) => { + // здесь описываются обработчики по нажатию на кнопки действий в попап окне + console.log(`event: ${event}`); + }) + ); + } } From 93c050c5adbf2bba865b62fba74207b1b6703912 Mon Sep 17 00:00:00 2001 From: svensken Date: Wed, 16 Nov 2022 03:28:14 +0300 Subject: [PATCH 3/3] left menu collapse state added --- projects/ui/src/lib/avatar/avatar.component.scss | 2 +- projects/ui/src/lib/game/game.component.html | 6 +++--- projects/ui/src/lib/game/game.component.scss | 6 +++++- projects/ui/src/lib/game/game.component.ts | 1 + .../ui/src/lib/session/session.component.html | 6 +++--- .../ui/src/lib/session/session.component.scss | 6 +++++- projects/ui/src/lib/session/session.component.ts | 1 + projects/ui/src/lib/tag/tag.component.scss | 2 +- .../loading-screen/loading-screen.component.scss | 1 - .../main/main-menu/main-menu.component.html | 10 +++++----- .../main/main-menu/main-menu.component.scss | 15 ++++++++++++++- .../main/main-menu/main-menu.component.ts | 11 ++++++++++- .../menu-games/menu-games.component.html | 4 +++- .../menu-games/menu-games.component.scss | 5 +++++ .../main-menu/menu-games/menu-games.component.ts | 4 +++- .../menu-profile/menu-profile.component.html | 8 ++++---- .../menu-profile/menu-profile.component.ts | 4 +++- .../menu-sessions/menu-sessions.component.html | 4 +++- .../menu-sessions/menu-sessions.component.scss | 5 +++++ .../menu-sessions/menu-sessions.component.ts | 3 ++- 20 files changed, 77 insertions(+), 27 deletions(-) diff --git a/projects/ui/src/lib/avatar/avatar.component.scss b/projects/ui/src/lib/avatar/avatar.component.scss index 490f184..9ce0eb8 100644 --- a/projects/ui/src/lib/avatar/avatar.component.scss +++ b/projects/ui/src/lib/avatar/avatar.component.scss @@ -22,7 +22,7 @@ --local-size: 50px; } &[data-size="default"] { - --local-size: 42px; + --local-size: 40px; font-weight: 500; } &[data-size="small"] { diff --git a/projects/ui/src/lib/game/game.component.html b/projects/ui/src/lib/game/game.component.html index 368520e..dd39a74 100644 --- a/projects/ui/src/lib/game/game.component.html +++ b/projects/ui/src/lib/game/game.component.html @@ -1,12 +1,12 @@ -
+
-
+
{{game.title}}
description
- +
diff --git a/projects/ui/src/lib/game/game.component.scss b/projects/ui/src/lib/game/game.component.scss index cd01a0e..cd77f47 100644 --- a/projects/ui/src/lib/game/game.component.scss +++ b/projects/ui/src/lib/game/game.component.scss @@ -32,11 +32,15 @@ opacity: 0.5; cursor: pointer; + &.collapsed { + border-radius: 2rem; + } + .sk-game-info { flex: 1; display: flex; flex-direction: column; - gap: var(--sk-gap-m); + gap: var(--sk-gap-s); } } } diff --git a/projects/ui/src/lib/game/game.component.ts b/projects/ui/src/lib/game/game.component.ts index 222385f..609a386 100644 --- a/projects/ui/src/lib/game/game.component.ts +++ b/projects/ui/src/lib/game/game.component.ts @@ -9,6 +9,7 @@ import { LauncherService } from 'src/app/services/launcher.service'; }) export class GameComponent implements OnInit { @Input() game!: Game + @Input() collapsed = false constructor(private launcher: LauncherService) { } diff --git a/projects/ui/src/lib/session/session.component.html b/projects/ui/src/lib/session/session.component.html index fbf5d70..689d7aa 100644 --- a/projects/ui/src/lib/session/session.component.html +++ b/projects/ui/src/lib/session/session.component.html @@ -1,7 +1,7 @@ -
+
-
+
{{session.title}}
@@ -10,6 +10,6 @@ {{session.expires | countdown | async}}
- +
diff --git a/projects/ui/src/lib/session/session.component.scss b/projects/ui/src/lib/session/session.component.scss index 8270f48..6b69869 100644 --- a/projects/ui/src/lib/session/session.component.scss +++ b/projects/ui/src/lib/session/session.component.scss @@ -33,11 +33,15 @@ opacity: 0.5; cursor: pointer; + &.collapsed { + border-radius: 2rem; + } + .sk-session-info { flex: 1; display: flex; flex-direction: column; - gap: var(--sk-gap-m); + gap: var(--sk-gap-s); .info-heading-line { display: flex; diff --git a/projects/ui/src/lib/session/session.component.ts b/projects/ui/src/lib/session/session.component.ts index b01ff58..2096a63 100644 --- a/projects/ui/src/lib/session/session.component.ts +++ b/projects/ui/src/lib/session/session.component.ts @@ -10,6 +10,7 @@ import { LauncherService } from 'src/app/services/launcher.service' }) export class SessionComponent implements OnInit { @Input() session!: Session; + @Input() collapsed = false constructor( private launcher: LauncherService diff --git a/projects/ui/src/lib/tag/tag.component.scss b/projects/ui/src/lib/tag/tag.component.scss index 6f3175c..3c7b10d 100644 --- a/projects/ui/src/lib/tag/tag.component.scss +++ b/projects/ui/src/lib/tag/tag.component.scss @@ -8,7 +8,7 @@ .sk-tag { display: inline-flex; align-items: center; - padding: 2px var(--sk-gap-m); + padding: 0px var(--sk-gap-m); border-radius: var(--sk-br-s); background-color: rgba(255, 255, 255, 0.05); } diff --git a/src/app/components/loading-screen/loading-screen.component.scss b/src/app/components/loading-screen/loading-screen.component.scss index 88a8452..e7957c3 100644 --- a/src/app/components/loading-screen/loading-screen.component.scss +++ b/src/app/components/loading-screen/loading-screen.component.scss @@ -35,7 +35,6 @@ width: 140px; height: 140px; overflow: hidden; - background-color: var(--sk-item-active); mask-image: url('/assets/icon_mask.svg'); mask-size: cover; user-select: none; 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 32c1f82..f027d23 100644 --- a/src/app/components/main/main-menu/main-menu.component.html +++ b/src/app/components/main/main-menu/main-menu.component.html @@ -1,9 +1,9 @@
- + -
@@ -26,8 +26,8 @@ Downloads
--> - - + +
- + diff --git a/src/app/components/main/main-menu/main-menu.component.scss b/src/app/components/main/main-menu/main-menu.component.scss index 917d275..a3dd381 100644 --- a/src/app/components/main/main-menu/main-menu.component.scss +++ b/src/app/components/main/main-menu/main-menu.component.scss @@ -2,6 +2,20 @@ display: block; width: 340px; + &.collapsed { + width: 75px; + + menu { + + .menu-search-panel { + + button { + flex: 1; + } + } + } + } + menu { display: flex; margin: 0; @@ -35,7 +49,6 @@ appearance: none; background: none; border: 0; - transition: 0.1s ease; border-radius: var(--sk-br-m); cursor: pointer; flex-shrink: 0; diff --git a/src/app/components/main/main-menu/main-menu.component.ts b/src/app/components/main/main-menu/main-menu.component.ts index a2850ad..276b2aa 100644 --- a/src/app/components/main/main-menu/main-menu.component.ts +++ b/src/app/components/main/main-menu/main-menu.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, HostBinding, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; +import { LocalStorage } from 'ngx-webstorage' @Component({ selector: 'app-main-menu', @@ -9,7 +10,15 @@ import { FormControl } from '@angular/forms'; export class MainMenuComponent implements OnInit { search = new FormControl(''); + @HostBinding('class.collapsed') + @LocalStorage('menu-collapsed', false) + collapsed!: boolean + constructor() {} ngOnInit(): void {} + + toggle () { + this.collapsed = !this.collapsed + } } diff --git a/src/app/components/main/main-menu/menu-games/menu-games.component.html b/src/app/components/main/main-menu/menu-games/menu-games.component.html index c4f11b4..fd46624 100644 --- a/src/app/components/main/main-menu/menu-games/menu-games.component.html +++ b/src/app/components/main/main-menu/menu-games/menu-games.component.html @@ -1,9 +1,11 @@ - + Pinned games
{{games.length}}
 +
\ No newline at end of file diff --git a/src/app/components/main/main-menu/menu-games/menu-games.component.scss b/src/app/components/main/main-menu/menu-games/menu-games.component.scss index fcfcd51..a13fedb 100644 --- a/src/app/components/main/main-menu/menu-games/menu-games.component.scss +++ b/src/app/components/main/main-menu/menu-games/menu-games.component.scss @@ -1,6 +1,11 @@ :host { display: block; + skirda-icon { + margin-bottom: 12px; + opacity: 0.5; + } + .games { display: flex; flex-direction: column; diff --git a/src/app/components/main/main-menu/menu-games/menu-games.component.ts b/src/app/components/main/main-menu/menu-games/menu-games.component.ts index 92b0b54..adc8bf0 100644 --- a/src/app/components/main/main-menu/menu-games/menu-games.component.ts +++ b/src/app/components/main/main-menu/menu-games/menu-games.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { Game } from 'src/app/interfaces/game.interface' import { GoGetGames } from 'src/app/services/go'; @@ -24,6 +24,8 @@ export class MenuGamesComponent implements OnInit { games: Game[] = [] + @Input() collapsed: boolean = false + constructor() { } ngOnInit(): void { diff --git a/src/app/components/main/main-menu/menu-profile/menu-profile.component.html b/src/app/components/main/main-menu/menu-profile/menu-profile.component.html index 66638ac..f8b764b 100644 --- a/src/app/components/main/main-menu/menu-profile/menu-profile.component.html +++ b/src/app/components/main/main-menu/menu-profile/menu-profile.component.html @@ -1,13 +1,13 @@ - -
+ +
{{profile.username}} online
- + -
+
diff --git a/src/app/components/main/main-menu/menu-profile/menu-profile.component.ts b/src/app/components/main/main-menu/menu-profile/menu-profile.component.ts index 7fa837d..f492145 100644 --- a/src/app/components/main/main-menu/menu-profile/menu-profile.component.ts +++ b/src/app/components/main/main-menu/menu-profile/menu-profile.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { LocalStorage } from 'ngx-webstorage' import { Profile } from 'src/app/interfaces/profile.interface' @@ -14,6 +14,8 @@ export class MenuProfileComponent implements OnInit { @LocalStorage('theme', 'dark') public theme!: string + @Input() collapsed = false + constructor() { } ngOnInit(): void { diff --git a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html index 2849052..7dc962a 100644 --- a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html +++ b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html @@ -1,9 +1,11 @@ - + Active sessions
{{sessions.length}}
 +
diff --git a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.scss b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.scss index b643a78..adb20f8 100644 --- a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.scss +++ b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.scss @@ -1,6 +1,11 @@ :host { display: block; + skirda-icon { + margin-bottom: 12px; + opacity: 0.5; + } + .sessions { display: flex; flex-direction: column; diff --git a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts index 48bc2e5..b766194 100644 --- a/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts +++ b/src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { Session } from 'src/app/interfaces/session.interface'; import { GoGetSessions } from 'src/app/services/go'; @@ -33,6 +33,7 @@ export class MenuSessionsComponent implements OnInit { }, ]; sessions: Session[] = []; + @Input() collapsed = false constructor() {}