Revision 60706
Added by Konstantina Galouni about 3 years ago
| modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/users/subscribers/subscribers.component.html | ||
|---|---|---|
| 3 | 3 |
<ng-content></ng-content> |
| 4 | 4 |
<div [class.uk-invisible]="loading" |
| 5 | 5 |
class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid> |
| 6 |
<div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search" |
|
| 7 |
[bordered]="true" colorClass="uk-text-secondary" toggleTitle="locate subscribers"></div>
|
|
| 6 |
<div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search subscribers"
|
|
| 7 |
[bordered]="true" colorClass="uk-text-secondary"></div> |
|
| 8 | 8 |
<div> |
| 9 | 9 |
<a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle" |
| 10 | 10 |
[class.uk-disabled]="!subscriberInvite || subscriberInvite.loading" (click)="openInviteModal()"> |
| modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/search-input/search-input.component.ts | ||
|---|---|---|
| 7 | 7 |
styleUrls: ['search-input.component.css'], |
| 8 | 8 |
template: ` |
| 9 | 9 |
<div class="uk-flex uk-flex-middle uk-flex-center search-input" [ngClass]="colorClass"> |
| 10 |
<div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered && (showSearch || selected)"> |
|
| 10 |
<div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered && (showSearch || selected)" [class.focused]="showSearch">
|
|
| 11 | 11 |
<form (ngSubmit)="search()"> |
| 12 | 12 |
<input #input type="text" class="uk-width-1-1" |
| 13 | 13 |
[class.uk-animation-slide-right-medium]="showSearch" |
| ... | ... | |
| 30 | 30 |
</div> |
| 31 | 31 |
</div> |
| 32 | 32 |
<button [disabled]="loading" class="search uk-flex uk-flex-middle uk-margin-medium-left uk-visible@m" |
| 33 |
(mousedown)="$event.preventDefault()" (click)="toggle()"> |
|
| 33 |
(mousedown)="$event.preventDefault()" (click)="toggle()" |
|
| 34 |
[attr.uk-tooltip]="'title: '+placeholder+'; cls: uk-padding-small uk-active'"> |
|
| 34 | 35 |
<span [ngClass]="colorClass" class="icon-bg"> |
| 35 | 36 |
<icon class="uk-position-center" name="search"></icon> |
| 36 | 37 |
</span> |
| 37 | 38 |
<span class="uk-text-uppercase overlay">{{toggleTitle}}</span>
|
| 38 | 39 |
</button> |
| 39 | 40 |
<button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m" |
| 40 |
(mousedown)="$event.preventDefault()" (click)="search()"> |
|
| 41 |
(mousedown)="$event.preventDefault()" (click)="search()" |
|
| 42 |
[attr.uk-tooltip]="'title: '+placeholder+'; cls: uk-padding-small uk-active'"> |
|
| 41 | 43 |
<span [ngClass]="colorClass" class="icon-bg"> |
| 42 | 44 |
<icon class="uk-position-center" name="search"></icon> |
| 43 | 45 |
</span> |
| modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/search-input/search-input.component.css | ||
|---|---|---|
| 12 | 12 |
} |
| 13 | 13 |
|
| 14 | 14 |
@media only screen and (min-width: 960px) {
|
| 15 |
.bordered {
|
|
| 15 |
.bordered.focused {
|
|
| 16 | 16 |
border-bottom: 1px solid currentColor !important; |
| 17 | 17 |
} |
| 18 |
.bordered:not(.focused) {
|
|
| 19 |
border-bottom: 1px solid #a3a3a3 !important; |
|
| 20 |
} |
|
| 18 | 21 |
} |
| 19 | 22 |
|
| 20 | 23 |
@media only screen and (max-width: 959px) {
|
Also available in: Unified diff
[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".