From 056faac88fd45f2ebcf48a550f21517455b8a80c Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 26 Jul 2023 11:49:50 +0300 Subject: [PATCH] Add mobile-dropown in dropdown-filter. Fix input autocomplete in mobile. Fix icon alignment in fundedBy. Add scroll to top in fs-modal and on change tab in landing mobile bar. --- .../dataProvider/dataProvider.component.html | 6 ++-- .../landing-utils/fundedBy.component.ts | 4 +-- .../projects-in-modal.component.ts | 12 ++----- .../organization/organization.component.html | 8 ++--- landingPages/project/project.component.html | 6 ++-- .../result/resultLanding.component.html | 6 ++-- sharedComponents/input/input.component.ts | 5 ++- .../dropdown-filter.component.ts | 32 +++++++++++++++---- .../dropdown-filter/dropdown-filter.module.ts | 3 +- .../mobile-dropdown.component.ts | 6 ++-- .../full-screen-modal.component.ts | 2 +- 11 files changed, 55 insertions(+), 35 deletions(-) diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html index 0020f149..3d2cc288 100644 --- a/landingPages/dataProvider/dataProvider.component.html +++ b/landingPages/dataProvider/dataProvider.component.html @@ -437,19 +437,19 @@
- + {{openaireEntities.DATASOURCE}}
- + Metrics
- + Actions diff --git a/landingPages/landing-utils/fundedBy.component.ts b/landingPages/landing-utils/fundedBy.component.ts index e460155d..c03a5ea1 100644 --- a/landingPages/landing-utils/fundedBy.component.ts +++ b/landingPages/landing-utils/fundedBy.component.ts @@ -34,8 +34,8 @@ import {RouterHelper} from "../../utils/routerHelper.class";
- + class="uk-flex uk-flex-middle uk-margin-small-bottom"> + diff --git a/landingPages/landing-utils/projects-in-modal.component.ts b/landingPages/landing-utils/projects-in-modal.component.ts index cf49af6c..b82392f7 100644 --- a/landingPages/landing-utils/projects-in-modal.component.ts +++ b/landingPages/landing-utils/projects-in-modal.component.ts @@ -1,8 +1,6 @@ import {Component, Input} from '@angular/core'; -import {ActivatedRoute} from '@angular/router'; import {FetchProjects} from '../../utils/fetchEntitiesClasses/fetchProjects.class'; -import {SearchProjectsService} from '../../services/searchProjects.service'; import {ErrorCodes} from '../../utils/properties/errorCodes'; import {StringUtils} from '../../utils/string-utils.class'; @@ -18,7 +16,7 @@ import {OpenaireEntities} from '../../utils/properties/searchFields';
+ [name]="filter.title" [count]="filter.countSelectedValues" [isMobile]="isMobile">
0) { diff --git a/landingPages/organization/organization.component.html b/landingPages/organization/organization.component.html index f5fab784..34b65040 100644 --- a/landingPages/organization/organization.component.html +++ b/landingPages/organization/organization.component.html @@ -208,7 +208,7 @@
-
@@ -366,13 +366,13 @@
- + Actions @@ -533,7 +533,7 @@
-
diff --git a/landingPages/project/project.component.html b/landingPages/project/project.component.html index dc3c5648..5166224b 100644 --- a/landingPages/project/project.component.html +++ b/landingPages/project/project.component.html @@ -561,19 +561,19 @@
- + Actions diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html index df125f35..4690e73e 100644 --- a/landingPages/result/resultLanding.component.html +++ b/landingPages/result/resultLanding.component.html @@ -672,7 +672,7 @@
- + Actions diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts index 7d511776..296622bb 100644 --- a/sharedComponents/input/input.component.ts +++ b/sharedComponents/input/input.component.ts @@ -211,7 +211,7 @@ declare var UIkit;
- +
{{placeholderInfo.label}}
@@ -839,6 +839,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang this.searchControl.setValue(''); } } + if(this.mobileDropdown) { + this.mobileDropdown.close(); + } } dateChanged(event: Date) { diff --git a/utils/dropdown-filter/dropdown-filter.component.ts b/utils/dropdown-filter/dropdown-filter.component.ts index a780286a..2c7f1847 100644 --- a/utils/dropdown-filter/dropdown-filter.component.ts +++ b/utils/dropdown-filter/dropdown-filter.component.ts @@ -1,23 +1,32 @@ import {Component, ElementRef, Input, ViewChild} from "@angular/core"; +import {MobileDropdownComponent} from "../mobile-dropdown/mobile-dropdown.component"; declare var UIkit; @Component({ selector: 'dropdown-filter', template: ` - -
- +
+ +
+ +
+ + + + ` }) export class DropdownFilterComponent { @@ -33,13 +42,24 @@ export class DropdownFilterComponent { public overflow: boolean = true; @Input() public disabled = false; + @Input() + public isMobile: boolean = false; @ViewChild("dropdownElement") dropdownElement: ElementRef; - + @ViewChild("mobileDropdown") mobileDropdown: MobileDropdownComponent; + get isOpen() { - return (typeof document !== 'undefined') && this.dropdownElement && UIkit.dropdown(this.dropdownElement.nativeElement).isActive(); + if(this.isMobile) { + return this.mobileDropdown?.opened; + } else { + return (typeof document !== 'undefined') && this.dropdownElement && UIkit.dropdown(this.dropdownElement.nativeElement).isActive(); + } } closeDropdown() { - UIkit.dropdown(this.dropdownElement.nativeElement).hide(); + if(this.isMobile) { + this.mobileDropdown.close(); + } else { + UIkit.dropdown(this.dropdownElement.nativeElement).hide(); + } } } diff --git a/utils/dropdown-filter/dropdown-filter.module.ts b/utils/dropdown-filter/dropdown-filter.module.ts index 801ac9c3..8770dd62 100644 --- a/utils/dropdown-filter/dropdown-filter.module.ts +++ b/utils/dropdown-filter/dropdown-filter.module.ts @@ -2,9 +2,10 @@ import {NgModule} from "@angular/core"; import {CommonModule} from "@angular/common"; import {DropdownFilterComponent} from "./dropdown-filter.component"; import {IconsModule} from "../icons/icons.module"; +import {MobileDropdownModule} from "../mobile-dropdown/mobile-dropdown.module"; @NgModule({ - imports: [CommonModule, IconsModule], + imports: [CommonModule, IconsModule, MobileDropdownModule], declarations: [DropdownFilterComponent], exports: [DropdownFilterComponent] }) diff --git a/utils/mobile-dropdown/mobile-dropdown.component.ts b/utils/mobile-dropdown/mobile-dropdown.component.ts index ffe4380f..b913cd8b 100644 --- a/utils/mobile-dropdown/mobile-dropdown.component.ts +++ b/utils/mobile-dropdown/mobile-dropdown.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Input, OnInit} from "@angular/core"; +import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core"; @Component({ selector: 'mobile-dropdown', @@ -15,7 +15,8 @@ import {Component, ElementRef, Input, OnInit} from "@angular/core";
` }) export class MobileDropdownComponent implements OnInit{ - @Input() toggle: HTMLAnchorElement; + @Input() toggle: HTMLAnchorElement | HTMLButtonElement; + @Output() onClose: EventEmitter = new EventEmitter; public opened: boolean = false; private static MOBILE_DROPDOWN_CONTAINER = 'mobile-dropdown-container'; @@ -56,6 +57,7 @@ export class MobileDropdownComponent implements OnInit{ close() { if(this.opened) { this.opened = false; + this.onClose.emit(); document.getElementsByTagName('body')[0].setAttribute('style', ''); } } diff --git a/utils/modal/full-screen-modal/full-screen-modal.component.ts b/utils/modal/full-screen-modal/full-screen-modal.component.ts index 8b98014c..09e1a4c2 100644 --- a/utils/modal/full-screen-modal/full-screen-modal.component.ts +++ b/utils/modal/full-screen-modal/full-screen-modal.component.ts @@ -142,7 +142,7 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy { open() { UIkit.modal(this.modal.nativeElement).show(); - HelperFunctions.scroll(); + this.body.nativeElement.scrollTo(0, 0); } cancel() {