Create mobile-dropdown component and use it in Inputs. Change height to min-height in full-screen-modal and in cite-this.

2023-07-11 16:03:08 +03:00 · 2023-07-11 16:03:08 +03:00 · 9760ebab2e
parent ae68622fb6
commit 9760ebab2e
6 changed files with 97 additions and 15 deletions
--- a/landingPages/landing-utils/citeThis/citeThis.component.ts
+++ b/landingPages/landing-utils/citeThis/citeThis.component.ts
@ -21,7 +21,7 @@ declare var Cite: any;
@Component({
  selector: 'citeThis',
  template: `
-    <div class="uk-padding uk-padding-remove-top uk-height-large uk-overflow-auto">
+    <div class="uk-padding uk-padding-remove-top uk-height-min-large">
      <div input type="select" placeholder="Select a citation style" inputClass="flat x-small"
           [options]="citation.templates" [(value)]="selectedStyle"
           (valueChange)="styleChanged()"></div>
--- a/sharedComponents/input/input.component.ts
+++ b/sharedComponents/input/input.component.ts
@ -21,6 +21,8 @@ import {BehaviorSubject, Subscription} from "rxjs";
 import {EnvProperties} from "../../utils/properties/env-properties";
 import {properties} from "../../../../environments/environment";
 import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
+import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
+import {MobileDropdownComponent} from "../../utils/mobile-dropdown/mobile-dropdown.component";

 export type InputType =
    'text'
@ -186,7 +188,7 @@ declare var UIkit;
                  </div>
              </div>
          </div>
-          <div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
+          <div *ngIf="!mobile && filteredOptions && filteredOptions.length > 0 && opened" class="options uk-dropdown" #optionBox
               uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
              <ul class="uk-nav uk-dropdown-nav">
                  <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
@ -199,6 +201,22 @@ declare var UIkit;
                  </li>
              </ul>
          </div>
+          <mobile-dropdown *ngIf="mobile" #mobileDropdown>
+              <div *ngIf="placeholderInfo" class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase">
+                  {{placeholderInfo.label}}
+              </div>
+              <div class="uk-padding uk-padding-remove-horizontal">
+                  <ul class="uk-nav uk-nav-default">
+                      <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
+                          [class.uk-active]="formControl.value === option.value">
+                          <a (click)="selectOption(option, $event)"
+                             [class]="option.disabled ? 'uk-disabled uk-text-muted' : ''">
+                              <span>{{option.label}}</span>
+                          </a>
+                      </li>
+                  </ul>
+              </div>
+          </mobile-dropdown>
      </div>
      <span *ngIf="formControl?.invalid && formControl?.touched" class="uk-text-danger">
      <span *ngIf="errors?.error">{{errors?.error}}</span>
@ -273,6 +291,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
  public required: boolean = false;
  public focused: boolean = false;
  public opened: boolean = false;
+  public mobile: boolean = false;
  public properties: EnvProperties = properties;
  private initValue: any;
  private optionsArray: Option[] = [];
@ -280,6 +299,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
  private subscriptions: any[] = [];
  @ViewChild('inputBox') inputBox: ElementRef;
  @ViewChild('optionBox') optionBox: ElementRef;
+  @ViewChild('mobileDropdown') mobileDropdown: MobileDropdownComponent;
  @ViewChild('searchInput') searchInput: ElementRef;
  @ViewChildren('chip') chips: QueryList<ElementRef>;

@ -323,7 +343,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
    }
  }

-  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef) {
+  constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private layoutService: LayoutService) {
    if (elementRef.nativeElement.hasAttribute('dashboard-input') && this.properties.environment === "development") {
      console.warn("'dashboard-input' selector is deprecated; use 'input' instead.");
    }
@ -331,7 +351,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang

  @HostListener('window:keydown.arrowUp', ['$event'])
  arrowUp(event: KeyboardEvent) {
-    if (this.opened) {
+    if (this.opened && this.optionBox) {
      event.preventDefault();
      if (this.selectedIndex > 0) {
        this.selectedIndex--;
@ -342,7 +362,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang

  @HostListener('window:keydown.arrowDown', ['$event'])
  arrowDown(event: KeyboardEvent) {
-    if (this.opened) {
+    if (this.opened && this.optionBox) {
      event.preventDefault();
      if (this.selectedIndex < (this.filteredOptions.length - 1)) {
        this.selectedIndex++;
@ -409,6 +429,10 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
  }

  ngOnInit() {
+    this.subscriptions.push(this.layoutService.isMobile.subscribe(mobile => {
+      this.mobile = mobile;
+      this.cdr.detectChanges();
+    }));
    InputComponent.INPUT_COUNTER++;
    this.id = 'input-' + InputComponent.INPUT_COUNTER;
    if (!this.formControl) {
@ -739,17 +763,26 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
  open(value: boolean) {
    this.opened = value && this.formControl.enabled;
    this.cdr.detectChanges();
-    if (this.optionBox && this.opened) {
+    if(this.optionBox) {
+      if (this.opened) {
        this.selectedIndex = this.filteredOptions.findIndex(option => option.value === this.formControl.value);
        if (this.selectedIndex === -1 && this.type !== 'autocomplete_soft') {
          this.selectedIndex = 0;
        }
        UIkit.dropdown(this.optionBox.nativeElement).show();
      } else {
-      if (this.optionBox) {
        UIkit.dropdown(this.optionBox.nativeElement).hide();
        this.focused = false;
      }
+    } else if(this.mobileDropdown) {
+      if(this.opened) {
+        this.mobileDropdown.open();
+        if(this.searchInput) {
+          this.searchInput.nativeElement.blur();
+        }
+      } else {
+        this.mobileDropdown.close();
+      }
    }
  }

--- a/sharedComponents/input/input.module.ts
+++ b/sharedComponents/input/input.module.ts
@ -4,13 +4,15 @@ import {SharedModule} from "../../../openaireLibrary/shared/shared.module";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {SafeHtmlPipeModule} from "../../utils/pipes/safeHTMLPipe.module";
 import {ClickModule} from "../../utils/click/click.module";
+import {MobileDropdownModule} from "../../utils/mobile-dropdown/mobile-dropdown.module";

@NgModule({
  imports: [
    SharedModule,
    IconsModule,
    SafeHtmlPipeModule,
-    ClickModule
+    ClickModule,
+    MobileDropdownModule
  ],
  exports: [
    InputComponent
--- a/utils/mobile-dropdown/mobile-dropdown.component.ts
+++ b/utils/mobile-dropdown/mobile-dropdown.component.ts
@ -0,0 +1,36 @@
+import {Component, Input, OnInit} from "@angular/core";
+
+@Component({
+  selector: 'mobile-dropdown',
+  template: `
+      <div class="uk-dropdown-mobile" [class.uk-open]="opened">
+          <div class="uk-dropdown-mobile-container">
+              <a class="uk-close" (click)="close()">
+                  <icon name="close" [ratio]="1.2"></icon>
+              </a>
+              <div class="uk-content">
+                  <ng-content></ng-content>
+              </div>
+          </div>
+      </div>`
+})
+export class MobileDropdownComponent implements OnInit{
+  @Input() toggle: HTMLLinkElement;
+  public opened: boolean = false;
+
+  ngOnInit() {
+    if(this.toggle) {
+      this.toggle.onclick = (ev) => {
+        this.opened = !this.opened;
+      }
+    }
+  }
+
+  open() {
+    this.opened = true;
+  }
+
+  close() {
+    this.opened = false;
+  }
+}
--- a/utils/mobile-dropdown/mobile-dropdown.module.ts
+++ b/utils/mobile-dropdown/mobile-dropdown.module.ts
@ -0,0 +1,11 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {MobileDropdownComponent} from "./mobile-dropdown.component";
+import {IconsModule} from "../icons/icons.module";
+
+@NgModule({
+  imports: [CommonModule, IconsModule],
+  declarations: [MobileDropdownComponent],
+  exports: [MobileDropdownComponent]
+})
+export class MobileDropdownModule {}
--- a/utils/modal/full-screen-modal/full-screen-modal.component.ts
+++ b/utils/modal/full-screen-modal/full-screen-modal.component.ts
@ -45,7 +45,7 @@ declare var ResizeObserver;
          </div>
        </div>
        <div #body class="uk-modal-body uk-overflow-auto uk-border-box"  [ngStyle]="{'height.px': bodyHeight}">
-          <div class="uk-container uk-height-1-1" [ngClass]="classBody">
+          <div class="uk-container" style="min-height: 100%" [ngClass]="classBody">
            <ng-content></ng-content>
          </div>
        </div>