Merge pull request #747 from geonetwork/DH/add-contact-to-news-page

Add contact block to news page and improve buttons

apps/datahub/src/app/home/news-page/news-page.component.html

@@ -20,6 +20,28 @@
         datahub.news.figures
       </h2>
       <datahub-key-figures></datahub-key-figures>
+      <div
+        *ngIf="!!getContactMail()"
+        class="py-[37px] px-6 rounded-lg bg-white border mt-5 card-shadow flex flex-col gap-3 border-secondary"
+      >
+        <h2
+          class="text-2xl font-title text-primary leading-7 text-left"
+          translate
+        >
+          datahub.news.contact.title
+        </h2>
+        <div
+          class="flex flex-col gap-3"
+          [innerHtml]="'datahub.news.contact.html' | translate"
+        ></div>
+        <a
+          [href]="'mailto:' + getContactMail()"
+          class="btn-secondary uppercase justify-center"
+          translate
+        >
+          datahub.news.contact.contactus
+        </a>
+      </div>
     </div>
   </div>
 </div>

apps/datahub/src/app/home/news-page/news-page.component.spec.ts

@@ -1,14 +1,31 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NewsPageComponent } from './news-page.component'
 import { NO_ERRORS_SCHEMA } from '@angular/core'
+import { getGlobalConfig } from '@geonetwork-ui/util/app-config'
+import { TranslateTestingModule } from '@geonetwork-ui/util/i18n'
+import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler'
 
+jest.mock('@geonetwork-ui/util/app-config', () => ({
+  getGlobalConfig: jest.fn(() => ({
+    CONTACT_EMAIL: '[email protected]',
+  })),
+}))
 describe('NewsPageComponent', () => {
   let component: NewsPageComponent
   let fixture: ComponentFixture<NewsPageComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [NewsPageComponent],
+      imports: [
+        TranslateTestingModule.withTranslations({
+          en: {
+            'datahub.news.contact.html': '<p>line1</p><p>line2</p>',
+          },
+        })
+          .withDefaultLanguage('en')
+          .withCompiler(new TranslateMessageFormatCompiler()),
+      ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents()
 
@@ -20,4 +37,8 @@ describe('NewsPageComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy()
   })
+
+  it('should return email', () => {
+    expect(getGlobalConfig().CONTACT_EMAIL).toEqual('[email protected]')
+  })
 })

apps/datahub/src/app/home/news-page/news-page.component.ts

@@ -1,9 +1,14 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { getGlobalConfig } from '@geonetwork-ui/util/app-config'
 
 @Component({
   selector: 'datahub-news-page',
   templateUrl: './news-page.component.html',
   styleUrls: ['./news-page.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NewsPageComponent {}
+export class NewsPageComponent {
+  getContactMail(): string {
+    return getGlobalConfig().CONTACT_EMAIL
+  }
+}

conf/default.toml

@@ -34,6 +34,8 @@ proxy_path = ""
 # More information about the translation can be found in the docs (https://geonetwork.github.io/geonetwork-ui/main/docs/reference/i18n.html)
 # languages = ['en', 'fr', 'de']
 
+# Enables displaying a "contact block" wherever relevant in applications
+# contact_email = "[email protected]"
 
 ### VISUAL THEME
 

libs/ui/inputs/src/lib/button/button.component.ts

@@ -21,50 +21,7 @@ export class ButtonComponent {
   @Output() buttonClick = new EventEmitter<void>()
 
   get classList() {
-    return `${this.color} ${this.textColor} ${this.borderColor} ${this.extraClass}`
-  }
-
-  get color() {
-    switch (this.type) {
-      case 'default':
-        return 'bg-gray-700 hover:bg-gray-800 hover:bg-gray-800 active:bg-gray-900'
-      case 'primary':
-        return 'bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest'
-      case 'secondary':
-        return 'bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest'
-      case 'outline':
-        return 'bg-white'
-      case 'light':
-        return 'bg-white hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100'
-    }
-  }
-
-  get textColor() {
-    switch (this.type) {
-      case 'default':
-      case 'secondary':
-      case 'primary':
-        return 'text-white'
-      case 'outline':
-        return 'text-main hover:text-primary-darker focus:text-primary-darker active:text-primary-black'
-      case 'light':
-        return 'text-main'
-    }
-  }
-
-  get borderColor() {
-    switch (this.type) {
-      case 'default':
-        return 'border border-gray-700 focus:ring-4 focus:ring-gray-200'
-      case 'secondary':
-        return 'border border-secondary focus:ring-4 focus:ring-secondary-lightest'
-      case 'primary':
-        return 'border border-primary focus:ring-4 focus:ring-primary-lightest'
-      case 'outline':
-        return 'border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker'
-      case 'light':
-        return 'border border-white focus:ring-4 focus:ring-gray-300'
-    }
+    return `btn-${this.type} ${this.extraClass}`
   }
 
   handleClick(event: Event) {

libs/util/app-config/src/lib/app-config.ts

@@ -100,6 +100,7 @@ export function loadAppConfig() {
           'login_url',
           'web_component_embedder_url',
           'languages',
+          'contact_email',
         ],
         warnings,
         errors
@@ -126,6 +127,7 @@ export function loadAppConfig() {
               WEB_COMPONENT_EMBEDDER_URL:
                 parsedGlobalSection.web_component_embedder_url,
               LANGUAGES: parsedGlobalSection.languages,
+              CONTACT_EMAIL: parsedGlobalSection.contact_email,
             } as GlobalConfig)
 
       const parsedLayersSections = parseMultiConfigSection(

libs/util/app-config/src/lib/model.ts

@@ -8,6 +8,7 @@ export interface GlobalConfig {
   LOGIN_URL?: string
   WEB_COMPONENT_EMBEDDER_URL?: string
   LANGUAGES?: string[]
+  CONTACT_EMAIL?: string
 }
 
 export interface LayerConfig {

tailwind.base.css

@@ -7,8 +7,38 @@
     @apply shadow-xl hover:shadow-xl-hover transition-shadow;
   }
 
+  .btn {
+    @apply flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50;
+  }
+
   .btn-default {
-    @apply bg-blue-600 text-white flex gap-3 items-center px-9 py-3 rounded-[50px] hover:scale-[1.02] transition-transform;
+    @apply btn text-white
+      bg-gray-700 hover:bg-gray-800 active:bg-gray-900
+      border border-gray-700 focus:ring-4 focus:ring-gray-200;
+  }
+
+  .btn-primary {
+    @apply btn text-white
+      bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest
+      border border-primary focus:ring-4 focus:ring-primary-lightest;
+  }
+
+  .btn-secondary {
+    @apply btn text-white
+      bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest
+      border border-secondary focus:ring-4 focus:ring-secondary-lightest;
+  }
+
+  .btn-outline {
+    @apply btn text-main
+      bg-white hover:text-primary-darker focus:text-primary-darker active:text-primary-black
+      border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker;
+  }
+
+  .btn-light {
+    @apply btn text-main
+      bg-white hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100
+      border border-white focus:ring-4 focus:ring-gray-300;
   }
 
   .badge-btn {

translations/de.json

@@ -110,6 +110,9 @@
   "datahub.header.organisations": "Organisationen",
   "datahub.header.popularRecords": "Die beliebtesten",
   "datahub.header.title.html": "<div class=\"text-white\">Entdecken Sie offene<br> Daten von meiner Organisation</div>",
+  "datahub.news.contact.contactus": "",
+  "datahub.news.contact.html": "",
+  "datahub.news.contact.title": "",
   "datahub.news.feed": "Nachrichtenfeed",
   "datahub.news.figures": "Indikatoren",
   "datahub.search.back": "Zurück zu den Ergebnissen",

translations/en.json

@@ -110,6 +110,9 @@
   "datahub.header.organisations": "Organisations",
   "datahub.header.popularRecords": "The most popular",
   "datahub.header.title.html": "<div class=\"text-white\">Discover open<br> data from my Organization</div>",
+  "datahub.news.contact.contactus": "Contact us",
+  "datahub.news.contact.html": "<p>Do you need data that is not currently present on the platform?</p><p>Our teams are here to answer you.</p>",
+  "datahub.news.contact.title": "A specific need?",
   "datahub.news.feed": "News feed",
   "datahub.news.figures": "Indicators",
   "datahub.search.back": "Back to results",

translations/es.json

@@ -110,6 +110,9 @@
   "datahub.header.organisations": "",
   "datahub.header.popularRecords": "",
   "datahub.header.title.html": "",
+  "datahub.news.contact.contactus": "",
+  "datahub.news.contact.html": "",
+  "datahub.news.contact.title": "",
   "datahub.news.feed": "",
   "datahub.news.figures": "",
   "datahub.search.back": "",

translations/fr.json

@@ -110,6 +110,9 @@
   "datahub.header.organisations": "Organisations",
   "datahub.header.popularRecords": "Les plus appréciées",
   "datahub.header.title.html": "<div class=\"text-white\">Toutes les données<br>publiques de mon organisation</div>",
+  "datahub.news.contact.contactus": "Contactez-nous",
+  "datahub.news.contact.html": "<p>Vous avez besoin de données qui ne sont pas présentes sur la plateforme actuellement ? </p><p> Nos équipes sont la pour vous répondre.</p>",
+  "datahub.news.contact.title": "Un besoin spécifique ?",
   "datahub.news.feed": "Fil d'activité",
   "datahub.news.figures": "Quelques chiffres",
   "datahub.search.back": "Retour aux résultats",

translations/it.json

@@ -110,6 +110,9 @@
   "datahub.header.organisations": "Organizzazioni",
   "datahub.header.popularRecords": "Più popolari",
   "datahub.header.title.html": "<div class=\"text-white\">Tutti i dati<br>pubblici della mia organizzazione</div>",
+  "datahub.news.contact.contactus": "",
+  "datahub.news.contact.html": "",
+  "datahub.news.contact.title": "",
   "datahub.news.feed": "Feed di attività",
   "datahub.news.figures": "Alcune figure",
   "datahub.search.back": "Torna ai risultati",
@@ -139,6 +142,7 @@
   "downloads.format.unknown": "sconosciuto",
   "downloads.wfs.featuretype.not.found": "Il layer non è stato trovato",
   "dropFile": "Trascina il suo file",
+  "externalviewer.dataset.unnamed": "",
   "facets.block.title.OrgForResource": "Organizzazione",
   "facets.block.title.availableInServices": "Disponibile per",
   "facets.block.title.cl_hierarchyLevel.key": "Tipo di risorsa",
@@ -305,6 +309,8 @@
   "tooltip.html.copy": "Copiare il HTML",
   "tooltip.url.copy": "Copiare l'URL",
   "tooltip.url.open": "Aprire l'URL",
+  "ui.readLess": "",
+  "ui.readMore": "",
   "wfs.featuretype.notfound": "La classe di oggetto non è stata trovata nel servizio",
   "wfs.geojsongml.notsupported": "Il servizio non supporta il formato GeoJSON o GML",
   "wfs.unreachable.cors": "Il servizio non è accessibile a causa di limitazioni CORS",

translations/nl.json

@@ -110,6 +110,9 @@
   "datahub.header.organisations": "",
   "datahub.header.popularRecords": "",
   "datahub.header.title.html": "",
+  "datahub.news.contact.contactus": "",
+  "datahub.news.contact.html": "",
+  "datahub.news.contact.title": "",
   "datahub.news.feed": "",
   "datahub.news.figures": "",
   "datahub.search.back": "",

translations/pt.json

@@ -110,6 +110,9 @@
   "datahub.header.organisations": "",
   "datahub.header.popularRecords": "",
   "datahub.header.title.html": "",
+  "datahub.news.contact.contactus": "",
+  "datahub.news.contact.html": "",
+  "datahub.news.contact.title": "",
   "datahub.news.feed": "",
   "datahub.news.figures": "",
   "datahub.search.back": "",

translations/sk.json

@@ -110,6 +110,9 @@
   "datahub.header.organisations": "Organizácie",
   "datahub.header.popularRecords": "Najpopulárnejšie",
   "datahub.header.title.html": "<div class=\"text-white\">Objavte otvorené<br>dáta z mojej organizácie</div>",
+  "datahub.news.contact.contactus": "",
+  "datahub.news.contact.html": "",
+  "datahub.news.contact.title": "",
   "datahub.news.feed": "Spravodajský kanál",
   "datahub.news.figures": "Ukazovatele",
   "datahub.search.back": "Späť na výsledky",