Add beta tag and feedback fish

src/app/app.component.html

@@ -30,7 +30,7 @@
 
 <osem-time-slider-container></osem-time-slider-container>
 
-<osem-filter-container [@slideInOutHorizontalBoolean]="(filterVisible$ | async)"></osem-filter-container>
+<osem-filter-container (toggleIntro)="openIntro()" [@slideInOutHorizontalBoolean]="(filterVisible$ | async)"></osem-filter-container>
 <osem-filter-container-values *ngIf="!(filterVisible$ | async)" [@appearSlow]="!(filterVisible$ | async)"></osem-filter-container-values>
 
 <osem-bottom-bar-container></osem-bottom-bar-container>
@@ -43,7 +43,7 @@
 <!-- <osem-map-options-container></osem-map-options-container> -->
 
 <!-- INFO PHENO MODAL: TODO: rename -->
-<osem-pheno-info-modal *ngIf="infoPheno$ | async"></osem-pheno-info-modal> 
+<osem-pheno-info-modal *ngIf="infoPheno$ | async"></osem-pheno-info-modal>
 
 <div id="backdrop" *ngIf="sidebarOutlet.isActivated">
 

src/app/app.component.ts

@@ -15,7 +15,7 @@ import { UiService } from './models/ui/state/ui.service';
 export class AppComponent {
 
   title = 'openSenseMapX';
-  intro = true;
+  intro = false;
   backdrop = false;
 
   language$ = this.uiQuery.selectLanguage$;
@@ -47,16 +47,20 @@ export class AppComponent {
     this.intro = false;
   }
 
+  openIntro(){
+    this.intro = true;
+  }
+
   onModalActivate($event){
     this.backdrop = true;
   }
-  
+
   onModalDeactivate($event){
     this.backdrop = false;
   }
     // close modal on esc
   @HostListener('document:keydown', ['$event'])
-  handleKeyboardEvent(event: KeyboardEvent) { 
+  handleKeyboardEvent(event: KeyboardEvent) {
     if (event.keyCode == 27){
       this.closeModal();
     }

src/app/modules/core/filter/filter-container/filter-container.component.html

@@ -1,4 +1,21 @@
 <div class="filter-container">
+    <div class="nav-right-container">
+        <div class="logo" [routerLink]="['']">
+            <img src="/assets/img/logos/osem.svg">
+            <span>openSenseMap</span>
+            <span class="tag is-warning is-medium" (click)="openIntro()">Beta</span>
+        </div>
+        <div class="nav-item-container osem-box-shadow-basic">
+            <div class="nav-item">
+                <span data-feedback-fish class="icon-text">
+                    <span class="icon">
+                        <i class="fas fa-bell"></i>
+                    </span>
+                    <span>Feedback</span>
+                </span>
+            </div>
+        </div>
+    </div>
     <div class="filter-inner">
         <osem-search
             (changedSearchTerm)="search($event)"
@@ -10,14 +27,14 @@
             [autoCompleteResults]="autoCompleteResults$ | async"
             [locationAutocompleteResults]="locationAutocompleteResults$ | async"
         ></osem-search>
-        <osem-datepicker 
+        <osem-datepicker
             [dateRange]="selectedDateRange$ | async"
             [dateStamp]="selectedDateStamp$ | async"
             [activeTimeMode]="selectActiveTimeMode$ | async"
             [showDateModal]="showDateModal$ | async"
             (dateChanged)="changeDateRange($event)"
             (toggledDateModal)="toggleDateModal($event)"></osem-datepicker>
-        
+
         <osem-filter-switcher
             [activeTab]="activeTab$ | async"
             [selectedPheno]="selectedPheno$ | async"
@@ -35,9 +52,9 @@
 
         ></osem-filter-switcher>
     </div>
-    
-    <div 
-        id="filter-minimizer" 
+
+    <div
+        id="filter-minimizer"
         class="osem-box-shadow-basic"
         [class.minimized]="!(filterVisible$ | async)"
         (click)="toggleMinimizeFilter()">

src/app/modules/core/filter/filter-container/filter-container.component.scss

@@ -1,7 +1,7 @@
 @import '../../../../../styles/variables.scss';
 
 .filter-container {
-    
+
     .filter-inner {
         background: var(--background-primary-full);
         box-shadow: var(--box-shadow-basic);
@@ -58,4 +58,53 @@
         // transform: translate3d(-50%, -50%, 0);
     }
 
+}
+
+.logo {
+    position: relative;
+    height: $headerHeight;
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    font-weight: bold;
+    background: var(--background-primary-full);
+    right: 0;
+    color: var(--color-primary);
+    padding: 0 1em;
+    cursor: pointer;
+    justify-content: space-evenly;
+
+    img {
+        height: 80%;
+    }
+}
+.nav-right-container {
+    // padding: 0.2em 0.3em;
+    display: flex;
+    position: relative;
+    height: $headerHeight;
+    @media screen and(max-width: $secondBreak){
+        box-shadow: var(--box-shadow-basic);
+        width: 100%;
+        justify-content: space-between;
+        background: var(--background-primary-full);
+    }
+    // width: 281px;
+
+    .nav-item-container {
+        display: flex;
+    }
+
+    .nav-item {
+        background: var(--background-secondary);
+        color: var(--text-color-secondary);
+        line-height: 38px;
+        min-width: 42px;
+        cursor: pointer;
+        padding: 0.2em 0.3em;
+        font-weight: bold;
+        justify-content: center;
+        display: flex;
+        align-items: center;
+    }
 }

src/app/modules/core/filter/filter-container/filter-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { combineLatest, Observable, empty, of } from 'rxjs';
 
 import { BoxService } from 'src/app/models/box/state/box.service';
@@ -20,6 +20,8 @@ import { SessionQuery } from 'src/app/models/session/state/session.query';
 })
 export class FilterContainerComponent implements OnInit {
 
+  @Output() toggleIntro = new EventEmitter<string>();
+
   showDateModal$ = this.uiQuery.selectShowDateModal$;
   selectedDateRange$ = this.uiQuery.selectDateRange$;
   selectedDateStamp$ = this.uiQuery.selectDateStamp$;
@@ -29,7 +31,7 @@ export class FilterContainerComponent implements OnInit {
   user$ = this.sessionQuery.user$;
   searchTerm$ = this.uiQuery.selectSearchTerm$;
   locationAutocompleteResults$ = this.uiQuery.selectLocationAutocompleteResults$;
-  
+
   filters$ = this.uiQuery.selectFilters$;
   stats$ = this.uiQuery.selectStats$;
 
@@ -53,7 +55,7 @@ export class FilterContainerComponent implements OnInit {
     private uiQuery: UiQuery) { }
 
   ngOnInit() {
-   
+
     // fetch data for timerange-display
     // combineLatest(this.selectedDateRange$, this.selectedPheno$).subscribe(res => {
     //   if(res[0] && res[1]){
@@ -151,7 +153,11 @@ export class FilterContainerComponent implements OnInit {
   toggleChange(){
     this.change = !this.change;
   }
-
+
+  openIntro(){
+    this.toggleIntro.emit('intro');
+  }
+
   selectInfoPheno(pheno){
     this.uiService.setInfoPheno(pheno);
   }

src/app/modules/core/nav/nav-right/nav-right.component.html

@@ -1,10 +1,4 @@
 <div class="nav-right-container">
-    <div class="logo" [routerLink]="['']">
-       <img src="/assets/img/logos/osem.svg"> <span>openSenseMap</span>
-       <div id="beta-text" [title]="'BETA_TEXT' | translate">
-           BETA
-       </div>
-    </div>
     <div class="nav-item-container osem-box-shadow-basic">
         <div *ngIf="!user" class="nav-item osem-disabled" [routerLink]="[{ outlets: { sidebar: ['login'] }}]" queryParamsHandling="merge">
             Login
@@ -23,7 +17,7 @@
 
 
 <div id="settings" class="osem-box-shadow-basic" *ngIf="settings" [@slideInOutMenu]>
-    
+
     <h2 class="underline pt-3">{{'PAGE_SETTINGS' | translate}}</h2>
     <div class="option-container pt-4">
         <div class="option-inner">

src/index.html

@@ -11,5 +11,6 @@
 </head>
 <body>
   <osem-root></osem-root>
+  <script defer src="https://feedback.fish/ff.js?pid=34c4d997868867"></script>
 </body>
 </html>