Skip to content

Commit 5b6f9a1

Browse files
karinakharchenkokarinakharchenko
committed
arrow and where
1 parent eb5cf78 commit 5b6f9a1

2 files changed

Lines changed: 175 additions & 68 deletions

File tree

‎frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css‎

Lines changed: 158 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,121 @@
11
.filters-content {
22
display: grid;
3-
grid-template-columns: auto 228px 0 1fr 120px 32px;
3+
grid-template-columns: 32px auto 228px 0 1fr 120px;
44
grid-column-gap: 8px;
55
align-content: flex-start;
66
align-items: flex-start;
77
padding-top: 4px !important;
88
}
99

1010
.filters-select {
11-
grid-column: 1 / span 6;
11+
grid-column: 2 / span 5;
1212
margin-bottom: 16px;
1313
}
1414

1515
.filter-line {
16-
grid-column: 1 / span 4;
16+
grid-column: 2 / span 4;
17+
}
18+
19+
.empty-conditions-container {
20+
grid-column: 1 / span 6;
21+
display: flex;
22+
align-items: center;
23+
gap: 12px;
24+
margin-top: 8px;
25+
margin-bottom: 16px;
26+
}
27+
28+
.where-label {
29+
font-weight: 500;
30+
color: rgba(0, 0, 0, 0.87);
31+
white-space: nowrap;
32+
}
33+
34+
@media (prefers-color-scheme: dark) {
35+
.where-label {
36+
color: rgba(255, 255, 255, 0.87);
37+
}
38+
}
39+
40+
.empty-conditions-container .add-condition-button {
41+
width: auto;
42+
min-width: auto;
43+
min-height: 36px;
44+
height: 36px;
45+
display: flex;
46+
align-items: center;
47+
justify-content: center;
48+
text-transform: none;
49+
margin: 0 !important;
50+
padding: 0 16px;
51+
gap: 4px;
52+
}
53+
54+
.empty-conditions-container .add-condition-button.accent-button {
55+
color: #C177FC;
56+
}
57+
58+
.empty-conditions-container .add-condition-button.accent-button:hover {
59+
background-color: rgba(193, 119, 252, 0.04);
60+
}
61+
62+
.empty-conditions-container .add-condition-button.accent-button .add-icon {
63+
font-size: 20px;
64+
width: 20px;
65+
height: 20px;
66+
line-height: 20px;
67+
}
68+
69+
.empty-conditions-container .column-name-icon {
70+
font-size: 18px;
71+
width: 18px;
72+
height: 18px;
73+
vertical-align: middle;
74+
}
75+
76+
.empty-condition-input {
77+
width: auto;
78+
min-width: 200px;
79+
max-width: 300px;
80+
margin: 0;
81+
flex-shrink: 0;
82+
}
83+
84+
.empty-condition-input ::ng-deep .mat-mdc-form-field-infix {
85+
min-height: 36px;
86+
padding-top: 8px;
87+
padding-bottom: 8px;
88+
display: flex;
89+
align-items: center;
90+
}
91+
92+
.empty-condition-input ::ng-deep .mat-mdc-form-field {
93+
margin: 0;
94+
}
95+
96+
.empty-condition-input ::ng-deep .mat-mdc-text-field-wrapper {
97+
padding-bottom: 0;
98+
margin-bottom: 0;
99+
}
100+
101+
.empty-condition-input ::ng-deep .mat-mdc-form-field-subscript-wrapper {
102+
margin-top: 0;
103+
position: absolute;
104+
top: 100%;
17105
}
18106

19107
.dynamic-column-radio {
20-
grid-column: 5;
108+
grid-column: 6;
21109
margin-top: 8px;
22110
}
23111

112+
.comparator-select-field {
113+
grid-column: 3;
114+
}
115+
24116
.add-condition-footer {
25117
grid-column: 1 / span 6;
26-
margin-top: 16px;
118+
margin-top: 24px;
27119
display: flex;
28120
flex-direction: column;
29121
justify-content: flex-start;
@@ -32,22 +124,39 @@
32124
}
33125

34126
.add-condition-footer button {
35-
width: 50%;
36-
min-height: 44px;
37-
height: 44px;
127+
width: auto;
128+
min-width: auto;
129+
min-height: 36px;
130+
height: 36px;
38131
display: flex;
39132
align-items: center;
40133
justify-content: center;
41134
text-transform: none;
42-
margin: 0 !important;
43-
padding: 0;
135+
margin: 0 0 16px 0 !important;
136+
padding: 0 16px;
44137
}
45138

46139
.add-condition-footer .filters-select {
47-
width: 50%;
140+
width: auto;
141+
min-width: 200px;
142+
max-width: 300px;
48143
margin: 0 !important;
49-
min-height: 44px;
144+
min-height: 36px;
50145
margin-top: 0 !important;
146+
flex-shrink: 0;
147+
}
148+
149+
.add-condition-footer .filters-select ::ng-deep .mat-mdc-form-field-infix {
150+
min-height: 36px;
151+
padding-top: 8px;
152+
padding-bottom: 8px;
153+
display: flex;
154+
align-items: center;
155+
}
156+
157+
.add-condition-footer .filters-select ::ng-deep .mat-mdc-text-field-wrapper {
158+
padding-bottom: 0;
159+
margin-bottom: 0;
51160
}
52161

53162
.add-condition-footer ::ng-deep .mat-mdc-form-field {
@@ -142,17 +251,16 @@
142251
display: flex;
143252
}
144253

145-
.filters-content {
146-
flex: 1 0 auto;
147-
}
148-
149254
.column-name {
255+
grid-column: 2;
150256
margin-top: 12px;
151257
}
152258

153259
.filter-delete-button {
260+
grid-column: 1;
154261
margin-top: 4px;
155-
margin-left: 8px;
262+
margin-right: 8px;
263+
align-self: flex-start;
156264
}
157265

158266
.settings-form__reset-button {
@@ -181,25 +289,37 @@
181289

182290
.comparator-select-field {
183291
width: auto;
184-
min-width: fit-content;
185-
max-width: fit-content;
292+
min-width: 140px;
293+
max-width: none;
186294
}
187295

188296
.comparator-select-field ::ng-deep .mat-mdc-form-field-infix {
189-
width: auto !important;
297+
width: 100% !important;
190298
min-width: fit-content;
191-
padding-right: 12px;
299+
padding-right: 40px;
192300
padding-left: 0;
301+
position: relative;
193302
}
194303

195304
.comparator-select-field ::ng-deep .mat-mdc-select-trigger {
196-
width: auto;
305+
width: 100%;
197306
min-width: fit-content;
307+
display: flex;
308+
justify-content: space-between;
309+
align-items: center;
198310
}
199311

200312
.comparator-select-field ::ng-deep .mat-mdc-select-value-text {
201313
width: auto;
202314
min-width: fit-content;
315+
flex: 1;
316+
}
317+
318+
.comparator-select-field ::ng-deep .mat-mdc-select-arrow-wrapper {
319+
position: absolute;
320+
right: 0;
321+
top: 50%;
322+
transform: translateY(-50%);
203323
}
204324

205325
.comparator-select-field ::ng-deep .mat-mdc-select-panel {
@@ -214,3 +334,19 @@
214334
margin: 8px 0 0 0;
215335
padding-left: 16px;
216336
}
337+
338+
/* Add more spacing for multiline textarea inputs (more than 2 rows) */
339+
.filters-content ::ng-deep .filter-line mat-form-field:has(textarea[rows]):not(:has(textarea[rows="1"])):not(:has(textarea[rows="2"])),
340+
.filters-content ::ng-deep .filter-line mat-form-field:has(textarea.long-textarea),
341+
.filters-content ::ng-deep .filter-line mat-form-field:has(textarea.form-textarea) {
342+
margin-top: 24px !important;
343+
margin-bottom: 24px !important;
344+
}
345+
346+
/* Add more spacing for foreign key fields */
347+
.filters-content ::ng-deep .filter-line .foreign-key,
348+
.filters-content ::ng-deep .filter-line app-edit-foreign-key,
349+
.filters-content ::ng-deep .foreign-key {
350+
margin-top: 24px !important;
351+
margin-bottom: 24px !important;
352+
}

‎frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html‎

Lines changed: 17 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,14 @@ <h3 class="section-title">Conditions & editable column</h3>
4747
</mat-form-field>
4848
</ng-template>
4949

50-
<ng-container *ngIf="!hasSelectedFilters; else addConditionControls">
51-
<mat-form-field class="filters-select" appearance="outline" [class.mat-form-field-invalid]="showConditionsError">
50+
<div class="empty-conditions-container">
51+
<mat-icon class="column-name-icon">subdirectory_arrow_right</mat-icon>
52+
<span class="where-label">where</span>
53+
<button *ngIf="!showAddConditionField" mat-stroked-button type="button" (click)="handleAddConditionButtonClick()" class="add-condition-button accent-button">
54+
<mat-icon class="add-icon">add</mat-icon>
55+
<span>Add condition</span>
56+
</button>
57+
<mat-form-field *ngIf="showAddConditionField" class="filters-select empty-condition-input" appearance="outline" [class.mat-form-field-invalid]="showConditionsError">
5258
<mat-label>Click here to add condition</mat-label>
5359
<input type="text" matInput name="filter_columns"
5460
[matAutocomplete]="auto"
@@ -74,10 +80,18 @@ <h3 class="section-title">Conditions & editable column</h3>
7480
At least one condition is required
7581
</mat-error>
7682
</mat-form-field>
77-
</ng-container>
83+
<p *ngIf="showConditionsError && !showAddConditionField" class="conditions-error-message">
84+
At least one condition is required
85+
</p>
86+
</div>
7887

7988
<!-- Added Filters -->
8089
<ng-container *ngFor="let value of tableRowFieldsShown | keyvalue; trackBy:trackByFn">
90+
<button mat-icon-button type="button" class="filter-delete-button"
91+
matTooltip="Remove"
92+
(click)="removeFilter(value.key)">
93+
<mat-icon>close</mat-icon>
94+
</button>
8195
<div *ngIf="getComparatorType(getInputType(value.key)) === 'nonComparable'; else comparableFilter" class="filter-line">
8296

8397
<div *ngIf="isWidget(value.key); else defaultTableField">
@@ -197,50 +211,7 @@ <h3 class="section-title">Conditions & editable column</h3>
197211
Use for editing
198212
</mat-checkbox>
199213
</div>
200-
<button mat-icon-button type="button" class="filter-delete-button"
201-
matTooltip="Remove"
202-
(click)="removeFilter(value.key)">
203-
<mat-icon>close</mat-icon>
204-
</button>
205214
</ng-container>
206-
<ng-template #addConditionControls>
207-
<div class="add-condition-footer">
208-
<button mat-stroked-button type="button" (click)="handleAddConditionButtonClick()">
209-
add condition
210-
</button>
211-
<ng-container *ngIf="showAddConditionField">
212-
<mat-form-field class="filters-select" appearance="outline" [class.mat-form-field-invalid]="showConditionsError">
213-
<mat-label>Click here to add condition</mat-label>
214-
<input type="text" matInput name="filter_columns"
215-
[matAutocomplete]="auto2"
216-
[formControl]="fieldSearchControl"
217-
(blur)="handleInputBlur()"
218-
(input)="showConditionsError = false">
219-
<mat-autocomplete autoActiveFirstOption #auto2="matAutocomplete" (optionSelected)="addFilter($event)">
220-
<mat-option *ngFor="let field of foundFields | async"
221-
[ngClass]="{'disabled': field === 'No matches'}"
222-
[value]="field">
223-
{{field}}
224-
</mat-option>
225-
</mat-autocomplete>
226-
<button *ngIf="hasSelectedFilters"
227-
mat-icon-button
228-
matSuffix
229-
type="button"
230-
aria-label="Cancel adding condition"
231-
(click)="cancelAddConditionInput()">
232-
<mat-icon>close</mat-icon>
233-
</button>
234-
<mat-error *ngIf="showConditionsError">
235-
At least one condition is required
236-
</mat-error>
237-
</mat-form-field>
238-
</ng-container>
239-
<p *ngIf="showConditionsError && !showAddConditionField" class="conditions-error-message">
240-
At least one condition is required
241-
</p>
242-
</div>
243-
</ng-template>
244215
</mat-dialog-content>
245216
</ng-template>
246217

0 commit comments

Comments
 (0)