feat(datahub): better language-switcher style & position

geonetwork · Nov 19, 2024 · 31bb299 · 31bb299
1 parent 68624e7
commit 31bb299
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 27 deletions.
diff --git a/apps/datahub/src/app/home/home-header/home-header.component.html b/apps/datahub/src/app/home/home-header/home-header.component.html
@@ -1,6 +1,6 @@
 <header class="h-full px-5" [style.background]="backgroundCss">
   <div
-    class="container-lg h-full mx-auto flex flex-col-reverse justify-between sm:flex-col sm:justify-end"
+    class="container-lg relative h-full mx-auto flex flex-col-reverse justify-between sm:flex-col sm:justify-end"
   >
     <div
       class="py-8 relative z-40 mb-[184px] sm:mb-0"
@@ -83,9 +83,13 @@
         class="tabs flex justify-between font-medium -mx-5 sm:mx-0 sm:mt-32 inset-x-0 bottom-0 z-50"
       ></datahub-navigation-menu>
     </div>
+    <gn-ui-language-switcher
+      *ngIf="showLanguageSwitcher"
+      class="language-switcher absolute top-3.5 right-6 text-[13px]"
+      [style.--color-main]="foregroundColor"
+      [style.--color-gray-300]="foregroundColor"
+      [style.--color-primary-darker]="foregroundColor"
+      [style.--color-primary-black]="foregroundColor"
+    ></gn-ui-language-switcher>
   </div>
-  <gn-ui-language-switcher
-    *ngIf="showLanguageSwitcher"
-    class="language-switcher absolute top-2.5 left-2.5 text-[13px]"
-  ></gn-ui-language-switcher>
 </header>
diff --git a/apps/datahub/src/app/home/home-header/home-header.component.ts b/apps/datahub/src/app/home/home-header/home-header.component.ts
@@ -48,6 +48,7 @@ export class HomeHeaderComponent {
   SORT_BY_PARAMS = SortByEnum
   searchConfig: SearchConfig = getOptionalSearchConfig()
   showLanguageSwitcher = getGlobalConfig().LANGUAGES?.length > 0
+  foregroundColor = getThemeConfig().HEADER_FOREGROUND_COLOR || '#ffffff'
 
   constructor(
     public routerFacade: RouterFacade,

diff --git a/apps/datahub/src/app/record/header-record/header-record.component.html b/apps/datahub/src/app/record/header-record/header-record.component.html
@@ -27,6 +27,8 @@
           class="language-switcher text-[13px] mt-0.5"
           [style.--color-main]="foregroundColor"
           [style.--color-gray-300]="foregroundColor"
+          [style.--color-primary-darker]="foregroundColor"
+          [style.--color-primary-black]="foregroundColor"
         ></gn-ui-language-switcher>
       </div>
     </div>

diff --git a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html b/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html
@@ -1,6 +1,6 @@
 <gn-ui-dropdown-selector
   [title]="'languages'"
-  [choices]="languageList"
+  [choices]="languageChoices"
   (selectValue)="changeLanguage($event)"
   [selected]="currentLang"
   ariaName="languages"

diff --git a/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts b/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts
@@ -1,10 +1,4 @@
-import {
-  Component,
-  Inject,
-  InjectionToken,
-  OnInit,
-  Optional,
-} from '@angular/core'
+import { Component, Inject, InjectionToken, Optional } from '@angular/core'
 import { LANGUAGE_STORAGE_KEY } from '@geonetwork-ui/util/i18n'
 import { TranslateService } from '@ngx-translate/core'
 
@@ -17,36 +11,33 @@ const DEFAULT_LANGUAGES = ['en', 'fr']
   templateUrl: './language-switcher.component.html',
   styleUrls: ['./language-switcher.component.css'],
 })
-export class LanguageSwitcherComponent implements OnInit {
-  languageList = this.languagePlaceholder || DEFAULT_LANGUAGES
+export class LanguageSwitcherComponent {
+  languageChoices = (this.languagesList || DEFAULT_LANGUAGES).map(
+    (language) => ({
+      label: `${language}`.toUpperCase(),
+      value: language,
+    })
+  )
 
   constructor(
     @Optional()
     @Inject(LANGUAGES_LIST)
-    private languagePlaceholder,
+    private languagesList: string[],
     private translate: TranslateService
   ) {}
 
   get currentLang() {
     return this.translate.currentLang
   }
 
-  ngOnInit(): void {
-    const languages = this.languagePlaceholder || DEFAULT_LANGUAGES
-    this.languageList = languages.map((language) => ({
-      label: `${language}`.toUpperCase(),
-      value: language,
-    }))
-  }
-
-  changeLanguage(value) {
+  changeLanguage(value: unknown) {
     try {
-      localStorage.setItem(LANGUAGE_STORAGE_KEY, value)
+      localStorage.setItem(LANGUAGE_STORAGE_KEY, value as string)
       location.reload()
     } catch (error) {
       console.warn(`Language choice could not be persisted`, error)
     }
 
-    this.translate.use(value)
+    this.translate.use(value as string)
   }
 }