Browse Source

Improve UI

pull/76/head
Thomas 4 years ago
parent
commit
455671898a
  1. 8
      apps/client/src/app/components/transactions-table/transactions-table.component.html
  2. 4
      apps/client/src/app/components/transactions-table/transactions-table.component.scss
  3. 6
      apps/client/src/app/components/transactions-table/transactions-table.module.ts
  4. 668
      yarn.lock

8
apps/client/src/app/components/transactions-table/transactions-table.component.html

@ -1,4 +1,4 @@
<mat-form-field class="w-100"> <mat-form-field appearance="outline" class="w-100">
<ion-icon class="mr-1" matPrefix name="search-outline"></ion-icon> <ion-icon class="mr-1" matPrefix name="search-outline"></ion-icon>
<mat-chip-list #chipList aria-label="Search keywords"> <mat-chip-list #chipList aria-label="Search keywords">
<mat-chip <mat-chip
@ -8,12 +8,12 @@
matChipRemove matChipRemove
> >
{{ searchKeyword }} {{ searchKeyword }}
<ion-icon class="mr-1" matPrefix name="close-outline"></ion-icon> <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
</mat-chip> </mat-chip>
<input <input
placeholder="Search for transactions..."
name="close-outline"
#searchInput #searchInput
name="close-outline"
placeholder="Search for account, type, symbol or currency..."
[formControl]="searchControl" [formControl]="searchControl"
[matAutocomplete]="auto" [matAutocomplete]="auto"
[matChipInputFor]="chipList" [matChipInputFor]="chipList"

4
apps/client/src/app/components/transactions-table/transactions-table.component.scss

@ -7,6 +7,10 @@
} }
} }
.mat-chip {
cursor: pointer;
}
.mat-table { .mat-table {
td { td {
border: 0; border: 0;

6
apps/client/src/app/components/transactions-table/transactions-table.module.ts

@ -15,7 +15,7 @@ import { GfValueModule } from '../value/value.module';
import { TransactionsTableComponent } from './transactions-table.component'; import { TransactionsTableComponent } from './transactions-table.component';
import { MatChipsModule } from '@angular/material/chips'; import { MatChipsModule } from '@angular/material/chips';
import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
@NgModule({ @NgModule({
declarations: [TransactionsTableComponent], declarations: [TransactionsTableComponent],
@ -34,8 +34,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
MatSortModule, MatSortModule,
MatTableModule, MatTableModule,
NgxSkeletonLoaderModule, NgxSkeletonLoaderModule,
RouterModule, ReactiveFormsModule,
ReactiveFormsModule RouterModule
], ],
providers: [], providers: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA] schemas: [CUSTOM_ELEMENTS_SCHEMA]

668
yarn.lock

File diff suppressed because it is too large
Loading…
Cancel
Save