From c4665737dc274fc7a3dc442e6e437fdd13ed30da Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Sun, 10 Mar 2024 13:53:57 +0300 Subject: [PATCH 1/5] Lang save --- src/app/app.config.ts | 6 ++---- src/app/modules/panel/panel.component.less | 2 ++ src/app/services/translate.service.ts | 5 +++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 2af3ac9..98f23f7 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,17 +1,15 @@ import { APP_INITIALIZER, ApplicationConfig } from "@angular/core"; -import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; -import { routes } from "./app.routes"; import { TranslateService } from "./services/translate.service"; export function setupTranslateServiceFactory(service: TranslateService) { - return () => service.use("en"); + const lang = localStorage.getItem("lang") ?? "en"; + return () => service.use(lang); } export const appConfig: ApplicationConfig = { providers: [ - provideRouter(routes), provideHttpClient(), TranslateService, { diff --git a/src/app/modules/panel/panel.component.less b/src/app/modules/panel/panel.component.less index 94daf1d..9d20f01 100644 --- a/src/app/modules/panel/panel.component.less +++ b/src/app/modules/panel/panel.component.less @@ -57,6 +57,8 @@ align-items: center; span { font-weight: 600; + user-select: none; + -webkit-user-select: none; } fa-icon { font-size: 1.2rem; diff --git a/src/app/services/translate.service.ts b/src/app/services/translate.service.ts index 94c5502..0db4518 100644 --- a/src/app/services/translate.service.ts +++ b/src/app/services/translate.service.ts @@ -5,12 +5,13 @@ import { Injectable } from "@angular/core"; export class TranslateService { // eslint-disable-next-line @typescript-eslint/no-explicit-any data: Record = {}; - lang = "en"; + lang: string | null = null; constructor(private http: HttpClient) {} use(lang: string): Promise { this.lang = lang ?? "en"; + localStorage.setItem("lang", this.lang); return new Promise((resolve) => { - const langPath = `assets/i18n/${lang ?? "en"}.json`; + const langPath = `assets/i18n/${this.lang}.json`; this.http.get(langPath).subscribe({ next: (response) => { this.data = response ?? {}; From 2a31e85e5089bd39ff8888d817c6b9b4cbda15c0 Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Sun, 10 Mar 2024 13:56:09 +0300 Subject: [PATCH 2/5] Hide lang modal on click --- src/app/modules/panel/panel.component.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/app/modules/panel/panel.component.ts b/src/app/modules/panel/panel.component.ts index 09f5f0d..cbeaab5 100644 --- a/src/app/modules/panel/panel.component.ts +++ b/src/app/modules/panel/panel.component.ts @@ -53,6 +53,18 @@ export class PanelComponent { this.langModal.nativeElement.style.left = `calc(${x}px - 3.5rem)`; } + @HostListener("window:click", ["$event"]) + private closeLangModal(event: MouseEvent) { + if ( + this.langModal && + this.langBtn && + !this.langModal.nativeElement.contains(event.target as Node) && + !this.langBtn.nativeElement.contains(event.target as Node) + ) { + this.langModal.nativeElement.classList.remove("active"); + } + } + toggleModal() { if (this.langModal) { this.langModal.nativeElement.classList.toggle("active"); @@ -63,6 +75,7 @@ export class PanelComponent { } useLang(lang: string) { + this.langModal && this.langModal.nativeElement.classList.remove("active"); this.translateService.use(lang); } From 935d1f5dd98e66c0a0bbad7c8b067c6b82933801 Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Sun, 10 Mar 2024 13:56:25 +0300 Subject: [PATCH 3/5] Modal window btns cursor fix --- src/styles.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles.less b/src/styles.less index 220ca4a..665265e 100644 --- a/src/styles.less +++ b/src/styles.less @@ -47,6 +47,7 @@ ngneat-dialog { } .btns { fa-icon { + z-index: 999; cursor: pointer; } } From 1237ee4439268de69ecd3522904bcf6009cf1451 Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Sun, 10 Mar 2024 14:36:37 +0300 Subject: [PATCH 4/5] Style updates --- src/app/modules/link/link.component.less | 4 ++-- src/styles.less | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/modules/link/link.component.less b/src/app/modules/link/link.component.less index 7d53f3f..10c8536 100644 --- a/src/app/modules/link/link.component.less +++ b/src/app/modules/link/link.component.less @@ -10,7 +10,7 @@ a { flex-direction: column; justify-content: center; gap: 0; - transition: 0.3s ease-in-out; + transition: 0.5s ease-in-out; span { opacity: 0; visibility: hidden; @@ -21,7 +21,7 @@ a { font-size: 0.8rem; height: 0; font-weight: 600; - transition: opacity 0.3s ease-in-out; + transition: all 0.6s ease-in-out; } &:hover { transform: translateY(-1rem); diff --git a/src/styles.less b/src/styles.less index 665265e..722c3c2 100644 --- a/src/styles.less +++ b/src/styles.less @@ -48,7 +48,7 @@ ngneat-dialog { .btns { fa-icon { z-index: 999; - cursor: pointer; + cursor: not-allowed; } } .ngneat-drag-marker { From e291379602d2fa1e73acfe74907e2ac5bc28105a Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Mon, 11 Mar 2024 14:37:32 +0300 Subject: [PATCH 5/5] Icon title translate --- src/app/modules/link/link.component.html | 2 +- src/app/modules/panel/panel.component.html | 4 ++-- src/app/modules/panel/panel.component.ts | 5 ++++- src/assets/i18n/en.json | 3 ++- src/assets/i18n/ja.json | 3 ++- src/assets/i18n/ru.json | 3 ++- 6 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/app/modules/link/link.component.html b/src/app/modules/link/link.component.html index 580ecaa..282314f 100644 --- a/src/app/modules/link/link.component.html +++ b/src/app/modules/link/link.component.html @@ -1,4 +1,4 @@ - + {{ text | translate }} diff --git a/src/app/modules/panel/panel.component.html b/src/app/modules/panel/panel.component.html index 0350ee5..88baf9e 100644 --- a/src/app/modules/panel/panel.component.html +++ b/src/app/modules/panel/panel.component.html @@ -15,8 +15,8 @@ #lang_btn >{{ getLang() }} - - + + diff --git a/src/app/modules/panel/panel.component.ts b/src/app/modules/panel/panel.component.ts index cbeaab5..2fb6170 100644 --- a/src/app/modules/panel/panel.component.ts +++ b/src/app/modules/panel/panel.component.ts @@ -3,17 +3,20 @@ import { Component, ElementRef, HostListener, ViewChild } from "@angular/core"; import { FontAwesomeModule } from "@fortawesome/angular-fontawesome"; import { faGithub } from "@fortawesome/free-brands-svg-icons"; import { faPowerOff, faVolumeHigh } from "@fortawesome/free-solid-svg-icons"; +import { TranslationPipe } from '../../pipes/translation.pipe'; import { PanelSevice } from "../../services/panel.service"; import { TranslateService } from "../../services/translate.service"; @Component({ standalone: true, selector: "app-panel", - imports: [CommonModule, FontAwesomeModule], + imports: [CommonModule, FontAwesomeModule, TranslationPipe], templateUrl: "./panel.component.html", styleUrls: ["./panel.component.less"], }) export class PanelComponent { + source_code_btn_title = "SOURCE_CODE_TITLE" + public time = ""; faGithub = faGithub; faVolume = faVolumeHigh; diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 6ccb062..289fc66 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -4,5 +4,6 @@ "MODAL_TEXT": "Hello, World!", "TELEGRAM_LABEL": "Telegram channel", "GITHUB_LABEL": "Admin's Github", - "GITEA_LABEL": "Neuro LLC Gitea" + "GITEA_LABEL": "Neuro LLC Gitea", + "SOURCE_CODE_TITLE": "Source code" } diff --git a/src/assets/i18n/ja.json b/src/assets/i18n/ja.json index 94ee720..e710822 100644 --- a/src/assets/i18n/ja.json +++ b/src/assets/i18n/ja.json @@ -4,5 +4,6 @@ "MODAL_TEXT": "こんにちは、世界!", "TELEGRAM_LABEL": "Telegramチャンネル", "GITHUB_LABEL": "管理者Github", - "GITEA_LABEL": "Neuro LLC Gitea" + "GITEA_LABEL": "Neuro LLC Gitea", + "SOURCE_CODE_TITLE": "ソースコード" } diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index 1c67830..2b7209d 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -4,5 +4,6 @@ "MODAL_TEXT": "Здравствуйте, мир!", "TELEGRAM_LABEL": "Телеграм канал", "GITHUB_LABEL": "Github админа", - "GITEA_LABEL": "Neuro LLC Gitea" + "GITEA_LABEL": "Neuro LLC Gitea", + "SOURCE_CODE_TITLE": "Исходный код" }