Query-builder conditions Drag&Drop functionality (take 2 - no chip gaps) #15122

ivanvpetrov · 2024-11-28T13:18:45Z

The difference between this PR and #15102 is that here component gaps are replaced with padding so we don't have void space between chips and the drag&drop works perfectly
Closes #14642

Additional information (check all that apply):

Checklist:

All relevant tags have been applied to this PR
This PR includes unit tests covering all the new code (test guidelines)
This PR includes API docs for newly added methods/properties (api docs guidelines)
This PR includes feature/README.MD updates for the feature docs
This PR includes general feature table updates in the root README.MD
This PR includes CHANGELOG.MD updates for newly added functionality
This PR contains breaking changes
This PR includes ng update migrations for the breaking changes (migrations guidelines)
This PR includes behavioral changes and the feature specification has been updated with them

…le is false

…ot mouse

teodosiah · 2025-01-30T11:36:16Z

'Where' should not be displayed in the grid advanced filtering

gedinakova · 2025-01-30T12:15:37Z

In the sub-query, the search value null text should be "sub-query-results".

ig-georgeA · 2025-01-30T12:19:43Z

Can we change the edit chip mode to use 12px instead 16px? It will kinda match left and right padding on the chip.
Also, in Bootstrap And and Or casing seems off. May be how it's in code. It's not noticeable for Material and Indigo coz the button texts have a text-transform to capitalize.

12px

16px

gedinakova · 2025-01-30T12:24:21Z

@teodosiah An error is thrown when attempting to add a new group to a sub-query

Open the sub-query
Add a new group
Add a condition to it
Attempt to commit the subquery

The following error is thrown:

gedinakova · 2025-01-30T12:32:10Z

@teodosiah Advanced filtering button does not show the correct number of filters applied.

ig-georgeA · 2025-01-30T13:04:47Z

@teodosiah Advanced filtering button does not show the correct number of filters applied.

Seems to happen if filter condition is on the same column. If different cols are selected, it's showing it right

desig9stein · 2025-01-30T14:52:57Z

Can we change the edit chip mode to use 12px instead 16px? It will kinda match left and right padding on the chip. Also, in Bootstrap And and Or casing seems off. May be how it's in code. It's not noticeable for Material and Indigo coz the button texts have a text-transform to capitalize.

12px

16px

For the first question, yes, but it has to be updated in the handoff. Since it's 16px there, should I change it in the implementation to 12px?

In the Bootstrap theme, the text-transform is not set and what you see is what is coming from the localization strings. I can add a style to make it capitalize in Bootstrap, do you want me to do that?

teodosiah · 2025-01-30T15:15:37Z

@teodosiah Advanced filtering button does not show the correct number of filters applied.

This is the current behavior on production as well - the number is the number of columns not filters, and after checking the code as well I would say that this is by design

… keyboard

…ithub.com/IgniteUI/igniteui-angular into ipetrov/query-builder-drag-and-drop-nogap

sbayreva · 2025-01-31T07:48:20Z

Material Light

These labels should be grays 700

In the design, in the chip, there is 24px container for the icons which is 18px. Here we have just the icon, without the container. Also in the design the icons are black and here they are grays 900
In the design the operators are also black and the value is within quotation marks:

In the implementation their color is grays 900 with 0.6 opacity:

@andiesm813 and @ig-georgeA , please can you give more details according the chip situation.
Top and bottom padding here should be 12px, not 16px.
The responsiveness is a little bit strange. Only some of the select fields are responsive. Also, if the idea is that only some of them to be responsive, and some to stay the same size, the implemented sizes does not correspond to those in the design.

Screen.Recording.mov

I do not see the action buttons of the whole query builder, only in the advance filtering. (This is relevant for all themes)
I don’t see these icons for the operators in the design. ( Relevant for all themes)
The right and left bottom radius should be 4px

Advanced filtering for all themes:

The buttons in the footer change their size when you change the size of the grid. They should stay Medium for all themes in all sizes, since the QB does not support sizes.

Material Dark

The color of the labels should be grays 700

2.The chip is different than the design: Implemented: ![Screenshot 2025-01-30 at 14 51 58](https://github.com/user-attachments/assets/beff00b3-2f89-46f1-b98f-5c520b0d50ad)

Design:

The foreground + the icons in the design are black. The icons are in an additional container 24px in the design. In the design the value is in quotation marks.
@andiesm813 and @ig-georgeA , please can you give more details according the chip situation.

Bottom left and right radius of the whole container should be 4px.

@andiesm813 and @ig-georgeA , please take a look at my comments.

sbayreva · 2025-01-31T07:53:42Z

Bootstrap Light

The background of the QB in the implementation is surface 50 which is white, but the background used in the design is surface which color is actually #F8F9FA
The bottom left and right radius of the whole QB should be 4px
The height of the select and combo should be 38px, which is medium size. In the implementation the size is different:
These labels should be grays 700
Bottom and top paddings should be 12px
The chips in the designs look like this:

The chips in the implementation look like this:

@andiesm813 and @ig-georgeA can you please give some more details according the chip. This is relevant for all themes.
And and Or buttons should start with capital letter.

Bootstrap Dark

These labels should be grays 700
The same as for the light theme:
Implementation:

Design:

@andiesm813 and @ig-georgeA , please take a look at my comments.

sbayreva · 2025-01-31T07:59:46Z

Fluent Light

The background color of the whole QB should be surface , now it is white.
The radiuses of the whole container should be 2px:
The colors of the labels should be grays 700
These buttons should be in small size:
The background here should be surface:
The same as in the rest of the themes. The chip is not custom as in the design.
Implementation:

Design:

@andiesm813 and @ig-georgeA , please give some more details according the chip situation.
The bottom and top padding here should be 12px

Fluent Dark

These labels should be grays 700:
The same with the chip as in rest of the themes. Implemented:

Design:

@andiesm813 and @ig-georgeA , please take a look at my comments.

sbayreva · 2025-01-31T08:04:21Z

Indigo Light

Border radius of the whole container for the 4 radiuses should be 10px
These labels should be grays 700

3.The bottom and top paddings here should be 12px
The problem with the chip is the same as in the rest of the themes.

Indigo Dark

These labels should be grays 700
The color of the sub query background should be white with 5% opacity
The background here should be grays 50:
The border of the whole sub query container should be grays 100:

@andiesm813 and @ig-georgeA , please take a look at my comments.

teodosiah · 2025-01-31T08:36:22Z

@sbayreva, regarding the action buttons - they are part of the Grid Advanced Filtering dialog, not the Query Builder component, so this is expected:

desig9stein · 2025-01-31T08:50:37Z

2. Also in the design the icons are black and here they are grays 900

Chip icons and text are black, they use a contrast color of gray 300 which is black, the operators use the same black color with opacity, @ig-george told me not to change anything inside the chip in this comment
https://www.figma.com/design/tuNBAEBODwLB7xxaEAvSsE?node-id=21698-56791&m=dev#1107340242

- fix query builder border radius - fix padding on the subquery header - fix labels colors - fix bootstrap condition buttons text transform - fix colors - fix min width of the fields that are outside of subquery header - fix button size in filtering dialog to be medium in all size variants - cleanup unused code

* feat(query-builder): focus last edited expression chip --------- Co-authored-by: INFRAGISTICS\IPetrov <[email protected]>

sbayreva · 2025-01-31T14:17:49Z

Material

The background color of the hover state should be with 8% opacity, not 6%, this is for light and dark theme for the purple and the green buttons.
The paddings of the ghost element looks smaller than 32px (left and right). Also, in the design the label says “drop here to insert” . Please, check the rest of the themes too, and check the designs in Figma.
The label and the border should be grays 600, and there is no fill color.
Please, check the design in Figma for the dark theme as well.
The buttons for all themes should be Outlined, not Flat.

Bootstrap

The height of the input fields should be 38px, which is medium size. In the implementation the size is different:

- make sure that the icon buttons are outlined - change the size of the fields in bootstrap - change the label inside the ghost drop indicator - change the padding inside the ghost drop

desig9stein · 2025-01-31T15:09:38Z

Material
The buttons for all themes should be Outlined, not Flat. there was a bug logged

Here is the bug
#15299

The label and the border should be grays 600, and there is no fill color.

They are the background is transparent

ivanvpetrov added 14 commits November 22, 2024 13:06

feat(query-builder): add initial drag and drop functionality

4131e24

feat(query-builder): add drag and drop functionality 2

b37a8c1

feat(query-builder): add code clean up

273fb12

feat(query-builder): edit code clean

b791a81

feat(query-builder): fix big improvement in drag and drop

01b8615

feat(query-builder): add drop at north of a chip functionality added

39be52e

feat(query-builder): add drop at addCondition button

7009f7f

feat(query-builder): fix drop ghost behavior on addCondition

e924129

feat(query-builder): edit switch gap for padding

a123d7b

feat(query-builder): edit switch gap for padding 2

0945919

feat(query-builder): refactor drag and drop with no gap

ee80747

feat(query-builder): refactor almost done

5d2d4e0

feat(query-builder): fix move to addCondition. code cleanup

7b63988

feat(query-builder): fix chip move bug and other bugs

c5c3074

ivanvpetrov added 🆕 status: new ❌ do not merge query-builder labels Nov 28, 2024

ivanvpetrov requested a review from gedinakova November 28, 2024 13:18

ivanvpetrov added 12 commits December 3, 2024 10:35

feat(query-builder): add cursor change

2e11edf

feat(query-builder): fix more css. padding replaced with margin

28b6076

feat(query-builder): add make edited condition a dropzone too

fd478da

feat(query-builder): add chips can be dragged only when in edin mode

fdc8837

feat(query-builder): fix more css margin

7982502

feat(query-builder): add mousemove listener for ghost removal

8caa97e

feat(query-builder): fix more css gaps

e11116b

feat(query-builder): fix bug where movestart is fired, though draggab…

1ccfa71

…le is false

feat(query-builder): add ghost adjacency calced by it's chip rather n…

502185d

…ot mouse

feat(query-builder): fix removed duplicated reference

346a6a5

feat(query-builder): add group opearator word

12b1172

feat(query-builder): add keyboard drag&drop working

4db0605

fix(query-builder): update theming version in all package.json files

aa419f6

fix(query-builder): remove 'where' span from grid AF

a13df48

fix(query-builder): add group in nested query

c25ec0b

ivanvpetrov added 4 commits January 30, 2025 19:07

fix(query-builder): drop ghost for group root now in proper place for…

9733474

… keyboard

Merge branch 'ipetrov/query-builder-drag-and-drop-nogap' of https://g…

b531469

…ithub.com/IgniteUI/igniteui-angular into ipetrov/query-builder-drag-and-drop-nogap

fix(query-builder): drop next and previuos chip logic

c99ff17

fix(query-builder): drop proper targetExpression in nested groups

e33df44

ivanvpetrov and others added 5 commits January 31, 2025 11:37

refactor(query-builder): dragdrop logic for keyboard drag

aa0721f

build(igniteui-theming): bump to latest beta

7d2249a

feat(query-builder): focus last edited expression chip (#15303)

00b67ff

* feat(query-builder): focus last edited expression chip --------- Co-authored-by: INFRAGISTICS\IPetrov <[email protected]>

fix(query-builder): bug where new conditions don't have parent

1c3a913

fix(query-builder): fix for comments

79c05c5

- make sure that the icon buttons are outlined - change the size of the fields in bootstrap - change the label inside the ghost drop indicator - change the padding inside the ghost drop

fix(*): Bumped theming beta to 2.

a0078f0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Query-builder conditions Drag&Drop functionality (take 2 - no chip gaps) #15122

Query-builder conditions Drag&Drop functionality (take 2 - no chip gaps) #15122

ivanvpetrov commented Nov 28, 2024 •

edited by desig9stein

Loading

teodosiah commented Jan 30, 2025

gedinakova commented Jan 30, 2025

ig-georgeA commented Jan 30, 2025

gedinakova commented Jan 30, 2025 •

edited

Loading

gedinakova commented Jan 30, 2025 •

edited

Loading

ig-georgeA commented Jan 30, 2025 •

edited

Loading

desig9stein commented Jan 30, 2025 •

edited

Loading

teodosiah commented Jan 30, 2025

sbayreva commented Jan 31, 2025

sbayreva commented Jan 31, 2025

sbayreva commented Jan 31, 2025 •

edited

Loading

sbayreva commented Jan 31, 2025 •

edited

Loading

teodosiah commented Jan 31, 2025

desig9stein commented Jan 31, 2025

sbayreva commented Jan 31, 2025

desig9stein commented Jan 31, 2025 •

edited

Loading

Query-builder conditions Drag&Drop functionality (take 2 - no chip gaps) #15122

Are you sure you want to change the base?

Query-builder conditions Drag&Drop functionality (take 2 - no chip gaps) #15122

Conversation

ivanvpetrov commented Nov 28, 2024 • edited by desig9stein Loading

Additional information (check all that apply):

Checklist:

teodosiah commented Jan 30, 2025

gedinakova commented Jan 30, 2025

ig-georgeA commented Jan 30, 2025

gedinakova commented Jan 30, 2025 • edited Loading

gedinakova commented Jan 30, 2025 • edited Loading

ig-georgeA commented Jan 30, 2025 • edited Loading

desig9stein commented Jan 30, 2025 • edited Loading

teodosiah commented Jan 30, 2025

sbayreva commented Jan 31, 2025

sbayreva commented Jan 31, 2025

sbayreva commented Jan 31, 2025 • edited Loading

sbayreva commented Jan 31, 2025 • edited Loading

teodosiah commented Jan 31, 2025

desig9stein commented Jan 31, 2025

sbayreva commented Jan 31, 2025

desig9stein commented Jan 31, 2025 • edited Loading

ivanvpetrov commented Nov 28, 2024 •

edited by desig9stein

Loading

gedinakova commented Jan 30, 2025 •

edited

Loading

gedinakova commented Jan 30, 2025 •

edited

Loading

ig-georgeA commented Jan 30, 2025 •

edited

Loading

desig9stein commented Jan 30, 2025 •

edited

Loading

sbayreva commented Jan 31, 2025 •

edited

Loading

sbayreva commented Jan 31, 2025 •

edited

Loading

desig9stein commented Jan 31, 2025 •

edited

Loading