Skip to content

Commit 86e7999

Browse files
shawonshawon
shawon
authored and
shawon
committed
input field design
1 parent 6f46b5c commit 86e7999

File tree

4 files changed

+135
-53
lines changed

4 files changed

+135
-53
lines changed

‎eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.html‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
11
<eform-new-subheader>
2+
<div class="d-flex flex-row justify-content-center align-items-center gap-12">
3+
<div class="text-field--rounded mt-4">
4+
<mat-form-field>
5+
<mat-label>{{ 'Search' | translate }}</mat-label>
6+
<input
7+
matInput
8+
type="text"
9+
(ngModelChange)="onSearchChanged($event)"
10+
[ngModel]="selectEntitySearchNameFilter$ | async"
11+
id="labelInput"
12+
/>
13+
<mat-icon matSuffix>search</mat-icon>
14+
</mat-form-field>
15+
</div>
16+
<div class="line-vert"></div>
217
<button
318
class="btn-primary btn-primary--icon-left"
419
id="createEntitySearchBtn"
@@ -10,25 +25,8 @@
1025
<mat-icon>add</mat-icon>
1126
<span>{{ 'New list' | translate }}</span>
1227
</button>
13-
</eform-new-subheader>
14-
15-
<ng-template #toolbarTpl>
16-
<div class="d-flex flex-row justify-content-start flex-nowrap">
17-
<div class="d-flex flex-column mr-2 ml-2">
18-
<mat-form-field>
19-
<mat-label>{{ 'Search' | translate }}</mat-label>
20-
<input
21-
matInput
22-
type="text"
23-
(ngModelChange)="onSearchChanged($event)"
24-
[ngModel]="selectEntitySearchNameFilter$ | async"
25-
id="labelInput"
26-
/>
27-
</mat-form-field>
28-
</div>
2928
</div>
30-
</ng-template>
31-
29+
</eform-new-subheader>
3230
<mtx-grid
3331
[data]="advEntitySearchableGroupListModel.entities"
3432
[columns]="tableHeaders"
@@ -37,9 +35,8 @@
3735
[paginationTemplate]="paginatorTpl"
3836
[pageOnFront]="false"
3937
[rowStriped]="false"
40-
[showToolbar]="true"
38+
[showToolbar]="false"
4139
[showColumnMenuButton]="false"
42-
[toolbarTemplate]="toolbarTpl"
4340
[sortActive]="selectEntitySearchSort$ | async"
4441
[sortDirection]="selectEntitySearchIsSortDsc$ | async"
4542
(sortChange)="sortTable($event)">

‎eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.html‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
11
<eform-new-subheader>
2+
<div class="d-flex flex-row justify-content-center align-items-center gap-12">
3+
<div class="text-field--rounded mt-4">
4+
<mat-form-field>
5+
<mat-label>{{ 'Search' | translate }}</mat-label>
6+
<input
7+
matInput
8+
type="text"
9+
(ngModelChange)="onNameFilterChanged($event)"
10+
[ngModel]="selectEntitySelectNameFilter$ | async"
11+
id="labelInput"
12+
/>
13+
<mat-icon matSuffix>search</mat-icon>
14+
</mat-form-field>
15+
</div>
16+
<div class="line-vert"></div>
217
<button
318
class="btn-primary btn-primary--icon-left"
419
id="entitySelectCreateBtn"
@@ -10,24 +25,8 @@
1025
<mat-icon>add</mat-icon>
1126
<span>{{ 'New list' | translate }}</span>
1227
</button>
13-
</eform-new-subheader>
14-
15-
<ng-template #toolbarTpl>
16-
<div class="d-flex flex-row justify-content-start flex-nowrap">
17-
<div class="d-flex flex-column mr-2 ml-2">
18-
<mat-form-field>
19-
<mat-label>{{ 'Search' | translate }}</mat-label>
20-
<input
21-
matInput
22-
type="text"
23-
(ngModelChange)="onNameFilterChanged($event)"
24-
[ngModel]="selectEntitySelectNameFilter$ | async"
25-
id="labelInput"
26-
/>
27-
</mat-form-field>
28-
</div>
2928
</div>
30-
</ng-template>
29+
</eform-new-subheader>
3130

3231
<mtx-grid
3332
[data]="advEntitySelectableGroupListModel.entities"
@@ -37,9 +36,8 @@
3736
[paginationTemplate]="paginatorTpl"
3837
[pageOnFront]="false"
3938
[rowStriped]="false"
40-
[showToolbar]="true"
39+
[showToolbar]="false"
4140
[showColumnMenuButton]="false"
42-
[toolbarTemplate]="toolbarTpl"
4341
[sortActive]="selectEntitySelectSort$ | async"
4442
[sortDirection]="selectEntitySelectIsSortDsc$ | async"
4543
(sortChange)="sortTable($event)">

‎eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.html‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
<eform-new-subheader>
22
<div class="d-flex flex-row justify-content-center align-items-center gap-12">
3+
<div class="text-field--rounded mt-4">
4+
<mat-form-field>
5+
<mat-label>{{ 'Search eForm' | translate }}</mat-label>
6+
<input
7+
matInput
8+
type="text"
9+
[ngModel]="selectEformsNameFilter$ | async"
10+
(ngModelChange)="onLabelInputChanged($event)"
11+
id="labelInput"
12+
/>
13+
<mat-icon matSuffix>search</mat-icon>
14+
</mat-form-field>
15+
</div>
316
<div class="line-vert"></div>
417
<button
518
class="btn-secondary btn-secondary--icon-rounded-border"
@@ -47,22 +60,11 @@
4760
<!--Here you can choose approach as you like: container-row, or flex, or just element with required styles and markup-->
4861
<ng-template #toolbarTpl>
4962
<div class="d-flex flex-row justify-content-start flex-nowrap align-items-center gap-12">
50-
<div class="d-flex flex-column">
51-
<mat-form-field>
52-
<mat-label>{{ 'Search eForm' | translate }}</mat-label>
53-
<input
54-
matInput
55-
type="text"
56-
[ngModel]="selectEformsNameFilter$ | async"
57-
(ngModelChange)="onLabelInputChanged($event)"
58-
id="labelInput"
59-
/>
60-
</mat-form-field>
61-
</div>
62-
<div class="d-flex flex-column" *ngIf="selectCurrentUserClaimsEformsReadTags$ | async">
63-
<mat-form-field>
63+
<div class="d-flex flex-column align-items-end " *ngIf="selectCurrentUserClaimsEformsReadTags$ | async">
64+
<mat-form-field >
6465
<mat-label>{{ 'Tags' | translate }}</mat-label>
6566
<mtx-select
67+
6668
class="custom"
6769
[dropdownPosition]="'bottom'"
6870
[items]="availableTags"

‎eform-client/src/scss/styles.scss‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -417,6 +417,7 @@ ngx-material-timepicker-container {
417417
background-color: var(--mdc-theme-primary) !important;
418418
color: var(--mdc-theme-on-primary) !important;
419419
cursor: pointer;
420+
height: 48px;
420421

421422
&:hover {
422423
background-color: var(--mdc-theme-primary-dark, #00695C) !important;
@@ -467,6 +468,7 @@ ngx-material-timepicker-container {
467468
background: unset;
468469
cursor: pointer;
469470
color: var(--text-header)!important;
471+
height: 48px;
470472

471473
&:disabled,
472474
&[disabled] {
@@ -637,6 +639,89 @@ ngx-material-timepicker-container {
637639
background: var(--bg)!important;
638640
}
639641

642+
body.theme-dark .NgxEditor, body.theme-light .NgxEditor{
643+
background: var(--bg)!important;
644+
border-bottom: unset!important;
645+
border: 1px solid var(--border)!important;
646+
color: var(--tp-text) !important;
647+
.NgxEditor__MenuBar{
648+
background: var(--bg)!important;
649+
}
650+
}
651+
652+
.ng-dropdown-panel{
653+
background: var(--bg)!important;
654+
border: 1px solid var(--border)!important;
655+
}
656+
657+
658+
.text-field{
659+
&--rounded{
660+
661+
.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{
662+
top: calc(48px/2) !important;
663+
}
664+
.mat-mdc-form-field {
665+
.mat-mdc-form-field-icon-suffix{
666+
color: var(--tp-text);
667+
}
668+
.mat-mdc-form-field-flex{
669+
align-items: center;
670+
height: 48px;
671+
}
672+
673+
.mat-mdc-floating-label{
674+
color: var(--text-body) !important;
675+
}
676+
677+
.mat-mdc-form-field-focus-overlay {
678+
background: unset !important;
679+
}
680+
681+
.mat-mdc-form-field-infix{
682+
min-height: 48px!important;
683+
}
684+
.mdc-text-field {
685+
height: 48px!important;
686+
border: 1px solid var(--border);
687+
border-radius: var(--rounded-full, 9999px)!important;
688+
689+
background-color: var(--bg) !important;
690+
691+
&__ripple{
692+
::before{
693+
background-color: var(--bg) !important;
694+
}
695+
::after{
696+
background-color: var(--bg) !important;
697+
}
698+
}
699+
700+
&__input {
701+
background-color: var(--bg) !important;
702+
}
703+
704+
&--filled:not(.mdc-text-field--disabled) {
705+
background-color: var(--bg) !important;
706+
.mdc-line-ripple{
707+
&::before {
708+
border-bottom: unset !important;
709+
}
710+
&::after {
711+
border-bottom-color: var(--bg) !important;
712+
}
713+
}
714+
715+
.mat-mdc-floating-label{
716+
color: var(--text-body) !important;
717+
}
718+
}
719+
}
720+
}
721+
722+
}
723+
}
724+
640725

641726
.mat-mdc-form-field {
642727

0 commit comments

Comments
 (0)