From d794b09007c85a38fbf003e56faf03e1b73eb7f0 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 14 Nov 2023 17:44:58 +0300 Subject: [PATCH] locale component --- .../layout/header/header.component.html | 28 ++++--------- .../layout/header/header.component.scss | 4 +- .../layout/header/header.component.ts | 38 +----------------- .../slider-menu/slider-menu.component.html | 16 ++------ .../menu/slider-menu/slider-menu.component.ts | 12 ++++++ .../widjet/locale/locale.component.html | 17 ++++++++ .../widjet/locale/locale.component.scss | 0 .../widjet/locale/locale.component.ts | 40 +++++++++++++++++++ src/app/_modules/widjet/widjet.module.ts | 7 +++- src/assets/css/_basics.scss | 26 ++++++++++++ 10 files changed, 113 insertions(+), 75 deletions(-) create mode 100644 src/app/_modules/widjet/locale/locale.component.html create mode 100644 src/app/_modules/widjet/locale/locale.component.scss create mode 100644 src/app/_modules/widjet/locale/locale.component.ts diff --git a/src/app/_modules/layout/header/header.component.html b/src/app/_modules/layout/header/header.component.html index dd1407e..85a87db 100644 --- a/src/app/_modules/layout/header/header.component.html +++ b/src/app/_modules/layout/header/header.component.html @@ -3,28 +3,14 @@ -
-
- - {{rootPage?.slug||'ru'}} - -
- -
-
-
-
{{locale.name}}
-
-
-
-
- - - - !!!!!!!!!! + +
+ + !!!!!!!!!! +
+ diff --git a/src/app/_modules/layout/header/header.component.scss b/src/app/_modules/layout/header/header.component.scss index 69e8593..8b13789 100644 --- a/src/app/_modules/layout/header/header.component.scss +++ b/src/app/_modules/layout/header/header.component.scss @@ -1,3 +1 @@ -a.active { - color: #000000; -} + diff --git a/src/app/_modules/layout/header/header.component.ts b/src/app/_modules/layout/header/header.component.ts index 89f2bc9..2b713e1 100644 --- a/src/app/_modules/layout/header/header.component.ts +++ b/src/app/_modules/layout/header/header.component.ts @@ -1,5 +1,4 @@ import {Component} from '@angular/core'; -import {AuthenticationService} from "@app/_services"; import {Router} from "@angular/router"; import {PagesService} from "@app/_services/pages.service"; @@ -9,16 +8,9 @@ import {PagesService} from "@app/_services/pages.service"; styleUrls: ['header.component.scss'] }) export class HeaderComponent { - public menuItems = []; - public loading: boolean = false; - public error: string = ''; - public ddMenu:boolean; - - public locales = []; constructor( - private router: Router, - public authenticationService: AuthenticationService, + private router: Router, public pagesService: PagesService ) { } @@ -27,36 +19,8 @@ export class HeaderComponent { return this.pagesService.rootPage; } - get flag(){ - return 'assets/images/locale/'+(this.rootPage?.slug||'ru')+'.svg' - } - - ngOnInit() { - this.pagesService.root().subscribe(res => { - this.locales = res.data; - }); - } - - ngOnDestroy() { - } - - - login() { - this.authenticationService.popup('login'); - } - openMobileMenu(){ this.router.navigate([{outlets: {slider: 'pages-menu'}}], {skipLocationChange: true}).then(); } - - - - - - close() { - setTimeout(() => { - this.ddMenu = false; - }, 10); - } } diff --git a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html index bec3fe6..66082c8 100644 --- a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html +++ b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.html @@ -1,22 +1,12 @@
- +
-
- - -
\ No newline at end of file diff --git a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts index b1d7bf1..01b3c31 100644 --- a/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts +++ b/src/app/_modules/pages/menu/slider-menu/slider-menu.component.ts @@ -1,4 +1,6 @@ import { Component } from '@angular/core'; +import {Router} from "@angular/router"; +import {PagesService} from "@app/_services/pages.service"; @Component({ selector: 'slider-menu', @@ -7,4 +9,14 @@ import { Component } from '@angular/core'; }) export class SliderMenuComponent { + constructor( + private router: Router, + public pagesService: PagesService + ) { + } + + get rootPage() { + return this.pagesService.rootPage; + } + } diff --git a/src/app/_modules/widjet/locale/locale.component.html b/src/app/_modules/widjet/locale/locale.component.html new file mode 100644 index 0000000..4ac9254 --- /dev/null +++ b/src/app/_modules/widjet/locale/locale.component.html @@ -0,0 +1,17 @@ +
+
+ + +
+ +
+
+
+
+ + {{locale.name}} +
+
+
+
+
\ No newline at end of file diff --git a/src/app/_modules/widjet/locale/locale.component.scss b/src/app/_modules/widjet/locale/locale.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/_modules/widjet/locale/locale.component.ts b/src/app/_modules/widjet/locale/locale.component.ts new file mode 100644 index 0000000..3057c8c --- /dev/null +++ b/src/app/_modules/widjet/locale/locale.component.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import {PagesService} from "@app/_services/pages.service"; +import { environment } from '@environments/environment'; + +@Component({ + selector: 'locale', + templateUrl: './locale.component.html', + styleUrls: ['./locale.component.scss'] +}) +export class LocaleComponent { + + public locales = []; + public ddMenu:boolean; + + constructor( + public pagesService: PagesService + ){} + + ngOnInit() { + this.pagesService.root().subscribe(res => { + this.locales = res.data; + }); + } + + get rootPage() { + return this.pagesService.rootPage; + } + + flag(localeName:string){ + if (!localeName) localeName = environment.defaultLocale; + return 'assets/images/locale/'+(localeName||'ru')+'.svg' + } + + close() { + setTimeout(() => { + this.ddMenu = false; + }, 10); + } + +} diff --git a/src/app/_modules/widjet/widjet.module.ts b/src/app/_modules/widjet/widjet.module.ts index a7cec76..6f20941 100644 --- a/src/app/_modules/widjet/widjet.module.ts +++ b/src/app/_modules/widjet/widjet.module.ts @@ -1,16 +1,19 @@ import { NgModule } from "@angular/core"; import {BrowserModule} from "@angular/platform-browser"; import { IcoComponent } from "./ico/ico.component"; +import {RouterModule} from "@angular/router"; // import { QRCodeComponent } from "./qrcode/qrcode.component"; // import { QRCodeModule } from "angularx-qrcode"; import {DropDownComponent } from "./drop-down/drop-down.component"; import { SliderComponent } from './slider/slider.component'; import { SwitchComponent } from './switch/switch.component'; +import { LocaleComponent } from './locale/locale.component'; @NgModule({ imports:[ BrowserModule, + RouterModule // QRCodeModule ], declarations: [ @@ -19,13 +22,15 @@ import { SwitchComponent } from './switch/switch.component'; DropDownComponent, SliderComponent, SwitchComponent, + LocaleComponent, ], exports: [ IcoComponent, // QRCodeComponent, DropDownComponent, SliderComponent, - SwitchComponent + SwitchComponent, + LocaleComponent ] }) export class WidjetModule { diff --git a/src/assets/css/_basics.scss b/src/assets/css/_basics.scss index 9ab82e5..0aa3647 100644 --- a/src/assets/css/_basics.scss +++ b/src/assets/css/_basics.scss @@ -26,6 +26,14 @@ visibility: collapse; } +.inline{ + display: inline-flex; +} + +.center{ + align-items: center; +} + .menu, .page-header { display: flex; .block { @@ -394,6 +402,24 @@ html-section ul{ } +.locale{ + position: relative; + .locale-btn{ + display: inline-flex; + } + .dropdown{ + top: 27px; + left: -120px; + } + img{ + height:18px; + width:27px; + object-fit: cover; + border: 1px solid lightgray; + } +} + + @media screen and (min-width: 1330px) { .fullwidth { width: 100vw;