Skip to content

Commit 7f6d2ce

Browse files
lyubov-voloshkolyubov-voloshko
authored
Merge pull request #1567 from karinakharchenko/editable-in-fast-filters
Editable in fast filters
2 parents f017ba6 + 4d31125 commit 7f6d2ce

3 files changed

Lines changed: 355 additions & 20 deletions

File tree

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

Lines changed: 310 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.filters-content {
22
display: grid;
3-
grid-template-columns: 32px auto 228px 0 1fr 120px;
3+
grid-template-columns: 32px auto 228px 0 1fr 100px;
44
grid-column-gap: 8px;
55
align-content: flex-start;
66
align-items: center;
@@ -22,7 +22,7 @@
2222
}
2323

2424
.empty-conditions-container {
25-
grid-column: 1 / span 6;
25+
grid-column: 1 / span 5;
2626
display: flex;
2727
align-items: center;
2828
gap: 12px;
@@ -118,10 +118,317 @@
118118
top: 100%;
119119
}
120120

121-
.dynamic-column-radio {
121+
.quick-edit-header {
122+
grid-column: 6;
123+
display: flex;
124+
align-items: center;
125+
gap: 4px;
126+
justify-content: center;
127+
margin-top: 8px;
128+
margin-bottom: 16px;
129+
}
130+
131+
.quick-edit-title {
132+
font-size: 11px;
133+
font-weight: 500;
134+
text-transform: uppercase;
135+
letter-spacing: 0.5px;
136+
color: rgba(0, 0, 0, 0.5);
137+
white-space: nowrap;
138+
}
139+
140+
.quick-edit-info-icon {
141+
font-size: 14px;
142+
width: 14px;
143+
height: 14px;
144+
color: rgba(0, 0, 0, 0.35);
145+
cursor: pointer;
146+
}
147+
148+
/* Quick edit help menu styles */
149+
::ng-deep .quick-edit-help-menu {
150+
max-width: none !important;
151+
}
152+
153+
.quick-edit-help-content {
154+
padding: 16px;
155+
cursor: default;
156+
}
157+
158+
.quick-edit-help-text {
159+
margin: 0 0 12px 0;
160+
font-size: 13px;
161+
color: rgba(0, 0, 0, 0.7);
162+
line-height: 1.4;
163+
}
164+
165+
/* Animated example */
166+
.quick-edit-animated-example {
167+
display: flex;
168+
align-items: center;
169+
gap: 16px;
170+
}
171+
172+
.example-toggle-animated {
173+
flex-shrink: 0;
174+
}
175+
176+
.toggle-track {
177+
width: 36px;
178+
height: 20px;
179+
border-radius: 10px;
180+
background-color: rgba(0, 0, 0, 0.25);
181+
position: relative;
182+
animation: toggleTrack 3s ease-in-out infinite;
183+
}
184+
185+
.toggle-thumb {
186+
width: 16px;
187+
height: 16px;
188+
border-radius: 50%;
189+
background-color: #fff;
190+
position: absolute;
191+
top: 2px;
192+
left: 2px;
193+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
194+
animation: toggleThumb 3s ease-in-out infinite;
195+
}
196+
197+
@keyframes toggleTrack {
198+
0%, 40% {
199+
background-color: rgba(0, 0, 0, 0.25);
200+
}
201+
50%, 90% {
202+
background-color: #C177FC;
203+
}
204+
100% {
205+
background-color: rgba(0, 0, 0, 0.25);
206+
}
207+
}
208+
209+
@keyframes toggleThumb {
210+
0%, 40% {
211+
left: 2px;
212+
}
213+
50%, 90% {
214+
left: 18px;
215+
}
216+
100% {
217+
left: 2px;
218+
}
219+
}
220+
221+
.example-filter-animated {
222+
position: relative;
223+
height: 36px;
224+
min-width: 110px;
225+
margin-top: 4px;
226+
}
227+
228+
.example-chip-animated {
229+
position: absolute;
230+
top: 0;
231+
left: 0;
232+
background-color: rgba(0, 0, 0, 0.08);
233+
border-radius: 16px;
234+
padding: 5px 12px;
235+
font-size: 12px;
236+
color: rgba(0, 0, 0, 0.7);
237+
white-space: nowrap;
238+
animation: chipFade 3s ease-in-out infinite;
239+
}
240+
241+
.example-editable-animated {
242+
position: absolute;
243+
top: 0;
244+
left: 0;
245+
display: flex;
246+
align-items: center;
247+
gap: 4px;
248+
background-color: transparent;
249+
border: 1px solid #C177FC;
250+
border-radius: 4px;
251+
padding: 8px 8px 4px 8px;
252+
opacity: 0;
253+
animation: editableFade 3s ease-in-out infinite;
254+
}
255+
256+
.example-editable-label {
257+
position: absolute;
258+
top: -8px;
259+
left: 8px;
260+
font-size: 10px;
261+
color: #C177FC;
262+
background-color: #fff;
263+
padding: 0 4px;
264+
}
265+
266+
.example-editable-value {
267+
font-size: 12px;
268+
color: rgba(0, 0, 0, 0.87);
269+
display: flex;
270+
align-items: center;
271+
}
272+
273+
.typing-text::after {
274+
content: 'active';
275+
animation: typeText 3s ease-in-out infinite;
276+
}
277+
278+
@keyframes typeText {
279+
0%, 40% {
280+
content: '';
281+
}
282+
45% {
283+
content: 'p';
284+
}
285+
50% {
286+
content: 'pe';
287+
}
288+
55% {
289+
content: 'pen';
290+
}
291+
60% {
292+
content: 'pend';
293+
}
294+
65% {
295+
content: 'pendi';
296+
}
297+
70%, 90% {
298+
content: 'pending';
299+
}
300+
100% {
301+
content: '';
302+
}
303+
}
304+
305+
.example-typing-cursor {
306+
font-size: 12px;
307+
color: #C177FC;
308+
font-weight: 300;
309+
animation: cursorBlink 0.5s step-end infinite;
310+
}
311+
312+
@keyframes cursorBlink {
313+
0%, 50% {
314+
opacity: 1;
315+
}
316+
51%, 100% {
317+
opacity: 0;
318+
}
319+
}
320+
321+
@keyframes chipFade {
322+
0%, 40% {
323+
opacity: 1;
324+
}
325+
50%, 90% {
326+
opacity: 0;
327+
}
328+
100% {
329+
opacity: 1;
330+
}
331+
}
332+
333+
@keyframes editableFade {
334+
0%, 40% {
335+
opacity: 0;
336+
}
337+
50%, 90% {
338+
opacity: 1;
339+
}
340+
100% {
341+
opacity: 0;
342+
}
343+
}
344+
345+
@media (prefers-color-scheme: dark) {
346+
.quick-edit-help-text {
347+
color: rgba(255, 255, 255, 0.7);
348+
}
349+
350+
.toggle-track {
351+
animation: toggleTrackDark 3s ease-in-out infinite;
352+
}
353+
354+
@keyframes toggleTrackDark {
355+
0%, 40% {
356+
background-color: rgba(255, 255, 255, 0.3);
357+
}
358+
50%, 90% {
359+
background-color: #C177FC;
360+
}
361+
100% {
362+
background-color: rgba(255, 255, 255, 0.3);
363+
}
364+
}
365+
366+
.example-chip-animated {
367+
background-color: rgba(255, 255, 255, 0.12);
368+
color: rgba(255, 255, 255, 0.7);
369+
}
370+
371+
.example-editable-animated {
372+
background-color: transparent;
373+
}
374+
375+
.example-editable-label {
376+
color: #C177FC;
377+
background-color: #424242;
378+
}
379+
380+
.example-editable-value {
381+
color: rgba(255, 255, 255, 0.87);
382+
}
383+
384+
.example-typing-cursor {
385+
color: #C177FC;
386+
}
387+
}
388+
389+
.quick-edit-toggle {
122390
grid-column: 6;
123391
margin-top: -16px;
124392
align-self: center;
393+
justify-self: center;
394+
}
395+
396+
/* Hide default icons */
397+
.quick-edit-toggle ::ng-deep .mdc-switch__icons {
398+
display: none;
399+
}
400+
401+
/* Style the thumb to contain our icon */
402+
.quick-edit-toggle ::ng-deep .mdc-switch__handle {
403+
display: flex;
404+
align-items: center;
405+
justify-content: center;
406+
}
407+
408+
/* Add lock icon when unchecked */
409+
.quick-edit-toggle ::ng-deep .mdc-switch__handle::after {
410+
font-family: 'Material Icons';
411+
content: 'lock';
412+
font-size: 16px;
413+
position: absolute;
414+
color: #fff;
415+
}
416+
417+
/* Add edit icon when checked */
418+
.quick-edit-toggle.mat-mdc-slide-toggle-checked ::ng-deep .mdc-switch__handle::after {
419+
content: 'edit';
420+
font-size: 16px;
421+
color: #fff;
422+
}
423+
424+
@media (prefers-color-scheme: dark) {
425+
.quick-edit-title {
426+
color: rgba(255, 255, 255, 0.5);
427+
}
428+
429+
.quick-edit-info-icon {
430+
color: rgba(255, 255, 255, 0.35);
431+
}
125432
}
126433

127434
.comparator-select-field {
@@ -185,15 +492,6 @@
185492
padding-bottom: 0;
186493
}
187494

188-
.dynamic-column-radio ::ng-deep .mdc-form-field {
189-
display: flex;
190-
align-items: center;
191-
gap: 4px;
192-
}
193-
194-
.dynamic-column-radio ::ng-deep .mdc-form-field>label {
195-
white-space: nowrap;
196-
}
197495

198496
.filter-save-form {
199497
grid-column: 1 / span 6;

0 commit comments

Comments
 (0)