Merge remote-tracking branch 'origin/main'

2022-11-23 03:53:21 +03:00 · 2022-11-23 03:53:21 +03:00 · 1e7a347c83
commit 1e7a347c83
parent e54a881088 93c050c5ad
28 changed files with 164 additions and 94 deletions
--- 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"] {
--- a/projects/ui/src/lib/button/button.component.html
+++ b/projects/ui/src/lib/button/button.component.html
@ -1,3 +1,3 @@
-<button [attr.data-appearance]="appearance">
+<button [attr.data-appearance]="appearance" [attr.data-size]="size">
  <ng-content></ng-content>
 </button>
--- 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;
--- 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() {}
 }
--- 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';
--- a/projects/ui/src/lib/game/game.component.html
+++ b/projects/ui/src/lib/game/game.component.html
@ -1,12 +1,12 @@
 <a [routerLink]="['/game/' + game.gameId]" routerLinkActive="active">
-  <div class="sk-game">
+  <div class="sk-game" [ngClass]="{collapsed}">
    <skirda-image-icon [src]="game.image"></skirda-image-icon>
-    <div class="sk-game-info">
+    <div class="sk-game-info" *ngIf="!collapsed">
      <div class="info-game-line">
        <skirda-heading size="6">{{game.title}}</skirda-heading>
      </div>
      <skirda-text>description</skirda-text>
    </div>
-    <skirda-icon name="play" size="24" (click)="run(game)" color="var(--sk-primary-accent)"></skirda-icon>
+    <skirda-icon *ngIf="!collapsed" name="play" size="24" (click)="run(game)" color="var(--sk-primary-accent)"></skirda-icon>
  </div>
 </a>
--- 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);
      }
    }
  }
--- 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) { }

--- 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;
--- a/projects/ui/src/lib/session/session.component.html
+++ b/projects/ui/src/lib/session/session.component.html
@ -1,7 +1,7 @@
 <a [routerLink]="['/session/' + session.gameId]" routerLinkActive="active" [title]="session.status ?? 'No status'">
-  <div class="sk-session">
+  <div class="sk-session" [ngClass]="{collapsed}">
    <skirda-image-icon [src]="session.icon"></skirda-image-icon>
-    <div class="sk-session-info">
+    <div class="sk-session-info" *ngIf="!collapsed">
      <div class="info-heading-line">
        <skirda-heading size="6">{{session.title}}</skirda-heading>
      </div>
@ -10,6 +10,6 @@
        <skirda-tag>{{session.expires | countdown | async}}</skirda-tag>
      </div>
    </div>
-    <skirda-icon name="play" size="24" (click)="run(session)" color="var(--sk-primary-accent)"></skirda-icon>
+    <skirda-icon *ngIf="!collapsed" name="play" size="24" (click)="run(session)" color="var(--sk-primary-accent)"></skirda-icon>
  </div>
 </a>
--- 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;
--- 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
--- 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);
  }
--- 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;
 }
--- 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;
--- 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 @@
 <menu>
  <div class="menu-search-panel">
-    <skirda-input [formControl]="search" size="l" placeholder="Quick search">
+    <skirda-input *ngIf="!collapsed" [formControl]="search" size="l" placeholder="Quick search">
      <skirda-icon name="search" size="18" role="left"></skirda-icon>
    </skirda-input>
-    <button>
+    <button (click)="toggle()">
      <skirda-icon name="menu-panel" color="var(--sk-primary-accent)"></skirda-icon>
    </button>
  </div>
@ -26,8 +26,8 @@
        <skirda-heading size="6">Downloads</skirda-heading>
      </skirda-section>
    </div> -->
-    <app-menu-games></app-menu-games>
-    <app-menu-sessions></app-menu-sessions>
+    <app-menu-games [collapsed]="collapsed"></app-menu-games>
+    <app-menu-sessions [collapsed]="collapsed"></app-menu-sessions>
  </div>
-  <app-menu-profile></app-menu-profile>
+  <app-menu-profile  [collapsed]="collapsed"></app-menu-profile>
 </menu>
--- 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;
--- 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<string>('');

+  @HostBinding('class.collapsed')
+  @LocalStorage('menu-collapsed', false)
+  collapsed!: boolean
+
  constructor() {}

  ngOnInit(): void {}
+
+  toggle () {
+    this.collapsed = !this.collapsed
+  }
 }
--- 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 @@
-<skirda-section-label>
+<skirda-section-label *ngIf="!collapsed">
  Pinned games <div class="count">{{games.length}}</div>
 </skirda-section-label>
+<skirda-icon name="library" size="20" *ngIf="collapsed"></skirda-icon>
 <div class="games">
  <skirda-game
    *ngFor="let game of games; index as i"
    [game]="game"
+    [collapsed]="collapsed"
  ></skirda-game>
 </div>
--- 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;
--- 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 {
--- 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 @@
 <a [routerLink]="['profile']" routerLinkActive="active" class="profile-area">
-  <skirda-avatar [username]="profile.username" size="small"></skirda-avatar>
-  <div class="profile-info">
+  <skirda-avatar [username]="profile.username" size="default"></skirda-avatar>
+  <div class="profile-info" *ngIf="!collapsed">
    <skirda-heading size="6">{{profile.username}}</skirda-heading>
    <skirda-text>online</skirda-text>
  </div>
-  <a [routerLink]="['settings']">
+  <a [routerLink]="['settings']" *ngIf="!collapsed">
    <skirda-icon name="settings" color="var(--sk-primary-accent)"></skirda-icon>
  </a>
 </a>
-<div class="theme-toggle" (click)="toggleTheme()" [ngClass]="{'active': theme === 'light'}">
+<div class="theme-toggle" *ngIf="!collapsed" (click)="toggleTheme()" [ngClass]="{'active': theme === 'light'}">
  <skirda-icon name="sun" color="var(--sk-primary-accent)"></skirda-icon>
 </div>
--- 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 {
--- 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 @@
-<skirda-section-label>
+<skirda-section-label *ngIf="!collapsed">
  Active sessions <div class="count">{{sessions.length}}</div>
 </skirda-section-label>
+<skirda-icon name="server" size="20" *ngIf="collapsed"></skirda-icon>
 <div class="sessions">
  <skirda-session
    *ngFor="let session of sessions; index as i"
    [session]="session"
+    [collapsed]="collapsed"
  ></skirda-session>
 </div>
--- 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;
--- 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() {}

--- 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 @@
-<!-- <ng-template [skirdaPopup]></ng-template>
+
+<!-- File: name.component.html -->
+<!-- 1. Создать ng-template с директивой [skirdaPopup], в котором
+будет спавниться оверлей с окном (в будущем этот портал будет глобальным) -->
+<ng-template [skirdaPopup]></ng-template>
+
+<!-- 2. Если в окне нужно что-то более сложное, чем просто текст,
+то нужно создать шаблон тела окна (то, что между шапкой окна и кнопками действий) -->
 <ng-template #popupContent>
  <h1 style="font-size: 72px">😳🕶🤏</h1>
  <p>Church-key listicle whatever hoodie hexagon pour-over ascot paleo tacos, organic aesthetic tbh meggings raclette.</p>
-</ng-template> -->
-<!-- <skirda-button (click)="openPopup(popupContent)">
-  <skirda-icon name="play" size="16"></skirda-icon>
-  Run game
-</skirda-button> -->
+</ng-template>

 <div class="section">
  <div class="section-head">
@ -41,7 +44,13 @@
          <skirda-avatar *ngFor="let friend of friends" [username]="friend"></skirda-avatar>
        </div>
      </div>
-      <skirda-heading size="1">Play</skirda-heading>
+      <!-- 6. Вызываем в нужном месте (в html компонента) открытие попап окна и передаем в метод из ts шаблон
+      (название переменной popupContent должно совпадать с аттрибутом
+      у описанного шаблона из пункта 2 (<ng-template #popupContent>)) -->
+      <skirda-button size="large" appearance="primary" (click)="openPopup(popupContent)">
+        <skirda-icon name="play" size="32"></skirda-icon>
+        <skirda-heading size="1">Play</skirda-heading>
+      </skirda-button>
    </div>
  </div>
-</div>
+</div>
--- 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<string, Subscription> = 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<any>) {
-  //   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<any>) {
+    // Здесь мы подписываемся на ивента попап окна и сохраняем подписку, чтобы потом
+    // при дестрое компонента можно было от них отписаться
+    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}`);
+        })
+    );
+  }
 }