Skip to content

Commit 3a54eb8

Browse files
teodosiahteodosiah
authored
refactor(query-builder): add entities to query builder styling sample (#3531)
* refactor(query-builder): add entities to query builder styling sample * fix(query-builder): apply inputs action buttons color & theme to styling sample
1 parent 0a1d717 commit 3a54eb8

3 files changed

Lines changed: 115 additions & 95 deletions

File tree

‎src/app/interactions/query-builder/query-builder-style/query-builder-style.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<igx-query-builder #queryBuilder
2-
[entities]="[{ name: '', fields: fields}]">
2+
[entities]="entities">
33
</igx-query-builder>

‎src/app/interactions/query-builder/query-builder-style/query-builder-style.component.scss‎

Lines changed: 64 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -4,86 +4,75 @@ $yellow: #ffcd0f;
44
$black: #292826;
55
$muted-yellow: #ffe482;
66

7-
$custom-query-builder: query-builder-theme(
8-
$background: $black,
9-
$header-background: $black,
10-
$header-foreground: $yellow
11-
);
12-
13-
$custom-button: button-theme(
14-
$schema: $dark-material-schema,
15-
$background: $black,
16-
$foreground: $yellow,
17-
$hover-foreground: $black,
18-
$hover-background: $yellow,
19-
$focus-foreground: $yellow,
20-
$focus-background: $black,
21-
$border-color: $yellow
22-
);
23-
24-
$custom-contained-button: button-theme(
25-
$schema: $dark-material-schema,
26-
$background: $yellow,
27-
$foreground: $black,
28-
$active-background: $muted-yellow,
29-
$active-foreground: $black,
30-
$hover-background: $muted-yellow,
31-
$hover-foreground: $black,
32-
$border-color: $yellow,
33-
$active-border-color: $muted-yellow,
34-
$hover-border-color: $muted-yellow,
35-
$focus-border-color: $yellow
36-
);
37-
38-
$custom-button-group: button-group-theme(
39-
$schema: $dark-material-schema,
40-
$item-background: $black,
41-
$item-text-color: $yellow,
42-
$item-border-color: $yellow,
43-
$item-selected-background: $yellow,
44-
$item-hover-background: $yellow,
45-
$item-selected-hover-background: $yellow
46-
);
47-
48-
$custom-input-group: input-group-theme(
49-
$schema: $dark-material-schema,
50-
$idle-text-color: $yellow,
51-
$focused-text-color: $yellow,
52-
$filled-text-color: $yellow,
53-
$idle-bottom-line-color: $muted-yellow,
54-
$focused-secondary-color: $yellow
55-
);
56-
57-
$custom-chip: chip-theme(
58-
$schema: $dark-material-schema,
59-
$background: $yellow,
60-
$text-color: $black
61-
);
62-
63-
$custom-drop-down: drop-down-theme(
64-
$schema: $dark-material-schema,
65-
$background-color: $black,
66-
$item-text-color: $yellow,
67-
$hover-item-background: $yellow,
68-
$hover-item-text-color: $black,
69-
$focused-item-background: $yellow,
70-
$focused-item-text-color: $black,
71-
$selected-item-background: $yellow,
72-
$selected-item-text-color: $black,
73-
$selected-focus-item-background: $yellow,
74-
$selected-focus-item-text-color: $black,
75-
$selected-hover-item-background: $yellow,
76-
$selected-hover-item-text-color: $black
77-
);
7+
$custom-query-builder: query-builder-theme($background: $black,
8+
$tree-background: $black,
9+
$header-background: $black,
10+
$header-foreground: $yellow);
11+
12+
$custom-button: button-theme($schema: $dark-material-schema,
13+
$background: $black,
14+
$foreground: $yellow,
15+
$hover-foreground: $black,
16+
$hover-background: $yellow,
17+
$focus-foreground: $yellow,
18+
$focus-background: $black,
19+
$border-color: $yellow);
20+
21+
$custom-contained-button: button-theme($schema: $dark-material-schema,
22+
$background: $yellow,
23+
$foreground: $black,
24+
$active-background: $muted-yellow,
25+
$active-foreground: $black,
26+
$hover-background: $muted-yellow,
27+
$hover-foreground: $black,
28+
$border-color: $yellow,
29+
$active-border-color: $muted-yellow,
30+
$hover-border-color: $muted-yellow,
31+
$focus-border-color: $yellow);
32+
33+
$custom-button-group: button-group-theme($schema: $dark-material-schema,
34+
$item-background: $black,
35+
$item-text-color: $yellow,
36+
$item-border-color: $yellow,
37+
$item-selected-background: $yellow,
38+
$item-hover-background: $yellow,
39+
$item-selected-hover-background: $yellow);
40+
41+
$custom-input-group: input-group-theme($schema: $dark-material-schema,
42+
$idle-text-color: $yellow,
43+
$focused-text-color: $yellow,
44+
$filled-text-color: $yellow,
45+
$idle-bottom-line-color: $muted-yellow,
46+
$focused-secondary-color: $yellow);
47+
48+
$custom-chip: chip-theme($schema: $dark-material-schema,
49+
$background: $yellow,
50+
$text-color: $black);
51+
52+
$custom-drop-down: drop-down-theme($schema: $dark-material-schema,
53+
$background-color: $black,
54+
$item-text-color: $yellow,
55+
$hover-item-background: $yellow,
56+
$hover-item-text-color: $black,
57+
$focused-item-background: $yellow,
58+
$focused-item-text-color: $black,
59+
$selected-item-background: $yellow,
60+
$selected-item-text-color: $black,
61+
$selected-focus-item-background: $yellow,
62+
$selected-focus-item-text-color: $black,
63+
$selected-hover-item-background: $yellow,
64+
$selected-hover-item-text-color: $black);
7865

7966

8067
:host {
8168
display: block;
8269
margin: 16px;
8370

8471
::ng-deep {
85-
@include css-vars($custom-drop-down);
72+
@include theme($palette: $dark-material-palette );
73+
8674
@include css-vars($custom-query-builder);
75+
@include css-vars($custom-drop-down);
8776
@include css-vars($custom-button-group);
8877
@include css-vars($custom-input-group);
8978
@include css-vars($custom-chip);
@@ -102,15 +91,15 @@ $custom-drop-down: drop-down-theme(
10291
color: $yellow
10392
}
10493

105-
.igx-filter-tree__expression-actions igx-icon {
94+
.igx-filter-tree__inputs-actions igx-icon {
10695
color: $yellow
10796
}
10897

109-
.igx-filter-tree__expression-actions igx-icon:hover {
98+
.igx-filter-tree__inputs-actions igx-icon:hover {
11099
color: $muted-yellow
111100
}
112101

113-
.igx-filter-tree__expression-actions igx-icon:focus {
102+
.igx-filter-tree__inputs-actions igx-icon:focus {
114103
color: $muted-yellow
115104
}
116105

‎src/app/interactions/query-builder/query-builder-style/query-builder-style.component.ts‎

Lines changed: 50 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,57 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
22

33
@Component({
44
selector: 'app-query-builder-style-sample',
55
styleUrls: ['./query-builder-style.component.scss'],
66
templateUrl: 'query-builder-style.component.html'
77
})
8-
export class QueryBuilderStyleComponent {
9-
10-
public fields: any[] = [
11-
{ field: 'ID', dataType: 'string' },
12-
{ field: 'CompanyName', dataType: 'string' },
13-
{ field: 'ContactName', dataType: 'string' },
14-
{ field: 'Employees', dataType: 'number' },
15-
{ field: 'ContactTitle', dataType: 'string' },
16-
{ field: 'DateCreated', dataType: 'date' },
17-
{ field: 'TimeCreated', dataType: 'time' },
18-
{ field: 'Address', dataType: 'string' },
19-
{ field: 'City', dataType: 'string' },
20-
{ field: 'Region', dataType: 'string' },
21-
{ field: 'PostalCode', dataType: 'string' },
22-
{ field: 'Phone', dataType: 'string' },
23-
{ field: 'Fax', dataType: 'string' },
24-
{ field: 'Contract', dataType: 'boolean' }
25-
];
8+
export class QueryBuilderStyleComponent implements OnInit {
9+
public entities: any[];
10+
public companiesFields: any[];
11+
public ordersFields: any[];
12+
13+
public ngOnInit(): void {
14+
this.companiesFields = [
15+
{ field: "ID", dataType: "string" },
16+
{ field: "CompanyName", dataType: "string" },
17+
{ field: "ContactName", dataType: "string" },
18+
{ field: "Employees", dataType: "number" },
19+
{ field: "ContactTitle", dataType: "string" },
20+
{ field: "DateCreated", dataType: "date" },
21+
{ field: "TimeCreated", dataType: "time" },
22+
{ field: "Address", dataType: "string" },
23+
{ field: "City", dataType: "string" },
24+
{ field: "Region", dataType: "string" },
25+
{ field: "PostalCode", dataType: "string" },
26+
{ field: "Phone", dataType: "string" },
27+
{ field: "Fax", dataType: "string" },
28+
{ field: "Contract", dataType: "boolean" }
29+
];
30+
31+
this.ordersFields = [
32+
{ field: "OrderId", dataType: "number" },
33+
{ field: "EmployeeId", dataType: "number" },
34+
{ field: "OrderDate", dataType: "date" },
35+
{ field: "RequiredDate", dataType: "date" },
36+
{ field: "ShippedDate", dataType: "date" },
37+
{ field: "ShipVia", dataType: "number" },
38+
{ field: "Freight", dataType: "number" },
39+
{ field: "ShipName", dataType: "string" },
40+
{ field: "ShipCity", dataType: "string" },
41+
{ field: "ShipPostalCode", dataType: "string" },
42+
{ field: "ShipCountry", dataType: "string" },
43+
{ field: "Region", dataType: "string" }
44+
];
45+
46+
this.entities = [
47+
{
48+
name: "Companies",
49+
fields: this.companiesFields
50+
},
51+
{
52+
name: "Orders",
53+
fields: this.ordersFields
54+
}
55+
];
56+
}
2657
}

0 commit comments

Comments
 (0)