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

[Library | Trunk]: Change admin-tools pages header layout. Add search-input 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60211 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2021-01-11 18:33:24 +00:00
parent edee649e7c
commit 0c9f2e4f2e
10 changed files with 485 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
dashboard/divId/divIds.component.html
View File

@ -1,24 +1,9 @@
<div page-content>
<div page-content class="admin-pages">
<div header>
<admin-tabs tab="class" header></admin-tabs>
<div inner class="admin-pages">
<div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
<div class="show-options uk-float-right">
<button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one class">
<li><a [class]="getSelectedDivIds().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedDivIds()"><i></i> Delete </a></li>
</ul>
</div>
</div>
<div class="uk-inline uk-width-medium uk-float-right uk-margin-right" >
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
<div dashboard-input [formInput]="filterForm.controls.keyword"
placeholder="Search"></div>
</div>
<ul class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
<div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
<div class="uk-width-1-1">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
(click)="filterForm.get('type').setValue('all')"><span
class="title">All portals</span></a></li>
@ -28,15 +13,33 @@
class="title">{{type.label}}</span></a></li>
</ul>
</div>
<div class="content-wrapper" id="contentWrapper">
<a *ngIf="!showLoading && !errorMessage" (click)="newDivId()"
class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom uk-width-1-1">
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus">
<div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
<div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search"
[bordered]="true" colorClass="uk-text-secondary"></div>
<div class="uk-margin-left show-options">
<button class="uk-button uk-button-secondary">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one class">
<li><a [class]="getSelectedDivIds().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedDivIds()"><i></i> Delete </a></li>
</ul>
</div>
Add class
</div>
<div class="uk-margin-left">
<a (click)="newDivId()"
class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add class</button>
</a>
</div>
</div>
</div>
</div>
<div inner>
<div>
<div class="contentPanel">
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
@ -57,7 +60,8 @@
<thead class="form-header">
<tr>
<th
class="uk-width-small"><input id="allDivIdCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
class="uk-width-small"><input id="allDivIdCheckbox" type="checkbox"
(change)="toggleCheckBoxes($event)"></th>
<th>Name</th>
<th *ngIf="!selectedCommunityPid">Portal Type</th>
<th>Page</th>
@ -138,7 +142,8 @@
</mat-autocomplete>
</mat-form-field>
<div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" uk-grid>
<div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}"
class="form-group" uk-grid>
<div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label">
Class exists in:
</div>

12
dashboard/divId/divIds.module.ts
View File

@ -16,14 +16,22 @@ import {MatChipsModule} from '@angular/material/chips';
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {ClassesRoutingModule} from "./classes-routing.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {add} from "../../utils/icons/icons";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule,
AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule
MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule, SearchInputModule, IconsModule
],
declarations: [DivIdsComponent],
exports: [DivIdsComponent]
})
export class DivIdsModule { }
export class DivIdsModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add]);
}
}

68
dashboard/entity/entities.component.html
View File

@ -1,44 +1,53 @@
<div page-content>
<admin-tabs tab = "entity" [portal]="selectedCommunityPid" header></admin-tabs>
<div inner class="admin-pages">
<div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
<div class="show-options uk-float-right">
<button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
<div page-content class="admin-pages">
<div header>
<admin-tabs tab="entity" [portal]="selectedCommunityPid"></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
<div class="uk-width-1-1">
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('status').value === 'all'"><a
(click)="filterForm.get('status').setValue('all')"><span
class="title">All entities</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'enabled'"><a
(click)="filterForm.get('status').setValue('enabled')"><span class="title">Enabled</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'disabled'"><a
(click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</span></a></li>
</ul>
</div>
<div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
<div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search entity"
[bordered]="true" colorClass="uk-text-secondary"></div>
<div class="uk-margin-left show-options">
<button class="uk-button uk-button-secondary">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(true, getSelectedEntities())"><i></i> Activate
(click)="toggleEntities(true, getSelectedEntities())"><i></i>
Activate
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(false, getSelectedEntities())"><i></i> Deactivate
(click)="toggleEntities(false, getSelectedEntities())"><i></i>
Deactivate
</a></li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
<div class="uk-float-right uk-margin-right uk-width-medium">
<div dashboard-input [formInput]="filterForm.controls.keyword" placeholder="search entity"></div>
</div>
<ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
<li [class.uk-active]="filterForm.get('status').value === 'all'"><a
(click)="filterForm.get('status').setValue('all')"><span
class="title">All entities</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'enabled'"><a (click)="filterForm.get('status').setValue('enabled')"><span class="title">Enabled</span></a></li>
<li [class.uk-active]="filterForm.get('status').value === 'disabled'"><a (click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</span></a></li>
</ul>
</div>
<div class="content-wrapper" id="contentWrapper">
<a *ngIf="!showLoading && isPortalAdministrator && !errorMessage" (click)="newEntity()"
class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom">
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus">
</div>
Add entity
<div *ngIf="isPortalAdministrator" class="uk-margin-left">
<a (click)="newEntity()"
class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add entity</button>
</a>
</div>
</div>
</div>
</div>
<div inner>
<div class="contentPanel ">
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
<div>
@ -46,7 +55,9 @@
Disable an entity to hide it from community dashboard portal.
</div>
<div
class="uk-text-small">If an entity is disabled, all related search and advanced search pages will be hidden from the community dashborad and a message "Can't find that page" will appear in case the url of that page is loaded. If the related page belongs to the menu the link will be removed from menu, too.
class="uk-text-small">If an entity is disabled, all related search and advanced search pages will be
hidden from the community dashborad and a message "Can't find that page" will appear in case the url of that
page is loaded. If the related page belongs to the menu the link will be removed from menu, too.
</div>
</div>
@ -117,7 +128,6 @@
</div>
</div>
</div>
</div>
<modal-alert #AlertModalSaveEntity (alertOutput)="entitySaveConfirmed($event)"
[okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">

12
dashboard/entity/entities.module.ts
View File

@ -10,13 +10,21 @@ import {InputModule} from "../../sharedComponents/input/input.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {EntitiesRoutingModule} from "./entities-routing.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {add} from "../../utils/icons/icons";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, AdminToolServiceModule,
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, EntitiesRoutingModule
AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, EntitiesRoutingModule, SearchInputModule, IconsModule
],
declarations: [EntitiesComponent],
exports: [EntitiesComponent]
})
export class EntitiesModule { }
export class EntitiesModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add]);
}
}

73
dashboard/page/pages.component.html
View File

@ -1,9 +1,23 @@
<div page-content>
<admin-tabs tab = "page" [portal]="selectedCommunityPid" header></admin-tabs>
<div inner class="admin-pages">
<div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
<div class="show-options uk-float-right">
<button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
<div page-content class="admin-pages">
<div header>
<admin-tabs tab="page" [portal]="selectedCommunityPid"></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
<div class="uk-width-1-1">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('type').value === 'all'"><a
(click)="filterForm.get('type').setValue('all')"><span
class="title">All pages</span></a></li>
<li *ngFor="let type of typeOptions; let i=index"
[class.uk-active]="filterForm.get('type').value === type.value"><a
(click)="filterForm.get('type').setValue(type.value)"><span
class="title">{{type.label}}</span></a></li>
</ul>
</div>
<div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
<div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
[bordered]="true" colorClass="uk-text-secondary"></div>
<div class="uk-margin-left show-options">
<button class="uk-button uk-button-secondary">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
@ -18,29 +32,19 @@
</ul>
</div>
</div>
<div class="uk-inline uk-width-medium uk-float-right uk-margin-right">
<div dashboard-input [formInput]="filterForm.controls.keyword" placeholder="search page" ></div>
</div>
<ul class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
<li [class.uk-active]="filterForm.get('type').value === 'all'"><a
(click)="filterForm.get('type').setValue('all')"><span
class="title">All pages</span></a></li>
<li *ngFor="let type of typeOptions; let i=index"
[class.uk-active]="filterForm.get('type').value === type.value"><a
(click)="filterForm.get('type').setValue(type.value)"><span
class="title">{{type.label}}</span></a></li>
</ul>
<!-- <input class="uk-width-1-1 "-->
<!-- placeholder="SEARCH FOR A COUNTRY" type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true">-->
</div>
<div class="content-wrapper uk-margin-top" id="contentWrapper">
<a *ngIf="!showLoading && isPortalAdministrator && !errorMessage" (click)="newPage()"
class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom uk-width-1-1">
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus">
</div>
Add page
<div *ngIf="isPortalAdministrator" class="uk-margin-left">
<a (click)="newPage()"
class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add page</button>
</a>
</div>
</div>
</div>
</div>
<div inner>
<div class="contentPanel ">
<div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
<div>
@ -48,7 +52,8 @@
Disable a page to hide it from community dashboard portal.
</div>
<div
class="uk-text-small">If the page is disabled, a message "Can't find that page" will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.
class="uk-text-small">If the page is disabled, a message "Can't find that page" will appear in case the url
of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.
</div>
</div>
@ -77,7 +82,8 @@
class="title">Entities: </span>
{{check.page.entities.join(", ")}}</div>
<div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
<div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span class="title">Type: </span> {{check.page.type}}</div>
<div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
class="title">Type: </span> {{check.page.type}}</div>
<div *ngIf="!selectedCommunityPid" class=" uk-margin-small-bottom">
<span class="title">Portal type: </span>{{check.page.portalType}}
</div>
@ -130,9 +136,9 @@
</div>
</div>
</div>
</div>
<modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)" [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
<modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)"
[okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
<div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
<form [formGroup]="myForm">
@ -194,7 +200,8 @@
</span>
</div>
</div>
<div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" >
<div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}"
class="form-group">
<div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label">
Page exists in:
</div>

12
dashboard/page/pages.module.ts
View File

@ -10,13 +10,21 @@ import {InputModule} from "../../sharedComponents/input/input.module";
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {PagesRoutingModule} from "./pages-routing.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {IconsService} from "../../utils/icons/icons.service";
import {add} from "../../utils/icons/icons";
@NgModule({
imports: [
CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule,
MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AdminTabsModule, PageContentModule, PagesRoutingModule
MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AdminTabsModule, PageContentModule, PagesRoutingModule, SearchInputModule, IconsModule
],
declarations: [PagesComponent],
exports: [PagesComponent]
})
export class PagesModule { }
export class PagesModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add]);
}
}

60
dashboard/portal/portals.component.html
View File

@ -1,24 +1,9 @@
<div page-content>
<admin-tabs tab = "portal" header></admin-tabs>
<div inner class="admin-pages">
<div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
<div class="show-options uk-float-right">
<button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedCommunities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one portal">
<li><a [class]="getSelectedCommunities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
<div class="uk-inline uk-width-medium uk-float-right uk-margin-right" >
<span class="uk-position-center-right"><i class="material-icons">search</i></span>
<div dashboard-input [formInput]="filterForm.controls.keyword"
placeholder="Search"></div>
</div>
<ul class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin " >
<div page-content class="admin-pages">
<div header>
<admin-tabs tab="portal"></admin-tabs>
<div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
<div class="uk-width-1-1">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
(click)="filterForm.get('type').setValue('all')"><span
class="title">All portals</span></a></li>
@ -28,14 +13,33 @@
class="title">{{type.label}}</span></a></li>
</ul>
</div>
<div class="uk-margin-top">
<a *ngIf="!showLoading && !errorMessage" (click)="newCommunity()"
class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom">
<div class="uk-button-default large uk-icon-button uk-margin-small-right" uk-icon="plus">
<div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
<div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
[bordered]="true" colorClass="uk-text-secondary"></div>
<div class="uk-margin-left show-options">
<button class="uk-button uk-button-secondary">Bulk Actions</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-margin-left"
[attr.uk-tooltip]="getSelectedCommunities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one portal">
<li><a [class]="getSelectedCommunities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
</ul>
</div>
Add portal
</div>
<div class="uk-margin-left">
<a (click)="newCommunity()"
class="uk-flex uk-flex-middle uk-text-uppercase">
<button class="large uk-icon-button uk-button-secondary">
<icon name="add"></icon>
</button>
<button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add portal</button>
</a>
</div>
</div>
</div>
</div>
<div inner>
<div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
{{updateErrorMessage}}
@ -47,7 +51,6 @@
class="uk-align-center loading-gif"></div>
<div class=" uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
<div class="">
@ -97,7 +100,6 @@
</div>
</div>
</div>
</div>
<modal-alert #AlertModalSaveCommunity (alertOutput)="communitySaveConfirmed($event)"
[okDisabled]="portalFG && (portalFG.invalid || !portalFG.dirty)">

12
dashboard/portal/portals.module.ts
View File

@ -9,14 +9,22 @@ import {InputModule} from "../../sharedComponents/input/input.module";
import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
import {PortalsRoutingModule} from "./portals-routing.module";
import {IconsService} from "../../utils/icons/icons.service";
import {add} from "../../utils/icons/icons";
import {IconsModule} from "../../utils/icons/icons.module";
import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
@NgModule({
imports: [
CommonModule, FormsModule, AlertModalModule,
ReactiveFormsModule,
RouterModule, AdminToolServiceModule, InputModule, AdminTabsModule, PageContentModule, PortalsRoutingModule
RouterModule, AdminToolServiceModule, InputModule, AdminTabsModule, PageContentModule, PortalsRoutingModule, IconsModule, SearchInputModule
],
declarations: [PortalsComponent],
exports: [PortalsComponent]
})
export class PortalsModule { }
export class PortalsModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([add]);
}
}

13
sharedComponents/search-input/search-input.component.css
View File

@ -11,7 +11,13 @@ input::placeholder {
font-weight: 600;
}
@media only screen and (max-width: 980px) {
@media only screen and (min-width: 960px) {
.bordered {
border-bottom: 1px solid currentColor !important;
}
}
@media only screen and (max-width: 959px) {
input {
font-size: 14px;
}
@ -47,3 +53,8 @@ button.search .icon-bg {
.selected {
color: #1a1a1a;
}
.overlay {
margin-left: -13px;
z-index: 1;
}

12
sharedComponents/search-input/search-input.component.ts
View File

@ -6,11 +6,11 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
selector: '[search-input]',
styleUrls: ['search-input.component.css'],
template: `
<div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom search-mobile" [ngClass]="colorClass">
<div *ngIf="control" class="uk-width-expand">
<div class="uk-flex uk-flex-middle uk-flex-center search-mobile" [ngClass]="colorClass">
<div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered">
<form (ngSubmit)="search()">
<input #input type="text" class="uk-width-1-1"
[class.uk-animation-slide-right-medium]="showSearch && !control.value"
[class.uk-animation-slide-right-medium]="showSearch"
[class.uk-hidden@m]="!showSearch"
[class.uk-hidden]="selected"
[placeholder]="placeholder"
@ -40,14 +40,14 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
<span [ngClass]="colorClass" class="icon-bg">
<icon class="uk-position-center" name="search"></icon>
</span>
<span class="uk-text-uppercase space">search</span>
<span class="uk-text-uppercase overlay">search</span>
</button>
<button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m"
(mousedown)="$event.preventDefault()" (click)="search()">
<span [ngClass]="colorClass" class="icon-bg">
<icon class="uk-position-center" name="search"></icon>
</span>
<span class="uk-text-uppercase space">search</span>
<span class="uk-text-uppercase overlay">search</span>
</button>
</div>`
})
@ -66,6 +66,8 @@ export class SearchInputComponent {
list: any = null;
@Input()
colorClass: string = 'portal-color';
@Input()
bordered: boolean = false;
@ViewChild('input') input: ElementRef;
@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
@Output()