Skirda/skirda-go-launcher-interface
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

left menu collapse state added

Browse Source
This commit is contained in:
svensken 2022-11-16 03:28:14 +03:00
parent 1c009c5d3e
commit 93c050c5ad
20 changed files with 77 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/ui/src/lib/avatar/avatar.component.scss
View File

@ -22,7 +22,7 @@
--local-size: 50px;
}
&[data-size="default"] {
--local-size: 42px;
--local-size: 40px;
font-weight: 500;
}
&[data-size="small"] {

6
projects/ui/src/lib/game/game.component.html
View File

@ -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>

6
projects/ui/src/lib/game/game.component.scss
View File

@ -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);
}
}
}

1
projects/ui/src/lib/game/game.component.ts
View File

@ -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) { }

6
projects/ui/src/lib/session/session.component.html
View File

@ -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>

6
projects/ui/src/lib/session/session.component.scss
View File

@ -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;

1
projects/ui/src/lib/session/session.component.ts
View File

@ -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

2
projects/ui/src/lib/tag/tag.component.scss
View File

@ -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);
}

1
src/app/components/loading-screen/loading-screen.component.scss
View File

@ -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;

10
src/app/components/main/main-menu/main-menu.component.html
View File

@ -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>

15
src/app/components/main/main-menu/main-menu.component.scss
View File

@ -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;

11
src/app/components/main/main-menu/main-menu.component.ts
View File

@ -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
}
}

4
src/app/components/main/main-menu/menu-games/menu-games.component.html
View File

@ -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>

5
src/app/components/main/main-menu/menu-games/menu-games.component.scss
View File

@ -1,6 +1,11 @@
:host {
display: block;
skirda-icon {
margin-bottom: 12px;
opacity: 0.5;
}
.games {
display: flex;
flex-direction: column;

4
src/app/components/main/main-menu/menu-games/menu-games.component.ts
View File

@ -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 {

8
src/app/components/main/main-menu/menu-profile/menu-profile.component.html
View File

@ -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>

4
src/app/components/main/main-menu/menu-profile/menu-profile.component.ts
View File

@ -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 {

4
src/app/components/main/main-menu/menu-sessions/menu-sessions.component.html
View File

@ -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>

5
src/app/components/main/main-menu/menu-sessions/menu-sessions.component.scss
View File

@ -1,6 +1,11 @@
:host {
display: block;
skirda-icon {
margin-bottom: 12px;
opacity: 0.5;
}
.sessions {
display: flex;
flex-direction: column;

3
src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts
View File

@ -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() {}