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

[new-UI | Admin]: 

1. search-input.component.css: Set currentColor for border in classes ".bordered.focused" and #a3a3a3 in classes ".bordered:not(.focused)".
2. search-input.component.ts: 
	a. Add class "focused" when "showSearch" is true.
	b. In search button add tooltip with value same as placeholder.
3. subscribers.component.html: Name of search button is (by default) "Search" and placeholder "Search subscribers".


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60706 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2021-03-23 22:03:10 +00:00
parent 9a18ff7515
commit 1d8003690b
3 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dashboard/users/subscribers/subscribers.component.html
View File

@ -3,8 +3,8 @@
<ng-content></ng-content> <ng-content></ng-content>
<div [class.uk-invisible]="loading" <div [class.uk-invisible]="loading"
class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid> class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search" <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search subscribers"
[bordered]="true" colorClass="uk-text-secondary" toggleTitle="locate subscribers"></div> [bordered]="true" colorClass="uk-text-secondary"></div>
<div> <div>
<a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle" <a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle"
[class.uk-disabled]="!subscriberInvite || subscriberInvite.loading" (click)="openInviteModal()"> [class.uk-disabled]="!subscriberInvite || subscriberInvite.loading" (click)="openInviteModal()">

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

@ -12,9 +12,12 @@ input::placeholder {
} }
@media only screen and (min-width: 960px) { @media only screen and (min-width: 960px) {
.bordered { .bordered.focused {
border-bottom: 1px solid currentColor !important; border-bottom: 1px solid currentColor !important;
} }
.bordered:not(.focused) {
border-bottom: 1px solid #a3a3a3 !important;
}
} }
@media only screen and (max-width: 959px) { @media only screen and (max-width: 959px) {

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

@ -7,7 +7,7 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
styleUrls: ['search-input.component.css'], styleUrls: ['search-input.component.css'],
template: ` template: `
<div class="uk-flex uk-flex-middle uk-flex-center search-input" [ngClass]="colorClass"> <div class="uk-flex uk-flex-middle uk-flex-center search-input" [ngClass]="colorClass">
<div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered && (showSearch || selected)"> <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered && (showSearch || selected)" [class.focused]="showSearch">
<form (ngSubmit)="search()"> <form (ngSubmit)="search()">
<input #input type="text" class="uk-width-1-1" <input #input type="text" class="uk-width-1-1"
[class.uk-animation-slide-right-medium]="showSearch" [class.uk-animation-slide-right-medium]="showSearch"
@ -30,14 +30,16 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
</div> </div>
</div> </div>
<button [disabled]="loading" class="search uk-flex uk-flex-middle uk-margin-medium-left uk-visible@m" <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-margin-medium-left uk-visible@m"
(mousedown)="$event.preventDefault()" (click)="toggle()"> (mousedown)="$event.preventDefault()" (click)="toggle()"
[attr.uk-tooltip]="'title: '+placeholder+'; cls: uk-padding-small uk-active'">
<span [ngClass]="colorClass" class="icon-bg"> <span [ngClass]="colorClass" class="icon-bg">
<icon class="uk-position-center" name="search"></icon> <icon class="uk-position-center" name="search"></icon>
</span> </span>
<span class="uk-text-uppercase overlay">{{toggleTitle}}</span> <span class="uk-text-uppercase overlay">{{toggleTitle}}</span>
</button> </button>
<button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m" <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m"
(mousedown)="$event.preventDefault()" (click)="search()"> (mousedown)="$event.preventDefault()" (click)="search()"
[attr.uk-tooltip]="'title: '+placeholder+'; cls: uk-padding-small uk-active'">
<span [ngClass]="colorClass" class="icon-bg"> <span [ngClass]="colorClass" class="icon-bg">
<icon class="uk-position-center" name="search"></icon> <icon class="uk-position-center" name="search"></icon>
</span> </span>