From 8aa3479c2c5e59be7bd132624a05451233de7e7e Mon Sep 17 00:00:00 2001 From: wagonsoftware Date: Fri, 21 Oct 2022 22:30:40 +0300 Subject: [PATCH] /sign-in route --- .../ui/src/lib/button/button.component.html | 3 +++ .../ui/src/lib/button/button.component.scss | 13 ++++++++++ .../src/lib/button/button.component.spec.ts | 23 ++++++++++++++++++ .../ui/src/lib/button/button.component.ts | 15 ++++++++++++ projects/ui/src/lib/button/button.module.ts | 10 ++++++++ .../lib/image-icon/image-icon.component.scss | 3 +-- .../ui/src/lib/session/session.component.scss | 2 +- .../lib/typography/text/text.component.scss | 3 +++ projects/ui/src/lib/ui.module.ts | 2 ++ src/.DS_Store | Bin 0 -> 6148 bytes src/app/app.module.ts | 2 ++ .../menu-sessions/menu-sessions.component.ts | 6 ++--- .../main/main-root/main-root.component.html | 3 ++- .../main/main-root/main-root.component.scss | 12 +++++++++ .../main/main-root/main-root.component.ts | 22 +++++++++++++---- .../components/sign-in/sign-in.component.html | 12 +++++++++ .../components/sign-in/sign-in.component.scss | 23 ++++++++++++++++++ .../sign-in/sign-in.component.spec.ts | 23 ++++++++++++++++++ .../components/sign-in/sign-in.component.ts | 14 +++++++++++ src/app/components/sign-in/sign-in.module.ts | 12 +++++++++ src/app/modules/app-routing.module.ts | 5 ++++ src/assets/icons/Name=discord.svg | 3 +++ 22 files changed, 199 insertions(+), 12 deletions(-) create mode 100644 projects/ui/src/lib/button/button.component.html create mode 100644 projects/ui/src/lib/button/button.component.scss create mode 100644 projects/ui/src/lib/button/button.component.spec.ts create mode 100644 projects/ui/src/lib/button/button.component.ts create mode 100644 projects/ui/src/lib/button/button.module.ts create mode 100644 src/.DS_Store create mode 100644 src/app/components/sign-in/sign-in.component.html create mode 100644 src/app/components/sign-in/sign-in.component.scss create mode 100644 src/app/components/sign-in/sign-in.component.spec.ts create mode 100644 src/app/components/sign-in/sign-in.component.ts create mode 100644 src/app/components/sign-in/sign-in.module.ts create mode 100644 src/assets/icons/Name=discord.svg diff --git a/projects/ui/src/lib/button/button.component.html b/projects/ui/src/lib/button/button.component.html new file mode 100644 index 0000000..dddf583 --- /dev/null +++ b/projects/ui/src/lib/button/button.component.html @@ -0,0 +1,3 @@ + diff --git a/projects/ui/src/lib/button/button.component.scss b/projects/ui/src/lib/button/button.component.scss new file mode 100644 index 0000000..ae66956 --- /dev/null +++ b/projects/ui/src/lib/button/button.component.scss @@ -0,0 +1,13 @@ +:host { + display: block; + + button { + padding: var(--sk-gap-m) var(--sk-gap-xl); + display: flex; + align-items: center; + gap: var(--sk-gap-m); + background-color: var(--sk-accent); + border: none; + border-radius: var(--sk-br-m); + } +} diff --git a/projects/ui/src/lib/button/button.component.spec.ts b/projects/ui/src/lib/button/button.component.spec.ts new file mode 100644 index 0000000..d9564d8 --- /dev/null +++ b/projects/ui/src/lib/button/button.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ButtonComponent } from './button.component'; + +describe('ButtonComponent', () => { + let component: ButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ButtonComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ui/src/lib/button/button.component.ts b/projects/ui/src/lib/button/button.component.ts new file mode 100644 index 0000000..4570358 --- /dev/null +++ b/projects/ui/src/lib/button/button.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'skirda-button', + templateUrl: './button.component.html', + styleUrls: ['./button.component.scss'] +}) +export class ButtonComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/projects/ui/src/lib/button/button.module.ts b/projects/ui/src/lib/button/button.module.ts new file mode 100644 index 0000000..27a2064 --- /dev/null +++ b/projects/ui/src/lib/button/button.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ButtonComponent } from './button.component'; + +@NgModule({ + declarations: [ButtonComponent], + imports: [CommonModule], + exports: [ButtonComponent], +}) +export class ButtonModule {} diff --git a/projects/ui/src/lib/image-icon/image-icon.component.scss b/projects/ui/src/lib/image-icon/image-icon.component.scss index a835557..babce4a 100644 --- a/projects/ui/src/lib/image-icon/image-icon.component.scss +++ b/projects/ui/src/lib/image-icon/image-icon.component.scss @@ -5,8 +5,7 @@ width: 40px; height: 40px; border-radius: 4px; - background-color: rgba(255, 255, 255, 0.1); - background-size: cover; + background-size: contain; background-repeat: no-repeat; background-position: center center; overflow: hidden; diff --git a/projects/ui/src/lib/session/session.component.scss b/projects/ui/src/lib/session/session.component.scss index b8fd348..e18a48c 100644 --- a/projects/ui/src/lib/session/session.component.scss +++ b/projects/ui/src/lib/session/session.component.scss @@ -4,7 +4,7 @@ &.active { .sk-session { - background-color: var(--sk-accent); + background-color: var(--image-accent); } } diff --git a/projects/ui/src/lib/typography/text/text.component.scss b/projects/ui/src/lib/typography/text/text.component.scss index e69de29..a059a25 100644 --- a/projects/ui/src/lib/typography/text/text.component.scss +++ b/projects/ui/src/lib/typography/text/text.component.scss @@ -0,0 +1,3 @@ +:host { + display: inline; +} diff --git a/projects/ui/src/lib/ui.module.ts b/projects/ui/src/lib/ui.module.ts index 90b0ac3..1d72f31 100644 --- a/projects/ui/src/lib/ui.module.ts +++ b/projects/ui/src/lib/ui.module.ts @@ -6,6 +6,7 @@ import { SectionModule } from './section/section.module'; import { TypographyModule } from './typography/typography.module'; import { SectionLabelModule } from './section-label/section-label.module'; import { ImageIconModule } from './image-icon/image-icon.module'; +import { ButtonModule } from './button/button.module'; @NgModule({ declarations: [], @@ -17,6 +18,7 @@ import { ImageIconModule } from './image-icon/image-icon.module'; TypographyModule, SectionLabelModule, ImageIconModule, + ButtonModule, ], exports: [ IconModule, diff --git a/src/.DS_Store b/src/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..34bc727b441724847e817d9b9762d9fa6839dec8 GIT binary patch literal 6148 zcmeHK!AiqG5Z!HSO(;SS3Oz1(Em*Bei7VDxmqJ*sh_7) zKbHPVG&%kw1NiKk%ws8BA*(*WcYhj3Y1Zp~@LIjG(cH8wt7YA~k1}^NFPo<$Z+4Bp zE~Je8()RqzD9k7A?Nga#UX+A0l@J9Xgxp+3Ng(r)oF_r5a$P-P*|t4tcNUA`px+h! z!O^lS7Q=&HR~+__mrL8)+1)!ipFG9SiG0;Wa(L&IY#A)!4U9@nL3$ti@E|7a=4Dhyh|?jTtaop4D388mTm5fEf541Gqm3P(;UIp;2ueFsK#)umNr* zU}GQru846f6`FHD?cu+XT}88^)bH+SZyL*eS~u)a{?j5``> zBnF6qDg)U2fwb}bKl{1=S3xuo1H{03GQb;ScRYgH%-On9C7!hc^bQmS;|h&mDPX9h g7-I1#?tm%*zd!@fF<58>4+wn-C>m%W2L6 +
+
content will be here diff --git a/src/app/components/main/main-root/main-root.component.scss b/src/app/components/main/main-root/main-root.component.scss index 95997d2..6343d15 100644 --- a/src/app/components/main/main-root/main-root.component.scss +++ b/src/app/components/main/main-root/main-root.component.scss @@ -1,5 +1,17 @@ :host { display: block; + position: relative; + width: 100vw; + height: 100vh; + overflow: hidden; + + img { + position: absolute; + height: 100%; + top: 0; + left: 50%; + translate: -50% 0%; + } .main-wrapper { display: flex; diff --git a/src/app/components/main/main-root/main-root.component.ts b/src/app/components/main/main-root/main-root.component.ts index 8a9fb67..56eac22 100644 --- a/src/app/components/main/main-root/main-root.component.ts +++ b/src/app/components/main/main-root/main-root.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { FastAverageColor } from 'fast-average-color'; +import { FastAverageColor, FastAverageColorResult } from 'fast-average-color'; @Component({ selector: 'app-main-root', @@ -7,18 +7,30 @@ import { FastAverageColor } from 'fast-average-color'; styleUrls: ['./main-root.component.scss'], }) export class MainRootComponent implements OnInit { - image: string = 'assets/games-icons/gmod.png'; + image: string = 'assets/games/minecraft/backgrounds/5.webp'; + color?: FastAverageColorResult; constructor() {} - ngOnInit(): void { - this.setColors(); + ngAfterViewInit(): void { + //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only. + //Add 'implements AfterViewInit' to the class. + window.addEventListener('load', () => { + this.setColors(); + }); } + ngOnInit(): void {} + setColors() { // extractColors(this.image).then((value) => { // console.log(value); // }); - console.log(FastAverageColor); + let fac = new FastAverageColor(); + this.color = fac.getColor( + document.getElementById('image') as HTMLImageElement + ); + + console.log(this.color); } } diff --git a/src/app/components/sign-in/sign-in.component.html b/src/app/components/sign-in/sign-in.component.html new file mode 100644 index 0000000..c094911 --- /dev/null +++ b/src/app/components/sign-in/sign-in.component.html @@ -0,0 +1,12 @@ +
+ + + Sign in with Discord + +
+
+ Please, check your default browser and click 'Continue' after Discord authentication: + + Continue + +
diff --git a/src/app/components/sign-in/sign-in.component.scss b/src/app/components/sign-in/sign-in.component.scss new file mode 100644 index 0000000..ac2970b --- /dev/null +++ b/src/app/components/sign-in/sign-in.component.scss @@ -0,0 +1,23 @@ +:host { + display: flex; + width: 100vw; + height: 100vh; + justify-content: center; + align-items: center; + + .sk-state { + width: 300px; + padding: var(--sk-gap-xl); + background-color: rgba(255, 255, 255, 0.05); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: var(--sk-br-m); + gap: var(--sk-gap-l); + + skirda-text { + text-align: center; + } + } +} diff --git a/src/app/components/sign-in/sign-in.component.spec.ts b/src/app/components/sign-in/sign-in.component.spec.ts new file mode 100644 index 0000000..bd946e2 --- /dev/null +++ b/src/app/components/sign-in/sign-in.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SignInComponent } from './sign-in.component'; + +describe('SignInComponent', () => { + let component: SignInComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SignInComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SignInComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/sign-in/sign-in.component.ts b/src/app/components/sign-in/sign-in.component.ts new file mode 100644 index 0000000..00c70e7 --- /dev/null +++ b/src/app/components/sign-in/sign-in.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-sign-in', + templateUrl: './sign-in.component.html', + styleUrls: ['./sign-in.component.scss'], +}) +export class SignInComponent implements OnInit { + inProgress: boolean = false; + + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/components/sign-in/sign-in.module.ts b/src/app/components/sign-in/sign-in.module.ts new file mode 100644 index 0000000..a1bfc48 --- /dev/null +++ b/src/app/components/sign-in/sign-in.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SignInComponent } from './sign-in.component'; +import { ButtonModule } from 'projects/ui/src/lib/button/button.module'; +import { IconModule, TypographyModule } from 'projects/ui/src/public-api'; + +@NgModule({ + declarations: [SignInComponent], + imports: [CommonModule, ButtonModule, IconModule, TypographyModule], + exports: [SignInComponent], +}) +export class SignInModule {} diff --git a/src/app/modules/app-routing.module.ts b/src/app/modules/app-routing.module.ts index c67ee7d..ff895ea 100644 --- a/src/app/modules/app-routing.module.ts +++ b/src/app/modules/app-routing.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; import { MainRootComponent } from '../components/main/main-root/main-root.component'; import { PlaygroundComponent } from '../components/playground/playground.component'; import { SandboxComponent } from '../components/sandbox/sandbox.component'; +import { SignInComponent } from '../components/sign-in/sign-in.component'; const routes: Routes = [ { @@ -17,6 +18,10 @@ const routes: Routes = [ path: 'sandbox', component: SandboxComponent, }, + { + path: 'sign-in', + component: SignInComponent, + }, ]; @NgModule({ diff --git a/src/assets/icons/Name=discord.svg b/src/assets/icons/Name=discord.svg new file mode 100644 index 0000000..d198389 --- /dev/null +++ b/src/assets/icons/Name=discord.svg @@ -0,0 +1,3 @@ + + +