MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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.

This commit is contained in:
Konstantinos Triantafyllou 2023-07-26 11:49:50 +03:00
parent 0a79d2a17e
commit 056faac88f
11 changed files with 55 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
landingPages/dataProvider/dataProvider.component.html
View File

@ -437,19 +437,19 @@
<div class="landing-action-bar-mobile uk-background-default"> <div class="landing-action-bar-mobile uk-background-default">
<div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="hasMetrics ? 'uk-child-width-1-3' : 'uk-child-width-1-2'"> <div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="hasMetrics ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; scroll()">
<icon name="note_add" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon> <icon name="note_add" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<span>{{openaireEntities.DATASOURCE}}</span> <span>{{openaireEntities.DATASOURCE}}</span>
</a> </a>
</div> </div>
<div *ngIf="dataProviderInfo && hasMetrics"> <div *ngIf="dataProviderInfo && hasMetrics">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'; scroll()">
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon> <icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<span>Metrics</span> <span>Metrics</span>
</a> </a>
</div> </div>
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'; scroll()">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon> <icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span> <span>Actions</span>
</a> </a>

4
landingPages/landing-utils/fundedBy.component.ts
View File

@ -34,8 +34,8 @@ import {RouterHelper} from "../../utils/routerHelper.class";
</div> </div>
<div *ngIf="isMobile"> <div *ngIf="isMobile">
<div *ngFor="let item of fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold) let i=index" <div *ngFor="let item of fundedByProjects.slice(0, viewAll?fundedByProjects.length:threshold) let i=index"
class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-bottom"> class="uk-flex uk-flex-middle uk-margin-small-bottom">
<span class="uk-text-emphasis"> <span class="uk-text-emphasis uk-width-expand">
<ng-container *ngTemplateOutlet="funder; context: {item: item}"></ng-container> <ng-container *ngTemplateOutlet="funder; context: {item: item}"></ng-container>
</span> </span>
<a #toggle><icon name="info" visuallyHidden="info" [type]="'outlined'"></icon></a> <a #toggle><icon name="info" visuallyHidden="info" [type]="'outlined'"></icon></a>

12
landingPages/landing-utils/projects-in-modal.component.ts
View File

@ -1,8 +1,6 @@
import {Component, Input} from '@angular/core'; import {Component, Input} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {FetchProjects} from '../../utils/fetchEntitiesClasses/fetchProjects.class'; import {FetchProjects} from '../../utils/fetchEntitiesClasses/fetchProjects.class';
import {SearchProjectsService} from '../../services/searchProjects.service';
import {ErrorCodes} from '../../utils/properties/errorCodes'; import {ErrorCodes} from '../../utils/properties/errorCodes';
import {StringUtils} from '../../utils/string-utils.class'; import {StringUtils} from '../../utils/string-utils.class';
@ -18,7 +16,7 @@ import {OpenaireEntities} from '../../utils/properties/searchFields';
<ng-container *ngFor="let filter of fetchProjects.filters"> <ng-container *ngFor="let filter of fetchProjects.filters">
<div class="uk-inline"> <div class="uk-inline">
<dropdown-filter #dropdownFilter dropdownClass="uk-width-large uk-padding-small uk-margin-medium-bottom" <dropdown-filter #dropdownFilter dropdownClass="uk-width-large uk-padding-small uk-margin-medium-bottom"
[name]="filter.title" [count]="filter.countSelectedValues"> [name]="filter.title" [count]="filter.countSelectedValues" [isMobile]="isMobile">
<div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium"> <div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
<search-filter [filter]="filter" <search-filter [filter]="filter"
[showResultCount]=true filterValuesNum="0" [showResultCount]=true filterValuesNum="0"
@ -57,6 +55,7 @@ export class ProjectsInModalComponent {
@Input() organizationId: string = ""; @Input() organizationId: string = "";
@Input() properties: EnvProperties; @Input() properties: EnvProperties;
@Input() modal: AlertModal; @Input() modal: AlertModal;
@Input() isMobile: boolean = false;
public page: number = 1; public page: number = 1;
public size: number = 5; public size: number = 5;
@ -66,12 +65,7 @@ export class ProjectsInModalComponent {
private filterQuery: string = ""; private filterQuery: string = "";
public openaireEntities = OpenaireEntities; public openaireEntities = OpenaireEntities;
constructor(private route: ActivatedRoute,
private _searchProjectsService: SearchProjectsService) {
}
ngOnInit() { ngOnInit() {
if (this.organizationId) { if (this.organizationId) {
if (this.fetchProjects.searchUtils.totalResults > 0) { if (this.fetchProjects.searchUtils.totalResults > 0) {

8
landingPages/organization/organization.component.html
View File

@ -208,7 +208,7 @@
<!-- Tabs content section --> <!-- Tabs content section -->
<div id="landing-sections" class="uk-text-small"> <div id="landing-sections" class="uk-text-small">
<div id="projects" class="landing-section landing-section-height-auto"> <div id="projects" class="landing-section landing-section-height-auto">
<projectsInModal [fetchProjects]="fetchProjects" <projectsInModal [fetchProjects]="fetchProjects" [isMobile]="isMobile"
[organizationId]="organizationId" [properties]=properties [prevPath]="prevPath"> [organizationId]="organizationId" [properties]=properties [prevPath]="prevPath">
</projectsInModal> </projectsInModal>
</div> </div>
@ -366,13 +366,13 @@
<div class="landing-action-bar-mobile uk-background-default"> <div class="landing-action-bar-mobile uk-background-default">
<div class="uk-container uk-grid uk-flex-middle uk-child-width-1-2 uk-text-xsmall uk-text-meta"> <div class="uk-container uk-grid uk-flex-middle uk-child-width-1-2 uk-text-xsmall uk-text-meta">
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; scroll()">
<icon name="corporate_fare" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon> <icon name="corporate_fare" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<span>{{openaireEntities.ORGANIZATION}}</span> <span>{{openaireEntities.ORGANIZATION}}</span>
</a> </a>
</div> </div>
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'; scroll()">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon> <icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span> <span>Actions</span>
</a> </a>
@ -533,7 +533,7 @@
<fs-modal *ngIf="isMobile" #fsModal classTitle="uk-tile-default uk-border-bottom"> <fs-modal *ngIf="isMobile" #fsModal classTitle="uk-tile-default uk-border-bottom">
<div *ngIf="activeTab == 'projects'" class="landing-section landing-section-height-auto"> <div *ngIf="activeTab == 'projects'" class="landing-section landing-section-height-auto">
<projectsInModal [fetchProjects]="fetchProjects" <projectsInModal [fetchProjects]="fetchProjects" [isMobile]="isMobile"
[organizationId]="organizationId" [properties]=properties [prevPath]="prevPath"> [organizationId]="organizationId" [properties]=properties [prevPath]="prevPath">
</projectsInModal> </projectsInModal>
</div> </div>

6
landingPages/project/project.component.html
View File

@ -561,19 +561,19 @@
<div class="landing-action-bar-mobile uk-background-default"> <div class="landing-action-bar-mobile uk-background-default">
<div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="hasMetrics ? 'uk-child-width-1-3' : 'uk-child-width-1-2'"> <div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="hasMetrics ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; scroll()">
<icon name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon> <icon name="assignment_turned_in" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"></icon>
<span>{{openaireEntities.PROJECT}}</span> <span>{{openaireEntities.PROJECT}}</span>
</a> </a>
</div> </div>
<div *ngIf="projectInfo && hasMetrics"> <div *ngIf="projectInfo && hasMetrics">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'; scroll()">
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon> <icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<span>Metrics</span> <span>Metrics</span>
</a> </a>
</div> </div>
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'; scroll()">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon> <icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span> <span>Actions</span>
</a> </a>

6
landingPages/result/resultLanding.component.html
View File

@ -672,7 +672,7 @@
<div class="landing-action-bar-mobile uk-background-default"> <div class="landing-action-bar-mobile uk-background-default">
<div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="(resultLandingInfo.measure || hasAltMetrics) ? 'uk-child-width-1-3' : 'uk-child-width-1-2'"> <div class="uk-container uk-flex-middle uk-grid uk-text-xsmall uk-text-meta" [ngClass]="(resultLandingInfo.measure || hasAltMetrics) ? 'uk-child-width-1-3' : 'uk-child-width-1-2'">
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; egiTransferModalOpen = false;"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'info'; egiTransferModalOpen = false; scroll();">
<span [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''"> <span [ngClass]="mobileContent == 'info' ? 'uk-text-primary': ''">
<icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="2"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'publication'" name="description" type="outlined" [flex]="true" [ratio]="2"></icon>
<icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="2"></icon> <icon *ngIf="getTypeName().toLowerCase() == 'research data'" name="database" type="outlined" [flex]="true" [ratio]="2"></icon>
@ -686,13 +686,13 @@
</a> </a>
</div> </div>
<div *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)"> <div *ngIf="resultLandingInfo && (resultLandingInfo.measure || hasAltMetrics)">
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'metrics'; scroll()">
<icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon> <icon name="bar_chart" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'metrics' ? 'uk-text-primary': ''"></icon>
<span>Metrics</span> <span>Metrics</span>
</a> </a>
</div> </div>
<div> <div>
<a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'"> <a class="uk-flex uk-flex-column uk-flex-middle uk-flex-center uk-link-reset" (click)="mobileContent = 'actions'; scroll()">
<icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon> <icon name="pending" type="outlined" [flex]="true" [ratio]="2" [ngClass]="mobileContent == 'actions' ? 'uk-text-primary': ''"></icon>
<span>Actions</span> <span>Actions</span>
</a> </a>

5
sharedComponents/input/input.component.ts
View File

@ -211,7 +211,7 @@ declare var UIkit;
</li> </li>
</ul> </ul>
</div> </div>
<mobile-dropdown *ngIf="mobile && filteredOptions && filteredOptions.length > 0 && opened" #mobileDropdown> <mobile-dropdown *ngIf="mobile && filteredOptions && filteredOptions.length > 0 && opened" (onClose)="focus(false)" #mobileDropdown>
<div *ngIf="placeholderInfo" class="uk-text-emphasis uk-text-bolder uk-text-center uk-padding-small uk-padding-remove-vertical uk-text-uppercase"> <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}} {{placeholderInfo.label}}
</div> </div>
@ -839,6 +839,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.searchControl.setValue(''); this.searchControl.setValue('');
} }
} }
if(this.mobileDropdown) {
this.mobileDropdown.close();
}
} }
dateChanged(event: Date) { dateChanged(event: Date) {

32
utils/dropdown-filter/dropdown-filter.component.ts
View File

@ -1,23 +1,32 @@
import {Component, ElementRef, Input, ViewChild} from "@angular/core"; import {Component, ElementRef, Input, ViewChild} from "@angular/core";
import {MobileDropdownComponent} from "../mobile-dropdown/mobile-dropdown.component";
declare var UIkit; declare var UIkit;
@Component({ @Component({
selector: 'dropdown-filter', selector: 'dropdown-filter',
template: ` template: `
<button class="uk-button uk-button-default uk-flex uk-flex-middle" <button #toggle class="uk-button uk-button-default uk-flex uk-flex-middle"
[class.uk-disabled]="disabled" [disabled]="disabled"> [class.uk-disabled]="disabled" [disabled]="disabled">
<span>{{name}}<span *ngIf="count > 0">({{count}})</span></span> <span>{{name}}<span *ngIf="count > 0">({{count}})</span></span>
<icon [flex]="true" class="uk-margin-xsmall-left" [name]="'expand_' + (isOpen?'less':'more')"></icon> <icon [flex]="true" class="uk-margin-xsmall-left" [name]="'expand_' + (isOpen?'less':'more')"></icon>
</button> </button>
<div #dropdownElement class="uk-dropdown" <div *ngIf="!isMobile" #dropdownElement class="uk-dropdown"
[class.uk-height-max-large]="overflow" [class.uk-overflow-auto]="overflow" [class.uk-height-max-large]="overflow" [class.uk-overflow-auto]="overflow"
[ngStyle]="dropdownMinWidth?{'min-width.px': dropdownMinWidth}:''" [ngStyle]="dropdownMinWidth?{'min-width.px': dropdownMinWidth}:''"
[ngClass]="dropdownClass" uk-dropdown="mode: click; delay-hide: 0;"> [ngClass]="dropdownClass" uk-dropdown="mode: click; delay-hide: 0;">
<div> <div>
<ng-content></ng-content> <ng-container *ngTemplateOutlet="content"></ng-container>
</div> </div>
</div> </div>
<mobile-dropdown #mobileDropdown [toggle]="toggle">
<div [ngClass]="dropdownClass">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
</mobile-dropdown>
<ng-template #content>
<ng-content></ng-content>
</ng-template>
` `
}) })
export class DropdownFilterComponent { export class DropdownFilterComponent {
@ -33,13 +42,24 @@ export class DropdownFilterComponent {
public overflow: boolean = true; public overflow: boolean = true;
@Input() @Input()
public disabled = false; public disabled = false;
@Input()
public isMobile: boolean = false;
@ViewChild("dropdownElement") dropdownElement: ElementRef; @ViewChild("dropdownElement") dropdownElement: ElementRef;
@ViewChild("mobileDropdown") mobileDropdown: MobileDropdownComponent;
get isOpen() { 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() { closeDropdown() {
UIkit.dropdown(this.dropdownElement.nativeElement).hide(); if(this.isMobile) {
this.mobileDropdown.close();
} else {
UIkit.dropdown(this.dropdownElement.nativeElement).hide();
}
} }
} }

3
utils/dropdown-filter/dropdown-filter.module.ts
View File

@ -2,9 +2,10 @@ import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common"; import {CommonModule} from "@angular/common";
import {DropdownFilterComponent} from "./dropdown-filter.component"; import {DropdownFilterComponent} from "./dropdown-filter.component";
import {IconsModule} from "../icons/icons.module"; import {IconsModule} from "../icons/icons.module";
import {MobileDropdownModule} from "../mobile-dropdown/mobile-dropdown.module";
@NgModule({ @NgModule({
imports: [CommonModule, IconsModule], imports: [CommonModule, IconsModule, MobileDropdownModule],
declarations: [DropdownFilterComponent], declarations: [DropdownFilterComponent],
exports: [DropdownFilterComponent] exports: [DropdownFilterComponent]
}) })

6
utils/mobile-dropdown/mobile-dropdown.component.ts
View File

@ -1,4 +1,4 @@
import {Component, ElementRef, Input, OnInit} from "@angular/core"; import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";
@Component({ @Component({
selector: 'mobile-dropdown', selector: 'mobile-dropdown',
@ -15,7 +15,8 @@ import {Component, ElementRef, Input, OnInit} from "@angular/core";
</div>` </div>`
}) })
export class MobileDropdownComponent implements OnInit{ export class MobileDropdownComponent implements OnInit{
@Input() toggle: HTMLAnchorElement; @Input() toggle: HTMLAnchorElement | HTMLButtonElement;
@Output() onClose: EventEmitter<void> = new EventEmitter;
public opened: boolean = false; public opened: boolean = false;
private static MOBILE_DROPDOWN_CONTAINER = 'mobile-dropdown-container'; private static MOBILE_DROPDOWN_CONTAINER = 'mobile-dropdown-container';
@ -56,6 +57,7 @@ export class MobileDropdownComponent implements OnInit{
close() { close() {
if(this.opened) { if(this.opened) {
this.opened = false; this.opened = false;
this.onClose.emit();
document.getElementsByTagName('body')[0].setAttribute('style', ''); document.getElementsByTagName('body')[0].setAttribute('style', '');
} }
} }

2
utils/modal/full-screen-modal/full-screen-modal.component.ts
View File

@ -142,7 +142,7 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
open() { open() {
UIkit.modal(this.modal.nativeElement).show(); UIkit.modal(this.modal.nativeElement).show();
HelperFunctions.scroll(); this.body.nativeElement.scrollTo(0, 0);
} }
cancel() { cancel() {